FormDialog

A dialog that wraps a DynamicForm inside a Modal. It handles form state internally, supports API submission via savePath, and exposes granular callbacks for create, edit, and submit outcomes. The form is mounted only after the modal's open animation completes to avoid layout issues.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the dialog is visible. | | onClose | (reason: 'cancel' \| 'success' \| 'error' \| 'custom') => void | Yes | — | Called when the dialog closes. Receives a reason string. | | fields | Field[] | Yes | — | Form field definitions passed to DynamicForm. Each field has type, name, and optional label, config, value. | | backdropStyle | React.CSSProperties | No | — | Inline styles for the modal backdrop. | | windowStyle | React.CSSProperties | No | — | Inline styles merged into the dialog window. | | zIndex | number | No | — | CSS z-index of the modal overlay. | | id | string | No | — | HTML id attribute for the modal element. | | formTitle | string | No | — | Title displayed at the top of the form. | | data | Record<string, any> | No | — | Initial values pre-populated in the form fields. | | savePath | string | No | — | API endpoint (relative path) to POST form data to when submitted. | | onSave | (formData: Record<string, any>) => void | No | — | Called instead of an API request when savePath is not provided. | | onSaveSuccess | (formData: Record<string, any>) => void | No | — | Called on successful submission when mode is "submit". | | onSaveError | (error: any) => void | No | — | Called on submission error when mode is "submit". | | onCreateSuccess | (formData: Record<string, any>) => void | No | — | Called on successful submission when mode is "create". | | onCreateError | (error: any) => void | No | — | Called on submission error when mode is "create". | | onEditSuccess | (formData: Record<string, any>) => void | No | — | Called on successful submission when mode is "globalEdit". | | onEditError | (error: any) => void | No | — | Called on submission error when mode is "globalEdit". | | extraData | Record<string, any> | No | — | Extra fields merged into the payload before submission. | | mode | "create" \| "edit" \| "globalEdit" \| "readOnly" \| "submit" \| "view" | No | "create" | Form mode. Buttons are only rendered in "create", "globalEdit", and "submit" modes. | | apiBaseUrl | string | No | — | Base URL for the HTTP client used to submit the form. | | useAuthToken | boolean | No | — | When true, uses the secured HTTP client (injects the auth token). | | formContainerStyle | React.CSSProperties | No | — | Styles for the form container element. | | formHeaderStyle | React.CSSProperties | No | — | Styles for the form header section. | | formBodyStyle | React.CSSProperties | No | — | Styles for the form body section. | | formTitleStyle | React.CSSProperties | No | — | Styles for the form title element. | | fieldContainerStyle | React.CSSProperties | No | — | Styles for each field's outer container. | | fieldLabelStyle | React.CSSProperties | No | — | Styles for field labels. | | fieldDescriptionStyle | React.CSSProperties | No | — | Styles for field description text. | | fieldHeaderStyle | React.CSSProperties | No | — | Styles for each field's header area. | | fieldBodyStyle | React.CSSProperties | No | — | Styles for each field's body area. | | className | string | No | — | CSS class applied to the form element. | | sendButtonType | "clear" \| "outline" \| "solid" | No | — | Visual variant of the submit button. | | sendButtonSize | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | — | Size of the submit button. | | sendButtonColor | string | No | — | Color of the submit button. | | sendButtonTitle | string | No | "Enviar" | Label for the submit button. | | sendButtonIcon | string | No | — | Icon name for the submit button. | | sendButtonIconPaths | any[] | No | — | Custom icon paths for the submit button. | | sendButtonIconSize | number | No | — | Icon size for the submit button. | | sendButtonStyle | React.CSSProperties | No | — | Inline styles for the submit button. | | sendButtonTitleStyle | React.CSSProperties | No | — | Inline styles for the submit button label. | | cancelButtonType | "clear" \| "outline" \| "solid" | No | "outline" | Visual variant of the cancel button. | | cancelButtonSize | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | — | Size of the cancel button. | | cancelButtonColor | string | No | — | Color of the cancel button. | | cancelButtonTitle | string | No | "Cancelar" | Label for the cancel button. | | cancelButtonIcon | string | No | — | Icon name for the cancel button. | | cancelButtonIconPaths | any[] | No | — | Custom icon paths for the cancel button. | | cancelButtonIconSize | number | No | — | Icon size for the cancel button. | | cancelButtonStyle | React.CSSProperties | No | — | Inline styles for the cancel button. | | cancelButtonTitleStyle | React.CSSProperties | No | — | Inline styles for the cancel button label. |

Usage

Basic

import React from 'react';
import FormDialog from '@/components/dialogs/FormDialog';

export default function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open form</button>
      <FormDialog
        isOpen={open}
        onClose={(reason) => {
          console.log('Closed:', reason);
          setOpen(false);
        }}
        formTitle="New Product"
        fields={[
          { type: 'text', name: 'name', label: 'Name' },
          { type: 'number', name: 'price', label: 'Price' },
        ]}
        savePath="/v1/products"
        mode="create"
        useAuthToken
        onCreateSuccess={(data) => console.log('Created:', data)}
      />
    </>
  );
}