Skip to content

Commit 9d812b0

Browse files
ncdiehl11ncdiehl11
committed
refactor(protocol-designer): consolidate CheckboxExapandStepFormField props
This PR utilizes the existing `propsForFields` structure to pass all necessary fields to CheckboxExpandStepFormField for the implicated checkbox stepform field. Instead of indivisually passing values for the field props `value`, `updatValue`, `isChecked`, `tooltipText`, and `disabled`, we can simply pass that field's `propsForFields`, and destructure inside the checkbox expand component.
1 parent 49662eb commit 9d812b0

File tree

6 files changed

+34
-120
lines changed

6 files changed

+34
-120
lines changed

‎protocol-designer/src/components/molecules/CheckboxExpandStepFormField/index.tsx

+14-18
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,26 @@ import {
1414
} from '@opentrons/components'
1515

1616
import type { ReactNode } from 'react'
17+
import type { FieldProps } from '../../../pages/Designer/ProtocolSteps/types'
1718

1819
interface CheckboxExpandStepFormFieldProps {
1920
title: string
20-
checkboxUpdateValue: (value: unknown) => void
21-
checkboxValue: unknown
22-
isChecked: boolean
21+
fieldProps: FieldProps
22+
tooltipOverride?: string
2323
children?: ReactNode
24-
tooltipText?: string | null
25-
disabled?: boolean
2624
testId?: string
2725
}
2826
export function CheckboxExpandStepFormField(
2927
props: CheckboxExpandStepFormFieldProps
3028
): JSX.Element {
29+
const { children, title, tooltipOverride, testId, fieldProps } = props
30+
3131
const {
32-
checkboxUpdateValue,
33-
checkboxValue,
34-
children,
35-
isChecked,
36-
title,
37-
tooltipText,
32+
value,
33+
updateValue,
34+
tooltipContent = tooltipOverride,
3835
disabled = false,
39-
testId,
40-
} = props
36+
} = fieldProps
4137

4238
const [targetProps, tooltipProps] = useHoverTooltip()
4339
return (
@@ -48,7 +44,7 @@ export function CheckboxExpandStepFormField(
4844
disabled={disabled}
4945
onClick={() => {
5046
if (!disabled) {
51-
checkboxUpdateValue(!checkboxValue)
47+
updateValue(!value)
5248
}
5349
}}
5450
color={disabled ? COLORS.grey40 : COLORS.black90}
@@ -69,12 +65,12 @@ export function CheckboxExpandStepFormField(
6965
<Btn
7066
data-testid={testId}
7167
onClick={() => {
72-
checkboxUpdateValue(!checkboxValue)
68+
updateValue(!value)
7369
}}
7470
>
7571
<Check
7672
color={COLORS.blue50}
77-
isChecked={isChecked}
73+
isChecked={value === true}
7874
disabled={disabled}
7975
/>
8076
</Btn>
@@ -83,8 +79,8 @@ export function CheckboxExpandStepFormField(
8379
{children}
8480
</Flex>
8581
</ListButton>
86-
{tooltipText != null ? (
87-
<Tooltip tooltipProps={tooltipProps}>{tooltipText}</Tooltip>
82+
{tooltipContent != null ? (
83+
<Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
8884
) : null}
8985
</>
9086
)

‎protocol-designer/src/pages/Designer/ProtocolSteps/BatchEditToolbox/BatchEditMixTools.tsx

+3-13
Original file line numberDiff line numberDiff line change
@@ -127,11 +127,7 @@ export function BatchEditMixTools(props: BatchEditMixToolsProps): JSX.Element {
127127
t('form:step_edit_form.field.delay.label'),
128128
'capitalize'
129129
)}
130-
checkboxValue={propsForFields[`${tab}_delay_checkbox`].value}
131-
isChecked={propsForFields[`${tab}_delay_checkbox`].value === true}
132-
checkboxUpdateValue={
133-
propsForFields[`${tab}_delay_checkbox`].updateValue
134-
}
130+
fieldProps={propsForFields[`${tab}_delay_checkbox`]}
135131
>
136132
{propsForFields[`${tab}_delay_checkbox`].value === true ? (
137133
<InputStepFormField
@@ -150,9 +146,7 @@ export function BatchEditMixTools(props: BatchEditMixToolsProps): JSX.Element {
150146
t('form:step_edit_form.field.blowout.label'),
151147
'capitalize'
152148
)}
153-
checkboxValue={propsForFields.blowout_checkbox.value}
154-
isChecked={propsForFields.blowout_checkbox.value === true}
155-
checkboxUpdateValue={propsForFields.blowout_checkbox.updateValue}
149+
fieldProps={propsForFields.blowout_checkbox}
156150
>
157151
{propsForFields.blowout_checkbox.value === true ? (
158152
<BlowoutLocationField
@@ -169,11 +163,7 @@ export function BatchEditMixTools(props: BatchEditMixToolsProps): JSX.Element {
169163
t('form:step_edit_form.field.touchTip.label'),
170164
'capitalize'
171165
)}
172-
checkboxValue={propsForFields.mix_touchTip_checkbox.value}
173-
isChecked={propsForFields.mix_touchTip_checkbox.value === true}
174-
checkboxUpdateValue={
175-
propsForFields.mix_touchTip_checkbox.updateValue
176-
}
166+
fieldProps={propsForFields.mix_touchTip_checkbox}
177167
>
178168
{propsForFields.mix_touchTip_checkbox.value === true ? (
179169
<PositionField

‎protocol-designer/src/pages/Designer/ProtocolSteps/BatchEditToolbox/BatchEditMoveLiquidTools.tsx

+4-16
Original file line numberDiff line numberDiff line change
@@ -125,21 +125,15 @@ export function BatchEditMoveLiquidTools(
125125
t('form:step_edit_form.field.preWetTip.label'),
126126
'capitalize'
127127
)}
128-
checkboxValue={propsForFields.preWetTip.value}
129-
isChecked={propsForFields.preWetTip.value === true}
130-
checkboxUpdateValue={propsForFields.preWetTip.updateValue}
128+
fieldProps={propsForFields.preWetTip}
131129
/>
132130
) : null}
133131
<CheckboxExpandStepFormField
134132
title={i18n.format(
135133
t('form:step_edit_form.field.mix.label'),
136134
'capitalize'
137135
)}
138-
checkboxValue={propsForFields[`${tab}_mix_checkbox`].value}
139-
isChecked={propsForFields[`${tab}_mix_checkbox`].value === true}
140-
checkboxUpdateValue={
141-
propsForFields[`${tab}_mix_checkbox`].updateValue
142-
}
136+
fieldProps={propsForFields[`${tab}_mix_checkbox`]}
143137
>
144138
{propsForFields[`${tab}_mix_checkbox`].value === true ? (
145139
<Flex
@@ -169,11 +163,7 @@ export function BatchEditMoveLiquidTools(
169163
t('form:step_edit_form.field.delay.label'),
170164
'capitalize'
171165
)}
172-
checkboxValue={propsForFields[`${tab}_delay_checkbox`].value}
173-
isChecked={propsForFields[`${tab}_delay_checkbox`].value === true}
174-
checkboxUpdateValue={
175-
propsForFields[`${tab}_delay_checkbox`].updateValue
176-
}
166+
fieldProps={propsForFields[`${tab}_delay_checkbox`]}
177167
>
178168
{propsForFields[`${tab}_delay_checkbox`].value === true ? (
179169
<Flex
@@ -205,9 +195,7 @@ export function BatchEditMoveLiquidTools(
205195
t('form:step_edit_form.field.blowout.label'),
206196
'capitalize'
207197
)}
208-
checkboxValue={propsForFields.blowout_checkbox.value}
209-
isChecked={propsForFields.blowout_checkbox.value === true}
210-
checkboxUpdateValue={propsForFields.blowout_checkbox.updateValue}
198+
fieldProps={propsForFields.blowout_checkbox}
211199
>
212200
{propsForFields.blowout_checkbox.value === true ? (
213201
<Flex

‎protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/DisposalField.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -70,13 +70,11 @@ export function DisposalField(props: DisposalFieldProps): JSX.Element {
7070
})
7171
: ''
7272

73-
const { value, updateValue } = propsForFields.disposalVolume_checkbox
73+
const { value } = propsForFields.disposalVolume_checkbox
7474
return (
7575
<CheckboxExpandStepFormField
7676
title={t('protocol_steps:multi_dispense_options')}
77-
checkboxValue={value}
78-
isChecked={value === true}
79-
checkboxUpdateValue={updateValue}
77+
fieldProps={propsForFields.disposalVolume_checkbox}
8078
>
8179
{value ? (
8280
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing6}>

‎protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MixTools/index.tsx

+3-22
Original file line numberDiff line numberDiff line change
@@ -256,14 +256,7 @@ export function MixTools(props: StepFormProps): JSX.Element {
256256
'capitalize'
257257
)}
258258
testId="delay_checkbox"
259-
checkboxValue={propsForFields[`${tab}_delay_checkbox`].value}
260-
isChecked={propsForFields[`${tab}_delay_checkbox`].value === true}
261-
checkboxUpdateValue={
262-
propsForFields[`${tab}_delay_checkbox`].updateValue
263-
}
264-
tooltipText={
265-
propsForFields[`${tab}_delay_checkbox`].tooltipContent ?? null
266-
}
259+
fieldProps={propsForFields[`${tab}_delay_checkbox`]}
267260
>
268261
{formData[`${tab}_delay_checkbox`] === true ? (
269262
<InputStepFormField
@@ -287,12 +280,7 @@ export function MixTools(props: StepFormProps): JSX.Element {
287280
'capitalize'
288281
)}
289282
testId="blowout_checkbox"
290-
checkboxValue={propsForFields.blowout_checkbox.value}
291-
isChecked={propsForFields.blowout_checkbox.value === true}
292-
checkboxUpdateValue={propsForFields.blowout_checkbox.updateValue}
293-
tooltipText={
294-
propsForFields.blowout_checkbox.tooltipContent ?? null
295-
}
283+
fieldProps={propsForFields.blowout_checkbox}
296284
>
297285
{formData.blowout_checkbox === true ? (
298286
<Flex
@@ -333,14 +321,7 @@ export function MixTools(props: StepFormProps): JSX.Element {
333321
'capitalize'
334322
)}
335323
testId="touchTip_checkbox"
336-
checkboxValue={propsForFields.mix_touchTip_checkbox.value}
337-
isChecked={propsForFields.mix_touchTip_checkbox.value === true}
338-
checkboxUpdateValue={
339-
propsForFields.mix_touchTip_checkbox.updateValue
340-
}
341-
tooltipText={
342-
propsForFields.mix_touchTip_checkbox.tooltipContent ?? null
343-
}
324+
fieldProps={propsForFields.mix_touchTip_checkbox}
344325
>
345326
{formData.mix_touchTip_checkbox === true ? (
346327
<PositionField

‎protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/SecondStepsMoveLiquidTools.tsx

+8-47
Original file line numberDiff line numberDiff line change
@@ -277,20 +277,9 @@ export const SecondStepsMoveLiquidTools = ({
277277
t('form:step_edit_form.field.mix.label'),
278278
'capitalize'
279279
)}
280-
checkboxValue={propsForFields[`${tab}_mix_checkbox`].value}
281-
isChecked={propsForFields[`${tab}_mix_checkbox`].value === true}
282-
checkboxUpdateValue={
283-
propsForFields[`${tab}_mix_checkbox`].updateValue
284-
}
285-
tooltipText={
286-
tab === 'dispense'
287-
? dispenseMixDisabledTooltipText
288-
: propsForFields.aspirate_mix_checkbox.tooltipContent
289-
}
290-
disabled={
291-
tab === 'dispense'
292-
? isDestinationTrash || formData.path === 'multiDispense'
293-
: formData.path === 'multiAspirate'
280+
fieldProps={propsForFields[`${tab}_mix_checkbox`]}
281+
tooltipOverride={
282+
tab === 'dispense' ? dispenseMixDisabledTooltipText : null
294283
}
295284
>
296285
{formData[`${tab}_mix_checkbox`] === true ? (
@@ -330,10 +319,7 @@ export const SecondStepsMoveLiquidTools = ({
330319
t('form:step_edit_form.field.pushOut.title'),
331320
'capitalize'
332321
)}
333-
checkboxValue={propsForFields.pushOut_checkbox.value}
334-
isChecked={propsForFields.pushOut_checkbox.value === true}
335-
checkboxUpdateValue={propsForFields.pushOut_checkbox.updateValue}
336-
tooltipText={propsForFields.pushOut_checkbox.tooltipContent}
322+
fieldProps={propsForFields.pushOut_checkbox}
337323
>
338324
{formData.pushOut_checkbox === true ? (
339325
<InputStepFormField
@@ -361,12 +347,7 @@ export const SecondStepsMoveLiquidTools = ({
361347
t('form:step_edit_form.field.delay.label'),
362348
'capitalize'
363349
)}
364-
checkboxValue={propsForFields[`${tab}_delay_checkbox`].value}
365-
isChecked={propsForFields[`${tab}_delay_checkbox`].value === true}
366-
checkboxUpdateValue={
367-
propsForFields[`${tab}_delay_checkbox`].updateValue
368-
}
369-
tooltipText={propsForFields[`${tab}_delay_checkbox`].tooltipContent}
350+
fieldProps={propsForFields[`${tab}_delay_checkbox`]}
370351
>
371352
{formData[`${tab}_delay_checkbox`] === true ? (
372353
<Flex
@@ -394,14 +375,7 @@ export const SecondStepsMoveLiquidTools = ({
394375
t('form:step_edit_form.field.blowout.label'),
395376
'capitalize'
396377
)}
397-
checkboxValue={propsForFields.blowout_checkbox.value}
398-
isChecked={propsForFields.blowout_checkbox.value === true}
399-
checkboxUpdateValue={propsForFields.blowout_checkbox.updateValue}
400-
tooltipText={propsForFields.blowout_checkbox.tooltipContent}
401-
disabled={
402-
formData.path === 'multiDispense' &&
403-
formData.disposalVolume_checkbox
404-
}
378+
fieldProps={propsForFields.blowout_checkbox}
405379
>
406380
{formData.blowout_checkbox === true ? (
407381
<Flex
@@ -441,15 +415,7 @@ export const SecondStepsMoveLiquidTools = ({
441415
t('form:step_edit_form.field.touchTip.label'),
442416
'capitalize'
443417
)}
444-
checkboxValue={propsForFields[`${tab}_touchTip_checkbox`].value}
445-
isChecked={propsForFields[`${tab}_touchTip_checkbox`].value === true}
446-
checkboxUpdateValue={
447-
propsForFields[`${tab}_touchTip_checkbox`].updateValue
448-
}
449-
tooltipText={
450-
propsForFields[`${tab}_touchTip_checkbox`].tooltipContent
451-
}
452-
disabled={propsForFields[`${tab}_touchTip_checkbox`].disabled}
418+
fieldProps={propsForFields[`${tab}_touchTip_checkbox`]}
453419
>
454420
{formData[`${tab}_touchTip_checkbox`] === true ? (
455421
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing10}>
@@ -505,12 +471,7 @@ export const SecondStepsMoveLiquidTools = ({
505471
t('form:step_edit_form.field.airGap.label'),
506472
'capitalize'
507473
)}
508-
checkboxValue={propsForFields[`${tab}_airGap_checkbox`].value}
509-
isChecked={propsForFields[`${tab}_airGap_checkbox`].value === true}
510-
checkboxUpdateValue={
511-
propsForFields[`${tab}_airGap_checkbox`].updateValue
512-
}
513-
tooltipText={propsForFields[`${tab}_airGap_checkbox`].tooltipContent}
474+
fieldProps={propsForFields[`${tab}_airGap_checkbox`]}
514475
>
515476
{formData[`${tab}_airGap_checkbox`] === true ? (
516477
<InputStepFormField

0 commit comments

Comments
 (0)