@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
84 lines (83 loc) • 3.5 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuDropdown = MenuDropdown;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = __importStar(require("react"));
function MenuDropdown({ children, anchor, label, component, ...props }) {
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, { 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 })] }));
}