Actions do formulário

As Form Actions são os botões renderizados por um DyonaForm: as ações integradas submit e back, além das ações custom definidas pela aplicação. Elas configuram a interface do formulário e chamam os callbacks React fornecidos a DyonaForm.

Elas não são o Action Engine genérico. Form Actions não usam DyonaAction, executors, scopes, records, parâmetros, resultados nem diretivas de refresh. Use-as para o fluxo local de um formulário; use Action Engine quando a aplicação precisar executar uma ação de negócio tipada.

Configuração

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 o botão que chama onSubmit(values, {signal}); ele valida o formulário antes de chamar o handler. back configura o botão que chama onBack({signal}). Um botão é renderizado apenas quando o callback correspondente é fornecido.

custom adiciona botões que chamam onAction(id, values, {signal}). Cada ação custom tem um id único e não vazio e um label obrigatório; esses botões são renderizados quando há ações custom e onAction.

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

<DyonaForm
  schema={schema}
  onBack={async ({signal}) => { /* navegar, respeitando signal quando necessário */ }}
  onAction={async (id, values, {signal}) => { if (id === 'preview') { /* usar values e signal */ } }}
  onSubmit={async (values, {signal}) => { /* salvar values */ }}
/>

Validação e trabalho assíncrono

submit sempre valida e normaliza os valores antes de onSubmit. Uma ação custom valida somente com validate: true; caso contrário, recebe valores normalizados sem bloquear pela validação do formulário. back não recebe valores nem valida.

Os handlers podem ser síncronos ou retornar uma promise. Enquanto um handler está pendente, seu botão mostra loadingLabel (ou seu rótulo normal) e, por padrão, um spinner. DYONA Form executa somente uma ação por vez. Por padrão, disableOtherActionsWhileRunning é true, então os outros botões são desabilitados; com false, continuam visualmente habilitados, mas uma segunda ação não pode começar.

Cada execução recebe um novo AbortSignal no contexto. Com cancelable: true, a ação em curso também mostra um botão Cancelar localizado. Ao pressioná-lo, a sinalização é abortada; faça o trabalho assíncrono respeitar o cancelamento (por exemplo, passando signal a fetch) e trate sua rejeição como cancelamento.

Aparência e teclado

Todas as configurações aceitam icon, tooltip e shortcut. icon é o nome de um ícone MUI. Um atalho ativa a ação e é incluído em seu tooltip; tooltip fornece o texto do tooltip. Os atalhos devem ser válidos e únicos entre as ações do formulário.

Use variant para escolher o estilo MUI text, outlined ou contained. O default é contained para submit e outlined para back e custom. layout tem default horizontal; vertical empilha os grupos de ações. wrap tem default true e controla se eles quebram quando falta espaço.

Defaults

• Rótulo de submit: Salvar localizado; rótulo de back: Voltar localizado.
• loadingLabel usa por default o rótulo normal; showSpinner usa true e cancelable, false.
• custom usa por default um array vazio, layout horizontal, wrap true e disableOtherActionsWhileRunning true.

Para operações de negócio tipadas que retornam resultados ou solicitam refresh de dados, consulte Action Engine.

Testar ao vivo no Lab