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

TypeScript Material-UI Implementation

import { jsx as _jsx } from "react/jsx-runtime";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import { useTheme } from "@mui/material/styles";
import React from "react";
const initOpactiy = 0.15;
/**
 * Fabs container box
 * @param props Props
 * @returns Component
 */
export function FabBox(props) {
    // Destruct
    const { columnDirection, fabPanel = columnDirection, itemGap = 1, sx, ...rest } = props;
    // Theme
    const theme = useTheme();
    const spaceGap = theme.spacing(itemGap);
    const [opacity, setOpacity] = React.useState(initOpactiy);
    if (columnDirection == null)
        return _jsx(React.Fragment, {});
    return fabPanel ? (_jsx(Paper, { sx: {
            position: "fixed",
            display: "flex",
            alignItems: "center",
            padding: spaceGap,
            flexDirection: columnDirection ? "column" : "row",
            gap: spaceGap,
            opacity: opacity,
            ...sx
        }, onMouseEnter: () => setOpacity(1), onMouseLeave: () => setOpacity(initOpactiy), ...rest })) : (_jsx(Box, { sx: {
            position: "fixed",
            display: "flex",
            alignItems: "center",
            flexDirection: columnDirection ? "column" : "row",
            gap: spaceGap,
            ...sx
        }, ...rest }));
}