@up-group-ui/react-controls/dist/Components/Display/ContextMenu/UpContextMenuTrigger.js

Up shared react controls

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpTouchContextMenuTrigger = exports.UpContextMenuTrigger = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var object_assign_1 = (0, tslib_1.__importDefault)(require("object-assign"));
var helpers_1 = require("../../../Common/utils/helpers");
var actions_1 = require("./actions");
var UpContextMenuTrigger = (function (_super) {
    (0, tslib_1.__extends)(UpContextMenuTrigger, _super);
    function UpContextMenuTrigger() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.mouseDown = false;
        _this.isHandledEvent = function (event) {
            return ((_this.props.rightClick && (event.which === 3 || event.button === 2)) ||
                (!_this.props.rightClick && event.button === 0));
        };
        _this.handleMouseDown = function (event) {
            if (_this.isHandledEvent(event)) {
                _this.mouseDown = true;
                _this.handleContextClick(event);
            }
        };
        _this.handleMouseUp = function (event) {
            if (_this.isHandledEvent(event)) {
                _this.mouseDown = false;
            }
        };
        _this.handleContextClick = function (event) {
            event.preventDefault();
            event.stopPropagation();
            var x = event.clientX;
            var y = event.clientY;
            (0, actions_1.hideMenu)();
            (0, actions_1.showMenu)({
                position: { x: x, y: y },
                target: _this.element,
                id: _this.props.id,
                data: (0, helpers_1.callIfExists)(_this.props.collect, _this.props),
            });
        };
        _this.setElement = function (element) {
            _this.element = element;
        };
        return _this;
    }
    UpContextMenuTrigger.prototype.render = function () {
        var _a = this.props, renderTag = _a.renderTag, attributes = _a.attributes, children = _a.children;
        var newAttrs = (0, object_assign_1.default)({}, attributes, {
            onContextMenu: this.handleContextClick,
            onMouseDown: this.handleMouseDown,
            onMouseUp: this.handleMouseUp,
            ref: this.setElement,
        });
        return react_1.default.createElement(renderTag, newAttrs, children);
    };
    UpContextMenuTrigger.defaultProps = {
        attributes: {},
        holdToDisplay: null,
        renderTag: 'div',
        rightClick: true,
    };
    return UpContextMenuTrigger;
}(react_1.default.PureComponent));
exports.UpContextMenuTrigger = UpContextMenuTrigger;
var UpTouchContextMenuTrigger = (function (_super) {
    (0, tslib_1.__extends)(UpTouchContextMenuTrigger, _super);
    function UpTouchContextMenuTrigger() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.mouseDown = false;
        _this.handleMouseDown = function (event) {
            if (_this.props.holdToDisplay >= 0 && event.button === 0) {
                event.persist();
                _this.mouseDown = true;
                setTimeout(function () {
                    if (_this.mouseDown)
                        _this.handleContextClick(event);
                }, _this.props.holdToDisplay);
            }
        };
        _this.handleMouseUp = function (event) {
            if (event.button === 0) {
                _this.mouseDown = false;
            }
        };
        _this.handleTouchstart = function (event) {
            if (_this.props.holdToDisplay >= 0) {
                event.persist();
                _this.mouseDown = true;
                setTimeout(function () {
                    if (_this.mouseDown)
                        _this.handleContextClick(event);
                }, _this.props.holdToDisplay);
            }
        };
        _this.handleTouchEnd = function (event) {
            event.preventDefault();
            _this.mouseDown = false;
        };
        _this.handleContextClick = function (event) {
            event.preventDefault();
            event.stopPropagation();
            var x = event.clientX || (event.touches && event.touches[0].pageX);
            var y = event.clientY || (event.touches && event.touches[0].pageY);
            (0, actions_1.hideMenu)();
            (0, actions_1.showMenu)({
                position: { x: x, y: y },
                target: _this.element,
                id: _this.props.id,
                data: (0, helpers_1.callIfExists)(_this.props.collect, _this.props),
            });
        };
        _this.setElement = function (element) {
            _this.element = element;
        };
        return _this;
    }
    UpTouchContextMenuTrigger.prototype.render = function () {
        var _a = this.props, renderTag = _a.renderTag, attributes = _a.attributes, children = _a.children;
        var newAttrs = (0, object_assign_1.default)({}, attributes, {
            onContextMenu: this.handleContextClick,
            onMouseDown: this.handleMouseDown,
            onMouseUp: this.handleMouseUp,
            onTouchStart: this.handleTouchstart,
            onTouchEnd: this.handleTouchEnd,
            onMouseOut: this.handleMouseUp,
            ref: this.setElement,
        });
        return react_1.default.createElement(renderTag, newAttrs, children);
    };
    UpTouchContextMenuTrigger.defaultProps = {
        attributes: {},
        holdToDisplay: 1000,
        renderTag: 'div',
    };
    return UpTouchContextMenuTrigger;
}(react_1.default.PureComponent));
exports.UpTouchContextMenuTrigger = UpTouchContextMenuTrigger;
var hasTouch = false;
try {
    document.createEvent('TouchStart');
    hasTouch = true;
}
catch (_a) { }
exports.default = !hasTouch ? UpContextMenuTrigger : UpTouchContextMenuTrigger;
//# sourceMappingURL=UpContextMenuTrigger.js.map