71 lines
1.5 KiB
TypeScript
Executable file
71 lines
1.5 KiB
TypeScript
Executable file
/**
|
|
* useWizardValidation Hook
|
|
*
|
|
* Hook for validation state and operations.
|
|
*/
|
|
|
|
import { useCallback, useMemo } from 'react';
|
|
import { useWizard } from '../useWizard';
|
|
import type { UseWizardValidationReturn } from '../types';
|
|
|
|
/**
|
|
* Hook for validation operations
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* function MyStep() {
|
|
* const { errors, validateStep, isValidating, hasError, getError } = useWizardValidation();
|
|
*
|
|
* const handleSubmit = async () => {
|
|
* const isValid = await validateStep();
|
|
* if (isValid) {
|
|
* // proceed
|
|
* }
|
|
* };
|
|
*
|
|
* return (
|
|
* <div>
|
|
* <input className={hasError('email') ? 'error' : ''} />
|
|
* {getError('email') && <span>{getError('email')}</span>}
|
|
* <button onClick={handleSubmit} disabled={isValidating}>
|
|
* {isValidating ? 'Checking...' : 'Submit'}
|
|
* </button>
|
|
* </div>
|
|
* );
|
|
* }
|
|
* ```
|
|
*/
|
|
export function useWizardValidation(): UseWizardValidationReturn {
|
|
const {
|
|
errors,
|
|
validateStep,
|
|
clearErrors,
|
|
isValidating,
|
|
} = useWizard();
|
|
|
|
const hasError = useCallback(
|
|
(field: string): boolean => {
|
|
return field in errors;
|
|
},
|
|
[errors]
|
|
);
|
|
|
|
const getError = useCallback(
|
|
(field: string): string | undefined => {
|
|
return errors[field];
|
|
},
|
|
[errors]
|
|
);
|
|
|
|
return useMemo(
|
|
() => ({
|
|
errors,
|
|
validateStep,
|
|
clearErrors,
|
|
isValidating,
|
|
hasError,
|
|
getError,
|
|
}),
|
|
[errors, validateStep, clearErrors, isValidating, hasError, getError]
|
|
);
|
|
}
|