styled-hook-form/lib/components/form-builder/form-builder.d.ts

React form library for styled-components based on grommet and react-hook-form

import React from "react";
import { FormMethodsRef } from "../form/types";
import { FormFieldType } from "./types";
import { UseFormReturn } from "react-hook-form";
import { SubFormEditorProps } from "./editors";
export declare type FormChildProps = UseFormReturn;
declare const FormBuilder: React.ForwardRefExoticComponent<Partial<Omit<HTMLDivElement, "children">> & {
    fields?: ((import("./types").FormFieldBase & {
        type: FormFieldType.SubForm;
    } & SubFormEditorProps & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        name: string | `${string}.${string}` | `${string}.${number}`;
        label?: string | undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.SubForm;
    } & SubFormEditorProps & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        type: FormFieldType.SubForm;
        name?: string | `${string}.${string}` | `${string}.${number}` | undefined;
        label?: undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.Text;
    } & Pick<import("./types").FormFieldBase, "validationRules"> & {
        minLength?: number | undefined;
        maxLength?: number | undefined;
        defaultValue?: string | undefined;
        inputProps?: Omit<import("grommet").TextInputProps, "ref" | "onChange" | "value"> | undefined;
    } & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        name: string | `${string}.${string}` | `${string}.${number}`;
        label?: string | undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.Number;
    } & Pick<import("./types").FormFieldBase, "validationRules"> & {
        min?: number | undefined;
        max?: number | undefined;
        defaultValue?: number | undefined;
        inputProps?: Omit<import("grommet").TextInputProps, "ref" | "type" | "defaultValue" | "onChange"> | undefined;
    } & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        name: string | `${string}.${string}` | `${string}.${number}`;
        label?: string | undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.Date;
    } & Pick<import("./types").FormFieldBase, "validationRules"> & {
        minDate?: string | undefined;
        maxDate?: string | undefined;
        dateInputProps?: import("grommet").DateInputProps | undefined;
        defaultValue?: string | Date | undefined;
    } & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        name: string | `${string}.${string}` | `${string}.${number}`;
        label?: string | undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.Boolean;
    } & Pick<import("./types").FormFieldBase, "validationRules"> & {
        defaultValue?: boolean | undefined;
        controlType: "switch" | "checkbox";
        checkBoxProps?: import("grommet").CheckBoxProps | undefined;
    } & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        name: string | `${string}.${string}` | `${string}.${number}`;
        label?: string | undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.DropDown;
    } & import("./editors").DropDownProps & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        name: string | `${string}.${string}` | `${string}.${number}`;
        label?: string | undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.Password;
    } & import("./editors").PasswordEditorProps & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        name: string | `${string}.${string}` | `${string}.${number}`;
        label?: string | undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.File;
    } & import("./editors").FileEditorProps & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        name: string | `${string}.${string}` | `${string}.${number}`;
        label?: string | undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.Time;
    } & import("./editors").TimeEditorProps & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        name: string | `${string}.${string}` | `${string}.${number}`;
        label?: string | undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.Custom;
    } & Pick<import("./types").FormFieldBase, "validationRules"> & {
        editorComponent: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
        props?: any;
    } & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        name: string | `${string}.${string}` | `${string}.${number}`;
        label?: string | undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.Custom;
    } & Pick<import("./types").FormFieldBase, "validationRules"> & {
        editorComponent: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
        props?: any;
    } & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        type: FormFieldType.Custom;
        name?: string | `${string}.${string}` | `${string}.${number}` | undefined;
        label?: string | undefined;
    }) | (import("./types").FormFieldBase & {
        type: FormFieldType.Hidden;
    } & Pick<import("./types").FormFieldBase, "validationRules"> & {
        label?: string | undefined;
    } & {
        methods?: UseFormReturn<import("react-hook-form").FieldValues, any> | undefined;
    } & {
        name: string | `${string}.${string}` | `${string}.${number}`;
        label?: string | undefined;
    }))[] | undefined;
    children?: React.ReactNode | ((methods: UseFormReturn<import("react-hook-form").FieldValues, any>) => React.ReactNode);
    model?: any;
    devMode?: boolean | undefined;
    onSubmit?: ((values: any) => void) | undefined;
    beforeSubmit?: ((values: any) => boolean | Promise<boolean>) | undefined;
    options?: Omit<Partial<{
        mode: keyof import("react-hook-form").ValidationMode;
        reValidateMode: "onBlur" | "onChange" | "onSubmit";
        defaultValues: any;
        resolver: import("react-hook-form").Resolver<any, any>;
        context: any;
        shouldFocusError: boolean;
        shouldUnregister: boolean;
        shouldUseNativeValidation: boolean;
        criteriaMode: import("react-hook-form").CriteriaMode;
        delayError: number;
    }>, "defaultValues"> | undefined;
    layout?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | "GRID" | undefined;
    rows?: string | (string | string[])[] | undefined;
    columns?: string | (string | string[])[] | {
        count?: number | "fill" | "fit" | undefined;
        size?: string | string[] | undefined;
    } | undefined;
    areas?: {
        name?: string | undefined;
        start?: number[] | undefined;
        end?: number[] | undefined;
    }[] | string[][] | undefined;
    editorWrapComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
    autoSubmitTreshould?: number | undefined;
    partialForm?: boolean | undefined;
    formMethods?: UseFormReturn<any, any> | undefined;
} & React.RefAttributes<FormMethodsRef | null>>;
export { FormBuilder };