opt-table
Version:
A Responsive and Customizable Rich Table
217 lines • 15.7 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const material_1 = require("@mui/material");
const react_1 = __importStar(require("react"));
const framer_motion_1 = require("framer-motion");
const icons_material_1 = require("@mui/icons-material");
const collapse_detail_panel_1 = __importDefault(require("./collapse_detail_panel"));
const collapse_add_row_1 = __importDefault(require("./collapse_add_row"));
const error_tooltip_1 = require("./error_tooltip");
const add_new_row_component_1 = require("./add_new_row_component");
const useEditRow_1 = __importDefault(require("./hook/useEditRow"));
const delete_modal_1 = __importDefault(require("../delete_modal"));
const table_context_1 = require("../../context/table_context");
const OptTableRow = (props, ref) => {
let { table_head_list, row_data, has_edit_row, DetailPanels, options, } = props;
const { openShowError, show_error, editedRow, editRowHandler, setEditRow, set_edit_loading, edit_loading, open_modal, set_open_modal, } = (0, useEditRow_1.default)({ ref: ref, options });
const { is_edited, set_row_to_edit, current_row, set_current_row } = (0, react_1.useContext)(table_context_1.tableContext);
/* @ts-ignore */
let render_index = is_edited === row_data.id;
let Detail = DetailPanels === null || DetailPanels === void 0 ? void 0 : DetailPanels.find((item, i) => item.table_key === (current_row === null || current_row === void 0 ? void 0 : current_row.table_key));
const Comp = Detail === null || Detail === void 0 ? void 0 : Detail.Component;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(framer_motion_1.motion.tr, { style: { border: "unset" } },
react_1.default.createElement(collapse_add_row_1.default, { onCancel: () => set_row_to_edit === null || set_row_to_edit === void 0 ? void 0 : set_row_to_edit(-1), onAccept: () => {
var _a, _b, _c;
set_edit_loading(true);
/* @ts-ignore */
(_c = (_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.editRowDataManager(editedRow)) === null || _b === void 0 ? void 0 : _b.then((res) => {
if (res === true) {
set_row_to_edit === null || set_row_to_edit === void 0 ? void 0 : set_row_to_edit(-1);
}
})) === null || _c === void 0 ? void 0 : _c.catch((err) => { }).finally(() => {
set_edit_loading(false);
});
}, loading: edit_loading, is_disabled: edit_loading, Comp: react_1.default.createElement(material_1.TableRow, { sx: { border: "unset" } }, table_head_list
.filter((item) => item.editable === true)
.map((table_row, index) => {
let first_to_focus = table_head_list.findIndex((item) => item.editable === true);
return (react_1.default.createElement(material_1.TableCell, { key: index, align: table_row.align, width: table_row.width, style: Object.assign({ padding: "8px 8px 8px", minWidth: table_row.width,
// flex:1,
fontFamily: "inherit", position: "relative" }, table_row.row_style) },
react_1.default.createElement(error_tooltip_1.BootstrapTooltip, { style: { fontFamily: "inherit" }, title: show_error.message, open: show_error.input_index === index },
react_1.default.createElement(material_1.TextField, Object.assign({ fullWidth: true, type: table_row.input_type, disabled: edit_loading || table_row.editable === false,
// key={`${edit_loading}`}
value: table_row.input_type === "price" &&
/* @ts-ignore */
!!(editedRow === null || editedRow === void 0 ? void 0 : editedRow[table_row.table_key])
? Number(
/* @ts-ignore */
parseInt(editedRow === null || editedRow === void 0 ? void 0 : editedRow[table_row.table_key])).toLocaleString()
: /* @ts-ignore */
(editedRow === null || editedRow === void 0 ? void 0 : editedRow[table_row.table_key]) || "", variant: "standard", onChange: (e) => {
let value;
switch (table_row.input_type) {
case "price":
value =
parseInt(e.target.value.split(",").join("")) || "";
break;
case "number":
value = parseInt(e.target.value);
default:
value = e.target.value;
break;
}
editRowHandler({
/* @ts-ignore */
key: table_row.table_key,
value,
});
}, size: "small", InputProps: { style: { fontFamily: "inherit" } }, label: table_row.title, autoFocus: index === first_to_focus, onKeyPress: (e) => {
(0, add_new_row_component_1.check_input_type)(e, openShowError, index,
/* @ts-ignore */
table_row.input_type);
e.stopPropagation();
} }, table_row.input_props)))));
})), is_open: row_data.id === is_edited })),
react_1.default.createElement(framer_motion_1.AnimatePresence, { mode: "wait", initial: false }, !render_index && (react_1.default.createElement(framer_motion_1.motion.tr, { key: `${render_index}`, style: {
fontFamily: "inherit",
border: "unset",
overflowY: "hidden",
width: "100%",
}, initial: { opacity: 0, y: 24 }, transition: { duration: 0.2 }, animate: {
opacity: 1,
y: 0,
}, exit: { opacity: 0, y: 24 } }, table_head_list === null || table_head_list === void 0 ? void 0 :
table_head_list.map((table_row, i) => {
const { Render } = table_row;
return (react_1.default.createElement(material_1.TableCell, { sx: {
fontFamily: "inherit",
}, key: i, align: table_row.align, width: table_row.width, style: Object.assign({ padding: table_row.has_details_penel ? 0 : "8px", cursor: table_row.has_details_penel ? "pointer" : "auto", minWidth: table_row.width }, table_row.row_style) }, table_row.has_details_penel ? (react_1.default.createElement(material_1.ButtonBase, { style: Object.assign({ padding: 8, width: "100%", height: "100%", cursor: table_row.has_details_penel
? "pointer"
: "auto", display: "flex", fontFamily: "inherit", justifyContent: table_row.align, minWidth: table_row.width }, table_row.row_style), onClick: () => {
if (table_row.has_details_penel) {
if (!!is_edited) {
set_row_to_edit === null || set_row_to_edit === void 0 ? void 0 : set_row_to_edit(-1);
}
set_current_row === null || set_current_row === void 0 ? void 0 : set_current_row((pre) =>
/* @ts-ignore */
(pre === null || pre === void 0 ? void 0 : pre.index) === row_data.id &&
(pre === null || pre === void 0 ? void 0 : pre.table_key) === table_row.table_key
? { index: -1, table_key: "" }
: {
/* @ts-ignore */
index: row_data.id,
table_key: table_row.table_key,
});
}
} },
Render && react_1.default.createElement(Render, { renderData: row_data }),
!!!Render && (row_data === null || row_data === void 0 ? void 0 : row_data[table_row === null || table_row === void 0 ? void 0 : table_row.table_key]))) : (react_1.default.createElement(react_1.default.Fragment, null,
Render && react_1.default.createElement(Render, { renderData: row_data }),
!!!Render && (row_data === null || row_data === void 0 ? void 0 : row_data[table_row === null || table_row === void 0 ? void 0 : table_row.table_key])))));
}),
((DetailPanels === null || DetailPanels === void 0 ? void 0 : DetailPanels.some((item) => item.table_key === "action_cell")) ||
has_edit_row) && (react_1.default.createElement(material_1.TableCell, { sx: {
minWidth: 120,
fontFamily: "inherit",
// boxShadow: (t: Theme) =>
// `0px 0.2px 0px ${
// t.palette.mode === "light"
// ? "#E8E8EF"
// : t.palette.background.paper
// }`,
} },
has_edit_row && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(material_1.IconButton, { onClick: () => {
set_current_row === null || set_current_row === void 0 ? void 0 : set_current_row(null);
setEditRow(row_data);
/* @ts-ignore */
set_row_to_edit(row_data.id);
} },
react_1.default.createElement(icons_material_1.Edit, { sx: {
color: (t) => t.palette.mode === "dark"
? t.palette.secondary.main
: t.palette.primary.main,
} })),
react_1.default.createElement(material_1.IconButton, { onClick: () => {
setEditRow(row_data);
set_open_modal(true);
} },
react_1.default.createElement(icons_material_1.Delete, { sx: {
color: (t) => t.palette.mode === "dark"
? t.palette.secondary.main
: t.palette.primary.main,
} })),
react_1.default.createElement(delete_modal_1.default, { options: options, title_component: options === null || options === void 0 ? void 0 : options.delete_modal_title, onYesClick: () => {
/*@ts-ignore*/
options === null || options === void 0 ? void 0 : options.deleteDataHandler(row_data).then((res) => {
set_open_modal(false);
}).catch((err) => { });
}, props: {
open: open_modal,
onClose: () => {
set_open_modal(false);
},
} }))),
(DetailPanels === null || DetailPanels === void 0 ? void 0 : DetailPanels.some((item) => item.table_key === "action_cell")) && (react_1.default.createElement(material_1.IconButton, { onClick: (e) => {
set_current_row === null || set_current_row === void 0 ? void 0 : set_current_row((pre) =>
/* @ts-ignore */
(pre === null || pre === void 0 ? void 0 : pre.index) === row_data.id &&
(pre === null || pre === void 0 ? void 0 : pre.table_key) === "action_cell"
? null
: /* @ts-ignore */
{ index: row_data.id, table_key: "action_cell" });
} },
react_1.default.createElement(icons_material_1.ExpandMore, { sx: {
color: (t) => t.palette.mode === "light" ? "black" : "white",
transition: "0.2s",
transform: `rotate(${
/* @ts-ignore */
row_data.id === (current_row === null || current_row === void 0 ? void 0 : current_row.index) &&
(current_row === null || current_row === void 0 ? void 0 : current_row.table_key) === "action_cell"
? 180
: 0}deg)`,
} })))))))),
react_1.default.createElement(material_1.TableRow, { sx: { border: "unset" } },
react_1.default.createElement(collapse_detail_panel_1.default
/* @ts-ignore */
, {
/* @ts-ignore */
is_open: (current_row === null || current_row === void 0 ? void 0 : current_row.index) === row_data.id, motion_key: current_row === null || current_row === void 0 ? void 0 : current_row.table_key, Comp: Comp && (react_1.default.createElement(Comp
/* @ts-ignore */
, {
/* @ts-ignore */
is_open: (current_row === null || current_row === void 0 ? void 0 : current_row.index) === row_data.id, rowData: row_data })) }))));
};
const ForwardedRowWithRef = react_1.default.forwardRef(OptTableRow);
const MemorizedRow = (0, react_1.memo)(ForwardedRowWithRef);
// export default ;
exports.default = MemorizedRow;
//# sourceMappingURL=table_row.js.map