@etsoo/materialui
Version:
TypeScript Material-UI Implementation
107 lines (106 loc) • 4.91 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MoreFab = MoreFab;
const jsx_runtime_1 = require("react/jsx-runtime");
const MoreHoriz_1 = __importDefault(require("@mui/icons-material/MoreHoriz"));
const react_1 = __importDefault(require("react"));
const react_router_1 = require("react-router");
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
const Fab_1 = __importDefault(require("@mui/material/Fab"));
const Menu_1 = __importDefault(require("@mui/material/Menu"));
const Divider_1 = __importDefault(require("@mui/material/Divider"));
const MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
const ListItemIcon_1 = __importDefault(require("@mui/material/ListItemIcon"));
const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
function getActions(input) {
// Actions
const actions = [];
input.forEach((action) => {
if (typeof action === "boolean")
return;
actions.push(action);
});
return actions;
}
/**
* More fab
* @returns Component
*/
function MoreFab(props) {
// Destruct
const { actions, drawArrow = true, anchorOrigin = {
vertical: "top",
horizontal: "right"
}, color = "primary", icon = (0, jsx_runtime_1.jsx)(MoreHoriz_1.default, {}), iconButton = false, PaperProps = drawArrow
? {
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: -0.4,
"& .MuiAvatar-root": {
width: 32,
height: 32,
ml: -0.5,
mr: 1
},
"&:before": {
content: '""',
display: "block",
position: "absolute",
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: "background.paper",
transform: "translateY(-50%) rotate(45deg)",
zIndex: 0
}
}
}
: undefined, size, title, transformOrigin = {
vertical: "bottom",
horizontal: "right"
} } = props;
// State
const [anchorEl, setAnchorEl] = react_1.default.useState();
// Open state
const open = Boolean(anchorEl);
// Handle click
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
// Handle close
const handleClose = () => {
setAnchorEl(undefined);
};
// No actions
if (actions == null || actions.length == 0)
return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, {});
// Actions
const actionsLocal = getActions(actions);
// Has any icon
const hasIcon = actionsLocal.some((action) => action.icon != null);
// Main
const main = iconButton ? ((0, jsx_runtime_1.jsx)(IconButton_1.default, { color: color, size: size, title: title, onClick: handleClick, children: icon })) : ((0, jsx_runtime_1.jsx)(Fab_1.default, { color: color, size: size, title: title, onClick: handleClick, children: icon }));
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [main, (0, jsx_runtime_1.jsx)(Menu_1.default, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? ((0, jsx_runtime_1.jsx)(Divider_1.default, {}, index)) : ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, { ...(typeof action === "string"
? action.includes("://")
? {
component: "a",
href: action,
target: "_blank"
}
: { component: react_router_1.Link, to: action }
: Array.isArray(action)
? { component: react_router_1.Link, to: action[0], state: action[1] }
: {
onClick: (event) => {
handleClose();
if (typeof action === "function")
action(event);
}
}), children: [icon != null && (0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: icon }), (0, jsx_runtime_1.jsx)(ListItemText_1.default, { inset: icon == null && hasIcon, children: label })] }, label))) })] }));
}