Dialog Fields

§Descripción corta

El propósito del componente DFDialog es facilitar la creación de formularios, utilizando react-final-form internamente. Soporta varios tipos de campos predefinidos, pero el usuario puede extenderlo registrando nuevos mediante registerDialogControl.

§Controles

• Controles base
  • plain - texto estático
  • text - texto editable
  • multi-text - array de strings definido por el usuario
  • checkbox - casilla de verificación
  • tumbler - interruptor
  • radio - botón de opción
  • editable-list - lista de strings eliminables
  • multi-editable-list - lista múltiple de strings eliminables
  • text area - área de texto
  • select - selector
  • block - permite añadir ReactNode
• Registro de control personalizado

§Características

• Vista en línea y modal
• Una pestaña y varios formularios en pestañas
• Pestañas verticales/horizontales
• Campos y pestañas ocultos
• Campos enlazados por valores
• Validación a nivel de campo
• Validación a nivel de formulario
• Pestañas virtualizadas
• Pestañas clonables
• Campos agrupados

§Instalación

$ npm install @gravity-ui/dialog-fields
# Usa la versión requerida de react/react-dom en caso de que aún no las hayas instalado
$ npm install @gravity-ui/dialog-fields react@18 react-dom@18

Dependiendo de tu gestor de paquetes, es posible que necesites instalar manualmente las peerDependencies.

§Uso

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

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

function MyForm() {
  return (
    <DFDialog<FormValues>
      visible={true}
      headerProps={{
        title: 'Mi formulario',
      }}
      onAdd={(form) => {
        console.log(form.getState().values);
        return Promise.resolve();
      }}
      fields={[
        {
          name: 'firstName',
          type: 'text',
          caption: 'Nombre',
          tooltip: 'Descripción del campo nombre',
        },
        {
          name: 'lastName',
          type: 'text',
          caption: 'Apellido',
          tooltip: 'Descripción del campo apellido',
        },
      ]}
    />
  );
}

Consulta más ejemplos en storybook.