@yandex/ui/withOutsideClick/withOutsideClick.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.withOutsideClick = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var keyboard_1 = require("../lib/keyboard");
var getDisplayName_1 = require("../lib/getDisplayName");
var mergeRefs_1 = require("../lib/mergeRefs");
var canUseDOM_1 = require("../lib/canUseDOM");
var POINTER_DOWN = 'pointerdown';
var POINTER_UP = 'pointerup';
if (canUseDOM_1.canUseDOM()) {
    if (!window.PointerEvent) {
        POINTER_DOWN = 'mousedown';
        POINTER_UP = 'mouseup';
        if (!window.MouseEvent) {
            POINTER_UP = 'click';
        }
    }
}
var defaultProps = {
    ignoreRefs: [],
};
var withOutsideClick = function (WrappedComponent) {
    var WithOutsideClick = /** @class */ (function (_super) {
        tslib_1.__extends(WithOutsideClick, _super);
        function WithOutsideClick() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            /**
             * Контейнер с ссылкой на DOM элемент оборачиваемого компонента.
             */
            _this.targetRef = react_1.createRef();
            _this.pointerDownEventSource = null;
            _this.onPointerDown = function (event) {
                _this.pointerDownEventSource = event.target;
            };
            _this.onPointerUp = function (event) {
                var ignoreElements = tslib_1.__spread(_this.props.ignoreRefs, [_this.targetRef]);
                if (_this.props.onOutsideClick !== undefined &&
                    ignoreElements.every(function (element) { return (element.current !== null &&
                        !element.current.contains(_this.pointerDownEventSource) && // mouseDown не в ignoreElements
                        !element.current.contains(event.target)); })) {
                    _this.props.onOutsideClick(event);
                }
                _this.pointerDownEventSource = null;
            };
            _this.onKeyDown = function (event) {
                if (_this.props.onEscapeKeyDown !== undefined && keyboard_1.isKeyCode(event.keyCode, [keyboard_1.Keys.ESC])) {
                    _this.props.onEscapeKeyDown(event);
                }
            };
            return _this;
        }
        WithOutsideClick.prototype.componentDidMount = function () {
            if (this.props.visible) {
                this.subscribeToEvents();
            }
        };
        WithOutsideClick.prototype.componentWillUnmount = function () {
            this.unsubscribeFromEvents();
        };
        WithOutsideClick.prototype.componentDidUpdate = function (prevProps) {
            if (!prevProps.visible && this.props.visible) {
                this.subscribeToEvents();
            }
            else if (prevProps.visible && !this.props.visible) {
                this.unsubscribeFromEvents();
            }
        };
        WithOutsideClick.prototype.render = function () {
            var _a = this.props, ignoreRefs = _a.ignoreRefs, props = tslib_1.__rest(_a, ["ignoreRefs"]);
            return react_1.default.createElement(WrappedComponent, tslib_1.__assign({}, props, { targetRef: mergeRefs_1.mergeAllRefs(this.targetRef, this.props.targetRef) }));
        };
        WithOutsideClick.prototype.subscribeToEvents = function () {
            document.addEventListener(POINTER_DOWN, this.onPointerDown);
            document.addEventListener(POINTER_UP, this.onPointerUp);
            document.addEventListener('keydown', this.onKeyDown);
        };
        WithOutsideClick.prototype.unsubscribeFromEvents = function () {
            document.removeEventListener(POINTER_DOWN, this.onPointerDown);
            document.removeEventListener(POINTER_UP, this.onPointerUp);
            document.removeEventListener('keydown', this.onKeyDown);
        };
        WithOutsideClick.displayName = "withOutsideClick(" + getDisplayName_1.getDisplayName(WrappedComponent) + ")";
        WithOutsideClick.defaultProps = defaultProps;
        return WithOutsideClick;
    }(react_1.PureComponent));
    return WithOutsideClick;
};
exports.withOutsideClick = withOutsideClick;