react-figura
Version:
<div align="center"> <a href="https://github.com/mbb10324/figura/"> <img src="https://raw.githubusercontent.com/mbb10324/figura/master/docs/logo.png" alt="react-figura" width="60%" /> </a>
103 lines (102 loc) • 2.46 kB
TypeScript
import { PropsWithChildren } from "react";
export type FormState = {
[key: string]: FormField;
};
export type FormField = {
value?: string;
type?: string;
hasError?: boolean;
error?: string;
touched?: boolean;
formID?: string;
validator: (value?: string, formState?: FormState) => {
hasError: boolean;
error: string;
};
};
export type Action = {
type: "INITIAL_FORM";
data: FieldNameInitial;
} | {
type: "RESET_FORM";
} | {
type: "UPDATE_FORM";
data: ActionData;
} | {
type: "INPUT_UPDATE";
data: ActionData;
};
export type ActionData = {
fieldNames?: FieldName[];
dispatcher?: UpdateForm[];
name?: string;
value?: string;
type?: string;
hasError?: boolean;
error?: string;
touched?: boolean;
formID?: string;
validator: (value?: string, formState?: FormState) => {
hasError: boolean;
error: string;
};
};
export type FieldNameInitial = {
fieldNames: FieldName[];
};
export type FieldName = {
formID: string;
name: string;
type: string;
validation: (value?: string, formState?: FormState) => {
hasError: boolean;
error: string;
};
};
export type Dispatcher = {
dispatcher: UpdateForm[];
};
export type UpdateForm = {
name: FormField;
value: string;
type: string;
hasError: boolean;
error: string;
touched: boolean;
formID: string;
validator: (value?: string, formState?: FormState) => {
hasError: boolean;
error: string;
};
};
export interface InputProps extends PropsWithChildren {
validator?: (value: string, formState?: FormState) => {
hasError: boolean;
error: string;
};
onEvent?: (value: string, name: string, type: string) => void;
children: React.ReactNode;
placeholder?: string;
inputStyle?: string;
errorStyle?: string;
onChange?: boolean;
wrapper?: string;
name: string;
}
export interface InputShortProps extends PropsWithChildren {
validator?: (value: string, formState?: FormState) => {
hasError: boolean;
error: string;
};
onEvent?: (value: string, name: string, type: string) => void;
children: React.ReactNode;
inputStyle?: string;
errorStyle?: string;
onChange?: boolean;
wrapper?: string;
name: string;
}
export type ButtonProps = {
children: React.ReactNode;
buttonStyle?: string;
};