@yandex/ui/Select/Select.js

Yandex UI components

"use strict";
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Select = exports.cnSelect = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var classname_1 = require("@bem-react/classname");
var di_1 = require("@bem-react/di");
var flatMap_1 = require("../lib/flatMap");
var mergeRefs_1 = require("../lib/mergeRefs");
var keyboard_1 = require("../lib/keyboard");
var render_override_1 = require("../lib/render-override");
require("./Button/Select-Button.css");
require("./Menu/Select-Menu.css");
require("./Select.css");
exports.cnSelect = classname_1.cn('Select2');
var defaultProps = {
    placeholder: '—',
    value: '',
};
/**
 * Компонент для создания раскрывающегося списка с меню.
 * @param {ISelectProps} props
 */
exports.Select = (_a = /** @class */ (function (_super) {
        tslib_1.__extends(class_1, _super);
        function class_1() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            /**
             * Контейнер с ссылкой на корневой DOM элемент селекта.
             */
            _this.innerRef = react_1.createRef();
            /**
             * Контейнер с ссылкой на DOM элемент триггера.
             */
            _this.triggerRef = react_1.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_1.default.createElement(di_1.ComponentRegistryConsumer, { id: exports.cnSelect() }, function (_a) {
                var TriggerOriginal = _a.Trigger, TriggerIconOriginal = _a.Icon;
                return (react_1.default.createElement(render_override_1.MultiRenderOverrideProvider
                // prettier-ignore
                , { 
                    // prettier-ignore
                    components: [
                        [TriggerOriginal, renderTrigger],
                        [TriggerIconOriginal, renderTriggerIcon],
                    ] }, function (Trigger, TriggerIcon) { return (react_1.default.createElement("span", { ref: mergeRefs_1.mergeAllRefs(_this.innerRef, _this.props.innerRef), className: exports.cnSelect({ disabled: disabled }, [className]) },
                    addonBefore,
                    react_1.default.createElement(Trigger, { width: "max", role: "listbox", "aria-haspopup": "true", disabled: disabled, className: exports.cnSelect('Button'), innerRef: _this.triggerRef, style: style, size: size, theme: theme, checked: checked, view: view, onClick: onClick, onKeyDown: onKeyDown, onBlur: onBlur, pressKeys: [keyboard_1.Keys.SPACE], iconRight: function (iconClassName) { return (react_1.default.createElement(TriggerIcon, tslib_1.__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 () {
            mergeRefs_1.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_1.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;
    }(react_1.PureComponent)),
    _a.displayName = exports.cnSelect(),
    _a.defaultProps = defaultProps,
    _a);