Interface EasyFormDialogProps

The props type of EasyFormDialog.

interface EasyFormDialogProps {
    title: ReactNode;
    submitButtonText: string;
    submitButtonClass?: string;
    cancelButtonText?: string;
    submitEnabled?: boolean;
    formIsValid: boolean;
    showValidation: boolean;
    closeRef?: MutableRefObject<(() => void)>;
    modalClass?: string;
    focusFirst?: boolean;
    showFooter?: 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;
}

Properties

title submitButtonText submitButtonClass? cancelButtonText? submitEnabled? formIsValid showValidation closeRef? modalClass? focusFirst? showFooter?

Methods

onShowValidationChange onSuccess onClose onSubmit onCancel?

Properties

title

title: ReactNode

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

submitButtonText

submitButtonText: string

The text of the submit button.

OptionalsubmitButtonClass

submitButtonClass?: string

The CSS class of the submit button.

OptionalcancelButtonText

cancelButtonText?: string

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

OptionalsubmitEnabled

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

formIsValid: boolean

A boolean indicating if the form is valid.

showValidation

showValidation: boolean

A boolean indicating if validation feedback is being shown.

OptionalcloseRef

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()

OptionalmodalClass

modalClass?: string

The CSS class added to the underlying Bootstrap modal.

OptionalfocusFirst

focusFirst?: boolean

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

OptionalshowFooter

showFooter?: boolean

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

Methods

onShowValidationChange

  • onShowValidationChange(showValidation): void

  • A callback that fires when the dialog is submitted.

    Parameters

    • showValidation: boolean

    Returns void

onSuccess

  • onSuccess(payload): Promise<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>

onClose

  • onClose(): 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

onSubmit

  • onSubmit(formData): Promise<void> | Promise<undefined | {
        shouldClose?: boolean;
        responseData: unknown;
    }>

  • 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;
    }>

OptionalonCancel

On This Page

Properties
Methods