@react-md/menu/lib/useContextMenu.js

Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useContextMenu = void 0;
var react_1 = require("react");
var transition_1 = require("@react-md/transition");
var utils_1 = require("@react-md/utils");
var DEFAULT_CONTEXT_MENU_ID = "context-menu";
function useContextMenu(_a) {
    var _b = _a === void 0 ? {} : _a, _c = _b.id, id = _c === void 0 ? DEFAULT_CONTEXT_MENU_ID : _c, propRef = _b.ref, _d = _b.anchor, anchor = _d === void 0 ? utils_1.TOP_INNER_LEFT_ANCHOR : _d, _e = _b.classNames, classNames = _e === void 0 ? transition_1.SCALE_Y_CLASSNAMES : _e, _f = _b.disableDeselect, disableDeselect = _f === void 0 ? false : _f;
    var _g = react_1.useState(false), visible = _g[0], setVisible = _g[1];
    var onRequestClose = react_1.useCallback(function () {
        setVisible(false);
    }, []);
    var _h = react_1.useState({}), coords = _h[0], setCoords = _h[1];
    var onContextMenu = react_1.useCallback(function (event) {
        event.preventDefault();
        event.stopPropagation();
        var selection = window.getSelection();
        if (selection && !disableDeselect) {
            selection.empty();
        }
        setVisible(true);
        if (event.button === 0 && event.buttons === 0) {
            setCoords({});
            return;
        }
        setCoords({ initialX: event.clientX, initialY: event.clientY });
    }, [disableDeselect]);
    var _j = utils_1.useEnsuredRef(propRef), ref = _j[0], refHandler = _j[1];
    react_1.useEffect(function () {
        if (!visible) {
            return;
        }
        var hide = function (event) {
            var target = event.target;
            if (!utils_1.containsElement(ref, target)) {
                onRequestClose();
            }
        };
        window.addEventListener("contextmenu", hide, true);
        return function () {
            window.removeEventListener("contextmenu", hide, true);
        };
    }, [onRequestClose, visible, ref]);
    var menuProps = {
        id: id,
        ref: refHandler,
        anchor: anchor,
        visible: visible,
        classNames: classNames,
        onRequestClose: onRequestClose,
        positionOptions: coords,
        disableControlClickOkay: true,
    };
    return [menuProps, onContextMenu, setVisible];
}
exports.useContextMenu = useContextMenu;
//# sourceMappingURL=useContextMenu.js.map