opt-table
Version:
A Responsive and Customizable Rich Table
70 lines • 4.51 kB
JavaScript
"use strict";
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 (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const icons_material_1 = require("@mui/icons-material");
const material_1 = require("@mui/material");
const framer_motion_1 = require("framer-motion");
const react_1 = __importStar(require("react"));
const CollapseAddRow = ({ Comp, is_open, onAccept, onCancel, loading, is_disabled, }) => {
const id = (0, react_1.useId)();
const add_button_id = (0, react_1.useId)();
const loading_button_id = (0, react_1.useId)();
return (react_1.default.createElement(material_1.TableCell, { key: id, colSpan: 12, style: {
paddingBottom: 0,
paddingTop: 0,
width: "100%",
padding: 0,
} },
react_1.default.createElement(material_1.Box, { style: {
width: "100%",
padding: 0,
margin: 0,
position: "relative",
overflow: "hidden",
} },
react_1.default.createElement(framer_motion_1.AnimatePresence, { mode: "wait" }, is_open && (react_1.default.createElement(framer_motion_1.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_1.default.createElement(material_1.TableContainer, { style: { padding: 0 } },
react_1.default.createElement(material_1.Table, { size: "small", style: { padding: 0 }, stickyHeader: true },
react_1.default.createElement(material_1.TableBody, { style: { padding: 0, } }, Comp))),
react_1.default.createElement(framer_motion_1.motion.div, { style: {
width: "fit-content",
display: "flex",
alignItems: "center",
padding: "0px 0px",
} },
react_1.default.createElement(material_1.IconButton, { onClick: onAccept, disabled: is_disabled, style: { position: "relative", width: 50, height: 50 } },
react_1.default.createElement(framer_motion_1.AnimatePresence, { mode: "sync" }, !loading ? (react_1.default.createElement(framer_motion_1.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_1.default.createElement(icons_material_1.Check, { color: "success", style: { fontSize: 24, position: "relative", top: 2 } }))) : (react_1.default.createElement(framer_motion_1.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_1.default.createElement(material_1.CircularProgress, { style: { width: 24, height: 24 }, color: "info" }))))),
react_1.default.createElement(material_1.IconButton, { onClick: onCancel },
react_1.default.createElement(icons_material_1.Close, { color: "error", style: { fontSize: 24 } })))))))));
};
exports.default = CollapseAddRow;
//# sourceMappingURL=collapse_add_row.js.map