form-builder-npm-lib

FormBuilder

Установка

Для установки плагина используйте следующую команду:

npm install form-builder-npm-lib

Важно: для работы необходимы дополнительные зависимости. Установите их командой:

npm install clsx react-imask

---

Описание

FormBuilder — клиентский React-компонент, предназначенный для упрощения создания форм. Основная его цель — интеграция с хуком useFormBuilder, который обеспечивает гибкость и управление состоянием формы. В компонент передается основной пропс — schema, где можно задать поля и логику их работы.

---

Актуальные типы полей:

• FORM_WRAPPER_SCHEMA
• REACT_NODE_SCHEMA
• INPUT_FIELD_SCHEMA
• ARRAY_FIELDS_SCHEMA
• BLOCK_WRAPPER_SCHEMA

Неактуальные типы полей:

• BLOCK_SCHEMA
• CUSTOM_FIELD_WRAPPER_SCHEMA
• ADDITION_PROPS

Рекомендуется избегать использования устаревших типов, так как они будут постепенно удаляться из проекта.

---

Схемы полей

INPUT_FIELD_SCHEMA

Часто используемая схема для создания полей ввода.

Пример:

const schema: INPUT_FIELD_SCHEMA = {
  type: 'input_field',
  props: {
    name: 'test',
    labelText: 'label',
    hintText: 'hint',
  },
};

Результат:

const formData = {
  test: 'data',
};

Дополнительные пропсы:

• keyWay
  Позволяет задать вложенность поля:

  const schema: INPUT_FIELD_SCHEMA = {
    type: 'input_field',
    props: {
      keyWay: ['test1', 'test2', 'test3'],
      labelText: 'label',
      hintText: 'hint',
    },
  };

  Результат:

  const formData = {
    test1: {
      test2: {
        test3: 'data',
      },
    },
  };

• onBlurValidation
  Добавляет проверку при событии onBlur.

  Тип:

  type onBlurValidation = { required: boolean; fun: (data: any) => boolean };

  • required: указывает, обязательно ли поле.

• ownerInputComponent
  Позволяет использовать кастомный компонент ввода. Обязательные параметры: value и onChange. Все переданные пропсы будут доступны в вашем компоненте, но value, onChange, isError, isErrorMessage, onBlur будут перезаписаны.

---

ARRAY_FIELDS_SCHEMA

Схема для создания массивов в форме.

Пример:

const schemes: ARRAY_FIELDS_SCHEMA = [
  {
    type: 'array_fields',
    props: {
      name: 'test_arr',
      children: [
        {
          type: 'input_field',
          props: {
            name: 'test',
            labelText: 'label',
            hintText: 'hint',
            placeholder: 'placeholder',
          },
        },
      ],
    },
  },
];

Результат:

const formData = {
  test_arr: [
    {
      test: '123213',
    },
  ],
};

Если не указать name в поле, результат будет:

const formData = {
  test_arr: ['123123123123'],
};

---

FORM_WRAPPER_SCHEMA

Используется как обертка для формы. Сбрасывает счетчик массива в ARRAY_FIELDS_SCHEMA, поэтому данные не будут добавлены в массив.

Пример:

const schemes: ARRAY_FIELDS_SCHEMA = [
  {
    type: 'form_wrapper',
    props: {
      name: 'test_arr',
      children: [
        {
          type: 'input_field',
          props: {
            name: 'test',
            labelText: 'label',
            hintText: 'hint',
            placeholder: 'placeholder',
          },
        },
      ],
    },
  },
];

Результат:

const formData = {
  test_arr: {
    test: '123123132132',
  },
};

---

BLOCK_WRAPPER_SCHEMA

Создает обертку, которая не сбрасывает счетчик массива. Полезно для добавления вспомогательных компонентов.

---

REACT_NODE_SCHEMA

Позволяет встроить произвольный ReactNode в схему.

---

Для разработки

• Для патча версии

npm version patch

• Для сборки

npm run rollup