Dialog Fields

§Краткое описание

Компонент DFDialog предназначен для упрощения создания форм и использует библиотеку react-final-form. Он поддерживает несколько предустановленных типов полей, список которых можно расширить, зарегистрировав новые с помощью registerDialogControl.

§Контролы

• Базовые контролы:
  • plain — статический текст;
  • text — редактируемый текст;
  • multi-text — пользовательский массив строк;
  • checkbox — чекбокс;
  • tumbler — переключатель;
  • radio — радиокнопка;
  • editable-list — список с возможностью удаления строк;
  • multi-editable-list — многоуровневый список с возможностью удаления строк;
  • text area — текстовая область;
  • select — селект (выпадающий элемент);
  • block — позволяет добавить ReactNode.
• Пользовательские контролы.

§Функциональные возможности

• Встроенный и модальный вид.
• Формы с одной вкладкой и несколькими вкладками.
• Вертикальные и горизонтальные вкладки.
• Скрытые поля и вкладки.
• Связь полей по значениям.
• Валидация на уровне полей.
• Валидация на уровне формы.
• Виртуализация вкладок.
• Клонирование вкладок.
• Группировка полей.

§Установка

npm install @gravity-ui/dialog-fields

Необходимо установить все обязательные peer-зависимости:

npm install -D  @gravity-ui/uikit@^5 @bem-react/classname@1.6 react@^17

§Использование

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

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

function MyForm() {
  return (
    <DFDialog<FormValues>
      visible={true}
      headerProps={{
        title: 'My form',
      }}
      onAdd={(form) => {
        console.log(form.getState().values);
        return Promise.resolve();
      }}
      fields={[
        {
          name: 'firstName',
          type: 'text',
          caption: 'First name',
          tooltip: 'Description for first name field',
        },
        {
          name: 'lastName',
          type: 'text',
          caption: 'LastName',
          tooltip: 'Description for last name field',
        },
      ]}
    />
  );
}

§Условная видимость

Поля и вкладки поддерживают visibilityCondition. Если when — строка, isActive получает значение одного поля:

visibilityCondition: {
  when: 'register',
  isActive: (value) => Boolean(value),
}

Для зависимости от нескольких полей передайте массив имён. isActive получит значения отдельными аргументами в том же порядке, что и имена в when:

visibilityCondition: {
  when: ['multiConsumer', 'register'],
  isActive: (multiConsumer, register) => Boolean(multiConsumer && register),
}

Имена задаются путями от корня формы, включая префиксы вкладок, например general.register. Видимость пересчитывается при изменении любого указанного поля. Скрытое по условию поле размонтируется, а не просто скрывается визуально.

C дополнительными примерами можно ознакомиться в Storybook.