@yandex/ui/Dropdown/Dropdown.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.withDropdown = exports.cnDropdown = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var classname_1 = require("@bem-react/classname");
var getDisplayName_1 = require("../lib/getDisplayName");
require("./Dropdown.css");
var forkFn_1 = require("../lib/forkFn");
var noop = function () { };
exports.cnDropdown = classname_1.cn('Dropdown');
/**
 * Компонент для создания выпадающего списка
 * @param {DropdownProps} props
 */
var withDropdown = function (Popup) { var _a; return _a = /** @class */ (function (_super) {
        tslib_1.__extends(class_1, _super);
        function class_1() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.innerRef = react_1.createRef();
            _this.delayTimer = null;
            _this.state = {
                visible: _this.props.visible,
                prevVisible: _this.props.visible,
            };
            _this.onClick = function () {
                _this.setPopupVisible(!_this.state.visible);
            };
            _this.onMouseEnter = function () {
                var mouseEnterDelay = _this.props.mouseEnterDelay;
                _this.delaySetPopupVisible(true, mouseEnterDelay);
            };
            _this.onMouseLeave = function () {
                var mouseLeaveDelay = _this.props.mouseLeaveDelay;
                _this.delaySetPopupVisible(false, mouseLeaveDelay);
            };
            _this.onFocus = function () {
                var focusDelay = _this.props.focusDelay;
                _this.delaySetPopupVisible(true, focusDelay);
            };
            _this.onBlur = function () {
                var blurDelay = _this.props.blurDelay;
                _this.delaySetPopupVisible(false, blurDelay);
            };
            _this.onPopupMouseEnter = function () {
                _this.clearDelayTimer();
            };
            _this.onPopupMouseLeave = function () {
                var mouseLeaveDelay = _this.props.mouseLeaveDelay;
                _this.delaySetPopupVisible(false, mouseLeaveDelay);
            };
            return _this;
        }
        class_1.prototype.componentWillUnmount = function () {
            this.clearDelayTimer();
        };
        class_1.prototype.delaySetPopupVisible = function (visible, delay) {
            var _this = this;
            this.clearDelayTimer();
            var delayMS = delay * 1000;
            this.delayTimer = setTimeout(function () {
                _this.setPopupVisible(visible);
                _this.clearDelayTimer();
            }, delayMS);
        };
        class_1.prototype.setPopupVisible = function (visible) {
            var prevVisible = this.state.visible;
            var onVisibleChange = this.props.onVisibleChange;
            this.clearDelayTimer();
            if (prevVisible !== visible) {
                this.setState({ visible: visible, prevVisible: prevVisible });
                onVisibleChange(visible);
            }
        };
        class_1.prototype.clearDelayTimer = function () {
            if (this.delayTimer) {
                clearTimeout(this.delayTimer);
                this.delayTimer = null;
            }
        };
        class_1.prototype.render = function () {
            var _this = this;
            var _a = this.props, children = _a.children, content = _a.content, style = _a.style, scope = _a.scope, onVisibleChange = _a.onVisibleChange, mouseLeaveDelay = _a.mouseLeaveDelay, mouseEnterDelay = _a.mouseEnterDelay, focusDelay = _a.focusDelay, blurDelay = _a.blurDelay, trigger = _a.trigger, passThroughProps = tslib_1.__rest(_a, ["children", "content", "style", "scope", "onVisibleChange", "mouseLeaveDelay", "mouseEnterDelay", "focusDelay", "blurDelay", "trigger"]);
            var child = react_1.Children.only(children);
            var popupProps = tslib_1.__assign(tslib_1.__assign({}, passThroughProps), { children: content, target: 'anchor', anchor: this.innerRef, scope: scope || this.innerRef, visible: this.state.visible, onClose: function () { return _this.setPopupVisible(false); } });
            var newChildProps = {};
            if (trigger.indexOf('hover') !== -1) {
                newChildProps.onMouseEnter = forkFn_1.forkFn(child.props.onMouseEnter, this.onMouseEnter);
                newChildProps.onMouseLeave = forkFn_1.forkFn(child.props.onMouseLeave, this.onMouseLeave);
                popupProps.onMouseEnter = this.onPopupMouseEnter;
                popupProps.onMouseLeave = this.onPopupMouseLeave;
            }
            if (trigger.indexOf('focus') !== -1) {
                newChildProps.onFocus = forkFn_1.forkFn(child.props.onFocus, this.onFocus);
                newChildProps.onBlur = forkFn_1.forkFn(child.props.onBlur, this.onBlur);
            }
            if (trigger.indexOf('click') !== -1) {
                newChildProps.onClick = forkFn_1.forkFn(child.props.onClick, this.onClick);
            }
            var dropdownTrigger = react_1.cloneElement(child, newChildProps);
            return (react_1.default.createElement("span", { style: style, className: exports.cnDropdown(), ref: this.innerRef },
                dropdownTrigger,
                react_1.default.createElement(Popup, tslib_1.__assign({}, popupProps))));
        };
        return class_1;
    }(react_1.PureComponent)),
    _a.displayName = "withDropdown(" + getDisplayName_1.getDisplayName(Popup) + ")",
    _a.defaultProps = {
        onVisibleChange: noop,
        mouseEnterDelay: 0,
        mouseLeaveDelay: 0.1,
        focusDelay: 0,
        blurDelay: 0.15,
        visible: false,
        trigger: ['hover'],
        direction: 'bottom-start',
    },
    _a; };
exports.withDropdown = withDropdown;