feat: use default initial value for data dependent states

aws-amplify · Feb 25, 2022 · 022f9c5 · 022f9c5
1 parent 295aff7
commit 022f9c5
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 13 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
@@ -5745,7 +5745,14 @@ import {
 } from \\"@aws-amplify/ui-react/internal\\";
 import { User } from \\"../models\\";
 import { useEffect } from \\"react\\";
-import { Button, Flex, FlexProps, Heading, Text } from \\"@aws-amplify/ui-react\\";
+import {
+  Button,
+  Flex,
+  FlexProps,
+  Heading,
+  Text,
+  TextField,
+} from \\"@aws-amplify/ui-react\\";
 
 export type InitialValueBindingsProps = React.PropsWithChildren<
   Partial<FlexProps> & {
@@ -5776,21 +5783,19 @@ export default function InitialValueBindings(
   const [fixedValueContentsChildren, setFixedValueContentsChildren] =
     useStateMutationAction(\\"Fixed Value\\");
   const [boundValueContentsChildren, setBoundValueContentsChildren] =
-    useStateMutationAction(user?.lastName);
+    useStateMutationAction(undefined);
   const [concatValueContentsChildren, setConcatValueContentsChildren] =
     useStateMutationAction(\`\${\\"Concat\\"}\${\\" \\"}\${\\"Value\\"}\`);
   const [
     conditionalValueContentsChildren,
     setConditionalValueContentsChildren,
-  ] = useStateMutationAction(
-    user?.lastName && user?.lastName == \\"Bound Value\\"
-      ? \\"Conditional Value\\"
-      : \\"Unconditional Value\\"
-  );
+  ] = useStateMutationAction(undefined);
   const [authValueContentsChildren, setAuthValueContentsChildren] =
-    useStateMutationAction(authAttributes[\\"email\\"]);
+    useStateMutationAction(undefined);
   const [stateValueContentsChildren, setStateValueContentsChildren] =
     useStateMutationAction(stateSourceChildren);
+  const [textFieldValueContentsValue, setTextFieldValueContentsValue] =
+    useStateMutationAction(\\"\\");
   const fixedValueMutationClick = () => {
     setFixedValueContentsChildren(\\"Mutated Value\\");
   };
@@ -5809,6 +5814,9 @@ export default function InitialValueBindings(
   const stateValueMutationClick = () => {
     setStateValueContentsChildren(\\"Mutated Value\\");
   };
+  const textFieldValueMutationClick = () => {
+    setTextFieldValueContentsValue(\\"Mutated Value\\");
+  };
   useEffect(() => {
     setBoundValueContentsChildren(user?.lastName);
   }, [user]);
@@ -5822,6 +5830,9 @@ export default function InitialValueBindings(
   useEffect(() => {
     setAuthValueContentsChildren(authAttributes[\\"email\\"]);
   }, [authAttributes]);
+  useEffect(() => {
+    setTextFieldValueContentsValue(authAttributes[\\"email\\"]);
+  }, [authAttributes]);
   return (
     /* @ts-ignore: TS2322 */
     <Flex
@@ -5967,6 +5978,30 @@ export default function InitialValueBindings(
           {...getOverrideProps(overrides, \\"StateSource\\")}
         ></Text>
       </Flex>
+      <Flex
+        direction=\\"row\\"
+        {...getOverrideProps(overrides, \\"TextFieldValueInitialBindingSection\\")}
+      >
+        <Heading
+          level={5}
+          children=\\"Text Field Initial Value\\"
+          {...getOverrideProps(overrides, \\"TextFieldValueHeading\\")}
+        ></Heading>
+        <TextField
+          value={textFieldValueContentsValue}
+          onChange={(event: SyntheticEvent) => {
+            setTextFieldValueContentsValue(event.target.value);
+          }}
+          {...getOverrideProps(overrides, \\"TextFieldValueContents\\")}
+        ></TextField>
+        <Button
+          children=\\"Mutate\\"
+          onClick={() => {
+            textFieldValueMutationClick();
+          }}
+          {...getOverrideProps(overrides, \\"TextFieldValueMutation\\")}
+        ></Button>
+      </Flex>
     </Flex>
   );
 }

diff --git a/packages/codegen-ui-react/lib/workflow/mutation.ts b/packages/codegen-ui-react/lib/workflow/mutation.ts
@@ -88,7 +88,7 @@ export function buildUseEffectStatements(
             factory.createBlock([
               factory.createExpressionStatement(
                 factory.createCallExpression(factory.createIdentifier(getSetStateName(reference)), undefined, [
-                  getStateInitialValue(component, componentMetadata, reference),
+                  getStateInitialValue(component, componentMetadata, { reference, dataDependencies: [] }),
                 ]),
               ),
             ]),
@@ -283,7 +283,7 @@ export function buildStateStatements(
             undefined,
             undefined,
             factory.createCallExpression(factory.createIdentifier('useStateMutationAction'), undefined, [
-              getStateInitialValue(component, componentMetadata, stateReference.reference),
+              getStateInitialValue(component, componentMetadata, stateReference),
             ]),
           ),
         ],
@@ -296,13 +296,16 @@ export function buildStateStatements(
 export function getStateInitialValue(
   component: StudioComponent,
   componentMetadata: ComponentMetadata,
-  stateReference: StateStudioComponentProperty,
+  stateReference: StateReferenceMetadata,
 ) {
-  const { componentName, property } = stateReference;
+  const {
+    reference: { componentName, property },
+    dataDependencies,
+  } = stateReference;
   const referencedComponent = getComponentFromComponentTree(component, componentName);
   const componentProperty = referencedComponent.properties[property];
 
-  if (componentProperty === undefined) {
+  if (componentProperty === undefined || dataDependencies.length > 0) {
     const defaultPropMapping = PrimitiveDefaultValuePropMapping[referencedComponent.componentType as Primitive];
     if (property in defaultPropMapping && referencedComponent.properties[defaultPropMapping[property]]) {
       const defaultProp = referencedComponent.properties[defaultPropMapping[property]];

diff --git a/packages/codegen-ui/example-schemas/workflow/initialValueBindings.json b/packages/codegen-ui/example-schemas/workflow/initialValueBindings.json
@@ -396,6 +396,61 @@
           }
         }
       ]
+    },
+    {
+      "componentType": "Flex",
+      "name": "TextFieldValueInitialBindingSection",
+      "properties": {
+        "direction": {
+          "value": "row"
+        }
+      },
+      "children": [
+        {
+          "componentType": "Heading",
+          "name": "TextFieldValueHeading",
+          "properties": {
+            "level": {
+              "value": 5
+            },
+            "label": {
+              "value": "Text Field Initial Value"
+            }
+          }
+        },
+        {
+          "componentType": "TextField",
+          "name": "TextFieldValueContents",
+          "properties": {
+            "value": {
+              "userAttribute": "email"
+            }
+          }
+        },
+        {
+          "componentType": "Button",
+          "name": "TextFieldValueMutation",
+          "events": {
+            "click": {
+              "action": "Amplify.Mutation",
+              "parameters": {
+                "state": {
+                  "componentName": "TextFieldValueContents",
+                  "property": "value",
+                  "set": {
+                    "value": "Mutated Value"
+                  }
+                }
+              }
+            }
+          },
+          "properties": {
+            "children": {
+              "value": "Mutate"
+            }
+          }
+        }
+      ]
     }
   ],
   "schemaVersion": "1.0"

diff --git a/packages/test-generator/lib/components/workflow/initialValueBindings.json b/packages/test-generator/lib/components/workflow/initialValueBindings.json
@@ -396,6 +396,61 @@
           }
         }
       ]
+    },
+    {
+      "componentType": "Flex",
+      "name": "TextFieldValueInitialBindingSection",
+      "properties": {
+        "direction": {
+          "value": "row"
+        }
+      },
+      "children": [
+        {
+          "componentType": "Heading",
+          "name": "TextFieldValueHeading",
+          "properties": {
+            "level": {
+              "value": 5
+            },
+            "label": {
+              "value": "Text Field Initial Value"
+            }
+          }
+        },
+        {
+          "componentType": "TextField",
+          "name": "TextFieldValueContents",
+          "properties": {
+            "value": {
+              "userAttribute": "email"
+            }
+          }
+        },
+        {
+          "componentType": "Button",
+          "name": "TextFieldValueMutation",
+          "events": {
+            "click": {
+              "action": "Amplify.Mutation",
+              "parameters": {
+                "state": {
+                  "componentName": "TextFieldValueContents",
+                  "property": "value",
+                  "set": {
+                    "value": "Mutated Value"
+                  }
+                }
+              }
+            }
+          },
+          "properties": {
+            "children": {
+              "value": "Mutate"
+            }
+          }
+        }
+      ]
     }
   ],
   "schemaVersion": "1.0"