opt-table
Version:
A Responsive and Customizable Rich Table
189 lines • 13.8 kB
JavaScript
import { ButtonBase, IconButton, TableCell, TableRow, TextField, } from "@mui/material";
import React, { memo, useContext } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Delete, Edit, ExpandMore } from "@mui/icons-material";
import CollapseRowWrapper from "./collapse_detail_panel";
import CollapseAddRow from "./collapse_add_row";
import { BootstrapTooltip } from "./error_tooltip";
import { check_input_type } from "./add_new_row_component";
import useEditRow from "./hook/useEditRow";
import DeleteMenuModal from "../delete_modal";
import { tableContext } from "../../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, } = useEditRow({ ref: ref, options });
const { is_edited, set_row_to_edit, current_row, set_current_row } = useContext(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.createElement(React.Fragment, null,
React.createElement(motion.tr, { style: { border: "unset" } },
React.createElement(CollapseAddRow, { 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.createElement(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.createElement(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.createElement(BootstrapTooltip, { style: { fontFamily: "inherit" }, title: show_error.message, open: show_error.input_index === index },
React.createElement(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) => {
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.createElement(AnimatePresence, { mode: "wait", initial: false }, !render_index && (React.createElement(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.createElement(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.createElement(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.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.createElement(React.Fragment, null,
Render && React.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.createElement(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.createElement(React.Fragment, null,
React.createElement(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.createElement(Edit, { sx: {
color: (t) => t.palette.mode === "dark"
? t.palette.secondary.main
: t.palette.primary.main,
} })),
React.createElement(IconButton, { onClick: () => {
setEditRow(row_data);
set_open_modal(true);
} },
React.createElement(Delete, { sx: {
color: (t) => t.palette.mode === "dark"
? t.palette.secondary.main
: t.palette.primary.main,
} })),
React.createElement(DeleteMenuModal, { 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.createElement(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.createElement(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.createElement(TableRow, { sx: { border: "unset" } },
React.createElement(CollapseRowWrapper
/* @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.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.forwardRef(OptTableRow);
const MemorizedRow = memo(ForwardedRowWithRef);
// export default ;
export default MemorizedRow;
//# sourceMappingURL=table_row.js.map