@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
72 lines (71 loc) • 5.13 kB
JavaScript
import React, { useCallback, useEffect, useRef } from 'react';
import TextField from '@mui/material/TextField';
import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader, WorkflowCardInstructions, } from '../../components/WorkflowCard/index.js';
import ErrorManager from '../../components/Error/ErrorManager.js';
/**
* 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 AccountDetailsScreen base component
*
* @category Component
*/
export const AccountDetailsScreenBase = (props) => {
const { firstNameLabel, initialFirstName, firstNameValidator = () => { }, firstNameTextFieldProps, lastNameLabel, initialLastName, lastNameValidator = () => { }, lastNameTextFieldProps, errorDisplayConfig, WorkflowCardBaseProps: cardBaseProps = {}, WorkflowCardInstructionProps: instructionsProps = {}, WorkflowCardActionsProps: actionsProps = {}, WorkflowCardHeaderProps: headerProps = {}, ...otherProps } = props;
const firstNameRef = useRef(null);
const lastNameRef = useRef(null);
const [firstNameInput, setFirstNameInput] = React.useState(initialFirstName ? initialFirstName : '');
const [lastNameInput, setLastNameInput] = React.useState(initialLastName ? 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, { ...cardBaseProps, ...otherProps },
React.createElement(WorkflowCardHeader, { ...headerProps }),
React.createElement(WorkflowCardInstructions, { ...instructionsProps }),
React.createElement(WorkflowCardBody, null,
React.createElement(ErrorManager, { ...errorDisplayConfig },
React.createElement(TextField, { id: "first", fullWidth: true, variant: "filled", inputRef: firstNameRef, label: firstNameLabel, value: firstNameInput, error: shouldValidateFirstName && !isFirstNameValid, helperText: shouldValidateFirstName && firstNameError, sx: {
mb: { md: 0, sm: 1, xs: 4 },
}, ...firstNameTextFieldProps, onChange: (e) => {
firstNameTextFieldProps?.onChange?.(e);
handleFirstNameInputChange(e.target.value);
}, onKeyUp: (e) => {
if (e.key === 'Enter' && lastNameRef.current)
lastNameRef.current.focus();
}, onBlur: () => setShouldValidateFirstName(true) }),
React.createElement(TextField, { id: "last", fullWidth: true, variant: "filled", sx: {
mt: { md: 4, sm: 3 },
}, inputRef: lastNameRef, label: lastNameLabel, value: lastNameInput, error: shouldValidateLastName && !isLastNameValid, helperText: shouldValidateLastName && lastNameError, ...lastNameTextFieldProps, onChange: (e) => {
lastNameTextFieldProps?.onChange?.(e);
handleLastNameInputChange(e.target.value);
}, onKeyUp: (e) => {
if (e.key === 'Enter' && isFirstNameValid && isLastNameValid && actionsProps.canGoNext)
actionsProps.onNext?.();
}, onBlur: () => setShouldValidateLastName(true) }))),
React.createElement(WorkflowCardActions, { ...actionsProps, canGoNext: actionsProps.canGoNext && isFirstNameValid && isLastNameValid })));
};