@vaadin/hilla-react-form
Version:
Hilla form utils for React
54 lines (53 loc) • 2.31 kB
TypeScript
import { type ProvisionalModel, type BinderConfiguration, type Validator, type Value, type ValueError, type ArrayModel as BinderArrayModel, type ArrayItemModel, type ProvisionalModelConstructor } from "@vaadin/hilla-lit-form";
import { type ArrayModel } from "@vaadin/hilla-models";
export type FieldDirectiveResult = Readonly<{
name: string
onBlur(): void
onChange(): void
onInput(): void
ref(element: HTMLElement | null): void
}>;
export type FieldDirective = (model: ProvisionalModel) => FieldDirectiveResult;
export type UseFormPartResult<M extends ProvisionalModel> = Readonly<{
defaultValue?: Value<M>
dirty: boolean
errors: readonly ValueError[]
invalid: boolean
model: M
name: string
field: FieldDirective
ownErrors: ReadonlyArray<ValueError<Value<M>>>
required: boolean
validators: ReadonlyArray<Validator<Value<M>>>
value?: Value<M>
visited: boolean
addValidator(validator: Validator<Value<M>>): void
setValidators(validators: ReadonlyArray<Validator<Value<M>>>): void
setValue(value: Value<M> | undefined): void
setVisited(visited: boolean): void
validate(): Promise<readonly ValueError[]>
}>;
export type UseFormResult<M extends ProvisionalModel> = Omit<UseFormPartResult<M>, "setValue" | "value"> & Readonly<{
value: Value<M>
submitting: boolean
setDefaultValue(value: Value<M>): void
setValue(value: Value<M>): void
submit(): Promise<Value<M> | void>
reset(): void
clear(): void
read(value: Value<M> | null | undefined): void
update(): void
}>;
export type UseFormArrayPartResult<M extends BinderArrayModel | ArrayModel> = Omit<UseFormPartResult<M>, "field"> & {
items: ReadonlyArray<ArrayItemModel<M>>
};
export declare function useForm<M extends ProvisionalModel>(modelClass: ProvisionalModelConstructor<M>, config?: BinderConfiguration<Value<M>>): UseFormResult<M>;
export declare function useFormPart<M extends ProvisionalModel>(model: M): UseFormPartResult<M>;
/**
* Hook to access an array model part of a form. It provides the same API as `useFormPart`,
* but adds an `items` property that allows to iterate over the items in form of an array of models.
*
* @param model - The array model to access
* @returns The array model part of the form
*/
export declare function useFormArrayPart<M extends BinderArrayModel>(model: M): UseFormArrayPartResult<M>;