@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
53 lines (52 loc) • 2.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuDropdown = MenuDropdown;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = require("react");
function MenuDropdown(_a) {
var { children, anchor, label, component, sx } = _a, props = tslib_1.__rest(_a, ["children", "anchor", "label", "component", "sx"]);
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
const isOpen = (0, react_1.useMemo)(() => Boolean(anchorEl), [anchorEl]);
const handleClick = (0, react_1.useCallback)((event) => {
event.preventDefault();
event.stopPropagation();
setAnchorEl(event.currentTarget);
}, []);
const handleClose = (0, react_1.useCallback)((event) => {
event === null || event === void 0 ? void 0 : event.preventDefault();
event === null || event === void 0 ? void 0 : event.stopPropagation();
setAnchorEl(null);
}, []);
const anchorNode = (0, react_1.useMemo)(() => {
if (anchor) {
let node = anchor;
if (typeof anchor === 'function') {
node = anchor({ isOpen: isOpen });
}
return (0, react_1.cloneElement)(node, {
onClick: handleClick,
});
}
return (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleClick, children: label });
}, [
anchor,
handleClick,
isOpen,
label,
]);
const DropDownComponent = (component || material_1.Popover);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorNode, (0, jsx_runtime_1.jsx)(DropDownComponent, Object.assign({ anchorEl: anchorEl, open: isOpen, onClose: handleClose, anchorOrigin: {
vertical: 'bottom',
horizontal: 'left',
}, transformOrigin: {
vertical: 'top',
horizontal: 'left',
} }, props, { children: typeof children === 'function' ?
children({
handleClose,
open: isOpen,
}) :
children }))] }));
}