pixelize-design-library 2.2.183 → 2.2.184

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/Components/Table/Components/TableBody.js +61 -74
  2. package/package.json +1 -1
package/dist/Components/Table/Components/TableBody.js CHANGED
@@ -44,12 +44,63 @@ var TableLoading_1 = require("./TableLoading");
44
44
  var TableActions_1 = __importDefault(require("./TableActions"));
45
45
  var lucide_react_1 = require("lucide-react");
46
46
  var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
47
+ var TableRow = react_2.default.memo(function (_a) {
48
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
49
+ 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;
50
+ return (react_2.default.createElement(react_2.default.Fragment, null,
51
+ react_2.default.createElement(react_1.Tr, { opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: isChecked
52
+ ? {
53
+ "& td": {
54
+ backgroundColor: theme.colors.disabled[100],
55
+ },
56
+ }
57
+ : {} },
58
+ 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" })))),
59
+ 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" },
60
+ react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked }))),
61
+ columns.map(function (header, headerIndex) {
62
+ var _a, _b, _c, _d, _e, _f, _g;
63
+ if (header.isHidden)
64
+ return null;
65
+ var isFrozen = header.isFreeze;
66
+ var leftOffset = (0, table_1.TableCellCalculation)({
67
+ isFrozen: isFrozen,
68
+ columnWidths: columnWidths,
69
+ headerIndex: headerIndex,
70
+ isCheckbox: isCheckbox,
71
+ header: header,
72
+ row: row,
73
+ freezedBgColor: freezedBgColor,
74
+ index: index,
75
+ theme: theme,
76
+ }).leftOffset;
77
+ return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: 45, key: headerIndex + 1, onClick: function () {
78
+ return !header.node
79
+ ? onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, { label: header.label, id: header.id })
80
+ : null;
81
+ }, 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
82
+ ? "none"
83
+ : "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
84
+ ? {}
85
+ : {
86
+ backgroundColor: (_g = (_f = theme.colors.secondary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[4],
87
+ } },
88
+ 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]))));
89
+ }),
90
+ 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 }))))),
91
+ row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
92
+ react_2.default.createElement(react_1.Td, { colSpan: columns.length +
93
+ (isCheckbox ? 1 : 0) +
94
+ (isContent ? 1 : 0) +
95
+ (isLink ? 1 : 0), p: 2 },
96
+ 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)))))));
97
+ });
47
98
  var TableBody = function (_a) {
48
99
  var _b, _c, _d, _e, _f;
49
100
  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;
50
101
  var theme = (0, useCustomTheme_1.useCustomTheme)();
51
102
  var _g = (0, react_2.useState)(new Set()), expandedRows = _g[0], setExpandedRows = _g[1];
52
- var toggleRowExpansion = function (rowIndex) {
103
+ var toggleRowExpansion = (0, react_2.useCallback)(function (rowIndex) {
53
104
  setExpandedRows(function (prev) {
54
105
  var newSet = new Set(prev);
55
106
  if (newSet.has(rowIndex)) {
@@ -60,30 +111,13 @@ var TableBody = function (_a) {
60
111
  }
61
112
  return newSet;
62
113
  });
63
- };
64
- var handleRowClick = function (row, header) {
65
- onRowClick && onRowClick(row, header);
66
- };
67
- var RenderCheckbox = (0, react_2.useCallback)(function (_a) {
68
- var _b, _c, _d, _e, _f;
69
- var row = _a.row, isChecked = _a.isChecked;
70
- 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" },
71
- react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked })));
72
- }, [handleCheckbox, noBorders, theme.colors]);
73
- var RenderContent = (0, react_2.useCallback)(function (_a) {
74
- var _b, _c, _d, _e;
75
- var isExpanded = _a.isExpanded, rowIndex = _a.rowIndex, isContent = _a.isContent;
76
- 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" }))));
77
- }, [freezedTextColor, noBorders, theme.colors]);
78
- var RenderView = (0, react_2.useCallback)(function (_a) {
79
- var _b, _c, _d;
80
- var row = _a.row;
81
- 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 }))));
82
- }, [freezedTextColor, noBorders, theme.colors, isActionFreeze]);
83
- var totalVisibleColumns = Object.values(columns).filter(function (o) { return !o.isHidden; }).length +
84
- (isCheckbox ? 1 : 0) +
85
- (isContent ? 1 : 0) +
86
- (isLink ? 1 : 0);
114
+ }, []);
115
+ var totalVisibleColumns = (0, react_2.useMemo)(function () {
116
+ return columns.filter(function (o) { return !o.isHidden; }).length +
117
+ (isCheckbox ? 1 : 0) +
118
+ (isContent ? 1 : 0) +
119
+ (isLink ? 1 : 0);
120
+ }, [columns, isCheckbox, isContent, isLink]);
87
121
  if (isLoading && data.length === 0) {
88
122
  return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
89
123
  }
@@ -99,58 +133,11 @@ var TableBody = function (_a) {
99
133
  react_2.default.createElement(react_1.Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10 },
100
134
  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" }))))),
101
135
  data.map(function (row, index) {
136
+ var _a;
102
137
  var rowIndex = startRow + index;
103
138
  var isExpanded = expandedRows.has(rowIndex);
104
139
  var isChecked = selections.includes(row.id);
105
- return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
106
- 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
107
- ? {
108
- "& td": {
109
- backgroundColor: theme.colors.disabled[100],
110
- },
111
- }
112
- : {} },
113
- isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!(row === null || row === void 0 ? void 0 : row.content) })),
114
- isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
115
- columns.map(function (header, headerIndex) {
116
- var _a, _b, _c, _d, _e, _f, _g;
117
- if (header.isHidden)
118
- return null;
119
- var isFrozen = header.isFreeze;
120
- var leftOffset = (0, table_1.TableCellCalculation)({
121
- isFrozen: isFrozen,
122
- columnWidths: columnWidths,
123
- headerIndex: headerIndex,
124
- isCheckbox: isCheckbox,
125
- header: header,
126
- row: row,
127
- freezedBgColor: freezedBgColor,
128
- index: index,
129
- theme: theme,
130
- }).leftOffset;
131
- return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: 45, key: headerIndex + 1, onClick: function () {
132
- return !header.node
133
- ? handleRowClick(row, {
134
- label: header.label,
135
- id: header.id,
136
- })
137
- : null;
138
- }, 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
139
- ? "none"
140
- : "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
141
- ? {}
142
- : {
143
- backgroundColor: (_g = (_f = theme.colors.secondary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[4],
144
- } },
145
- 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]))));
146
- }),
147
- isLink && react_2.default.createElement(RenderView, { row: row })),
148
- row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
149
- react_2.default.createElement(react_1.Td, { colSpan: columns.length +
150
- (isCheckbox ? 1 : 0) +
151
- (isContent ? 1 : 0) +
152
- (isLink ? 1 : 0), p: 2 },
153
- 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)))))));
140
+ 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 }));
154
141
  })));
155
142
  };
156
143
  exports.default = TableBody;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.183",
3
+ "version": "2.2.184",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",