@yandex/ui/esm/Dropdown/Dropdown.js

Yandex UI components

import { __assign, __extends, __rest } from "tslib";
import React, { Children, cloneElement, createRef, PureComponent, } from 'react';
import { cn } from '@bem-react/classname';
import { getDisplayName } from '../lib/getDisplayName';
import './Dropdown.css';
import { forkFn } from '../lib/forkFn';
var noop = function () { };
export var cnDropdown = cn('Dropdown');
/**
 * Компонент для создания выпадающего списка
 * @param {DropdownProps} props
 */
export var withDropdown = function (Popup) { var _a; return _a = /** @class */ (function (_super) {
        __extends(class_1, _super);
        function class_1() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.innerRef = 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 = __rest(_a, ["children", "content", "style", "scope", "onVisibleChange", "mouseLeaveDelay", "mouseEnterDelay", "focusDelay", "blurDelay", "trigger"]);
            var child = Children.only(children);
            var popupProps = __assign(__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(child.props.onMouseEnter, this.onMouseEnter);
                newChildProps.onMouseLeave = forkFn(child.props.onMouseLeave, this.onMouseLeave);
                popupProps.onMouseEnter = this.onPopupMouseEnter;
                popupProps.onMouseLeave = this.onPopupMouseLeave;
            }
            if (trigger.indexOf('focus') !== -1) {
                newChildProps.onFocus = forkFn(child.props.onFocus, this.onFocus);
                newChildProps.onBlur = forkFn(child.props.onBlur, this.onBlur);
            }
            if (trigger.indexOf('click') !== -1) {
                newChildProps.onClick = forkFn(child.props.onClick, this.onClick);
            }
            var dropdownTrigger = cloneElement(child, newChildProps);
            return (React.createElement("span", { style: style, className: cnDropdown(), ref: this.innerRef },
                dropdownTrigger,
                React.createElement(Popup, __assign({}, popupProps))));
        };
        return class_1;
    }(PureComponent)),
    _a.displayName = "withDropdown(" + getDisplayName(Popup) + ")",
    _a.defaultProps = {
        onVisibleChange: noop,
        mouseEnterDelay: 0,
        mouseLeaveDelay: 0.1,
        focusDelay: 0,
        blurDelay: 0.15,
        visible: false,
        trigger: ['hover'],
        direction: 'bottom-start',
    },
    _a; };