feat: add default initial value for form component state

aws-amplify · Feb 10, 2022 · d56a28e · d56a28e
1 parent c254c5a
commit d56a28e
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 11 deletions.
diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -5223,7 +5223,7 @@ export default function InputMutationOnClick(
   props: InputMutationOnClickProps
 ): React.ReactElement {
   const { overrides, ...rest } = props;
-  const [myInputValue, setMyInputValue] = useStateMutationAction(undefined);
+  const [myInputValue, setMyInputValue] = useStateMutationAction(\\"\\");
   const setInputButtonClick = () => {
     setMyInputValue(\\"Razor Crest\\");
   };
@@ -5376,7 +5376,7 @@ export default function TwoWayBindings(
 ): React.ReactElement {
   const { overrides, ...rest } = props;
   const [textFieldInputValue, setTextFieldInputValue] =
-    useStateMutationAction(undefined);
+    useStateMutationAction(\\"\\");
   return (
     /* @ts-ignore: TS2322 */
     <Flex
@@ -5426,7 +5426,7 @@ export default function CheckboxControlledElement(
   props: CheckboxControlledElementProps
 ): React.ReactElement {
   const { overrides, ...rest } = props;
-  const [inputChecked, setInputChecked] = useStateMutationAction(undefined);
+  const [inputChecked, setInputChecked] = useStateMutationAction(false);
   return (
     /* @ts-ignore: TS2322 */
     <Flex
@@ -5524,7 +5524,7 @@ export default function SwitchControlledElement(
   props: SwitchControlledElementProps
 ): React.ReactElement {
   const { overrides, ...rest } = props;
-  const [inputIsChecked, setInputIsChecked] = useStateMutationAction(undefined);
+  const [inputIsChecked, setInputIsChecked] = useStateMutationAction(\\"\\");
   return (
     /* @ts-ignore: TS2322 */
     <Flex {...rest} {...getOverrideProps(overrides, \\"SwitchControlledElement\\")}>
@@ -5815,25 +5815,25 @@ export default function TwoWayBindings(
 ): React.ReactElement {
   const { overrides, ...rest } = props;
   const [checkboxFieldInputChecked, setCheckboxFieldInputChecked] =
-    useStateMutationAction(undefined);
+    useStateMutationAction(false);
   const [passwordFieldInputValue, setPasswordFieldInputValue] =
-    useStateMutationAction(undefined);
+    useStateMutationAction(\\"\\");
   const [phoneNumberFieldInputValue, setPhoneNumberFieldInputValue] =
-    useStateMutationAction(undefined);
+    useStateMutationAction(\\"\\");
   const [radioGroupFieldInputValue, setRadioGroupFieldInputValue] =
     useStateMutationAction(undefined);
   const [searchFieldInputValue, setSearchFieldInputValue] =
-    useStateMutationAction(undefined);
+    useStateMutationAction(\\"\\");
   const [selectFieldInputValue, setSelectFieldInputValue] =
     useStateMutationAction(undefined);
   const [sliderFieldInputValue, setSliderFieldInputValue] =
     useStateMutationAction(undefined);
   const [stepperFieldInputValue, setStepperFieldInputValue] =
     useStateMutationAction(undefined);
   const [switchFieldInputIsChecked, setSwitchFieldInputIsChecked] =
-    useStateMutationAction(undefined);
+    useStateMutationAction(\\"\\");
   const [textFieldInputValue, setTextFieldInputValue] =
-    useStateMutationAction(undefined);
+    useStateMutationAction(\\"\\");
   const setCheckboxFieldValueClick = () => {
     setCheckboxFieldInputChecked(false);
   };

diff --git a/packages/codegen-ui-react/lib/primitive.ts b/packages/codegen-ui-react/lib/primitive.ts
@@ -13,6 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  */
+import { FixedStudioComponentProperty } from '@aws-amplify/codegen-ui';
 import { factory, SyntaxKind, TypeParameterDeclaration, TypeNode } from 'typescript';
 import iconset from './iconset';
 
@@ -128,3 +129,29 @@ export const PrimitivesWithChangeEvent: Set<Primitive> = new Set([
   Primitive.SwitchField,
   Primitive.TextField,
 ]);
+
+export const PrimitiveDefaultPropertyValue: Partial<
+  Record<Primitive, { [property: string]: FixedStudioComponentProperty }>
+> = {
+  [Primitive.CheckboxField]: {
+    checked: { value: false, type: 'boolean' },
+  },
+  [Primitive.PasswordField]: {
+    value: { value: '', type: 'string' },
+  },
+  [Primitive.PhoneNumberField]: {
+    value: { value: '', type: 'string' },
+  },
+  [Primitive.RadioGroupField]: {
+    value: { value: '', type: 'string' },
+  },
+  [Primitive.SearchField]: {
+    value: { value: '', type: 'string' },
+  },
+  [Primitive.SwitchField]: {
+    isChecked: { value: false, type: 'boolean' },
+  },
+  [Primitive.TextField]: {
+    value: { value: '', type: 'string' },
+  },
+};
diff --git a/packages/codegen-ui-react/lib/workflow/mutation.ts b/packages/codegen-ui-react/lib/workflow/mutation.ts
@@ -22,6 +22,7 @@ import {
   StateReference,
   StudioGenericEvent,
   buildComponentNameToTypeMap,
+  StudioComponentProperty,
 } from '@aws-amplify/codegen-ui';
 import {
   isActionEvent,
@@ -32,9 +33,13 @@ import {
   getSetStateName,
 } from '../react-component-render-helper';
 import { ImportCollection, ImportValue } from '../imports';
-import Primitive, { PrimitivesWithChangeEvent, PrimitiveLevelPropConfiguration } from '../primitive';
 import { mapGenericEventToReact } from './events';
 import { getChildPropMappingForComponentName } from './utils';
+import Primitive, {
+  PrimitivesWithChangeEvent,
+  PrimitiveLevelPropConfiguration,
+  PrimitiveDefaultPropertyValue,
+} from '../primitive';
 
 type EventHandlerBuilder = (setStateName: string, stateName: string) => JsxExpression;
 
@@ -273,6 +278,14 @@ export function getStateDefaultValue(component: StudioComponent, stateReference:
   const { componentName, property } = stateReference;
   const referencedComponent = getComponentFromComponentTree(component, componentName);
   const componentProperty = referencedComponent.properties[property];
+
+  // does not work for custom components wrapping form components
+  if (
+    componentProperty === undefined &&
+    PrimitiveDefaultPropertyValue[referencedComponent.componentType as Primitive]
+  ) {
+    return propertyToExpression(getDefaultForComponentAndProperty(referencedComponent, property));
+  }
   return propertyToExpression(componentProperty);
 }
 
@@ -303,6 +316,25 @@ export function getComponentFromComponentTree(
   return res;
 }
 
+export function getDefaultForComponentAndProperty(
+  component: StudioComponent | StudioComponentChild,
+  property: string,
+): StudioComponentProperty {
+  const { componentType } = component;
+  const componentDefault = PrimitiveDefaultPropertyValue[componentType as Primitive];
+  if (componentDefault && property in componentDefault) {
+    // if component has defaultValue use defaultValue as initial state value
+    if (property === 'value' && component.properties.defaultValue) {
+      // TODO: remove defaultValue becuase coponents canot have value and defaultValue
+      return component.properties.defaultValue;
+    }
+    return componentDefault[property];
+  }
+
+  // use empty string a fallback default
+  return { value: '', type: 'string' };
+}
+
 export type MutationReferences = {
   [property: string]: { addControlEvent: boolean }[];
 };