Dialog Fields

<!-- Language options -->
<div class="language-options">
  <a href="/README.md">English</a>
  <a href="/README.fr.md">Français</a>
</div>

§Description courte

Le composant DFDialog a pour but de faciliter la création de formulaires. Il utilise react-final-form en interne. Il prend en charge plusieurs types de champs prédéfinis, mais l'utilisateur peut en ajouter de nouveaux en enregistrant des contrôles personnalisés via registerDialogControl.

§Contrôles

• Contrôles de base
  • plain - texte statique
  • text - texte modifiable
  • multi-text - tableau de chaînes de caractères défini par l'utilisateur
  • checkbox - case à cocher
  • tumbler - interrupteur
  • radio - bouton radio
  • editable-list - liste de chaînes de caractères supprimables
  • multi-editable-list - liste multiple de chaînes de caractères supprimables
  • text area - zone de texte
  • select - liste déroulante
  • block - permet d'ajouter un ReactNode
• Enregistrement de contrôles personnalisés

§Fonctionnalités

• Vue intégrée et modale
• Un onglet et plusieurs formulaires à onglets
• Onglets verticaux/horizontaux
• Champs et onglets masqués
• Champs liés par leurs valeurs
• Validation au niveau du champ
• Validation au niveau du formulaire
• Onglets virtualisés
• Onglets clonables
• Champs groupés

§Installation

$ npm install @gravity-ui/dialog-fields
# Utilisez la version requise de react/react-dom si vous ne les avez pas encore installés
$ npm install @gravity-ui/dialog-fields react@18 react-dom@18

Selon votre gestionnaire de paquets, vous devrez peut-être installer manuellement les peerDependencies.

§Utilisation

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

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

function MyForm() {
  return (
    <DFDialog<FormValues>
      visible={true}
      headerProps={{
        title: 'Mon formulaire',
      }}
      onAdd={(form) => {
        console.log(form.getState().values);
        return Promise.resolve();
      }}
      fields={[
        {
          name: 'firstName',
          type: 'text',
          caption: 'Prénom',
          tooltip: 'Description du champ prénom',
        },
        {
          name: 'lastName',
          type: 'text',
          caption: 'Nom',
          tooltip: 'Description du champ nom',
        },
      ]}
    />
  );
}

Voir plus d'exemples dans storybook.