Pular para o conteúdo principal

Label

O que é Label​

label é um field visual, sem dados. Ele renderiza um bloco informativo em uma posição normal da grade do DYONA Form, mas não participa de initialValues nem é incluído no onSubmit.

Ele pode usar grid, fullWidth, helperText, tooltip, visible e visibleWhen. Use-o quando o estado da aplicação precisar comunicar informações sem criar um valor de formulário.

As severities disponíveis são:

  • info (default)
  • success
  • warning
  • error

Exemplo mínimo​

{
  "name": "customerNotice",
  "type": "label",
  "label": "Informações da conta do cliente",
  "helperText": "Revise o status do cliente antes de continuar.",
  "severity": "info",
  "grid": {
    "xs": 12
  }
}

Estados visuais​

{"name":"noticeInfo","type":"label","label":"Informações da conta","severity":"info"}
{"name":"noticeSuccess","type":"label","label":"O cliente é preferencial","severity":"success"}
{"name":"noticeWarning","type":"label","label":"O cliente tem faturas vencidas","severity":"warning"}
{"name":"noticeError","type":"label","label":"O cliente está bloqueado","severity":"error"}

DYONA usa automaticamente a cor e o ícone padrão correspondentes a cada severity.

Caso empresarial: status do cliente​

O componente completo abaixo usa um select de dados e quatro labels condicionais. Ele pode ser copiado e colado e usa somente a API pública atual de @typhonsoftware/dyona-form.

import {useState} from 'react';
import {DyonaForm, type DyonaFormSchema, type DyonaFormValues} from '@typhonsoftware/dyona-form';

const schema: DyonaFormSchema = {
  title: 'Operação de cliente', hideSingleTab: true,
  tabs: [{id: 'customer', title: 'Cliente', rows: [{columns: [
    {name: 'customerStatus', label: 'Status do cliente', type: 'select', options: [{value: 'normal', label: 'Normal'}, {value: 'preferred', label: 'Preferencial'}, {value: 'overdue', label: 'Vencido'}, {value: 'blocked', label: 'Bloqueado'}], grid: {xs: 12}},
    {name: 'customerNormal', type: 'label', label: 'A conta do cliente está normal', helperText: 'A operação pode continuar normalmente.', severity: 'info', visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'normal'}, grid: {xs: 12}},
    {name: 'customerPreferred', type: 'label', label: 'O cliente é preferencial', helperText: 'Aplique as condições comerciais para clientes preferenciais.', severity: 'success', visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'preferred'}, grid: {xs: 12}},
    {name: 'customerOverdue', type: 'label', label: 'O cliente tem faturas vencidas', helperText: 'Revise a conta corrente antes de confirmar a operação.', severity: 'warning', visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'overdue'}, grid: {xs: 12}},
    {name: 'customerBlocked', type: 'label', label: 'O cliente está bloqueado', helperText: 'Esta operação requer uma revisão autorizada.', severity: 'error', visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'blocked'}, grid: {xs: 12}},
  ]}]}], actions: {submit: {label: 'Confirmar'}},
};

export function CustomerStatusForm() {
  const [submittedValues, setSubmittedValues] = useState<DyonaFormValues | null>(null);
  return <><DyonaForm schema={schema} initialValues={{customerStatus: 'normal'}} onSubmit={setSubmittedValues} />{submittedValues && <pre>{JSON.stringify(submittedValues, null, 2)}</pre>}</>;
}

Por exemplo, o label de vencido depende do mesmo select:

{
  "name": "customerOverdue",
  "type": "label",
  "label": "O cliente tem faturas vencidas",
  "helperText": "Revise a conta corrente antes de confirmar a operação.",
  "severity": "warning",
  "visibleWhen": {"field": "customerStatus", "operator": "equals", "value": "overdue"},
  "grid": {"xs": 12}
}

Como o fluxo funciona​

customerStatus
      ↓
visibleWhen
      ↓
label correspondente

customerStatus pertence aos dados do formulário. Os labels reagem apenas visualmente a esse status e não aparecem no objeto enviado pelo onSubmit.

Isso é especialmente útil para:

  • avisos operacionais;
  • status de clientes;
  • restrições comerciais;
  • validações de negócio informativas;
  • avisos antes de continuar uma operação.

Continue aprendendo​