Actions del formulario

Las Form Actions son los botones que renderiza un DyonaForm: las acciones integradas submit y back, y las acciones custom definidas por la aplicación. Configuran la interfaz del formulario e invocan los callbacks React entregados a DyonaForm.

No son el Action Engine genérico. Las Form Actions no usan DyonaAction, executors, scopes, records, parámetros, resultados ni directivas de refresh. Usalas para el flujo local de un formulario; usá Action Engine cuando la aplicación deba ejecutar una acción de negocio tipada.

Configuración

type DyonaFormActionsConfig = {
  submit?: DyonaFormActionButtonConfig;
  back?: DyonaFormActionButtonConfig;
  custom?: DyonaFormCustomActionConfig[];
  disableOtherActionsWhileRunning?: boolean;
  layout?: 'horizontal' | 'vertical';
  wrap?: boolean;
};

type DyonaFormActionButtonConfig = {
  label?: string;
  icon?: string;
  shortcut?: string;
  tooltip?: string;
  variant?: 'text' | 'outlined' | 'contained';
  loadingLabel?: string;
  showSpinner?: boolean;
  cancelable?: boolean;
};

type DyonaFormCustomActionConfig = DyonaFormActionButtonConfig & {
  id: string;
  label: string;
  validate?: boolean;
};

submit configura el botón que invoca onSubmit(values, {signal}); valida el formulario antes de llamar al handler. back configura el botón que invoca onBack({signal}). Un botón se renderiza solo si se proporciona el callback correspondiente.

custom agrega botones que invocan onAction(id, values, {signal}). Cada acción custom tiene un id único y no vacío y un label obligatorio; estos botones se renderizan cuando se proporcionan tanto acciones custom como onAction.

const schema: DyonaFormSchema = {
  title: 'Cliente',
  actions: {
    back: { label: 'Volver', icon: 'ArrowBack' },
    custom: [{ id: 'preview', label: 'Vista previa', icon: 'Preview', validate: false, variant: 'outlined', shortcut: 'Ctrl+P' }],
    submit: { label: 'Guardar', loadingLabel: 'Guardando…', cancelable: true },
  },
  tabs: [/* ... */],
};

<DyonaForm
  schema={schema}
  onBack={async ({signal}) => { /* navegar, respetando signal si corresponde */ }}
  onAction={async (id, values, {signal}) => { if (id === 'preview') { /* usar values y signal */ } }}
  onSubmit={async (values, {signal}) => { /* guardar values */ }}
/>

Validación y trabajo asíncrono

submit siempre valida y normaliza los valores antes de onSubmit. Una acción custom valida solo con validate: true; de otro modo recibe valores normalizados sin bloquearse por la validación del formulario. back no recibe valores ni valida.

Los handlers pueden ser síncronos o devolver una promesa. Mientras un handler está pendiente, su botón muestra loadingLabel (o su etiqueta normal) y, por defecto, un spinner. DYONA Form ejecuta una única acción a la vez. Por defecto disableOtherActionsWhileRunning es true, por lo que los otros botones se deshabilitan; con false permanecen visualmente habilitados, pero no se permite iniciar una segunda acción.

Cada ejecución recibe un AbortSignal nuevo en su contexto. Con cancelable: true, la acción en curso también muestra un botón Cancelar localizado. Al presionarlo se aborta la señal; hacé que el trabajo asíncrono respete la cancelación (por ejemplo, pasando signal a fetch) y tratá su rechazo como cancelación.

Apariencia y teclado

Todas las configuraciones aceptan icon, tooltip y shortcut. icon es el nombre de un ícono MUI. Un atajo activa la acción y se incluye en su tooltip; tooltip aporta el texto del tooltip. Los atajos deben ser válidos y únicos entre las acciones del formulario.

Usá variant para elegir el estilo MUI text, outlined o contained. El default es contained para submit y outlined para back y custom. layout tiene default horizontal; con vertical apila los grupos de acciones. wrap tiene default true y controla si se ajustan cuando falta espacio.

Defaults

• Etiqueta de submit: Guardar localizada; etiqueta de back: Volver localizada.
• loadingLabel usa por default la etiqueta normal; showSpinner usa true y cancelable, false.
• custom usa por default un array vacío, layout horizontal, wrap true y disableOtherActionsWhileRunning true.

Para operaciones de negocio tipadas que devuelven resultados o solicitan refresh de datos, consultá Action Engine.

Probar en vivo en el Lab