From db310d7865cc7f23a41d4c619ad5d7a2062df3be Mon Sep 17 00:00:00 2001 From: Scott Young Date: Thu, 3 Nov 2022 09:53:42 -0700 Subject: [PATCH] fix: forms checkbox to reflect correct model state (#738) Co-authored-by: Scott Young --- .../studio-ui-codegen-react-forms.test.ts.snap | 8 ++++---- packages/codegen-ui-react/lib/forms/component-helper.ts | 4 ++++ packages/codegen-ui-react/lib/forms/form-state.ts | 1 + packages/codegen-ui-react/lib/workflow/mutation.ts | 1 - .../generate-form-definition/helpers/form-field.test.ts | 3 +-- .../lib/generate-form-definition/helpers/form-field.ts | 2 -- .../codegen-ui/lib/types/form/form-definition-element.ts | 2 +- 7 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap index 2171492a7..01d7d73fc 100644 --- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap +++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap @@ -4978,7 +4978,7 @@ export default function InputGalleryCreateForm(props) { rootbeer: undefined, attend: undefined, maybeSlide: false, - maybeCheck: undefined, + maybeCheck: false, arrayTypeField: [], timestamp: undefined, ippy: undefined, @@ -5250,7 +5250,7 @@ export default function InputGalleryCreateForm(props) { name=\\"maybeCheck\\" value=\\"maybeCheck\\" isDisabled={false} - defaultChecked={false} + checked={maybeCheck} onChange={(e) => { let value = e.target.checked; if (onChange) { @@ -5696,7 +5696,7 @@ export default function InputGalleryUpdateForm(props) { rootbeer: undefined, attend: undefined, maybeSlide: false, - maybeCheck: undefined, + maybeCheck: false, arrayTypeField: [], timestamp: undefined, ippy: undefined, @@ -6009,7 +6009,7 @@ export default function InputGalleryUpdateForm(props) { name=\\"maybeCheck\\" value=\\"maybeCheck\\" isDisabled={false} - defaultChecked={false} + checked={maybeCheck} defaultValue={maybeCheck} onChange={(e) => { let value = e.target.checked; diff --git a/packages/codegen-ui-react/lib/forms/component-helper.ts b/packages/codegen-ui-react/lib/forms/component-helper.ts index dde8c60ea..839ed1ee0 100644 --- a/packages/codegen-ui-react/lib/forms/component-helper.ts +++ b/packages/codegen-ui-react/lib/forms/component-helper.ts @@ -99,6 +99,10 @@ export const renderValueAttribute = ({ factory.createIdentifier('isChecked'), factory.createJsxExpression(undefined, valueIdentifier), ), + CheckboxField: factory.createJsxAttribute( + factory.createIdentifier('checked'), + factory.createJsxExpression(undefined, valueIdentifier), + ), }; if (controlledComponentToAttributesMap[componentType]) { diff --git a/packages/codegen-ui-react/lib/forms/form-state.ts b/packages/codegen-ui-react/lib/forms/form-state.ts index 57fca5070..fe19e9c28 100644 --- a/packages/codegen-ui-react/lib/forms/form-state.ts +++ b/packages/codegen-ui-react/lib/forms/form-state.ts @@ -106,6 +106,7 @@ export const getDefaultValueExpression = ( SwitchField: factory.createFalse(), StepperField: factory.createNumericLiteral(0), SliderField: factory.createNumericLiteral(0), + CheckboxField: factory.createFalse(), }; // it's a nonModel or relationship object diff --git a/packages/codegen-ui-react/lib/workflow/mutation.ts b/packages/codegen-ui-react/lib/workflow/mutation.ts index 6b81a3a8f..b65b12b2f 100644 --- a/packages/codegen-ui-react/lib/workflow/mutation.ts +++ b/packages/codegen-ui-react/lib/workflow/mutation.ts @@ -53,7 +53,6 @@ const genericEventToReactEventImplementationOverrides: PrimitiveLevelPropConfigu const PrimitiveDefaultValuePropMapping: PrimitiveLevelPropConfiguration = new Proxy( { - [Primitive.CheckboxField]: { checked: 'defaultChecked' }, [Primitive.SwitchField]: { isChecked: 'defaultChecked' }, }, { diff --git a/packages/codegen-ui/lib/__tests__/generate-form-definition/helpers/form-field.test.ts b/packages/codegen-ui/lib/__tests__/generate-form-definition/helpers/form-field.test.ts index 6a65fd57f..c590c017a 100644 --- a/packages/codegen-ui/lib/__tests__/generate-form-definition/helpers/form-field.test.ts +++ b/packages/codegen-ui/lib/__tests__/generate-form-definition/helpers/form-field.test.ts @@ -469,13 +469,12 @@ describe('getFormDefinitionInputElement', () => { const config = { inputType: { type: 'CheckboxField', - defaultChecked: true, }, }; expect(getFormDefinitionInputElement(config)).toStrictEqual({ componentType: 'CheckboxField', - props: { label: 'Label', name: 'fieldName', value: 'fieldName', defaultChecked: true }, + props: { label: 'Label', name: 'fieldName', value: 'fieldName' }, }); }); diff --git a/packages/codegen-ui/lib/generate-form-definition/helpers/form-field.ts b/packages/codegen-ui/lib/generate-form-definition/helpers/form-field.ts index 33a84341a..8e0b702cd 100644 --- a/packages/codegen-ui/lib/generate-form-definition/helpers/form-field.ts +++ b/packages/codegen-ui/lib/generate-form-definition/helpers/form-field.ts @@ -282,8 +282,6 @@ export function getFormDefinitionInputElement( value: config.inputType?.value || baseConfig?.inputType?.value || FORM_DEFINITION_DEFAULTS.field.inputType.value, isDisabled: getFirstDefinedValue([config.inputType?.readOnly, baseConfig?.inputType?.readOnly]), - defaultChecked: - getFirstDefinedValue([config.inputType?.defaultChecked, baseConfig?.inputType?.defaultChecked]) || false, }, }; break; diff --git a/packages/codegen-ui/lib/types/form/form-definition-element.ts b/packages/codegen-ui/lib/types/form/form-definition-element.ts index a8b092700..9ce6444cb 100644 --- a/packages/codegen-ui/lib/types/form/form-definition-element.ts +++ b/packages/codegen-ui/lib/types/form/form-definition-element.ts @@ -127,7 +127,7 @@ export type FormDefinitionToggleButtonElement = { export type FormDefinitionCheckboxFieldElement = { componentType: 'CheckboxField'; - props: { label: string; value: string; name: string; isDisabled?: boolean; defaultChecked?: boolean }; + props: { label: string; value: string; name: string; isDisabled?: boolean }; }; export type FormDefinitionRadioGroupFieldElement = {