-
Notifications
You must be signed in to change notification settings - Fork 179
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(protocol-designer): fix TextArea key issue and replace style…
…d textareas (#17502) * refactor(protocol-designer): fix TextArea key issue and replace styled textareas
- Loading branch information
Showing
13 changed files
with
263 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
protocol-designer/src/organisms/DefineLiquidsModal/LiquidClassDropdown.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { useTranslation } from 'react-i18next' | ||
| import { Controller } from 'react-hook-form' | ||
|
|
||
| import { | ||
| COLORS, | ||
| DIRECTION_COLUMN, | ||
| DropdownMenu, | ||
| Flex, | ||
| } from '@opentrons/components' | ||
|
|
||
| import type { Control, UseFormSetValue } from 'react-hook-form' | ||
| import type { Ingredient } from '@opentrons/step-generation' | ||
|
|
||
| interface LiquidClassDropdownProps { | ||
| control: Control<Ingredient, any> | ||
| setValue: UseFormSetValue<Ingredient> | ||
| liquidClassOptions: Array<{ name: string; value: string }> | ||
| liquidClass?: string | ||
| } | ||
|
|
||
| export function LiquidClassDropdown({ | ||
| control, | ||
| liquidClassOptions, | ||
| liquidClass, | ||
| setValue, | ||
| }: LiquidClassDropdownProps): JSX.Element { | ||
| const { t } = useTranslation('liquids') | ||
|
|
||
| return ( | ||
| <Flex flexDirection={DIRECTION_COLUMN} color={COLORS.grey60}> | ||
| <Controller | ||
| control={control} | ||
| name="liquidClass" | ||
| render={({ field }) => ( | ||
| <DropdownMenu | ||
| title={t('liquid_class.title')} | ||
| tooltipText={t('liquid_class.tooltip')} | ||
| dropdownType="neutral" | ||
| width="100%" | ||
| filterOptions={liquidClassOptions} | ||
| currentOption={ | ||
| liquidClassOptions.find(({ value }) => value === liquidClass) ?? | ||
| liquidClassOptions[0] | ||
| } | ||
| onClick={value => { | ||
| field.onChange(value) | ||
| setValue('liquidClass', value) | ||
| }} | ||
| /> | ||
| )} | ||
| /> | ||
| </Flex> | ||
| ) | ||
| } |
51 changes: 51 additions & 0 deletions
51
protocol-designer/src/organisms/DefineLiquidsModal/LiquidColorPicker.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { SketchPicker } from 'react-color' | ||
| import { Controller } from 'react-hook-form' | ||
|
|
||
| import { Flex, POSITION_ABSOLUTE } from '@opentrons/components' | ||
| import { DEFAULT_LIQUID_COLORS } from '@opentrons/shared-data' | ||
| import { rgbaToHex } from './util' | ||
|
|
||
| import type { RefObject } from 'react' | ||
| import type { Control, UseFormSetValue } from 'react-hook-form' | ||
| import type { ColorResult } from 'react-color' | ||
| import type { Ingredient } from '@opentrons/step-generation' | ||
|
|
||
| interface LiquidColorPickerProps { | ||
| chooseColorWrapperRef: RefObject<HTMLDivElement> | ||
| control: Control<Ingredient, any> | ||
| color: string | ||
| setValue: UseFormSetValue<Ingredient> | ||
| } | ||
|
|
||
| export function LiquidColorPicker({ | ||
| chooseColorWrapperRef, | ||
| control, | ||
| color, | ||
| setValue, | ||
| }: LiquidColorPickerProps): JSX.Element { | ||
| return ( | ||
| <Flex | ||
| position={POSITION_ABSOLUTE} | ||
| left="4.375rem" | ||
| top="4.6875rem" | ||
| ref={chooseColorWrapperRef} | ||
| zIndex={2} | ||
| > | ||
| <Controller | ||
| name="displayColor" | ||
| control={control} | ||
| render={({ field }) => ( | ||
| <SketchPicker | ||
| presetColors={DEFAULT_LIQUID_COLORS} | ||
| color={color} | ||
| onChange={(color: ColorResult) => { | ||
| const hex = rgbaToHex(color.rgb) | ||
| setValue('displayColor', hex) | ||
| field.onChange(hex) | ||
| }} | ||
| /> | ||
| )} | ||
| /> | ||
| </Flex> | ||
| ) | ||
| } |
35 changes: 35 additions & 0 deletions
35
protocol-designer/src/organisms/DefineLiquidsModal/__tests__/swatchColors.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { describe, it, expect, vi } from 'vitest' | ||
| import { AIR } from '@opentrons/step-generation' | ||
| import { DEFAULT_LIQUID_COLORS } from '@opentrons/shared-data' | ||
| import { swatchColors } from '../swatchColors' | ||
|
|
||
| vi.spyOn(console, 'warn').mockImplementation(() => {}) | ||
|
|
||
| describe('swatchColors', () => { | ||
| it('returns the correct color for an integer ingredient group ID', () => { | ||
| const color = swatchColors('2') // Assuming index 2 exists | ||
| expect(color).toBe(DEFAULT_LIQUID_COLORS[2 % DEFAULT_LIQUID_COLORS.length]) | ||
| }) | ||
|
|
||
| it('returns "transparent" for AIR', () => { | ||
| expect(swatchColors(AIR)).toBe('transparent') | ||
| }) | ||
|
|
||
| it('logs a warning and returns "transparent" for a non-integer string', () => { | ||
| const invalidInput = 'invalidString' | ||
| const result = swatchColors(invalidInput) | ||
|
|
||
| expect(console.warn).toHaveBeenCalledWith( | ||
| `swatchColors expected an integer or ${AIR}, got ${invalidInput}` | ||
| ) | ||
| expect(result).toBe('transparent') | ||
| }) | ||
|
|
||
| it('correctly wraps around DEFAULT_LIQUID_COLORS using modulo', () => { | ||
| const indexBeyondRange = DEFAULT_LIQUID_COLORS.length + 5 | ||
| const expectedColor = | ||
| DEFAULT_LIQUID_COLORS[indexBeyondRange % DEFAULT_LIQUID_COLORS.length] | ||
|
|
||
| expect(swatchColors(String(indexBeyondRange))).toBe(expectedColor) | ||
| }) | ||
| }) |
14 changes: 14 additions & 0 deletions
14
protocol-designer/src/organisms/DefineLiquidsModal/__tests__/util.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { describe, it, expect } from 'vitest' | ||
| import { rgbaToHex } from '../util' | ||
|
|
||
| describe('rgbaToHex', () => { | ||
| it('should convert rgba values to hex format', () => { | ||
| expect(rgbaToHex({ r: 255, g: 99, b: 71, a: 1 })).toBe('#ff6347ff') // Tomata Red | ||
| expect(rgbaToHex({ r: 0, g: 0, b: 0, a: 1 })).toBe('#000000ff') // Black | ||
| expect(rgbaToHex({ r: 255, g: 255, b: 255, a: 0.5 })).toBe('#ffffff80') // Semi-transparent White | ||
| }) | ||
|
|
||
| it('should handle the absence of alpha value', () => { | ||
| expect(rgbaToHex({ r: 255, g: 165, b: 0 })).toBe('#ffa500ff') // Orange | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
protocol-designer/src/organisms/DefineLiquidsModal/util.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import type { RGBColor } from 'react-color' | ||
|
|
||
| /** | ||
| * Converts an RGBA color object to a hexadecimal string representation. | ||
| * | ||
| * @param {RGBColor} rgba - The RGBA color object. | ||
| * @returns {string} - The hexadecimal string representation of the color, including the alpha component. | ||
| * | ||
| * @example | ||
| * // Returns "#ffa500ff" (alpha defaults to 1) | ||
| * rgbaToHex({ r: 255, g: 165, b: 0 }); | ||
| */ | ||
| export const rgbaToHex = (rgba: RGBColor): string => { | ||
| const { r, g, b, a } = rgba | ||
| const toHex = (n: number): string => n.toString(16).padStart(2, '0') | ||
| const alpha = a != null ? Math.round(a * 255) : 255 | ||
| return `#${toHex(r)}${toHex(g)}${toHex(b)}${toHex(alpha)}` | ||
| } |
Oops, something went wrong.