@kwiz/fluentui/dist/controls/form.d.ts

KWIZ common controls for FluentUI

import { MutableRefObject } from "react";
import { ButtonEXProps } from "../types";
/** T would be some sort of FormData {
 *      field:type1
 * }
 * > Make sure K is a key in FormData
 * > Make sure the value type of that field value is type1 T[K]
 * read more: https://stackoverflow.com/questions/68304361/how-to-define-an-array-of-generic-objects-in-typescript-each-item-having-a-diff
} */
type FormField<FormData> = {
    [FieldName in keyof FormData]: {
        required?: boolean;
        label?: string;
        hint?: string;
        key: FieldName;
        validation?: (value: FormData[FieldName], values: FormData) => string;
        /** should not be an uncontrolled control */
        fieldControl: (value: FormData[FieldName], setValue: (value: FormData[FieldName], otherValues?: Partial<FormData>) => void, values: FormData) => JSX.Element;
    };
}[keyof FormData & string];
/** render a form in a dialog, with or without a trigger button to open/close the dialog. */
export declare function FormDialogEX<FormData>({ defaultValues, fields, buttonIcon, buttonTitle, buttonProps, dialogTitle, onSubmit, onClose, actions }: {
    defaultValues: FormData;
    fields: FormField<FormData>[];
    buttonIcon?: JSX.Element;
    buttonTitle?: string;
    buttonProps?: Partial<ButtonEXProps>;
    dialogTitle: string;
    /** called if form fields are all valid */
    onSubmit: (values: FormData) => Promise<string>;
    onClose?: () => void;
    /** additional button actions at the bottom */
    actions?: JSX.Element[];
}): import("react/jsx-runtime").JSX.Element;
/** render a form in-line, set the handlers for clear / submit and trigger them from your own code */
export declare function FormEX<FormData>({ defaultValues, fields, onSubmit, clear, submit }: {
    defaultValues: FormData;
    fields: FormField<FormData>[];
    /** called if form fields are all valid */
    onSubmit: (values: FormData) => Promise<string>;
    submit?: MutableRefObject<() => void>;
    clear?: MutableRefObject<() => void>;
}): import("react/jsx-runtime").JSX.Element;
export {};