Interface EasyFormDialogProps

The props type of EasyFormDialog.

interface EasyFormDialogProps {
    title: ReactNode;
    submitButtonText: string;
    submitButtonClass?: string;
    cancelButtonText?: string;
    submitEnabled?: boolean;
    formIsValid: boolean;
    showValidation: boolean;
    onShowValidationChange(showValidation: boolean): void;
    onSuccess(payload: unknown): Promise<void>;
    onClose(): void;
    onSubmit(formData: Record<string, string | boolean>): Promise<void> | Promise<undefined | {
        shouldClose?: boolean;
        responseData: unknown;
    }>;
    onCancel?(): void;
    closeRef?: MutableRefObject<(() => void)>;
    modalClass?: string;
    focusFirst?: boolean;
    showFooter?: boolean;
}

Properties

title: ReactNode

The title of the dialog. Can be a JSX element.

submitButtonText: string

The text of the submit button.

submitButtonClass?: string

The CSS class of the submit button.

cancelButtonText?: string

The text of the cancel button. Defaults to "Cancel".

submitEnabled?: boolean

Allows you to disable the submit button even if getSubmitEnabled() would return true.

This can be useful if you want to disable the submit button while a query is in progress.

formIsValid: boolean

A boolean indicating if the form is valid.

showValidation: boolean

A boolean indicating if validation feedback is being shown.

closeRef?: MutableRefObject<(() => void)>

This prop accepts a ref object that holds a function of type () => void. You can execute the function to programmatically close the dialog:

closeRef.current()
modalClass?: string

The CSS class added to the underlying Bootstrap modal.

focusFirst?: boolean

Set to false to disable the default behavior of focusing the first input.

showFooter?: boolean

Set to false to hide the modal footer, which contains the submit and cancel buttons.

Methods

  • A callback that fires when the dialog is submitted.

    Parameters

    • showValidation: boolean

    Returns void

  • A callback that fires after the submit function succeeds.

    If the submit function returned responseData, it is passed to your onSuccess function.

    Your onSuccess callback must return a promise. The submit button will continue showing a loading indicator until the promise resolves. This is to support refetching the data that was updated by the form submission.

    Parameters

    • payload: unknown

    Returns Promise<void>

  • A callback that fires when the dialog has completely closed. Your onClose callback should update call, for example, setDialogVisible(false) so that the EasyFormDialog is no longer rendered.

    Returns void

  • A callback that fires when the form is submitted. You will typically perform an API call in your submit function.

    Your submit function can optionally return an object in the shape

    {
    shouldClose?: boolean
    responseData: unknown
    }

    Using formData is deprecated. Use controlled components instead.

    formData will be {} if the optional peer dependency jquery is not installed.

    Parameters

    • formData: Record<string, string | boolean>

    Returns Promise<void> | Promise<undefined | {
        shouldClose?: boolean;
        responseData: unknown;
    }>