@etsoo/materialui/lib/mjs/MoreFab.js

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import React from "react";
import { Link } from "react-router";
import IconButton from "@mui/material/IconButton";
import Fab from "@mui/material/Fab";
import Menu from "@mui/material/Menu";
import Divider from "@mui/material/Divider";
import MenuItem from "@mui/material/MenuItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@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
 */
export function MoreFab(props) {
    // Destruct
    const { actions, drawArrow = true, anchorOrigin = {
        vertical: "top",
        horizontal: "right"
    }, color = "primary", icon = _jsx(MoreHorizIcon, {}), 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.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 _jsx(React.Fragment, {});
    // Actions
    const actionsLocal = getActions(actions);
    // Has any icon
    const hasIcon = actionsLocal.some((action) => action.icon != null);
    // Main
    const main = iconButton ? (_jsx(IconButton, { color: color, size: size, title: title, onClick: handleClick, children: icon })) : (_jsx(Fab, { color: color, size: size, title: title, onClick: handleClick, children: icon }));
    return (_jsxs(React.Fragment, { children: [main, _jsx(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? (_jsx(Divider, {}, index)) : (_jsxs(MenuItem, { ...(typeof action === "string"
                        ? action.includes("://")
                            ? {
                                component: "a",
                                href: action,
                                target: "_blank"
                            }
                            : { component: Link, to: action }
                        : Array.isArray(action)
                            ? { component: Link, to: action[0], state: action[1] }
                            : {
                                onClick: (event) => {
                                    handleClose();
                                    if (typeof action === "function")
                                        action(event);
                                }
                            }), children: [icon != null && _jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { inset: icon == null && hasIcon, children: label })] }, label))) })] }));
}