Dialog Fields

§Descrição curta

O componente DFDialog tem como objetivo facilitar a criação de formulários, utilizando react-final-form internamente. Ele suporta diversos tipos de campos pré-definidos, mas o usuário pode estendê-lo registrando novos tipos através da função registerDialogControl.

§Controles

• Controles base
  • plain - texto estático
  • text - texto editável
  • multi-text - array de strings definido pelo usuário
  • checkbox - caixa de seleção
  • tumbler - interruptor
  • radio - botão de rádio
  • editable-list - lista de strings removíveis
  • multi-editable-list - lista múltipla de strings removíveis
  • text area - área de texto
  • select - seleção
  • block - permite adicionar ReactNode
• Registro de controle customizado

§Funcionalidades

• Visualização in-place e modal
• Formulário em uma aba e formulários em várias abas
• Abas verticais/horizontais
• Campos e abas ocultos
• Campos vinculados por valores
• Validação em nível de campo
• Validação em nível de formulário
• Abas virtualizadas
• Abas clonáveis
• Campos agrupados

§Instalação

$ npm install @gravity-ui/dialog-fields
# Use a versão requerida de react/react-dom caso ainda não as tenha instalado
$ npm install @gravity-ui/dialog-fields react@18 react-dom@18

Dependendo do seu gerenciador de pacotes, pode ser necessário instalar as peerDependencies manualmente.

§Uso

import {DFDialog, FormApi} from '@gravity-ui/dialog-fields';

interface FormValues {
  firstName: string;
  lastName: string;
}

function MyForm() {
  return (
    <DFDialog<FormValues>
      visible={true}
      headerProps={{
        title: 'Meu formulário',
      }}
      onAdd={(form) => {
        console.log(form.getState().values);
        return Promise.resolve();
      }}
      fields={[
        {
          name: 'firstName',
          type: 'text',
          caption: 'Nome',
          tooltip: 'Descrição para o campo nome',
        },
        {
          name: 'lastName',
          type: 'text',
          caption: 'Sobrenome',
          tooltip: 'Descrição para o campo sobrenome',
        },
      ]}
    />
  );
}

Veja mais exemplos no storybook.