FormDialog

Diálogo que envuelve un DynamicForm dentro de un Modal. Maneja el estado del formulario internamente, admite envío a una API mediante savePath, y expone callbacks granulares para los resultados de creación, edición y envío. El formulario se monta únicamente después de que la animación de apertura del modal finaliza.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el diálogo está visible. | | onClose | (reason: 'cancel' \| 'success' \| 'error' \| 'custom') => void | Sí | — | Se llama cuando el diálogo se cierra. Recibe una cadena de razón. | | fields | Field[] | Sí | — | Definiciones de campos del formulario pasadas a DynamicForm. Cada campo tiene type, name y opcionalmente label, config, value. | | backdropStyle | React.CSSProperties | No | — | Estilos en línea para el backdrop del modal. | | windowStyle | React.CSSProperties | No | — | Estilos en línea fusionados en la ventana del diálogo. | | zIndex | number | No | — | z-index CSS del overlay modal. | | id | string | No | — | Atributo HTML id del elemento modal. | | formTitle | string | No | — | Título mostrado en la parte superior del formulario. | | data | Record<string, any> | No | — | Valores iniciales pre-poblados en los campos del formulario. | | savePath | string | No | — | Endpoint de API (ruta relativa) para hacer POST de los datos del formulario al enviar. | | onSave | (formData: Record<string, any>) => void | No | — | Se llama en lugar de una petición API cuando savePath no está definido. | | onSaveSuccess | (formData: Record<string, any>) => void | No | — | Se llama cuando el envío es exitoso y mode es "submit". | | onSaveError | (error: any) => void | No | — | Se llama cuando hay error en el envío y mode es "submit". | | onCreateSuccess | (formData: Record<string, any>) => void | No | — | Se llama cuando el envío es exitoso y mode es "create". | | onCreateError | (error: any) => void | No | — | Se llama cuando hay error en el envío y mode es "create". | | onEditSuccess | (formData: Record<string, any>) => void | No | — | Se llama cuando el envío es exitoso y mode es "globalEdit". | | onEditError | (error: any) => void | No | — | Se llama cuando hay error en el envío y mode es "globalEdit". | | extraData | Record<string, any> | No | — | Campos adicionales fusionados en el payload antes de enviar. | | mode | "create" \| "edit" \| "globalEdit" \| "readOnly" \| "submit" \| "view" | No | "create" | Modo del formulario. Los botones solo se muestran en los modos "create", "globalEdit" y "submit". | | apiBaseUrl | string | No | — | URL base del cliente HTTP para enviar el formulario. | | useAuthToken | boolean | No | — | Cuando es true, usa el cliente HTTP seguro (inyecta el token de autenticación). | | formContainerStyle | React.CSSProperties | No | — | Estilos para el contenedor del formulario. | | formHeaderStyle | React.CSSProperties | No | — | Estilos para la sección de encabezado del formulario. | | formBodyStyle | React.CSSProperties | No | — | Estilos para la sección del cuerpo del formulario. | | formTitleStyle | React.CSSProperties | No | — | Estilos para el elemento de título del formulario. | | fieldContainerStyle | React.CSSProperties | No | — | Estilos para el contenedor exterior de cada campo. | | fieldLabelStyle | React.CSSProperties | No | — | Estilos para las etiquetas de los campos. | | fieldDescriptionStyle | React.CSSProperties | No | — | Estilos para el texto de descripción de los campos. | | fieldHeaderStyle | React.CSSProperties | No | — | Estilos para el área de encabezado de cada campo. | | fieldBodyStyle | React.CSSProperties | No | — | Estilos para el área del cuerpo de cada campo. | | className | string | No | — | Clase CSS aplicada al elemento del formulario. | | sendButtonType | "clear" \| "outline" \| "solid" | No | — | Variante visual del botón de envío. | | sendButtonSize | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | — | Tamaño del botón de envío. | | sendButtonColor | string | No | — | Color del botón de envío. | | sendButtonTitle | string | No | "Enviar" | Etiqueta del botón de envío. | | sendButtonIcon | string | No | — | Nombre del ícono del botón de envío. | | sendButtonIconPaths | any[] | No | — | Rutas de ícono personalizadas para el botón de envío. | | sendButtonIconSize | number | No | — | Tamaño del ícono del botón de envío. | | sendButtonStyle | React.CSSProperties | No | — | Estilos en línea para el botón de envío. | | sendButtonTitleStyle | React.CSSProperties | No | — | Estilos en línea para la etiqueta del botón de envío. | | cancelButtonType | "clear" \| "outline" \| "solid" | No | "outline" | Variante visual del botón de cancelación. | | cancelButtonSize | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | — | Tamaño del botón de cancelación. | | cancelButtonColor | string | No | — | Color del botón de cancelación. | | cancelButtonTitle | string | No | "Cancelar" | Etiqueta del botón de cancelación. | | cancelButtonIcon | string | No | — | Nombre del ícono del botón de cancelación. | | cancelButtonIconPaths | any[] | No | — | Rutas de ícono personalizadas para el botón de cancelación. | | cancelButtonIconSize | number | No | — | Tamaño del ícono del botón de cancelación. | | cancelButtonStyle | React.CSSProperties | No | — | Estilos en línea para el botón de cancelación. | | cancelButtonTitleStyle | React.CSSProperties | No | — | Estilos en línea para la etiqueta del botón de cancelación. |

Uso

Básico

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