@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
86 lines (85 loc) • 6.06 kB
JavaScript
import React, { useCallback, useEffect, useRef } from 'react';
import { TextInput, HelperText } from 'react-native-paper';
import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader } from '../../components/WorkflowCard';
import { ErrorManager } from '../../components';
import { StyleSheet } from 'react-native';
const makeStyles = () => StyleSheet.create({
textInput: {
marginTop: 24,
},
});
/**
* Component renders a screen with account details information for support with the application.
* Contact information is pulled from the context passed into the workflow.
*
* @param {AccountDetailsScreenProps} props - Props of Create Account Screen
*
* @category Component
*/
export const AccountDetailsScreenBase = (props) => {
var _a, _b, _c, _d;
const { firstNameLabel, initialFirstName, firstNameValidator = () => { }, firstNameTextInputProps, lastNameLabel, initialLastName, lastNameValidator = () => { }, lastNameTextInputProps, errorDisplayConfig, } = props;
const styles = makeStyles();
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 firstNameRef = useRef(null);
const lastNameRef = useRef(null);
const [firstNameInput, setFirstNameInput] = React.useState(initialFirstName !== null && initialFirstName !== void 0 ? initialFirstName : '');
const [lastNameInput, setLastNameInput] = React.useState(initialLastName !== null && initialLastName !== void 0 ? initialLastName : '');
const [isFirstNameValid, setIsFirstNameValid] = React.useState(false);
const [isLastNameValid, setIsLastNameValid] = React.useState(false);
const [firstNameError, setFirstNameError] = React.useState('');
const [lastNameError, setLastNameError] = React.useState('');
const [shouldValidateFirstName, setShouldValidateFirstName] = React.useState(false);
const [shouldValidateLastName, setShouldValidateLastName] = React.useState(false);
const handleFirstNameInputChange = useCallback((firstName) => {
setFirstNameInput(firstName);
const firstNameValidatorResponse = firstNameValidator(firstName);
setIsFirstNameValid(typeof firstNameValidatorResponse === 'boolean' ? firstNameValidatorResponse : false);
setFirstNameError(typeof firstNameValidatorResponse === 'string' ? firstNameValidatorResponse : '');
}, [firstNameValidator]);
const handleLastNameInputChange = useCallback((lastName) => {
setLastNameInput(lastName);
const lastNameValidatorResponse = lastNameValidator(lastName);
setIsLastNameValid(typeof lastNameValidatorResponse === 'boolean' ? lastNameValidatorResponse : false);
setLastNameError(typeof lastNameValidatorResponse === 'string' ? lastNameValidatorResponse : '');
}, [lastNameValidator]);
useEffect(() => {
if (firstNameInput.length > 0) {
setShouldValidateFirstName(true);
handleFirstNameInputChange(firstNameInput);
}
if (lastNameInput.length > 0) {
setShouldValidateLastName(true);
handleLastNameInputChange(lastNameInput);
}
}, []);
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({ testID: "blui-account-details-first-name", mode: "flat", ref: firstNameRef, label: firstNameLabel, value: firstNameInput, error: shouldValidateFirstName && !isFirstNameValid }, firstNameTextInputProps, { onChangeText: (text) => {
if (firstNameTextInputProps === null || firstNameTextInputProps === void 0 ? void 0 : firstNameTextInputProps.onChangeText) {
firstNameTextInputProps.onChangeText(text);
}
handleFirstNameInputChange(text);
}, onSubmitEditing: () => {
var _a;
(_a = lastNameRef === null || lastNameRef === void 0 ? void 0 : lastNameRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, onBlur: () => setShouldValidateFirstName(true) })),
shouldValidateFirstName && React.createElement(HelperText, { type: "error" }, firstNameError),
React.createElement(TextInput, Object.assign({ testID: "blui-account-details-last-name", mode: "flat", ref: lastNameRef, label: lastNameLabel, value: lastNameInput, error: shouldValidateLastName && !isLastNameValid, style: [styles.textInput] }, lastNameTextInputProps, { onChangeText: (text) => {
if (lastNameTextInputProps === null || lastNameTextInputProps === void 0 ? void 0 : lastNameTextInputProps.onChangeText) {
lastNameTextInputProps.onChangeText(text);
}
handleLastNameInputChange(text);
}, onSubmitEditing: () => {
var _a;
if (isFirstNameValid && isLastNameValid && actionsProps.canGoNext)
(_a = actionsProps.onNext) === null || _a === void 0 ? void 0 : _a.call(actionsProps);
}, onBlur: () => setShouldValidateLastName(true) })),
shouldValidateLastName && React.createElement(HelperText, { type: "error" }, lastNameError))),
React.createElement(WorkflowCardActions, Object.assign({}, actionsProps, { canGoNext: actionsProps.canGoNext && isFirstNameValid && isLastNameValid }))));
};