pixelize-design-library 2.2.183 → 2.2.185

package/dist/Components/Table/Components/TableBody.js

@@ -44,12 +44,63 @@ var TableLoading_1 = require("./TableLoading");
 var TableActions_1 = __importDefault(require("./TableActions"));
 var lucide_react_1 = require("lucide-react");
 var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+var TableRow = react_2.default.memo(function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var row = _a.row, rowIndex = _a.rowIndex, index = _a.index, isChecked = _a.isChecked, isExpanded = _a.isExpanded, isContent = _a.isContent, isLink = _a.isLink, isCheckbox = _a.isCheckbox, isLoading = _a.isLoading, isActionFreeze = _a.isActionFreeze, columns = _a.columns, columnWidths = _a.columnWidths, noBorders = _a.noBorders, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, theme = _a.theme, handleCheckbox = _a.handleCheckbox, onRowClick = _a.onRowClick, toggleRowExpansion = _a.toggleRowExpansion;
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement(react_1.Tr, { opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: isChecked
+                ? {
+                    "& td": {
+                        backgroundColor: theme.colors.disabled[100],
+                    },
+                }
+                : {} },
+            isContent && (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], color: freezedTextColor, position: "sticky", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.border[500]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, !!(row === null || row === void 0 ? void 0 : row.content) && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" })))),
+            isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g[50], textTransform: "capitalize", backgroundColor: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j[50], position: "sticky", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_k = theme.colors) === null || _k === void 0 ? void 0 : _k.border[500]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
+                react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked }))),
+            columns.map(function (header, headerIndex) {
+                var _a, _b, _c, _d, _e, _f, _g;
+                if (header.isHidden)
+                    return null;
+                var isFrozen = header.isFreeze;
+                var leftOffset = (0, table_1.TableCellCalculation)({
+                    isFrozen: isFrozen,
+                    columnWidths: columnWidths,
+                    headerIndex: headerIndex,
+                    isCheckbox: isCheckbox,
+                    header: header,
+                    row: row,
+                    freezedBgColor: freezedBgColor,
+                    index: index,
+                    theme: theme,
+                }).leftOffset;
+                return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: 45, key: headerIndex + 1, onClick: function () {
+                        return !header.node
+                            ? onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, { label: header.label, id: header.id })
+                            : null;
+                    }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], textOverflow: "ellipsis", borderBottom: noBorders
+                        ? "none"
+                        : "0.063rem solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500], _hover: ((_e = row.cellStyle) === null || _e === void 0 ? void 0 : _e[header.id]) || row.rowStyle
+                        ? {}
+                        : {
+                            backgroundColor: (_g = (_f = theme.colors.secondary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[4],
+                        } },
+                    react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]))));
+            }),
+            isLink && (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: (_m = (_l = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _l === void 0 ? void 0 : _l.background) === null || _m === void 0 ? void 0 : _m[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_o = theme.colors) === null || _o === void 0 ? void 0 : _o.border[500]), boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))))),
+        row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
+            react_2.default.createElement(react_1.Td, { colSpan: columns.length +
+                    (isCheckbox ? 1 : 0) +
+                    (isContent ? 1 : 0) +
+                    (isLink ? 1 : 0), p: 2 },
+                react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
+});
 var TableBody = function (_a) {
     var _b, _c, _d, _e, _f;
     var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, loadingSkeletonRows = _a.loadingSkeletonRows;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _g = (0, react_2.useState)(new Set()), expandedRows = _g[0], setExpandedRows = _g[1];
-    var toggleRowExpansion = function (rowIndex) {
+    var toggleRowExpansion = (0, react_2.useCallback)(function (rowIndex) {
         setExpandedRows(function (prev) {
             var newSet = new Set(prev);
             if (newSet.has(rowIndex)) {
@@ -60,30 +111,13 @@ var TableBody = function (_a) {
             }
             return newSet;
         });
-    };
-    var handleRowClick = function (row, header) {
-        onRowClick && onRowClick(row, header);
-    };
-    var RenderCheckbox = (0, react_2.useCallback)(function (_a) {
-        var _b, _c, _d, _e, _f;
-        var row = _a.row, isChecked = _a.isChecked;
-        return (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], textTransform: "capitalize", backgroundColor: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], position: "sticky", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_f = theme.colors) === null || _f === void 0 ? void 0 : _f.border[500]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
-            react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked })));
-    }, [handleCheckbox, noBorders, theme.colors]);
-    var RenderContent = (0, react_2.useCallback)(function (_a) {
-        var _b, _c, _d, _e;
-        var isExpanded = _a.isExpanded, rowIndex = _a.rowIndex, isContent = _a.isContent;
-        return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], color: freezedTextColor, position: "sticky", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.border[500]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
-    }, [freezedTextColor, noBorders, theme.colors]);
-    var RenderView = (0, react_2.useCallback)(function (_a) {
-        var _b, _c, _d;
-        var row = _a.row;
-        return (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.border[500]), boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))));
-    }, [freezedTextColor, noBorders, theme.colors, isActionFreeze]);
-    var totalVisibleColumns = Object.values(columns).filter(function (o) { return !o.isHidden; }).length +
-        (isCheckbox ? 1 : 0) +
-        (isContent ? 1 : 0) +
-        (isLink ? 1 : 0);
+    }, []);
+    var totalVisibleColumns = (0, react_2.useMemo)(function () {
+        return columns.filter(function (o) { return !o.isHidden; }).length +
+            (isCheckbox ? 1 : 0) +
+            (isContent ? 1 : 0) +
+            (isLink ? 1 : 0);
+    }, [columns, isCheckbox, isContent, isLink]);
     if (isLoading && data.length === 0) {
         return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
     }
@@ -99,58 +133,11 @@ var TableBody = function (_a) {
                 react_2.default.createElement(react_1.Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10 },
                     react_2.default.createElement(react_1.Spinner, { size: "sm", color: ((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.primary) === null || _f === void 0 ? void 0 : _f[500]) || "blue.500" }))))),
         data.map(function (row, index) {
+            var _a;
             var rowIndex = startRow + index;
             var isExpanded = expandedRows.has(rowIndex);
             var isChecked = selections.includes(row.id);
-            return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
-                react_2.default.createElement(react_1.Tr, { key: index + 1, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: isChecked
-                        ? {
-                            "& td": {
-                                backgroundColor: theme.colors.disabled[100],
-                            },
-                        }
-                        : {} },
-                    isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!(row === null || row === void 0 ? void 0 : row.content) })),
-                    isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
-                    columns.map(function (header, headerIndex) {
-                        var _a, _b, _c, _d, _e, _f, _g;
-                        if (header.isHidden)
-                            return null;
-                        var isFrozen = header.isFreeze;
-                        var leftOffset = (0, table_1.TableCellCalculation)({
-                            isFrozen: isFrozen,
-                            columnWidths: columnWidths,
-                            headerIndex: headerIndex,
-                            isCheckbox: isCheckbox,
-                            header: header,
-                            row: row,
-                            freezedBgColor: freezedBgColor,
-                            index: index,
-                            theme: theme,
-                        }).leftOffset;
-                        return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: 45, key: headerIndex + 1, onClick: function () {
-                                return !header.node
-                                    ? handleRowClick(row, {
-                                        label: header.label,
-                                        id: header.id,
-                                    })
-                                    : null;
-                            }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], textOverflow: "ellipsis", borderBottom: noBorders
-                                ? "none"
-                                : "0.063rem solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500], _hover: ((_e = row.cellStyle) === null || _e === void 0 ? void 0 : _e[header.id]) || row.rowStyle
-                                ? {}
-                                : {
-                                    backgroundColor: (_g = (_f = theme.colors.secondary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[4],
-                                } },
-                            react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]))));
-                    }),
-                    isLink && react_2.default.createElement(RenderView, { row: row })),
-                row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
-                    react_2.default.createElement(react_1.Td, { colSpan: columns.length +
-                            (isCheckbox ? 1 : 0) +
-                            (isContent ? 1 : 0) +
-                            (isLink ? 1 : 0), p: 2 },
-                        react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
+            return (react_2.default.createElement(TableRow, { key: (_a = row.id) !== null && _a !== void 0 ? _a : rowIndex, row: row, rowIndex: rowIndex, index: index, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion }));
         })));
 };
 exports.default = TableBody;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.183",
+  "version": "2.2.185",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",