react-tiniest-form
Version:
the tiniest form
48 lines (47 loc) • 1.99 kB
TypeScript
import { ComponentPropsWithoutRef } from 'react';
type InputValue = ComponentPropsWithoutRef<'input'>['value'];
type FormFields = Record<string, InputValue>;
type FieldName<T extends FormFields> = keyof T;
type FieldInfo = {
registered: boolean;
value: string;
watching: boolean;
validations: Validation[];
isValid: boolean;
ref: HTMLInputElement | HTMLSelectElement | null;
};
type Validation = {
type?: string;
message?: string;
validator: (value: string) => boolean;
};
type Store<Fields extends FormFields = FormFields> = {
[Name in keyof Fields]: FieldInfo;
};
type Errors<Fields extends FormFields = FormFields> = {
[name in keyof Fields]: ErrorsInfo;
};
type ErrorsInfo = Pick<Validation, 'type' | 'message'>;
type CreateFormsStoreOptions<DefaultValues extends FormFields> = {
defaultValues?: DefaultValues;
};
type MutateOptions = Partial<FieldInfo>;
declare const createFormsStore: <DefaultValues extends FormFields>(options?: CreateFormsStoreOptions<DefaultValues> | undefined) => {
store: Store<DefaultValues>;
errors: Errors<DefaultValues>;
registerField: (name: keyof DefaultValues, options?: MutateOptions) => void;
updateFieldValue: (name: keyof DefaultValues, options?: MutateOptions) => void;
validateField: (payload: {
name: keyof DefaultValues;
/**@todo Required or not */
onValid?: VoidFunction | undefined;
onInvalid?: ((info: Required<Validation>) => void) | undefined;
}) => boolean;
getFieldValue: (name: keyof DefaultValues) => string;
watchField: (name: keyof DefaultValues) => void;
isWatching: (name: keyof DefaultValues) => boolean;
getFieldInfo: (name: keyof DefaultValues) => Store<DefaultValues>[keyof DefaultValues] | undefined;
};
declare const parseToInputValue: (value: InputValue) => string;
export { createFormsStore, parseToInputValue };
export type { FieldName, Validation, ErrorsInfo, FormFields, InputValue, Store, Errors };