+++
title = "Редакторы опций пользовательских панелей"
+++

# Редакторы параметров пользовательской панели

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

Самый простой редактор - это компонент React, который принимает два реквизита: `value` и `onChange`. `value` содержит текущее значение параметра, а `onChange` обновляет его.

Редактор в приведенном ниже примере позволяет пользователю переключать логическое значение нажатием кнопки:

****Simple Editor.tsx**

```ts
import React from 'react';
import { Button } from '@harvest/ui';
import { StandardEditorProps } from '@harvest/data';

export const SimpleEditor: React.FC<StandardEditorProps<boolean>> = ({ value, onChange }) => {
  return <Button onClick={() => onChange(!value)}>{value ? 'Disable' : 'Enable'}</Button>;
};
```

Чтобы использовать редактор параметров пользовательской панели, используйте "добавить пользовательский редактор" в объекте "Options UI Builder" в вашем файле "module.ts". Настройте редактор для использования, установив свойство `editor` для компонента `Simple Editor`.
**module.ts**

```ts
export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions(builder => {
  return builder
    .addCustomEditor({
      id: 'label',
      path: 'label',
      name: 'Label',
      editor: SimpleEditor,
    });
});
```

## Добавьте настройки в редактор параметров вашей панели

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

Вы можете получить доступ к настройкам редактора через реквизит "элемент". Вот пример редактора, который заполняет выпадающий список диапазоном чисел. Диапазон определяется свойствами "от" и "до" в интерфейсе "Настройки".
**SimpleEditor.tsx**

```ts
interface Settings {
  from: number;
  to: number;
}

export const SimpleEditor: React.FC<StandardEditorProps<number, Settings>>  = ({ item, value, onChange }) => {
  const options: Array<SelectableValue<number>> = [];

  // Default values
  const from = item.settings?.from ?? 1;
  const to = item.settings?.from ?? 10;

  for (let i = from; i <= to; i++) {
    options.push({
      label: i.toString(),
      value: i,
    });
  }

  return <Select options={options} value={value} onChange={selectableValue => onChange(selectableValue.value)} />;
};
```

Теперь вы можете настроить редактор для каждой опции, настроив свойство "Настройки" в вызове "добавить пользовательский редактор".

```ts
export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions(builder => {
  return builder
    .addCustomEditor({
      id: 'index',
      path: 'index',
      name: 'Index',
      editor: SimpleEditor,
      settings: {
        from: 1,
        to: 10,
      }
    });
});
```

## Используйте результаты запроса в редакторе параметров вашей панели

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

> ** Примечание: ** Эта функция была введена в версии 7.0.3. Любой, кто использует более старую версию Harvest, увидит ошибку при использовании вашего плагина.

Контекст редактора доступен через реквизит "контекст". Фреймы данных, возвращаемые источником данных, доступны в разделе "context.data".

**SimpleEditor.tsx**

```ts
export const SimpleEditor: React.FC<StandardEditorProps<string>> = ({ item, value, onChange, context }) => {
  const options: SelectableValue<string>[] = [];

  if (context.data) {
    const frames = context.data;

    for (let i = 0; i < frames.length; i++) {
      options.push({
        label: frames[i].name,
        value: frames[i].name,
      });
    }
  }

  return <Select options={options} value={value} onChange={selectableValue => onChange(selectableValue.value)} />;
};
```

Создали ли вы пользовательский редактор, который, по вашему мнению, был бы полезен другим разработчикам плагинов? Подумайте о том, чтобы использовать его в качестве стандартного редактора!
