@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
75 lines (74 loc) • 4.67 kB
JavaScript
import React, { useCallback, useEffect } from 'react';
import { ErrorManager, WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader, } from '../../components';
import { HelperText, Text, TextInput } from 'react-native-paper';
import { Text as RNText, View } from 'react-native';
import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
/**
* Component that renders a screen that prompts a user to enter the confirmation code
* that was sent to the email address that they used to register.
*
* @param {VerifyCodeScreenProps} props - props of Verify Code Screen Base component
*
* @category Component
*/
export const VerifyCodeScreenBase = (props) => {
var _a, _b, _c, _d;
const { codeValidator, onResend, resendInstructions, resendLabel, verifyCodeInputLabel, initialValue, errorDisplayConfig, verifyCodeTextInputProps, } = props;
const cardBaseProps = (_a = props.WorkflowCardBaseProps) !== null && _a !== void 0 ? _a : {};
const headerProps = (_b = props.WorkflowCardHeaderProps) !== null && _b !== void 0 ? _b : {};
const cardBodyProps = (_c = props.WorkflowCardBodyProps) !== null && _c !== void 0 ? _c : {};
const actionsProps = (_d = props.WorkflowCardActionsProps) !== null && _d !== void 0 ? _d : {};
const [verifyCode, setVerifyCode] = React.useState(initialValue !== null && initialValue !== void 0 ? initialValue : '');
const [shouldValidateCode, setShouldValidateCode] = React.useState(false);
const [isCodeValid, setIsCodeValid] = React.useState(codeValidator ? codeValidator(initialValue !== null && initialValue !== void 0 ? initialValue : '') : false);
const [codeError, setCodeError] = React.useState('');
const theme = useExtendedTheme();
const handleVerifyCodeInputChange = useCallback((code) => {
setVerifyCode(code);
if (codeValidator) {
const validatorResponse = codeValidator(code);
setIsCodeValid(typeof validatorResponse === 'boolean' ? validatorResponse : false);
setCodeError(typeof validatorResponse === 'string' ? validatorResponse : '');
}
}, [codeValidator]);
useEffect(() => {
if (verifyCode.length > 0) {
setShouldValidateCode(true);
handleVerifyCodeInputChange(verifyCode);
}
}, []);
const handleOnNext = () => {
const { onNext } = actionsProps;
if (onNext)
onNext({ code: verifyCode });
};
const handleOnPrevious = () => {
const { onPrevious } = actionsProps;
if (onPrevious)
onPrevious({ code: verifyCode });
};
return (React.createElement(WorkflowCard, Object.assign({}, cardBaseProps),
React.createElement(WorkflowCardHeader, Object.assign({}, headerProps)),
React.createElement(WorkflowCardBody, Object.assign({}, cardBodyProps),
React.createElement(ErrorManager, Object.assign({}, errorDisplayConfig),
React.createElement(TextInput, Object.assign({ label: verifyCodeInputLabel, mode: "flat", testID: "blui-verify-code-text-input", value: verifyCode, onChangeText: handleVerifyCodeInputChange, error: shouldValidateCode && !isCodeValid, autoCapitalize: "none" }, verifyCodeTextInputProps, { onSubmitEditing: () => {
if (verifyCode.length > 0 && isCodeValid && actionsProps.canGoNext)
handleOnNext();
}, onBlur: (e) => {
if (verifyCodeTextInputProps === null || verifyCodeTextInputProps === void 0 ? void 0 : verifyCodeTextInputProps.onBlur) {
verifyCodeTextInputProps.onBlur(e);
}
setShouldValidateCode(true);
} })),
React.createElement(HelperText, { type: "error", visible: shouldValidateCode, style: { height: 30 } }, codeError),
React.createElement(View, null,
React.createElement(Text, { variant: "bodyMedium" },
resendInstructions,
' ',
React.createElement(RNText, { style: {
color: theme.colors.primary,
fontWeight: 'bold',
textDecorationLine: 'underline',
}, testID: "blui-verify-code-resend-code-button", onPress: onResend }, resendLabel))))),
React.createElement(WorkflowCardActions, Object.assign({}, actionsProps, { canGoNext: (verifyCode.length > 0 && isCodeValid && actionsProps.canGoNext), onNext: handleOnNext, onPrevious: handleOnPrevious }))));
};