@fluido/react-components/dist/pop-menu/index.js

Fluido webapp components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const framer_motion_1 = require("framer-motion");
const react_1 = require("react");
const react_popper_1 = require("react-popper");
const styled_components_1 = __importDefault(require("styled-components"));
const button_1 = __importDefault(require("../button"));
const utils_1 = require("../utils");
const StyledPopMenu = styled_components_1.default.div `
  width: 14rem;
  z-index: 300;

  menu {
    margin: 0;
    padding: 0;
  }

  ul {
    background-color: var(--surface);
    color: var(--on-surface-high-emphasis);
    border: 2px solid var(--on-surface-divider);
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    min-width: 8rem;
  }

  ul .button {
    text-transform: unset;
    width: 100%;
    padding-left: 0.5rem;
  }
  .button-text {
    text-transform: unset;
    justify-content: flex-start;
    text-align: left;
  }

  ul hr {
    margin: 0.25rem 0;
  }
`;
const menuTransition = {
    delayChildren: 0.3,
    staggerChildren: 0.05,
};
const menuVariants = {
    initial: {
        opacity: 0,
        scaleY: 0,
    },
    open: {
        opacity: 1,
        scaleY: 1,
        transition: menuTransition,
    },
    close: {
        opacity: 0,
        scaleY: 1,
    },
};
const liVariants = {
    initial: {
        opacity: 0,
        y: '-100%',
    },
    open: {
        opacity: 1,
        y: 0,
    },
    close: {
        opacity: 0,
        y: 0,
    },
};
const PopMenu = ({ anchor, list = [], onClick, }) => {
    const [menu, setMenu] = react_1.useState(null);
    const [open, setOpen] = react_1.useState(false);
    const isSSR = utils_1.testIsSSR();
    const popperObj = react_popper_1.usePopper(anchor, menu, {
        placement: 'bottom-end',
        strategy: 'fixed',
        modifiers: [
            {
                name: 'flip',
                options: {
                    fallbackPlacements: ['top-end', 'left'],
                },
            },
        ],
    });
    react_1.useEffect(() => {
        if (anchor) {
            const handleOpen = (ev) => {
                ev.preventDefault();
                ev.stopPropagation();
                setOpen((o) => !o);
            };
            anchor.addEventListener('click', handleOpen);
            return () => {
                anchor.removeEventListener('click', handleOpen);
            };
        }
    }, [open, anchor]);
    react_1.useEffect(() => {
        if (!isSSR) {
            const handleExitClick = () => setOpen(false);
            window.addEventListener('click', handleExitClick);
            return () => {
                window.removeEventListener('click', handleExitClick);
            };
        }
    }, [isSSR]);
    return (jsx_runtime_1.jsx(StyledPopMenu, Object.assign({ ref: setMenu, className: 'menu-box', style: popperObj.styles.popper }, popperObj.attributes.popper, { children: jsx_runtime_1.jsx(framer_motion_1.AnimatePresence, { children: open && (jsx_runtime_1.jsx(framer_motion_1.motion.menu, Object.assign({ variants: menuVariants, initial: 'initial', animate: 'open', exit: 'close' }, { children: jsx_runtime_1.jsx("ul", { children: list.map((e) => (jsx_runtime_1.jsxs(framer_motion_1.motion.li, Object.assign({ variants: liVariants }, { children: [jsx_runtime_1.jsx(button_1.default, Object.assign({ kind: 'text', marginless: true, className: 'button', leading: e.icon && jsx_runtime_1.jsx(e.icon, { size: '18' }, void 0), onClick: () => {
                                    if (onClick)
                                        onClick(e.id);
                                } }, { children: e.label }), void 0),
                            e.divider && jsx_runtime_1.jsx("hr", {}, void 0)] }), e.id))) }, void 0) }), void 0)) }, void 0) }), void 0));
};
exports.default = PopMenu;