DynamicForm

Formulario completamente configurable mediante un arreglo fields. Soporta los modos create, edit, globalEdit, submit, readOnly y view, integración opcional con API para cargar y guardar, condiciones de visibilidad por campo (showIf) y spans de columna. Un ref imperativo expone clearForm, resetForm, getFormValues y setFormValues.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | fields | Field[] | Sí | — | Arreglo de objetos de configuración de campo. | | mode | 'create' \| 'edit' \| 'globalEdit' \| 'readOnly' \| 'submit' \| 'view' | No | 'create' | Determina los campos visibles y el texto del botón de envío. | | data | Record<string, any> | No | — | Valores iniciales cuando no se usa fetchPath. | | title | string | No | — | Encabezado opcional sobre el cuerpo del formulario. | | apiBaseUrl | string | No | urls.apiBase | URL base del cliente HTTP. | | useAuthToken | boolean | No | true | Usa el cliente autenticado cuando es true. | | fetchPath | string | No | — | Ruta de API para pre-poblar el formulario. | | fetchMethod | 'GET' \| 'POST' \| 'PUT' | No | 'GET' | Método HTTP del fetch. | | fetchDataKey | string | No | 'data' | Clave a extraer de la respuesta del fetch. | | savePath | string | No | — | Ruta de API para enviar el formulario. | | saveMethod | 'POST' \| 'PUT' \| 'PATCH' | No | 'POST' | Método HTTP del guardado. | | saveDataKey | string | No | — | Clave a extraer de la respuesta del guardado. | | extraData | Record<string, any> | No | — | Campos adicionales fusionados al payload al enviar. | | clearOnSubmit | boolean | No | true | Limpia el formulario tras un envío exitoso. | | onChange | (formData) => void | No | — | Se ejecuta en cada cambio de campo. | | onSave | (formData) => void | No | — | Se llama en lugar de la API cuando no hay savePath. | | onSaveSuccess | (response) => void | No | — | Se ejecuta tras un guardado exitoso en modo submit. | | onSaveError | (error) => void | No | — | Se ejecuta tras un error en modo submit. | | onCreateSuccess | (response) => void | No | — | Se ejecuta tras un guardado exitoso en modo create. | | onCreateError | (error) => void | No | — | Se ejecuta tras un error en modo create. | | onEditSuccess | (response) => void | No | — | Se ejecuta tras un guardado exitoso en modo globalEdit. | | onEditError | (error) => void | No | — | Se ejecuta tras un error en modo globalEdit. | | hasSendButton | boolean | No | true | Muestra u oculta el botón de envío. | | sendButtonTitle | string | No | según modo | Texto personalizado del botón de envío. | | sendButtonType | 'clear' \| 'outline' \| 'solid' | No | 'solid' | Estilo visual del botón. | | sendButtonSize | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | 'md' | Tamaño del botón. | | sendButtonColor | string | No | 'primary' | Color del botón. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor del formulario. | | fieldContainerStyle | React.CSSProperties | No | — | Estilos aplicados a cada wrapper de campo. |

Forma de Field

| Campo | Tipo | Requerido | Descripción | |-------|------|-----------|-------------| | name | string | Sí | Clave en el objeto de valores. Admite notación de punto para valores anidados. | | type | string | Sí | Tipo de campo (p. ej. 'text', 'radio', 'checkbox', 'date', 'integer', 'money', 'picker', 'autocomplete', 'list', etc.). | | label | string | No | Etiqueta visible del campo. | | value | any | No | Valor inicial. | | config | object | No | Configuración específica del campo. |

API del ref (DynamicFormRef)

| Método | Descripción | |--------|-------------| | clearForm() | Limpia todos los campos a sus valores por defecto. | | resetForm() | Restaura los valores iniciales. | | getFormValues() | Devuelve el objeto de valores actual. | | setFormValues(values) | Establece los valores del formulario programáticamente. |

Uso

Formulario de creación básico

import DynamicForm from '@/components/DynamicForm/DynamicForm';

const fields = [
  { name: 'name', type: 'text', label: 'Nombre del Producto' },
  { name: 'price', type: 'money', label: 'Precio' },
  { name: 'category', type: 'radio', label: 'Categoría', config: {
    options: [
      { label: 'Electrónica', value: 'electronics' },
      { label: 'Ropa', value: 'clothing' },
    ],
  }},
];

export default function Example() {
  return (
    <DynamicForm
      fields={fields}
      mode="create"
      savePath="/v1/products"
      saveMethod="POST"
      onCreateSuccess={(res) => console.log('Creado:', res)}
    />
  );
}

Formulario de edición con ref

import { useRef } from 'react';
import DynamicForm, { DynamicFormRef } from '@/components/DynamicForm/DynamicForm';

const fields = [
  { name: 'name', type: 'text', label: 'Nombre' },
  { name: 'email', type: 'text', label: 'Email' },
];

export default function Example() {
  const formRef = useRef<DynamicFormRef>(null);

  return (
    <>
      <DynamicForm
        ref={formRef}
        fields={fields}
        mode="globalEdit"
        fetchPath="/v1/users/1"
        savePath="/v1/users/1"
        saveMethod="PUT"
        onEditSuccess={() => console.log('Guardado')}
      />
      <button onClick={() => console.log(formRef.current?.getFormValues())}>
        Ver valores
      </button>
    </>
  );
}