nice-ui/lib/4-card/Popup/Popup.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Popup = void 0;
const React = require("react");
const PopupControlled_1 = require("./PopupControlled");
const context_1 = require("./context");
const popup_1 = require("../../utils/popup");
const useLockScrolling_1 = require("../../hooks/useLockScrolling");
const Popup = (props) => {
    const { anchor: anchorSpec, ...rest } = props;
    const [open, setOpen] = React.useState(false);
    const contextValue = React.useMemo(() => ({ close: () => setOpen(false) }), []);
    const handle = (0, popup_1.useAnchorPointHandle)(anchorSpec);
    // Lock page scrolling on open popup.
    (0, useLockScrolling_1.useLockScrolling)(open);
    const handleClick = () => {
        setOpen((open) => !open);
    };
    const handleClickAway = () => {
        setOpen(false);
    };
    return (React.createElement(context_1.context.Provider, { value: contextValue },
        React.createElement(popup_1.anchorContext.Provider, { value: handle },
            React.createElement(PopupControlled_1.PopupControlled, { ...rest, refToggle: handle.ref, onEsc: open ? () => setOpen(false) : undefined, onHeadClick: handleClick, onClickAway: handleClickAway, open: open }))));
};
exports.Popup = Popup;