mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-27 08:32:56 +00:00
75 lines
3.7 KiB
TypeScript
75 lines
3.7 KiB
TypeScript
import { FormMode, GetInputPropsType } from './types';
|
|
type UseFieldErrorResolver = (error: unknown) => React.ReactNode;
|
|
export interface UseFieldInput<T, FieldType extends GetInputPropsType = 'input', Mode extends FormMode = 'controlled'> {
|
|
/** Field mode, controlled by default */
|
|
mode?: Mode;
|
|
/** Initial field value */
|
|
initialValue: T;
|
|
/** Initial touched value */
|
|
initialTouched?: boolean;
|
|
/** Initial field error message */
|
|
initialError?: React.ReactNode;
|
|
/** Called with updated value when the field value changes */
|
|
onValueChange?: (value: T) => void;
|
|
/** Determines whether the field should be validated when value changes, false by default */
|
|
validateOnChange?: boolean;
|
|
/** Determines whether the field should be validated when it loses focus, false by default */
|
|
validateOnBlur?: boolean;
|
|
/** Determines whether the field should clear error message when value changes, true by default */
|
|
clearErrorOnChange?: boolean;
|
|
/** A function to validate field value, can be sync or async */
|
|
validate?: (value: T) => React.ReactNode | Promise<React.ReactNode>;
|
|
/** Field type, input by default */
|
|
type?: FieldType;
|
|
/** A function to resolve validation error from the result returned from validate function, should return react node */
|
|
resolveValidationError?: UseFieldErrorResolver;
|
|
}
|
|
interface GetInputPropsOptions {
|
|
withError?: boolean;
|
|
withFocus?: boolean;
|
|
}
|
|
interface GetInputPropsSharedReturn {
|
|
error?: React.ReactNode;
|
|
onFocus?: () => void;
|
|
onBlur: () => void;
|
|
onChange: (value: any) => void;
|
|
}
|
|
type GetInputPropsTypeValue<T, FieldType extends GetInputPropsType, Mode extends FormMode> = FieldType extends 'checkbox' ? Mode extends 'controlled' ? {
|
|
checked: boolean;
|
|
} : {
|
|
defaultChecked: boolean;
|
|
} : Mode extends 'controlled' ? {
|
|
value: T;
|
|
} : {
|
|
defaultValue: T;
|
|
};
|
|
type GetInputPropsReturnType<T, FieldType extends GetInputPropsType, Mode extends FormMode> = GetInputPropsSharedReturn & GetInputPropsTypeValue<T, FieldType, Mode>;
|
|
export interface UseFieldReturnType<T, FieldType extends GetInputPropsType = 'input', Mode extends FormMode = 'controlled'> {
|
|
/** Returns props to pass to the input element */
|
|
getInputProps: (options?: GetInputPropsOptions) => GetInputPropsReturnType<T, FieldType, Mode>;
|
|
/** Returns current input value */
|
|
getValue: () => T;
|
|
/** Sets input value to the given value */
|
|
setValue: (value: T) => void;
|
|
/** Resets field value to initial state, sets touched state to false, sets error to null */
|
|
reset: () => void;
|
|
/** Validates current input value when called */
|
|
validate: () => Promise<React.ReactNode | void>;
|
|
/** Set to true when async validate function is called, stays true until the returned promise resolves */
|
|
isValidating: boolean;
|
|
/** Current error message */
|
|
error: React.ReactNode;
|
|
/** Sets error message to the given react node */
|
|
setError: (error: React.ReactNode) => void;
|
|
/** Returns true if the input has been focused at least once */
|
|
isTouched: () => boolean;
|
|
/** Returns true if input value is different from the initial value */
|
|
isDirty: () => boolean;
|
|
/** Resets touched state to false */
|
|
resetTouched: () => void;
|
|
/** Key that should be added to the input when mode is uncontrolled */
|
|
key: number;
|
|
}
|
|
export declare function useField<T, Mode extends FormMode = 'controlled', FieldType extends GetInputPropsType = 'input'>({ mode, clearErrorOnChange, initialValue, initialError, initialTouched, onValueChange, validateOnChange, validateOnBlur, validate, resolveValidationError, type, }: UseFieldInput<T, FieldType, Mode>): UseFieldReturnType<T, FieldType, Mode>;
|
|
export {};
|