@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
59 lines (58 loc) • 4.03 kB
JavaScript
import React, { useCallback, useEffect } from 'react';
import { ErrorManager, WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader, } from '../../components';
import { HelperText, TextInput } from 'react-native-paper';
/**
* Base Component that renders a screen for the user to enter their email address to start the
* account creation process.
*
* @param {CreateAccountScreenProps} props - Basic props of Create Account Screen Base component
*
* @category Component
*/
export const CreateAccountScreenBase = (props) => {
var _a, _b, _c, _d, _e;
const {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
emailValidator = (email) => true, emailLabel, initialValue, emailTextFieldProps, inputRef, errorDisplayConfig, } = 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 [emailInput, setEmailInput] = React.useState(initialValue !== null && initialValue !== void 0 ? initialValue : '');
const [isEmailValid, setIsEmailValid] = React.useState((_e = emailValidator(initialValue !== null && initialValue !== void 0 ? initialValue : '')) !== null && _e !== void 0 ? _e : false);
const [emailError, setEmailError] = React.useState('');
const [shouldValidateEmail, setShouldValidateEmail] = React.useState(false);
const handleEmailInputChange = useCallback((email) => {
setEmailInput(email);
const emailValidatorResponse = emailValidator(email);
setIsEmailValid(typeof emailValidatorResponse === 'boolean' ? emailValidatorResponse : false);
setEmailError(typeof emailValidatorResponse === 'string' ? emailValidatorResponse : '');
}, [emailValidator]);
useEffect(() => {
if (emailInput.length > 0) {
setShouldValidateEmail(true);
handleEmailInputChange(emailInput);
}
}, []);
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({ ref: inputRef, testID: "blui-create-account-email-text-input", mode: "flat", keyboardType: "email-address", label: emailLabel, value: emailInput, error: shouldValidateEmail && !isEmailValid, autoCapitalize: "none" }, emailTextFieldProps, { onChangeText: (text) => {
if (emailTextFieldProps === null || emailTextFieldProps === void 0 ? void 0 : emailTextFieldProps.onChangeText) {
emailTextFieldProps.onChangeText(text);
}
handleEmailInputChange(text);
}, onBlur: (e) => {
if (emailTextFieldProps === null || emailTextFieldProps === void 0 ? void 0 : emailTextFieldProps.onBlur) {
emailTextFieldProps.onBlur(e);
}
setShouldValidateEmail(true);
}, onSubmitEditing: () => {
var _a;
if (emailInput.length > 0 && isEmailValid && actionsProps.canGoNext)
(_a = actionsProps.onNext) === null || _a === void 0 ? void 0 : _a.call(actionsProps);
}, returnKeyType: "next" })),
React.createElement(HelperText, { type: "error" }, emailError))),
React.createElement(WorkflowCardActions, Object.assign({}, actionsProps, { canGoNext: (emailInput.length > 0 && isEmailValid && actionsProps.canGoNext) }))));
};