Рубрики
Без рубрики

Направленные данными React Forms Building в нескольких системах проектирования

Эта статья была первоначально опубликована здесь. Оригинальный автор: Система дизайна Ричарда Вшанского – это v … Tagged с React, JavaScript, Forms, Design.

Эта статья была первоначально опубликована здесь . Оригинальный автор: Ричард Всилианский

Система дизайна является очень мощным модным словом современной разработки приложений. Каждая технологическая компания пытается достичь последовательности и простого опыта разработчиков, включив один из них во все свои приложения.

Кроме того, многие из них открыты и публично доступны. Чтобы проиллюстрировать это, мы можем упомянуть IBM’s Углерод , Google Материал , или Red Hat’s Patternfly Анкет Эти библиотеки настраиваемы и просты в использовании со многими предопределенными компонентами, поэтому даже небольшие проекты могут использовать их, чтобы сделать свою собственную разработку проще, дешевле и быстрее, не жертвуя пользовательской идентичностью.

Тем не менее, выбор правильного особенно сложно, когда их так много. Из -за этого это отличная идея, чтобы начать с простого прототипа, но делать это не должно занять столько времени. Один инструмент, помогающий с этим, это Формы, управляемые данными ( ddf ), библиотека React для рендеринга и управления формами с использованием Подход, управляемый данными Анкет Этот подход принимает данные JSON и превращает их в полностью функциональные формы. Сложные формы могут быть «закодированы» за считанные минуты без каких -либо фактических знаний кода.

Давайте представим простой случай для реализации: регистрационная форма. Согласно нашему вымышленный Управление продуктом, форма состоит из нескольких элементов, которые необходимо ввести, которые пользователи должны ввести:

  • Прозвище
  • Эл. адрес
  • Пароль
  • Подтвердить Пароль
  • Условия подтверждения

Мы можем начать непосредственно с определения схемы форм, управляемой данными в соответствии с ее Определение Анкет

const schema = {
  fields: []
}

Схема – это объект, содержащий один необходимый атрибут: поля. Массив форм полей. Каждый из них определяется объектами, имеющими только Два необходимых атрибута : Имя и компонент.

const field = {
  name: ...,
  component: ...,
  ...additionalAttributes
}

Оба они являются строковыми значениями, определяющими, что именно их имена предполагают. Компонент зависит от используемого набора компонентов, но в библиотеках, предоставленных формами данных, мы можем найти Все базовые компоненты формы Под ключами, такими как Текстовое поле, выберите, флажок, радио, Textarea, ... Анкет Эти компоненты затем реализуют свои пользовательские атрибуты, большинство из них общие: метка, Helpertext, Options, ... Анкет В React атрибуты соответствуют компонентам.

Итак, давайте преобразуем наши элементы в определения полей:

  • Прозвище
{
  name: 'nickname',
  component: 'text-field'
}

Однако этого явно недостаточно, чтобы удовлетворить ( также вымышленные ) UX требования. Там нет метки и проверки-с такой конфигурацией, это всего лишь один входной элемент HTML. К счастью, в форме данных, управляемых данными, это действительно просто:

{
  name: 'nickname',
  component: 'text-field'
  label: 'Nick name',
  validate: [{type: 'required'}]
}

Есть введены два новых атрибута: этикетка и проверка. Подтвердить является массивом валидаторов — объектов или функций. Формы, управляемые данными, обеспечивают базовую проверку, охватывающую большинство случаев (длина, шаблоны), но они также могут быть настроены, предоставляя функция ( async functs также поддерживаются!) Или с использованием Validatormapper определить пользовательские типы. Эти пользовательские типы могут затем использоваться в объектах на основе строк.

Требуемый валидатор является одним из реализованных валидаторов библиотекой, поэтому мы можем использовать ее немедленно. (Мы могли бы добавить еще один атрибут в поле: Isrequired, логическое значение, которое добавляет необходимый знак на поле. Тем не менее, все входы требуются в нашей форме, поэтому лучше поместить одну ноту в начало формы. Мы сделаем это позже.)

Разница между Isrequired. (Материал дизайна пользовательского интерфейса)

  • Эл. адрес

Мы можем использовать знания, полученные в предыдущем абзаце, чтобы написать один и тот же объект для электронной почты, но электронная почта имеет дополнительное ограничение формата. Мы будем использовать проверка шаблона введите, чтобы применять это.

{
  name: 'email',
  component: 'text-field',
  label: 'Email',
  validate: [{
    type: 'required'
  } ,{
    type: 'pattern',
    pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$',
    message: 'Not valid email'
  }],
}

Проверка, запускаемой в поле электронной почты. (Семантический дизайн пользовательского интерфейса)

  • Пароль
{
  name: 'password',
  component: 'text-field',
  label: 'Password',
  validate: [{
    type: 'required'
   }, {
    type: 'min-length',
    threshold: 6,
   }],
  type: 'password',
  helperText: 'Password has to be at least 6 chars long'
}

Используется новый тип валидатора: мин длины Убедитесь, что значение будет иметь длину 6 или более. Тип: 'пароль' является стандартным типом входного элемента HTML, который показывает значение как точки. Helpertext Отдает дополнительную информацию в поле, ее положение и внешний вид зависит от библиотеки подержанных дизайнов.

Поле пароля с HelperText и Type Password. (Дизайн BlueprintJS)

  • Подтвердить Пароль

Давайте сделаем поворот здесь: существует требование, чтобы поле подтверждения пароля появилось только в том случае, если пользователи вводят какой -то пароль в поле выше. С точки зрения UX это не имеет большого смысла, но хорошо покажет еще одну особенность форм, управляемых данными: условные поля .

{
  name: 'confirm-password',
  component: 'text-field',
  type: 'password',
  validate: [{type: 'required'}],
  label: 'Confirm your password',
  condition: {when: 'password', isNotEmpty: true}
}

Формы, управляемые данными, предоставляют несколько типов условий — один из них- isnotempty Анкет Используя этот тип, мы можем убедиться, что пользователи должны сначала ввести пароль. DDF также позволяет гнездовать условия ( и, или не ), поэтому все комбинации возможны.

Тем не менее, нам все еще отсутствует, чтобы проверить, совпадает ли подтверждение, что и пароль. Как было сказано ранее, мы можем сделать это через предоставление функции в массиве проверки или добавления пользовательского типа в in Validatormapper . Мы будем использовать второй вариант, потому что нам нужно получить доступ ко всем значениям:

const validatorMapper = {
   'same-password': () => (value, allValues) => value !== allValues.password ? 'Password do not match' : undefined
}

Обратите внимание, что валидатор-это функция, возвращающая функцию ( функция высокого порядка .) Эта конструкция позволяет кэшировать результаты или передавать дополнительные аргументы из схемы. Мы будем использовать этот объект в качестве опоры позже. Теперь мы можем использовать этот тип в массиве проверки:

...
validate: [{type: 'same-password'}]
...

Обратите внимание, что мы можем удалить необходимый валидатор, так как он уже проверяется в поле «Первоначальный пароль».

Проверка поперечного поля и условное поле. (Patternfly 4 Design)

  • Условия подтверждения
{
  name: 'terms',
  component: 'checkbox',
  label: 'I agree with our business terms',
  validate: [{type: 'required'}]
}

Изменение компонента просто-просто замените строку компонента. Все остальное работает все же.

Компонент флажки. (Patternfly 3 дизайн)

Теперь мы можем собрать все поля в финальной схеме, добавив заголовок и описание:

const schema = {
 title: 'Registration form',
    description: 'All fields are required',
    fields: [{
            name: 'nickname',
            component: 'text-field',
            label: 'Nick name',
            validate: [{
                type: 'required'
            }]
        },
        {
            name: 'email',
            component: 'text-field',
            label: 'Email',
            validate: [{
                    type: 'required'
                },
                {
                    type: 'pattern',
                    pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$',
                    message: 'Not valid email'
                }
            ]
        },
        {
            name: 'password',
            component: 'text-field',
            label: 'Password',
            validate: [{
                    type: 'required'
                },
                {
                    type: 'min-length',
                    threshold: 6
                }
            ],
            type: 'password',
            helperText: 'Password has to be at least 6 chars long'
        },
        {
            name: 'confirm-password',
            component: 'text-field',
            type: 'password',
            validate: [{type: 'same-password'}],
            label: 'Confirm your password',
            condition: {
                when: 'password',
                isNotEmpty: true
            }
        },
        {
            name: 'terms',
            component: 'checkbox',
            label: 'I agree with our business terms',
            validate: [{
                type: 'required'
            }]
        }
    ]
};

Всего за несколько минут мы написали полностью функциональную и человеческую читаемую форму со многими расширенными функциями.

Теперь давайте заставим его работать в нашем проекте React.

Первое, что нам нужно сделать, это установить r eact-form-renderer:

npm install --save @data-driven-forms/react-form-renderer

или же

yarn add @data-driven-forms/react-form-renderer

Это ядро библиотеки форм, управляемых данными. Рендерер является компонентом, ответственным за преобразование схемы в компоненты React, и предоставляет все функции, которые мы упомянули в этой статье.

После того, как мы его установили, мы можем импортировать его в наш проект:

import React from 'react';
import FormRenderer from '@data-driven-forms/react-form-renderer';
// if you want to treeshake the component
// import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
const schema = { ... }; // defined earlier
const validatorMapper = { ... }; // defined earlier, not required

const App = () => {
 return(
  console.log(values)}
      FormTemplate={FormTemplate}
      componentMapper={componentMapper}
      validatorMapper={validatorMapper} *// not required*
   />
 )
};

OnSubmit – это функция отправки. Как правило, это была бы функция, делающая запрос в конечную точку API. Схема – это объект, который мы создали в предыдущей главе. Тем не менее, два реквизита все еще отсутствуют: FormTemplate и ComponentMapper. Это точка этой статьи: эти два реквизита определяют компоненты, которые использует форма. Componentmapper Включает компоненты, которые мы используем в схеме: текстовое поле , Флакторы , так далее. FormTemplate Окутает форму, рендерирует кнопки, покажите заголовок.

Мы можем внедрить наши собственные компоненты и шаблоны, но формы, управляемые данными, предлагают несколько подготовленных библиотеков:

Доступные данные, управляемые данными, библиотеки.

Мы называем эти библиотеки «Mappers», потому что они отображают атрибуты и функции, управляемые данными, с реквизитами библиотек. Например, ярлык Атрибут из схемы сопоставлен с FormLabel Материал компонент пользовательского интерфейса.

Использование этих карточек настолько просто, насколько это возможно. Установите их, импортируйте и используйте их в компоненте рендеринга.

import React from 'react';
import FormRenderer from '@data-driven-forms/react-form-renderer';
import { FormTemplate, componentMapper } from '@data-driven-forms/mui-component-mapper';
// you can also treeshake whatever component you need
// import FormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
// import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
// import Checkbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
// const componentMapper = { 'text-field': TextField, checkbox: Checkbox }

const schema = { ... }; // defined earlier
const validatorMapper = { ... }; // defined earlier

const App = () => {
 return(
     console.log(values)}
      FormTemplate={FormTemplate}
      componentMapper={componentMapper}
      validatorMapper={validatorMapper}
    />
 )
};

Поскольку API -интерфейсы всех картофелей одинаковы, мы можем быстро переключаться между ними и выбрать тот, который нам нравится больше всего.

Тем не менее, мы все еще должны устанавливать библиотеки компонентов и их стили отдельно. На странице документации «Формы» приведены ссылки, ведущие к руководству по установке каждой библиотеки, или вы можете использовать примеры ниже в качестве стартовых точек. Имейте в виду, что некоторые библиотеки перезаписывают глобальные стили, поэтому убедитесь, что вы включите только один из них одновременно.

Материальная форма пользовательского интерфейса

Живая демонстрация

Форма Blueprintjs

Живая демонстрация

Семантическая форма пользовательского интерфейса

Живая демонстрация

Паттернфляй 4 Форма

Живая демонстрация

Patternfly 3 форма

Живая демонстрация

Используя формы, управляемые данными, мы написали общий код, определяющий схему формы, а все остальное предоставляется библиотекой. Мы можем запустить все эти проекты и взглянуть на то, как библиотеки отличаются друг от друга. Все эти формы полностью функциональны, поэтому во время прототипирования мы можем кодировать всю форму и переключить библиотеку дизайна в любое время.

Кроме того, легко настраивать каждую часть формы-если вам не нравятся заголовки или кнопки, просто переключите их в FormTemplate. Или вы можете заменить все компоненты, добавить свои пользовательские и многое другое.

Кроме того, есть более сложные компоненты, такие как Мастер или Выберите — Написание их с нуля может занять часы, использование их в формах, управляемых данными, так же просто, как и использование текстовое поле Анкет

A Двойной список выберите Компонент, предоставленный формами данных. (Материал дизайна пользовательского интерфейса)

Если вы хотите использовать разные или пользовательские компоненты/библиотеку дизайна, Forms, управляемые данными, предоставляет Простая командная строка Это генерирует структуру всего пакета, он может даже добавить определения типографии. Просто беги пряжа сгенерировать Template Внутри корневой папки DDF Репозиторий и интерактивный CLI будет направлять вас. В следующий раз мы рассмотрим эту команду и создаем пользовательский карт.

Формы, управляемые данными Проект полностью открыт на GitHub Анкет Если вы найдете этот проект интересным, пожалуйста, присоединяйтесь к нашему сообществу. Мы открыты для всех вкладов, и мы глубоко ценим каждую звезду, которую мы получаем. Есть также официальная учетная запись в Твиттере @Datadrivenforms Вы можете следовать, чтобы получить все последние новости.

Оригинал: “https://dev.to/datadrivenforms/data-driven-react-forms-building-in-multiple-design-systems-5d41”

Читайте ещё по теме: