@pdg/react-table 1.0.48 → 1.0.50

package/dist/index.js

@@ -3037,55 +3037,7 @@ var TableBodyRow = function (_a) {
     return (React.createElement(StyledBodyRow, __assign$3({ className: classNames('TableBodyRow', className), style: finalStyle }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(TableBodyCell, { key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); })));
 };
 TableBodyRow.displayName = 'TableBodyRow';
-TableBodyRow.defaultProps = TableBodyRowDefaultProps;var TableHeadCell = function (_a) {
-    // Use ---------------------------------------------------------------------------------------------------------------
-    var column = _a.column, defaultAlign = _a.defaultAlign, top = _a.top, onCheckChange = _a.onCheckChange;
-    var _b = useTableState(), setHeadColumnChecked = _b.setHeadColumnChecked, setHeadColumnCommands = _b.setHeadColumnCommands;
-    // State -------------------------------------------------------------------------------------------------------------
-    var _c = React.useState(false), checked = _c[0], setChecked = _c[1];
-    var _d = React.useState(false), checkDisabled = _d[0], setCheckDisabled = _d[1];
-    // Effect ------------------------------------------------------------------------------------------------------------
-    React.useEffect(function () {
-        if (column.type === 'check') {
-            setHeadColumnChecked(column, checked);
-        }
-    }, [column, checked, setHeadColumnChecked]);
-    React.useEffect(function () {
-        setHeadColumnCommands(column, {
-            setChecked: function (checked) {
-                if (column.type === 'check') {
-                    setChecked(checked);
-                }
-            },
-            setCheckDisabled: function (checkDisabled) {
-                if (column.type === 'check') {
-                    setCheckDisabled(checkDisabled);
-                }
-            },
-        });
-    }, [setHeadColumnCommands, column]);
-    // Memo --------------------------------------------------------------------------------------------------------------
-    var style = React.useMemo(function () { return (top !== undefined ? { top: top } : undefined); }, [top]);
-    var data = React.useMemo(function () {
-        var _a, _b;
-        if (column.type === 'check') {
-            return (React.createElement(material.Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
-                    setChecked(newChecked);
-                    onCheckChange && onCheckChange(column, newChecked);
-                } }));
-        }
-        else {
-            if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
-                return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender();
-            }
-            else {
-                return column.label;
-            }
-        }
-    }, [checkDisabled, checked, column, onCheckChange]);
-    // Render ------------------------------------------------------------------------------------------------------------
-    return (React.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', style: style, column: column, defaultAlign: defaultAlign }, data));
-};var TableFooterCell = function (_a) {
+TableBodyRow.defaultProps = TableBodyRowDefaultProps;var TableFooterCell = function (_a) {
     var column = _a.column, defaultAlign = _a.defaultAlign;
     var data = React.useMemo(function () {
         var _a, _b, _c;
@@ -3261,19 +3213,65 @@ var native = {
             fontWeight: 700,
         },
     });
-});var BottomLine = material.styled('div')(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  height: 1px;\n  position: absolute;\n  left: 3px;\n  right: 3px;\n  bottom: 0;\n"], ["\n  height: 1px;\n  position: absolute;\n  left: 3px;\n  right: 3px;\n  bottom: 0;\n"])));
+});var TableHeadCell = function (_a) {
+    // Use ---------------------------------------------------------------------------------------------------------------
+    var column = _a.column, defaultAlign = _a.defaultAlign, top = _a.top, onCheckChange = _a.onCheckChange;
+    var _b = useTableState(), setHeadColumnChecked = _b.setHeadColumnChecked, setHeadColumnCommands = _b.setHeadColumnCommands;
+    // State -------------------------------------------------------------------------------------------------------------
+    var _c = React.useState(false), checked = _c[0], setChecked = _c[1];
+    var _d = React.useState(false), checkDisabled = _d[0], setCheckDisabled = _d[1];
+    // Effect ------------------------------------------------------------------------------------------------------------
+    React.useEffect(function () {
+        if (column.type === 'check') {
+            setHeadColumnChecked(column, checked);
+        }
+    }, [column, checked, setHeadColumnChecked]);
+    React.useEffect(function () {
+        setHeadColumnCommands(column, {
+            setChecked: function (checked) {
+                if (column.type === 'check') {
+                    setChecked(checked);
+                }
+            },
+            setCheckDisabled: function (checkDisabled) {
+                if (column.type === 'check') {
+                    setCheckDisabled(checkDisabled);
+                }
+            },
+        });
+    }, [setHeadColumnCommands, column]);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var style = React.useMemo(function () { return (top !== undefined ? { top: top } : undefined); }, [top]);
+    var data = React.useMemo(function () {
+        var _a, _b;
+        if (column.type === 'check') {
+            return (React.createElement(material.Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
+                    setChecked(newChecked);
+                    onCheckChange && onCheckChange(column, newChecked);
+                } }));
+        }
+        else {
+            if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
+                return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender();
+            }
+            else {
+                return column.label;
+            }
+        }
+    }, [checkDisabled, checked, column, onCheckChange]);
+    // Render ------------------------------------------------------------------------------------------------------------
+    return (React.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', style: style, column: column, defaultAlign: defaultAlign }, data));
+};var BottomLine = material.styled('div')(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  height: 1px;\n  position: absolute;\n  left: 3px;\n  right: 3px;\n  bottom: 0;\n"], ["\n  height: 1px;\n  position: absolute;\n  left: 3px;\n  right: 3px;\n  bottom: 0;\n"])));
 var TableTopHead = function (_a) {
     // Use ---------------------------------------------------------------------------------------------------------------
-    var columnLength = _a.columnLength, rows = _a.rows, caption = _a.caption, onHeightChange = _a.onHeightChange;
+    var columns = _a.columns, rows = _a.rows, caption = _a.caption, defaultAlign = _a.defaultAlign, onCheckChange = _a.onCheckChange;
     var theme = material.useTheme();
     // Ref ---------------------------------------------------------------------------------------------------------------
-    var headRef = React.useRef(null);
     var captionRef = React.useRef(null);
     var row1Ref = React.useRef(null);
     var row2Ref = React.useRef(null);
     var row3Ref = React.useRef(null);
     // ResizeDetector ----------------------------------------------------------------------------------------------------
-    var headHeight = useResizeDetector({ targetRef: headRef, handleWidth: false, handleHeight: true }).height;
     var captionHeight = useResizeDetector({
         targetRef: captionRef,
         handleWidth: false,
@@ -3282,15 +3280,11 @@ var TableTopHead = function (_a) {
     var row1Height = useResizeDetector({ targetRef: row1Ref, handleWidth: false, handleHeight: true }).height;
     var row2Height = useResizeDetector({ targetRef: row2Ref, handleWidth: false, handleHeight: true }).height;
     var row3Height = useResizeDetector({ targetRef: row3Ref, handleWidth: false, handleHeight: true }).height;
-    React.useEffect(function () {
-        onHeightChange && onHeightChange(headHeight || 0);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [headHeight]);
     // Function ----------------------------------------------------------------------------------------------------------
     var captionRow = React.useMemo(function () {
         return !!caption && (React.createElement(TableTopHeadCaptionRow, { ref: captionRef, className: 'TableTopHeadCaptionRow' },
-            React.createElement(material.TableCell, { colSpan: columnLength }, caption)));
-    }, [caption, columnLength]);
+            React.createElement(material.TableCell, { colSpan: columns.length }, caption)));
+    }, [caption, columns]);
     var makeRowCells = React.useCallback(function (row, top) {
         var cells = row
             .map(function (info, idx) {
@@ -3302,17 +3296,19 @@ var TableTopHead = function (_a) {
                 info.label != null && React.createElement(BottomLine, { style: { backgroundColor: theme.palette.divider } })));
         })
             .filter(function (cell) { return !!cell; });
-        if (cells.length < columnLength) {
-            cells.push(React.createElement(material.TableCell, { key: columnLength, colSpan: columnLength - cells.length, style: { top: top, borderBottom: 0 } }));
+        if (cells.length < columns.length) {
+            cells.push(React.createElement(material.TableCell, { key: columns.length, colSpan: columns.length - cells.length, style: { top: top, borderBottom: 0 } }));
         }
         return cells;
-    }, [columnLength, theme.palette.divider]);
+    }, [columns, theme.palette.divider]);
+    var columnRow = React.useMemo(function () {
+        var top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
+        return (React.createElement(material.TableRow, null, columns.map(function (column, idx) { return (React.createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
+    }, [captionHeight, columns, defaultAlign, onCheckChange, row1Height, row2Height, row3Height]);
     // Render ------------------------------------------------------------------------------------------------------------
-    if ((!rows || rows.length === 0) && caption === null)
-        return null;
     if (rows) {
         if (Array.isArray(rows[0])) {
-            return (React.createElement(material.TableHead, { className: 'TableTopHead', ref: headRef },
+            return (React.createElement(material.TableHead, { className: 'TableHead' },
                 captionRow,
                 rows.map(function (row, idx) {
                     var ref = undefined;
@@ -3333,17 +3329,20 @@ var TableTopHead = function (_a) {
                         case 3:
                             top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
                     }
-                    return (React.createElement(material.TableRow, { key: idx, ref: ref, className: 'TableTopHeadRow' }, makeRowCells(row, top)));
+                    return (React.createElement(material.TableRow, { key: idx, ref: ref, className: 'TableHeadRow' }, makeRowCells(row, top)));
                 })));
         }
         else {
-            return (React.createElement(material.TableHead, { className: 'TableTopHead', ref: headRef },
+            return (React.createElement(material.TableHead, { className: 'TableHead' },
                 captionRow,
-                React.createElement(material.TableRow, { className: 'TableTopHeadRow' }, makeRowCells(rows, captionHeight))));
+                React.createElement(material.TableRow, { ref: row1Ref, className: 'TableHeadRow' }, makeRowCells(rows, captionHeight)),
+                columnRow));
         }
     }
     else {
-        return (React.createElement(material.TableHead, { className: 'TableTopHead', ref: headRef }, captionRow));
+        return (React.createElement(material.TableHead, { className: 'TableHead' },
+            captionRow,
+            columnRow));
     }
 };
 TableTopHead.displayName = 'TableTopHead';
@@ -3379,9 +3378,8 @@ var Table = React.forwardRef(function (_a, ref) {
     // State -------------------------------------------------------------------------------------------------------------
     var _b = React.useState(false), menuOpen = _b[0], setMenuOpen = _b[1];
     var _c = React.useState(undefined), openMenuId = _c[0], setOpenMenuId = _c[1];
-    var _d = React.useState(0), topHeadHeight = _d[0], setTopHeadHeight = _d[1];
     // State - containerHeight -------------------------------------------------------------------------------------------
-    var _e = React.useState(), containerHeight = _e[0], setContainerHeight = _e[1];
+    var _d = React.useState(), containerHeight = _d[0], setContainerHeight = _d[1];
     var containerHeightDetector = useResizeDetector({
         handleHeight: true,
         handleWidth: false,
@@ -3395,7 +3393,7 @@ var Table = React.forwardRef(function (_a, ref) {
         },
     }).ref;
     // State - footerHeight --------------------------------------------------------------------------------------------
-    var _f = React.useState(), pagingHeight = _f[0], setPagingHeight = _f[1];
+    var _e = React.useState(), pagingHeight = _e[0], setPagingHeight = _e[1];
     var pagingHeightResizeDetector = useResizeDetector({
         handleHeight: true,
         handleWidth: false,
@@ -3409,11 +3407,11 @@ var Table = React.forwardRef(function (_a, ref) {
         },
     }).ref;
     // State -----------------------------------------------------------------------------------------------------------
-    var _g = useAutoUpdateLayoutState(initColumns), columns = _g[0], setColumns = _g[1];
-    var _h = React.useState(), finalColumns = _h[0], setFinalColumns = _h[1];
-    var _j = useAutoUpdateLayoutState(initItems), items = _j[0], setItems = _j[1];
-    var _k = React.useState(), sortableItems = _k[0], setSortableItems = _k[1];
-    var _l = useAutoUpdateLayoutState(initPaging), paging = _l[0], setPaging = _l[1];
+    var _f = useAutoUpdateLayoutState(initColumns), columns = _f[0], setColumns = _f[1];
+    var _g = React.useState(), finalColumns = _g[0], setFinalColumns = _g[1];
+    var _h = useAutoUpdateLayoutState(initItems), items = _h[0], setItems = _h[1];
+    var _j = React.useState(), sortableItems = _j[0], setSortableItems = _j[1];
+    var _k = useAutoUpdateLayoutState(initPaging), paging = _k[0], setPaging = _k[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var tableSx = React.useMemo(function () {
         var sx = {
@@ -3785,12 +3783,8 @@ var Table = React.forwardRef(function (_a, ref) {
         return style;
     }, [fullHeight]);
     var tableTopHead = React.useMemo(function () {
-        return finalColumns && (React.createElement(TableTopHead, { columnLength: finalColumns.length, caption: caption, rows: topHeadRows, onHeightChange: setTopHeadHeight }));
-    }, [caption, finalColumns, topHeadRows]);
-    var tableHead = React.useMemo(function () {
-        return finalColumns && (React.createElement(material.TableHead, null,
-            React.createElement(material.TableRow, null, finalColumns.map(function (column, idx) { return (React.createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign, top: stickyHeader ? topHeadHeight : undefined, onCheckChange: handleHeadCheckChange })); }))));
-    }, [defaultAlign, finalColumns, handleHeadCheckChange, stickyHeader, topHeadHeight]);
+        return finalColumns && (React.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
+    }, [caption, defaultAlign, finalColumns, handleHeadCheckChange, topHeadRows]);
     var tableBody = React.useMemo(function () {
         return finalColumns && (React.createElement(material.TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React.createElement(sortable.SortableContext, { items: sortableItems, strategy: sortable.verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React.createElement(TableBodyRow, { key: item.id, className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color'), hover: true, sx: onGetBodyRowSx ? onGetBodyRowSx(item, idx) : undefined, id: item.id, index: idx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable$1, columns: finalColumns, item: item, onClick: onClick, onCheckChange: handleBodyCheckChange })); }))) : (React.createElement(StyledBodyRow$1, null,
             React.createElement(material.TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React.createElement(StyledNoDataDiv, null,
@@ -3840,7 +3834,6 @@ var Table = React.forwardRef(function (_a, ref) {
                 React.createElement(core.DndContext, { sensors: sensors, collisionDetection: core.closestCenter, onDragEnd: handleDragEnd },
                     React.createElement(material.Table, { stickyHeader: stickyHeader, sx: tableSx, style: tableStyle },
                         tableTopHead,
-                        tableHead,
                         tableBody,
                         tableFooter))),
             tablePaging))) : null;