TypeDoc Example

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

    Properties

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

    Methods

    onShowValidationChange onSuccess onClose onSubmit 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

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

    Settings

    Member Visibility

    On This Page

    Properties
    Methods
    MMNEPVFCICPMFPCPTTAAATR