Класс TagSelector

Описание

Класс реализует виджет для множественного выбора элементов.

Импорт в ES6

import { TagSelector } from 'ui.entity-selector';

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

var dialog = new BX.UI.EntitySelector.TagSelector(options);

События

Класс TagSelector является наследником класса EventEmitter. Обработчики события можно установить либо с помощью опции events, либо через стандартный метод EventEmitter.subscribe.

const options = {
	events: {
		onBeforeTagAdd: (event: BaseEvent) => {
			const selector: TagSelector = event.getTarget();
			const { tag } = event.getData();
			if (tag.getTitle() === 'xxx')
			{
				event.preventDefault();
			}
		}
	}
}

const options = {
	events: {
		onTagAdd: (event: BaseEvent) => {
			const selector: TagSelector = event.getTarget();
			const { tag } = event.getData();
		}
	}
}

const options = {
	events: {
		onAfterTagAdd: (event: BaseEvent) => {
			const selector: TagSelector = event.getTarget();
			const { tag } = event.getData();
		}
	}
}

const options = {
	events: {
		onBeforeTagRemove: function(event) {
			const selector = event.getTarget();
			const { tag } = event.getData();
			if (tag.getTitle() === 'aaa')
			{
				event.preventDefault();
			}
		},
	}
}

const options = {
	events: {
		onTagRemove: function(event) {
			const selector = event.getTarget();
			const { tag } = event.getData();
		},
	}
}

const options = {
	events: {
		onAfterTagRemove: function(event) {
			const selector = event.getTarget();
			const { tag } = event.getData();
		},
	}
}

const options = {
	events: {
		onContainerClick: function(event) {
			const selector = event.getTarget();
			selector.hideAddButton();
			selector.showTextBox();
			selector.focusTextBox();
		}
	}
}

const options = {
	events: {
		onInput: function(event) {
			const selector = event.getTarget();
			const { event: inputEvent } = event.getData();
			const text = selector.getTextBoxValue();
		}
	}
}

const options = {
	events: {
		onBlur: function(event) {
			const selector = event.getTarget();
			const { event: focusEvent } = event.getData();

			selector.clearTextBox();
			selector.hideTextBox();
			selector.showAddButton();
		}
	}
}

const options = {
	events: {
		onKeyUp: function(event) {
			const selector = event.getTarget();
			const { event: keyboardEvent } = event.getData();
		}
	}
}

const options = {
	events: {
		onEnter: function(event) {
			const selector = event.getTarget();
			const { event: keyboardEvent } = event.getData();
		}
	}
}

const options = {
	events: {
		onMetaEnter: function(event) {
			const selector = event.getTarget();
			const { event: keyboardEvent } = event.getData();
		}
	}
}

const options = {
	events: {
		onKeyDown: function(event) {
			const selector = event.getTarget();
			const { event: keyboardEvent } = event.getData();
		}
	}
}

const options = {
	events: {
		onAddButtonClick: function(event) {
			const selector = event.getTarget();
			const { event: mouseEvent } = event.getData();
		}
	}
}

const options = {
	events: {
		onCreateButtonClick: function(event) {
			const selector = event.getTarget();
			const { event: mouseEvent } = event.getData();
		}
	}
}

Конструктор

constructor(selectorOptions: TagSelectorOptions): TagSelector

Создает объект класса TagSelector.

selectorOptions — опции диалога, которые определяются структурой TagSelectorOptions.

export type TagSelectorOptions = {
	id?: string,
	items?: TagItemOptions[],
	dialogOptions?: DialogOptions,
	multiple?: boolean,
	readonly?: boolean,
	locked?: boolean,
	deselectable?: boolean,
	events?: { [eventName: string]: (event: BaseEvent) => void },
	showAddButton?: boolean,
	showCreateButton?: boolean,
	showTextBox?: boolean,
	addButtonCaption?: string,
	addButtonCaptionMore?: string,
	createButtonCaption?: string,
	placeholder?: string,
	maxHeight?: number,
	textBoxAutoHide?: boolean,
	textBoxWidth?: string | number,
	tagAvatar?: string,
	tagAvatarOptions?: AvatarOptions,
	tagMaxWidth?: number,
	tagTextColor?: string,
	tagBgColor?: string,
	tagFontWeight?: string
}

• id?: string

  Идентификатор виджета.



• items?: TagItemOptions[]

  Массив элементов виджета. Каждый элемент определяется структурой TagItemOptions.



• dialogOptions?: DialogOptions

  Задает настройки для диалога выбора сущностей, которые определяются структурой DialogOptions.
  Наличие этой опции определяет открытие диалога выбора сущностей по нажатию ссылки "Добавить".



• multiple?: boolean

  По умолчанию виджет работает в режиме множественного выбора (значение true).
  Значение false ограничивает выбор только одним элементом.



• readonly?: boolean

  Включает режим "только для чтения". В этом режиме не работает удаление элементов, а также отсутствуют ссылки "Добавить" и "Создать".



• locked?: boolean

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



• deselectable?: boolean

  Если задано false, элементы виджета нельзя удалить. По умолчанию true.
  Это значение может быть переопределено в конкретном элементе.



• events?: { [eventName: string]: (event: BaseEvent) => void }

  Задает обработчики событий виджета.



• showAddButton?: boolean

  Определяет отображение кнопки "Добавить". По умолчанию true — кнопка выводится.



• showCreateButton?: boolean

  Определяет отображение кнопки "Создать". По умолчанию false — кнопка не выводится.



• showTextBox?: boolean

  Определяет отображение поля ввода. По умолчанию false.



• addButtonCaption?: string

  Заголовок кнопки "Добавить".



• addButtonCaptionMore?: string

  Заголовок кнопки "Еще".



• createButtonCaption?: string

  Заголовок кнопки "Создать".



• placeholder?: string

  Текст плейсхолдера в поле ввода.



• maxHeight?: number

  Максимальная высота виджета в пикселях.



• textBoxAutoHide?: boolean

  Определяет необходимость скрытия поля ввода после потери фокуса или после нажатия клавиши Enter.



• textBoxWidth?: string | number

  Ширина поля ввода. Определяется в пикселях (задается числом) или с единицей измерения (задается строкой).



• tagAvatar?: string

  Определяет аватар по умолчанию для всех элементов виджета. Указывается либо путь к изображению, либо файл в формате Data URL.
  Это значение может быть переопределено в конкретном элементе. По умолчанию аватар не задан.



• tagAvatarOptions?: AvatarOptions

  Дополнительные настройки аватара по умолчанию для всех элементов виджета.
  Это значение может быть переопределено в конкретном элементе.
  Определяется структурой AvatarOptions.



• tagMaxWidth?: number

  Определяет максимальную ширину для всех элементов виджета в пикселях. По умолчанию 200 пикселей.
  Это значение может быть переопределено в конкретном элементе.



• tagTextColor?: string

  Определяет цвет заголовка по умолчанию для всех элементов виджета. Это значение может быть переопределено в конкретном элементе.



• tagBgColor?: string

  Определяет цвет фона по умолчанию для всех элементов виджета. Это значение может быть переопределено в конкретном элементе.



• tagFontWeight?: string

  Определяет начертание шрифта (нормальное или полужирное) по умолчанию для всех элементов виджета.
  Это значение может быть переопределено в конкретном элементе.

Методы