Search

Search something to see results

TypeDocGitHub

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

Index

Properties

EasyFormDialogProps.titleEasyFormDialogProps.submitButtonTextEasyFormDialogProps.submitButtonClassEasyFormDialogProps.cancelButtonTextEasyFormDialogProps.submitEnabledEasyFormDialogProps.formIsValidEasyFormDialogProps.showValidationEasyFormDialogProps.closeRefEasyFormDialogProps.modalClassEasyFormDialogProps.focusFirstEasyFormDialogProps.showFooter

Methods

EasyFormDialogProps.onShowValidationChangeEasyFormDialogProps.onSuccessEasyFormDialogProps.onCloseEasyFormDialogProps.onSubmitEasyFormDialogProps.onCancel

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

onShowValidationChange(showValidation: boolean): void

A callback that fires when the dialog is submitted.

Parameters

  • showValidation: boolean

Returns void

onSuccess(payload: unknown): 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(): 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(
    formData: Record<string, string | boolean>,
):
    | 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 }>

onCancel(): void

An uncommonly-used callback that fires when the user clicks the cancel button.

Returns void