Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(ui-react-native): Migrate RNA subcomponents to use DefaultContent #3031

Merged
merged 3 commits into from
Nov 21, 2022
Merged

chore(ui-react-native): Migrate RNA subcomponents to use DefaultContent #3031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7bf1768
chore(ui-react-native): Migrate RNA subcomponents to use DefaultContent
ioanabrooks Nov 20, 2022
7d28e21
Refine styles
ioanabrooks Nov 20, 2022
76bc02b
Address comments
ioanabrooks Nov 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 22 additions & 23 deletions ...ges/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React from 'react';
import React, { useMemo } from 'react';
import { authenticatorTextUtil } from '@aws-amplify/ui';

import { Button, ErrorMessage } from '../../../primitives';
import {
DefaultContent,
DefaultFooter,
DefaultTextFormFields,
DefaultHeader,
} from '../../common';
import { useFieldValues } from '../../hooks';

import { DefaultConfirmResetPasswordComponent } from '../types';
import { styles } from './styles';

const COMPONENT_NAME = 'ConfirmResetPassword';

Expand All @@ -22,16 +21,13 @@ const {
} = authenticatorTextUtil;

const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
error,
fields,
Footer,
FormFields,
handleBlur,
handleChange,
handleSubmit,
Header,
isPending,
resendCode,
...rest
}) => {
const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
componentName: COMPONENT_NAME,
Expand All @@ -41,23 +37,26 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({
handleSubmit,
});

const headerText = getResetYourPasswordText();
const primaryButtonText = isPending ? getSubmittingText() : getSubmitText();
const secondaryButtonText = getResendCodeText();

const buttons = useMemo(
() => ({
primary: { children: primaryButtonText, onPress: handleFormSubmit },
secondary: { children: secondaryButtonText, onPress: resendCode },
Copy link
Contributor

@joebuono joebuono Nov 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the Resend Code Button be type='link'? If not, can we make these buttons have the same width? (Same goes for ConfirmSignUp screen)

Screen Shot 2022-11-21 at 11 39 41 AM

Copy link
Contributor Author

@ioanabrooks ioanabrooks Nov 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just addressed feedback from @calebpollman and changed from link to secondary. do we need to all sync? :)

}),
[handleFormSubmit, primaryButtonText, resendCode, secondaryButtonText]
);

return (
<>
<Header>{getResetYourPasswordText()}</Header>
<FormFields fields={fieldsWithHandlers} isPending={isPending} />
{error ? <ErrorMessage>{error}</ErrorMessage> : null}
<Button
variant="primary"
onPress={handleFormSubmit}
style={styles.buttonPrimary}
>
{isPending ? getSubmittingText() : getSubmitText()}
</Button>
<Button onPress={resendCode} style={styles.buttonSecondary}>
{getResendCodeText()}
</Button>
<Footer />
</>
<DefaultContent
{...rest}
buttons={buttons}
headerText={headerText}
fields={fieldsWithHandlers}
isPending={isPending}
/>
);
};

Expand Down
88 changes: 58 additions & 30 deletions .../Defaults/ConfirmResetPassword/__tests__/__snapshots__/ConfirmResetPassword.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,22 @@ Array [
"fontWeight": "300",
"lineHeight": 36,
},
undefined,
Object {
"marginVertical": 12,
"paddingHorizontal": 12,
},
]
}
>
Reset Password
</Text>,
<View>
<View
style={
Object {
"paddingBottom": 12,
}
}
>
<View
accessibilityLabel="Code"
accessibilityState={
Expand All @@ -34,7 +43,9 @@ Array [
Object {
"alignItems": "flex-start",
},
undefined,
Object {
"paddingHorizontal": 12,
},
]
}
>
Expand Down Expand Up @@ -94,7 +105,7 @@ Array [
"flexGrow": 1,
"fontSize": 16,
},
undefined,
Object {},
]
}
/>
Expand All @@ -115,7 +126,9 @@ Array [
},
Array [
Object {},
undefined,
Object {
"paddingHorizontal": 12,
},
],
]
}
Expand Down Expand Up @@ -177,7 +190,7 @@ Array [
"flexGrow": 1,
"fontSize": 16,
},
undefined,
Object {},
]
}
/>
Expand Down Expand Up @@ -251,7 +264,9 @@ Array [
},
Array [
Object {},
undefined,
Object {
"paddingHorizontal": 12,
},
],
]
}
Expand Down Expand Up @@ -313,7 +328,7 @@ Array [
"flexGrow": 1,
"fontSize": 16,
},
undefined,
Object {},
]
}
/>
Expand Down Expand Up @@ -384,7 +399,9 @@ Array [
"paddingHorizontal": 8,
"paddingVertical": 32,
},
undefined,
Object {
"marginVertical": 12,
},
]
}
>
Expand Down Expand Up @@ -417,7 +434,7 @@ Array [
"flex": 1,
"paddingHorizontal": 8,
},
undefined,
Object {},
]
}
>
Expand Down Expand Up @@ -454,7 +471,7 @@ Array [
null,
null,
Object {
"marginVertical": 8,
"margin": 16,
},
]
}
Expand All @@ -468,7 +485,7 @@ Array [
"fontWeight": "700",
"textAlign": "center",
},
undefined,
Object {},
]
}
>
Expand Down Expand Up @@ -505,9 +522,7 @@ Array [
},
null,
null,
Object {
"marginVertical": 8,
},
Object {},
]
}
>
Expand All @@ -520,7 +535,7 @@ Array [
"fontWeight": "700",
"textAlign": "center",
},
undefined,
Object {},
]
}
>
Expand All @@ -544,13 +559,22 @@ Array [
"fontWeight": "300",
"lineHeight": 36,
},
undefined,
Object {
"marginVertical": 12,
"paddingHorizontal": 12,
},
]
}
>
Reset Password
</Text>,
<View>
<View
style={
Object {
"paddingBottom": 12,
}
}
>
<View
accessibilityLabel="Code"
accessibilityState={
Expand All @@ -564,7 +588,9 @@ Array [
Object {
"alignItems": "flex-start",
},
undefined,
Object {
"paddingHorizontal": 12,
},
]
}
>
Expand Down Expand Up @@ -624,7 +650,7 @@ Array [
"flexGrow": 1,
"fontSize": 16,
},
undefined,
Object {},
]
}
/>
Expand All @@ -645,7 +671,9 @@ Array [
},
Array [
Object {},
undefined,
Object {
"paddingHorizontal": 12,
},
],
]
}
Expand Down Expand Up @@ -707,7 +735,7 @@ Array [
"flexGrow": 1,
"fontSize": 16,
},
undefined,
Object {},
]
}
/>
Expand Down Expand Up @@ -781,7 +809,9 @@ Array [
},
Array [
Object {},
undefined,
Object {
"paddingHorizontal": 12,
},
],
]
}
Expand Down Expand Up @@ -843,7 +873,7 @@ Array [
"flexGrow": 1,
"fontSize": 16,
},
undefined,
Object {},
]
}
/>
Expand Down Expand Up @@ -933,7 +963,7 @@ Array [
null,
null,
Object {
"marginVertical": 8,
"margin": 16,
},
]
}
Expand All @@ -947,7 +977,7 @@ Array [
"fontWeight": "700",
"textAlign": "center",
},
undefined,
Object {},
]
}
>
Expand Down Expand Up @@ -984,9 +1014,7 @@ Array [
},
null,
null,
Object {
"marginVertical": 8,
},
Object {},
]
}
>
Expand All @@ -999,7 +1027,7 @@ Array [
"fontWeight": "700",
"textAlign": "center",
},
undefined,
Object {},
]
}
>
Expand Down
15 changes: 0 additions & 15 deletions packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/styles.ts
View file
Open in desktop

This file was deleted.

Loading