Перейти к основному содержимому

Типы компонентов

Что это такое​

У каждого Компонента есть поле Тип, которое определяет, какой визуальный вариант используется для его отображения. Это поле не является фиксированным списком, сохранённым в базе данных — оно динамическое и строится из папок, которые существуют внутри website/src/components/<Компонент>/. Например, для Banner:

website/src/components/Banner/
├── index.jsx           # компонент-«маршрутизатор»: выбирает тип для отображения
├── Default/
│   ├── index.jsx        # сам вариант
│   ├── index.less
│   ├── info.json        # название/описание типа по языкам
│   └── config.json       # возможности типа (например, поддерживает ли действия)
├── Secondary/
│   └── ...
└── DefaultSubBanner/
    └── ...

Каждая папка внутри Banner/ — это тип, выбираемый в поле Тип в форме редактирования этого компонента (например, при добавлении или редактировании Banner на странице именно в этой форме появляется выпадающий список с доступными типами).

В выпадающем списке пользователь видит переведённую метку, заданную в info.json (например, «По умолчанию»), но в поле type компонента сохраняется имя папки (например, Default) — именно это имя папки компонент-«маршрутизатор» затем использует, чтобы выбрать, какой вариант отображать (см. info.json и config.json ниже).

Имя «Sub» в таких папках, как DefaultSubBanner, не означает вложенную подпапку внутри другого типа — это просто ещё один тип на том же уровне, что и остальные, но с соглашением об имени, которое указывает, что это более сдержанный/второстепенный вариант базового типа.

info.json и config.json​

  • info.json — определяет метку и описание типа по языкам. Именно метка (label) отображается в выпадающем списке формы редактирования: 
    {
      "en": { "label": "Default", "description": "Add a banner." },
      "pt": { "label": "Padrão", "description": "Adiciona um banner." }
    }
  • config.json — определяет возможности типа. Сейчас единственный параметр — action, который управляет тем, появляется ли раздел «Действия» в форме и отображается ли он в этом типе: 
    { "action": true }

Эти два файла читаются в реальном времени службой на сервере (server/services/components/<компонент>/list/), которая обходит папки внутри website/src/components/<Компонент>/ и возвращает список доступных типов — именно это питает выпадающий список «Тип» в форме редактирования этого компонента. Поэтому не нужно перезапускать сервер и не нужно изменять базу данных, чтобы добавить новый тип — достаточно создать папку.

В компоненте-«маршрутизаторе» (Banner/index.jsx) сохранённый type используется, чтобы решить, какой вариант импортировать и отобразить:

if (props.type === "Default") {
  layout = <Default {...props} actions={renderedActions} />;
} else if (props.type === "Secondary") {
  layout = <Secondary {...props} actions={renderedActions} />;
} else if (props.type === "DefaultSubBanner") {
  layout = <DefaultSubBanner {...props} actions={renderedActions} />;
}

Как создать новый тип​

  1. Создайте новую папку внутри website/src/components/<Компонент>/ (например, Banner/Highlight/).
  2. Внутри неё создайте index.jsx (React-компонент этого варианта), index.less (стили), info.json (метка/описание по языкам) и config.json (с action: true или false).
  3. В index.jsx родительского компонента (например, Banner/index.jsx) импортируйте новый компонент и добавьте его в условие, которое выбирает вариант по type.
  4. Новый тип автоматически появится в выпадающем списке «Тип» формы редактирования этого компонента, а в качестве сохранённого значения будет использоваться имя папки.

Следующий шаг​

Подробнее изучите каждый компонент: Баннер, Содержимое, Список, Слайдер, Функциональность.