Пример
|
---|
const options = { events: { onBeforeTagAdd: (event: BaseEvent) => { const selector: TagSelector = event.getTarget(); const { tag } = event.getData(); if (tag.getTitle() === 'xxx') { event.preventDefault(); } } } } |
Класс TagSelector
Описание
Класс реализует виджет для множественного выбора элементов.
Импорт в ES6
import { TagSelector } from 'ui.entity-selector';
Использование в ES5
var dialog = new BX.UI.EntitySelector.TagSelector(options);
События
Класс TagSelector
является наследником класса EventEmitter
. Обработчики события можно установить либо с помощью опции events, либо через стандартный метод EventEmitter.subscribe
.
Событие | Описание | С версии | ||
---|---|---|---|---|
onBeforeTagAdd | Вызывается перед добавлением элемента в виджет. На данном событии можно запретить добавлять элемент.
В данных события содержится добавляемый элемент (объект класса TagItem) в свойстве tag .
| |||
onTagAdd | Вызывается после добавления элемента в виджет, но перед его отрисовкой.
В данных события содержится добавляемый элемент (объект класса TagItem) в свойстве tag .
| |||
onAfterTagAdd | Вызывается после добавления элемента и его отрисовки в виджете.
| |||
onBeforeTagRemove | Вызывается перед удалением элемента из виджета.
На данном событии можно запретить добавлять элемент. В данных события содержится удаляемый элемент (объект класса TagItem) в свойстве tag .
| |||
onTagRemove | Вызывается после удаления элемента из виджета, но перед визуальным исчезновением.
В данных события содержится удаляемый элемент (объект класса TagItem) в свойстве tag .
| |||
onAfterTagRemove | Вызывается после удаления элемента из виджета.
В данных события содержится удаляемый элемент (объект класса TagItem) в свойстве tag .
| |||
onContainerClick | Вызывается по нажатию на контейнер всего виджета. Может использоваться, например, для установки фокуса в поле ввода.
| |||
onInput | Вызывается при добавлении текста в поле ввода.
В данных события в свойстве event содержится объект события InputEvent.
| |||
onBlur | Вызывается при потере фокуса в поле ввода.
В данных события в свойстве event содержится объект события FocusEvent.
| |||
onKeyUp | Вызывается после нажатия клавиши клавиатуры в поле ввода.
В данных события в свойстве event содержится объект события KeyboardEvent.
| |||
onEnter | Вызывается при нажатии клавиши Enter в поле ввода.
В данных события в свойстве event содержится объект события KeyboardEvent.
| |||
onMetaEnter | Вызывается при нажатии клавиш Ctrl+Enter или Cmd+Enter в поле ввода.
В данных события в свойстве event содержится объект события KeyboardEvent.
| |||
onKeyDown | Вызывается при нажатии клавиши клавиатуры в поле ввода.
В данных события в свойстве event содержится объект события KeyboardEvent.
| |||
onAddButtonClick | Вызывается при нажатии ссылку "Добавить".
В данных события в свойстве event содержится объект события MouseEvent.
| |||
onCreateButtonClick | Вызывается при нажатии ссылку "Создать".
В данных события в свойстве event содержится объект события MouseEvent.
|
Конструктор
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
Определяет начертание шрифта (нормальное или полужирное) по умолчанию для всех элементов виджета.
Это значение может быть переопределено в конкретном элементе.
Методы
Метод | Описание | С версии |
---|---|---|
getDialog(): ?Dialog | Возвращает диалог выбора сущностей (объект класса Dialog), если он был определен для виджета. | |
setReadonly(flag: boolean): void | Устанавливает или отменяет режим "только для чтения". | |
isReadonly(): boolean | Возвращает true , если включен режим "только для чтения". | |
lock(): void | Блокирует виджет для пользовательского взаимодействия. | |
unlock(): void | Отменяет блокировку виджета. | |
isLocked(): boolean | Возвращает true , если виджет заблокирован. | |
isMultiple(): boolean | Возвращает true , если виджет работает в режиме множественного выбора. | |
setDeselectable(flag: boolean): void | Устанавливает или отменяет возможность удалять элементы из виджета. | |
isDeselectable(): boolean | Возвращает true , если элементы можно удалять из виджета. | |
getTag(tagItem: TagItem | { id: string | number, entityId: string }): ?TagItem | Возвращает элемент виджета.
| |
addTag(tagOptions: TagItemOptions): ?TagItem | Добавляет и возвращает новый элемент виджета.
| |
removeTag(tagItem: TagItem | { id: string | number, entityId: string }, animate = true): void | Удаляет элемент из виджета.
| |
removeTags(): void | Удаляет все элементы виджета. | |
getTags(): TagItem[] | Возвращает массив всех элементов виджета. | |
renderTo(node: HTMLElement): void | Вставляет верстку виджета в указанное место на странице.
| |
isRendered(): boolean | Возвращает true , если верстка виджета вставлена в страницу. | |
getTextBoxValue(): string | Возвращает текст из поля ввода. | |
clearTextBox(): void | Очищает поле ввода. | |
showTextBox(): void | Показывает поле ввода. | |
hideTextBox(): void | Скрывает поле ввода. | |
focusTextBox(): void | Устанавливает фокус в поле ввода. | |
setTextBoxAutoHide(autoHide: boolean): void | Устанавливает или отменяет автоматическое скрытие поля ввода, когда произошла потеря фокуса или была нажата клавиша Enter. | |
getTextBoxWidth(): string | number | null | Возвращает ширину поля ввода. | |
setTextBoxWidth(width: string | number | null): void | Устанавливает ширину поля ввода.
| |
getTagMaxWidth(): ?number | Возвращает максимальную ширину элементов. | |
setTagMaxWidth(width: ?number): void | Устанавливает максимальную ширину в пикселях для всех элементов виджета. | |
getTagAvatar(): ?string | Возвращает аватар по умолчанию для всех элементов виджета. | |
setTagAvatar(tagAvatar: ?string): void | Устанавливает аватар для всех элементов виджета. | |
getTagAvatarOption(option: $Keys | Возвращает значение опции из настроек аватара. Данная опция применяется по умолчанию для всех элементов виджета.
Название опции option определяется ключами структуры AvatarOptions. | 21.600.0 |
setTagAvatarOption(option: $Keys | Задает значение опции для настроек аватара. Данная опция применяется по умолчанию для всех элементов виджета.
Название опции option определяется ключами структуры AvatarOptions.
| 21.600.0 |
getTagAvatarOptions(): ?AvatarOptions | Возвращает дополнительные настройки аватара.
Данные настройки применяются по умолчанию для всех элементов виджета. | 21.600.0 |
setTagAvatarOptions(avatarOptions: AvatarOptions): void | Задает дополнительные настройки аватара.
Данные настройки применяются по умолчанию для всех элементов виджета.
| 21.600.0 |
getTagTextColor(): ?string | Возвращает цвет заголовка по умолчанию для всех элементов виджета. | |
setTagTextColor(textColor: ?string): void | Устанавливает цвет заголовка для всех элементов виджета. | |
getTagBgColor(): ?string | Возвращает цвет фона по умолчанию для всех элементов виджета. | |
setTagBgColor(bgColor: ?string): void | Устанавливает цвет фона для всех элементов виджета. | |
getTagFontWeight(): ?string | Возвращает начертание шрифта по умолчанию для всех элементов виджета. | |
setTagFontWeight(fontWeight: ?string): void | Устанавливает начертание шрифта для всех элементов виджета. | |
getPlaceholder(): string | Возвращает текст плейсхолдера поля ввода. | |
setPlaceholder(placeholder: string): void | Устанавливает текст плейсхолдера поля ввода. | |
getMaxHeight(): ?number | Возвращает максимальную высоту виджета. | |
setMaxHeight(height: ?number): void | Устанавливает максимальную высоту виджета в пикселях. | |
getAddButtonCaption(): string | Возвращает заголовок кнопки "Добавить". | |
setAddButtonCaption(caption: string): void | Устанавливает заголовок кнопки "Добавить". | |
getAddButtonCaptionMore(): ?string | Возвращает заголовок кнопки "Еще". | |
setAddButtonCaptionMore(caption: string): void | Устанавливает заголовок кнопки "Еще". | |
getActualButtonCaption() | Возвращает текущий заголовок кнопки "Добавить". Учитывает переключение кнопки "Добавить" в кнопку "Еще". | |
showAddButton(): void | Показывает кнопку "Добавить". | |
hideAddButton(): void | Скрывает кнопку "Добавить". | |
showCreateButton(): void | Показывает кнопку "Создать". | |
hideCreateButton(): void | Скрывает кнопку "Создать". | |
getCreateButtonCaption(): string | Возвращает заголовок кнопки "Создать". | |
setCreateButtonCaption(caption: string): void | Устанавливает заголовок кнопки "Создать". |