@yandex/ui
Version:
Yandex UI components
92 lines (91 loc) • 5.43 kB
JavaScript
var _a;
import { __assign, __extends } from "tslib";
import React, { PureComponent, createRef, } from 'react';
import { cn } from '@bem-react/classname';
import { ComponentRegistryConsumer } from '@bem-react/di';
import { flatMap } from '../lib/flatMap';
import { mergeAllRefs } from '../lib/mergeRefs';
import { Keys } from '../lib/keyboard';
import { MultiRenderOverrideProvider } from '../lib/render-override';
import './Button/Select-Button.css';
import './Menu/Select-Menu.css';
import './Select.css';
export var cnSelect = cn('Select2');
var defaultProps = {
placeholder: '—',
value: '',
};
/**
* Компонент для создания раскрывающегося списка с меню.
* @param {ISelectProps} props
*/
export var Select = (_a = /** @class */ (function (_super) {
__extends(class_1, _super);
function class_1() {
var _this = _super !== null && _super.apply(this, arguments) || this;
/**
* Контейнер с ссылкой на корневой DOM элемент селекта.
*/
_this.innerRef = createRef();
/**
* Контейнер с ссылкой на DOM элемент триггера.
*/
_this.triggerRef = createRef();
return _this;
}
class_1.prototype.componentDidMount = function () {
this.forwardRefs();
};
class_1.prototype.componentDidUpdate = function () {
this.forwardRefs();
};
class_1.prototype.render = function () {
var _this = this;
var _a = this.props, addonAfter = _a.addonAfter, addonBefore = _a.addonBefore, className = _a.className, disabled = _a.disabled, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, opened = _a.opened, size = _a.size, theme = _a.theme, value = _a.value, view = _a.view, style = _a.style, _b = _a.checkable, checkable = _b === void 0 ? true : _b, iconProps = _a.iconProps, renderTrigger = _a.renderTrigger, renderTriggerIcon = _a.renderTriggerIcon, activeDescendant = _a.activeDescendant;
// Проставляем состояние `checked` только для типа `check`.
var checked = checkable && Array.isArray(value) ? value.length > 0 : false;
var iconType = view || (iconProps && iconProps.glyph) ? undefined : 'arrow';
var iconGlyph = view && !(iconProps && iconProps.type) ? 'carets-v' : undefined;
return (React.createElement(ComponentRegistryConsumer, { id: cnSelect() }, function (_a) {
var TriggerOriginal = _a.Trigger, TriggerIconOriginal = _a.Icon;
return (React.createElement(MultiRenderOverrideProvider
// prettier-ignore
, {
// prettier-ignore
components: [
[TriggerOriginal, renderTrigger],
[TriggerIconOriginal, renderTriggerIcon],
] }, function (Trigger, TriggerIcon) { return (React.createElement("span", { ref: mergeAllRefs(_this.innerRef, _this.props.innerRef), className: cnSelect({ disabled: disabled }, [className]) },
addonBefore,
React.createElement(Trigger, { width: "max", role: "listbox", "aria-haspopup": "true", disabled: disabled, className: cnSelect('Button'), innerRef: _this.triggerRef, style: style, size: size, theme: theme, checked: checked, view: view, onClick: onClick, onKeyDown: onKeyDown, onBlur: onBlur, pressKeys: [Keys.SPACE], iconRight: function (iconClassName) { return (React.createElement(TriggerIcon, __assign({ size: size, className: iconClassName, direction: opened ? 'top' : 'bottom', type: iconType, glyph: iconGlyph }, iconProps))); }, "aria-activedescendant": activeDescendant, "aria-expanded": opened, "aria-multiselectable": Array.isArray(value) }, _this.getButtonText()),
addonAfter)); }));
}));
};
/**
* Копирует ссылки на DOM узлы для дальнейшего использования.
*/
class_1.prototype.forwardRefs = function () {
mergeAllRefs(this.props.triggerRef)(this.triggerRef.current);
};
class_1.prototype.getButtonText = function () {
var _a = this.props, value = _a.value, options = _a.options, showAlwaysPlaceholder = _a.showAlwaysPlaceholder, placeholder = _a.placeholder;
var values = [].concat(value).filter(function (value) { return value !== undefined; });
if (!showAlwaysPlaceholder && values.length > 0) {
var text = this.getOptionsText(options, values);
if (text.length > 0) {
return text;
}
}
return placeholder;
};
class_1.prototype.getOptionsText = function (options, values) {
return flatMap(function (option) { return (option.items ? option.items : option); }, options)
.filter(function (option) { return values.indexOf(option.value) !== -1; })
.map(function (option) { return option.checkedText || option.content; })
.join(', ');
};
return class_1;
}(PureComponent)),
_a.displayName = cnSelect(),
_a.defaultProps = defaultProps,
_a);