rna(chore): update DefaultContent, migrate SignUp (#3023)

aws-amplify · Nov 20, 2022 · 33b2651 · 33b2651
1 parent 5d6bc57
commit 33b2651
Show file tree

Hide file tree

Showing 10 changed files with 569 additions and 916 deletions.
diff --git a/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx b/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx
@@ -45,8 +45,8 @@ const SignIn: DefaultSignInComponent = ({
     };
     return {
       primary: { children: signInText, onPress: handleFormSubmit },
-      secondary: hideSignUp
-        ? forgotPassword
+      links: hideSignUp
+        ? [forgotPassword]
         : [forgotPassword, { children: signUpText, onPress: toSignUp }],
     };
   }, [

diff --git a/...act-native/src/Authenticator/Defaults/SignIn/__tests__/__snapshots__/SignIn.spec.tsx.snap b/...act-native/src/Authenticator/Defaults/SignIn/__tests__/__snapshots__/SignIn.spec.tsx.snap
@@ -5,7 +5,7 @@ Array [
   <View
     style={
       Object {
-        "marginVertical": 12,
+        "paddingBottom": 12,
       }
     }
   >
@@ -22,7 +22,9 @@ Array [
           Object {
             "alignItems": "flex-start",
           },
-          Object {},
+          Object {
+            "paddingHorizontal": 12,
+          },
         ]
       }
     >
@@ -103,7 +105,9 @@ Array [
           },
           Array [
             Object {},
-            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
           ],
         ]
       }
@@ -255,7 +259,7 @@ Array [
         null,
         null,
         Object {
-          "marginVertical": 16,
+          "margin": 16,
         },
       ]
     }
@@ -394,7 +398,7 @@ Array [
   <View
     style={
       Object {
-        "marginVertical": 12,
+        "paddingBottom": 12,
       }
     }
   >
@@ -411,7 +415,9 @@ Array [
           Object {
             "alignItems": "flex-start",
           },
-          Object {},
+          Object {
+            "paddingHorizontal": 12,
+          },
         ]
       }
     >
@@ -492,7 +498,9 @@ Array [
           },
           Array [
             Object {},
-            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
           ],
         ]
       }
@@ -644,7 +652,7 @@ Array [
         null,
         null,
         Object {
-          "marginVertical": 16,
+          "margin": 16,
         },
       ]
     }
@@ -666,54 +674,64 @@ Array [
     </Text>
   </View>,
   <View
-    accessibilityRole="button"
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "transparent",
-          "borderRadius": 4,
-          "justifyContent": "center",
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        Object {},
-        null,
-        null,
-        Object {
-          "marginVertical": 8,
-          "minWidth": "50%",
-        },
-      ]
+      Object {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "justifyContent": "center",
+      }
     }
   >
-    <Text
+    <View
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         Array [
           Object {
-            "color": "hsl(190, 95%, 30%)",
-            "fontSize": 16,
-            "fontWeight": "700",
-            "textAlign": "center",
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 4,
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 12,
+          },
+          Object {},
+          null,
+          null,
+          Object {
+            "marginVertical": 8,
+            "minWidth": "50%",
           },
-          undefined,
         ]
       }
     >
-      Forgot Password?
-    </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "hsl(190, 95%, 30%)",
+              "fontSize": 16,
+              "fontWeight": "700",
+              "textAlign": "center",
+            },
+            undefined,
+          ]
+        }
+      >
+        Forgot Password?
+      </Text>
+    </View>
   </View>,
 ]
 `;
@@ -723,7 +741,7 @@ Array [
   <View
     style={
       Object {
-        "marginVertical": 12,
+        "paddingBottom": 12,
       }
     }
   >
@@ -740,7 +758,9 @@ Array [
           Object {
             "alignItems": "flex-start",
           },
-          Object {},
+          Object {
+            "paddingHorizontal": 12,
+          },
         ]
       }
     >
@@ -821,7 +841,9 @@ Array [
           },
           Array [
             Object {},
-            Object {},
+            Object {
+              "paddingHorizontal": 12,
+            },
           ],
         ]
       }
@@ -1026,7 +1048,7 @@ Array [
         null,
         null,
         Object {
-          "marginVertical": 16,
+          "margin": 16,
         },
       ]
     }

diff --git a/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx b/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { authenticatorTextUtil } from '@aws-amplify/ui';
 
-import { Button, ErrorMessage, Tab, Tabs } from '../../../primitives';
-
 import {
+  DefaultContent,
   DefaultFooter,
   DefaultTextFormFields,
   DefaultHeader,
@@ -12,30 +11,20 @@ import { useFieldValues } from '../../hooks';
 
 import { DefaultSignUpComponent } from '../types';
 
-import { styles } from './style';
-
 const COMPONENT_NAME = 'SignUp';
 
-const {
-  getCreateAccountText,
-  getCreatingAccountText,
-  getSignInTabText,
-  getSignUpTabText,
-} = authenticatorTextUtil;
+const { getCreateAccountText, getCreatingAccountText, getSignInTabText } =
+  authenticatorTextUtil;
 
 const SignUp: DefaultSignUpComponent = ({
-  error,
   fields,
-  Footer,
-  FormFields,
-  Header,
   handleBlur,
   handleChange,
   handleSubmit,
   hideSignIn,
   isPending,
   toSignIn,
-  validationErrors,
+  ...rest
 }) => {
   const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -45,26 +34,34 @@ const SignUp: DefaultSignUpComponent = ({
     handleSubmit,
   });
 
+  const primaryButtonText = isPending
+    ? getCreatingAccountText()
+    : getCreateAccountText();
+  const secondaryButtonText = getSignInTabText();
+
+  const buttons = useMemo(
+    () => ({
+      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      links: hideSignIn
+        ? undefined
+        : [{ children: secondaryButtonText, onPress: toSignIn }],
+    }),
+    [
+      handleFormSubmit,
+      hideSignIn,
+      primaryButtonText,
+      secondaryButtonText,
+      toSignIn,
+    ]
+  );
+
   return (
-    <>
-      {hideSignIn ? null : (
-        <Tabs selectedIndex={1} style={styles.tabs}>
-          <Tab onPress={toSignIn}>{getSignInTabText()}</Tab>
-          <Tab>{getSignUpTabText()}</Tab>
-        </Tabs>
-      )}
-      <Header />
-      <FormFields
-        isPending={isPending}
-        fields={fieldsWithHandlers}
-        validationErrors={validationErrors}
-      />
-      {error ? <ErrorMessage>{error}</ErrorMessage> : null}
-      <Button onPress={handleFormSubmit} style={styles.buttonPrimary}>
-        {isPending ? getCreatingAccountText() : getCreateAccountText()}
-      </Button>
-      <Footer />
-    </>
+    <DefaultContent
+      {...rest}
+      buttons={buttons}
+      fields={fieldsWithHandlers}
+      isPending={isPending}
+    />
   );
 };