opt-table
Version:
A Responsive and Customizable Rich Table
45 lines • 3.02 kB
JavaScript
import { Check, Close } from "@mui/icons-material";
import { Box, CircularProgress, IconButton, Table, TableBody, TableCell, TableContainer, } from "@mui/material";
import { AnimatePresence, motion } from "framer-motion";
import React, { useId } from "react";
const CollapseAddRow = ({ Comp, is_open, onAccept, onCancel, loading, is_disabled, }) => {
const id = useId();
const add_button_id = useId();
const loading_button_id = useId();
return (React.createElement(TableCell, { key: id, colSpan: 12, style: {
paddingBottom: 0,
paddingTop: 0,
width: "100%",
padding: 0,
} },
React.createElement(Box, { style: {
width: "100%",
padding: 0,
margin: 0,
position: "relative",
overflow: "hidden",
} },
React.createElement(AnimatePresence, { mode: "wait" }, is_open && (React.createElement(motion.div, { key: `${is_open}`, initial: { height: 0, opacity: 0, y: 24 }, transition: { duration: 0.36 }, animate: {
opacity: 1,
y: 0,
height: "fit-content",
position: "relative",
}, exit: { opacity: 0, height: 0, y: 24 } },
React.createElement(TableContainer, { style: { padding: 0 } },
React.createElement(Table, { size: "small", style: { padding: 0 }, stickyHeader: true },
React.createElement(TableBody, { style: { padding: 0, } }, Comp))),
React.createElement(motion.div, { style: {
width: "fit-content",
display: "flex",
alignItems: "center",
padding: "0px 0px",
} },
React.createElement(IconButton, { onClick: onAccept, disabled: is_disabled, style: { position: "relative", width: 50, height: 50 } },
React.createElement(AnimatePresence, { mode: "sync" }, !loading ? (React.createElement(motion.div, { key: add_button_id, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, style: { position: "absolute" } },
React.createElement(Check, { color: "success", style: { fontSize: 24, position: "relative", top: 2 } }))) : (React.createElement(motion.div, { key: loading_button_id, style: { position: "absolute" }, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 } },
React.createElement(CircularProgress, { style: { width: 24, height: 24 }, color: "info" }))))),
React.createElement(IconButton, { onClick: onCancel },
React.createElement(Close, { color: "error", style: { fontSize: 24 } })))))))));
};
export default CollapseAddRow;
//# sourceMappingURL=collapse_add_row.js.map