mui-universal-table 1.0.7 → 1.0.8

package/dist/index.esm.js

@@ -254,12 +254,15 @@ function formatCellValue(header, rowValues) {
   }
   return browserDateTimeFormatter.format(d);
 }
-function stableSort(array, comparator, headers) {
+function stableSort(array, comparator, headers, orderBy) {
   var dateColumns = new Set(headers.filter(function (object) {
     return object.date;
   }).map(function (value) {
     return value.id;
   }));
+  var findHeader = headers.find(function (header) {
+    return header.id === orderBy;
+  });
 
   // Build stable entries — compare pre-computed sort keys so we never
   // mutate the original data or its shallow copies.
@@ -280,17 +283,19 @@ function stableSort(array, comparator, headers) {
     }
     return [el, sortKey, index];
   });
-  stabilizedThis.sort(function (a, b) {
-    var order = comparator(a[1], b[1]);
-    if (order !== 0) return order;
-    return a[2] - b[2];
-  });
+  if ((findHeader === null || findHeader === void 0 ? void 0 : findHeader.sortable) === undefined || (findHeader === null || findHeader === void 0 ? void 0 : findHeader.sortable) === false) {
+    stabilizedThis.sort(function (a, b) {
+      var order = comparator(a[1], b[1]);
+      if (order !== 0) return order;
+      return a[2] - b[2];
+    });
+  }
   return stabilizedThis.map(function (el) {
     return el[0];
   });
 }
 
-function useSearchableRows(data, headers) {
+function useSearchableRows(data, headers, async) {
   var _React$useState = React.useState(""),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     searchTerm = _React$useState2[0],
@@ -299,8 +304,8 @@ function useSearchableRows(data, headers) {
     return getSearchableColumnIds(headers);
   }, [headers]);
   var rows = React.useMemo(function () {
-    return filterRows(data, searchTerm, filterOptions);
-  }, [data, filterOptions, searchTerm]);
+    return async ? data : filterRows(data, searchTerm, filterOptions);
+  }, [async, data, filterOptions, searchTerm]);
   return {
     rows: rows,
     searchTerm: searchTerm,
@@ -399,18 +404,15 @@ TableTitle.propTypes = {
 };
 
 function ReloadBtn(_ref) {
-  var setLoading = _ref.setLoading,
-    loading = _ref.loading,
+  var loading = _ref.loading,
     onReload = _ref.onReload;
-  var canReload = typeof onReload === "function" || typeof setLoading === "function";
+  var canReload = typeof onReload === "function";
   if (!canReload) {
     return null;
   }
   var handleClick = function handleClick() {
     if (typeof onReload === "function") {
       onReload();
-    } else if (typeof setLoading === "function") {
-      setLoading(true);
     }
   };
   return /*#__PURE__*/React.createElement(Tooltip, {
@@ -423,7 +425,6 @@ function ReloadBtn(_ref) {
   }, /*#__PURE__*/React.createElement(RefreshIcon, null)));
 }
 ReloadBtn.propTypes = {
-  setLoading: PropTypes.func,
   loading: PropTypes.bool,
   /** Preferred callback — fires when the user clicks reload. */
   onReload: PropTypes.func
@@ -432,18 +433,14 @@ ReloadBtn.propTypes = {
 function FancySearch(_ref) {
   var value = _ref.value,
     onSubmit = _ref.onSubmit;
-  var _React$useState = React.useState(value),
+  var _React$useState = React.useState(Boolean(value)),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    search = _React$useState2[0],
-    setSearch = _React$useState2[1];
-  var _React$useState3 = React.useState(Boolean(search)),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    hover = _React$useState4[0],
-    setHover = _React$useState4[1];
-  var expanded = hover || Boolean(search);
+    hover = _React$useState2[0],
+    setHover = _React$useState2[1];
+  var expanded = hover || Boolean(value);
   var handleSubmit = function handleSubmit(e) {
     e.preventDefault();
-    onSubmit(search);
+    onSubmit(value);
   };
   var handleEndHover = function handleEndHover() {
     setHover(false);
@@ -453,22 +450,6 @@ function FancySearch(_ref) {
   // A ref tracks whether this sync came from the user typing or from a parent
   // update, so the debounce only fires for genuine user input.
   var isUserType = React.useRef(false);
-  React.useEffect(function () {
-    if (isUserType.current) {
-      // User is typing — debounce as normal
-      isUserType.current = false;
-      var timer = setTimeout(function () {
-        onSubmit(search);
-      }, 700);
-      return function () {
-        return clearTimeout(timer);
-      };
-    }
-    // External value change (parent reset, clear from clearSelection, etc.)
-    // — sync state and do NOT fire a stale debounce.
-    setSearch(value);
-    return undefined;
-  }, [search, value, onSubmit]);
   return /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit
   }, /*#__PURE__*/React.createElement(Paper, {
@@ -494,10 +475,10 @@ function FancySearch(_ref) {
     }
   }, /*#__PURE__*/React.createElement(InputBase, {
     placeholder: "Search",
-    value: search,
+    value: value,
     onChange: function onChange(e) {
       isUserType.current = true;
-      setSearch(e.target.value);
+      onSubmit(e.target.value);
     },
     sx: _objectSpread2({
       ml: 1,
@@ -508,7 +489,7 @@ function FancySearch(_ref) {
     }),
     onBlur: handleEndHover
   }), /*#__PURE__*/React.createElement(Collapse, {
-    "in": Boolean(search),
+    "in": Boolean(value),
     orientation: "horizontal",
     unmountOnExit: true
   }, /*#__PURE__*/React.createElement(Stack, {
@@ -521,7 +502,6 @@ function FancySearch(_ref) {
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: function onClick() {
       isUserType.current = false;
-      setSearch("");
       // Immediately clear instead of waiting for the debounce
       onSubmit("");
     }
@@ -567,8 +547,7 @@ SearchArea.propTypes = {
 };
 
 function TableToolbarContent(_ref) {
-  var setLoading = _ref.setLoading,
-    onReload = _ref.onReload,
+  var onReload = _ref.onReload,
     reloadBtnLoading = _ref.reloadBtnLoading,
     searchTerm = _ref.searchTerm,
     onSearchChange = _ref.onSearchChange,
@@ -604,7 +583,6 @@ function TableToolbarContent(_ref) {
     },
     id: "tableTitle"
   }, /*#__PURE__*/React.createElement(ReloadBtn, {
-    setLoading: setLoading,
     onReload: onReload,
     loading: reloadBtnLoading
   })), /*#__PURE__*/React.createElement(SearchArea, {
@@ -615,7 +593,6 @@ function TableToolbarContent(_ref) {
   })));
 }
 TableToolbarContent.propTypes = {
-  setLoading: PropTypes.func,
   onReload: PropTypes.func,
   reloadBtnLoading: PropTypes.bool,
   searchTerm: PropTypes.string,
@@ -627,25 +604,24 @@ TableToolbarContent.propTypes = {
 function useEnhancedTableState(_ref) {
   var rows = _ref.rows,
     subTable = _ref.subTable,
-    resetFlag = _ref.resetFlag;
-  var _React$useState = React.useState("asc"),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    order = _React$useState2[0],
-    setOrder = _React$useState2[1];
-  var _React$useState3 = React.useState(""),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    orderBy = _React$useState4[0],
-    setOrderBy = _React$useState4[1];
-  var _React$useState5 = React.useState(function () {
+    resetFlag = _ref.resetFlag,
+    apiCall = _ref.apiCall,
+    searchTerm = _ref.searchTerm,
+    setOrder = _ref.setOrder,
+    setOrderBy = _ref.setOrderBy,
+    order = _ref.order,
+    orderBy = _ref.orderBy,
+    asyncPages = _ref.asyncPages;
+  var _React$useState = React.useState(function () {
       return {
         page: 0,
         rowsPerPage: subTable ? rows.length : 5,
         resetFlag: resetFlag
       };
     }),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    pagination = _React$useState6[0],
-    setPagination = _React$useState6[1];
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    pagination = _React$useState2[0],
+    setPagination = _React$useState2[1];
   React.useEffect(function () {
     // eslint-disable-next-line react-hooks/set-state-in-effect
     setPagination(function (previous) {
@@ -660,11 +636,11 @@ function useEnhancedTableState(_ref) {
   }, [resetFlag]);
   var page = pagination.page;
   var rowsPerPage = subTable ? rows.length : pagination.rowsPerPage;
-  var handleRequestSort = React.useCallback(function (event, property) {
+  var handleRequestSort = React.useCallback(function (property) {
     var isAsc = orderBy === property && order === "asc";
     setOrder(isAsc ? "desc" : "asc");
     setOrderBy(property);
-  }, [order, orderBy]);
+  }, [order, orderBy, setOrder, setOrderBy]);
   var handleChangePage = React.useCallback(function (event, newPage) {
     setPagination(function (previous) {
       return _objectSpread2(_objectSpread2({}, previous), {}, {
@@ -680,14 +656,29 @@ function useEnhancedTableState(_ref) {
       });
     });
   }, []);
+  var handleSort = function handleSort(column, apiSortable) {
+    if (apiSortable) {
+      var direction = order === "asc" ? "desc" : "asc";
+      apiCall({
+        searchTerm: searchTerm,
+        column: column,
+        direction: direction,
+        pages: asyncPages !== null && asyncPages !== void 0 ? asyncPages : 1
+      });
+      setOrder(direction);
+      setOrderBy(column);
+      return;
+    }
+    handleRequestSort(column);
+  };
   return {
     order: order,
     orderBy: orderBy,
     page: page,
     rowsPerPage: rowsPerPage,
-    handleRequestSort: handleRequestSort,
     handleChangePage: handleChangePage,
-    handleChangeRowsPerPage: handleChangeRowsPerPage
+    handleChangeRowsPerPage: handleChangeRowsPerPage,
+    handleSort: handleSort
   };
 }
 
@@ -698,12 +689,8 @@ function EnhancedTableHead(props) {
     selectRows = props.selectRows,
     numSelected = props.numSelected,
     rowCount = props.rowCount,
-    onSelectAllClick = props.onSelectAllClick;
-  var createSortHandler = function createSortHandler(property) {
-    return function (event) {
-      onRequestSort(event, property);
-    };
-  };
+    onSelectAllClick = props.onSelectAllClick,
+    async = props.async;
   return /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, selectRows && /*#__PURE__*/React.createElement(TableCell, {
     padding: "checkbox"
   }, /*#__PURE__*/React.createElement(Checkbox, {
@@ -720,7 +707,9 @@ function EnhancedTableHead(props) {
     }, /*#__PURE__*/React.createElement(TableSortLabel, {
       active: orderBy === headCell.id,
       direction: orderBy === headCell.id ? order : "asc",
-      onClick: createSortHandler(headCell.id),
+      onClick: function onClick() {
+        return onRequestSort(headCell.id, headCell.sortable && async);
+      },
       disabled: headCell.subRow
     }, headCell.label, orderBy === headCell.id ? /*#__PURE__*/React.createElement(Box, {
       component: "span",
@@ -736,7 +725,8 @@ EnhancedTableHead.propTypes = {
   selectRows: PropTypes.bool,
   numSelected: PropTypes.number,
   rowCount: PropTypes.number,
-  onSelectAllClick: PropTypes.func
+  onSelectAllClick: PropTypes.func,
+  async: PropTypes.bool
 };
 
 /**
@@ -937,17 +927,30 @@ function EnhancedTable(props) {
     rows = props.rows,
     subTable = props.subTable,
     selected = props.selected,
-    selectID = props.selectID;
+    selectID = props.selectID,
+    setLoading = props.setLoading,
+    searchTerm = props.searchTerm,
+    setOrder = props.setOrder,
+    setOrderBy = props.setOrderBy,
+    order = props.order,
+    orderBy = props.orderBy,
+    async = props.async,
+    asyncPages = props.asyncPages;
   var _useEnhancedTableStat = useEnhancedTableState({
       rows: rows,
       subTable: subTable,
-      resetFlag: props.resetFlag
+      resetFlag: props.resetFlag,
+      apiCall: setLoading,
+      searchTerm: searchTerm,
+      setOrder: setOrder,
+      setOrderBy: setOrderBy,
+      order: order,
+      orderBy: orderBy,
+      asyncPages: asyncPages
     }),
-    order = _useEnhancedTableStat.order,
-    orderBy = _useEnhancedTableStat.orderBy,
     page = _useEnhancedTableStat.page,
     rowsPerPage = _useEnhancedTableStat.rowsPerPage,
-    handleRequestSort = _useEnhancedTableStat.handleRequestSort,
+    handleSort = _useEnhancedTableStat.handleSort,
     handleChangePage = _useEnhancedTableStat.handleChangePage,
     handleChangeRowsPerPage = _useEnhancedTableStat.handleChangeRowsPerPage;
   var emptyRows = Math.max(0, rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage));
@@ -955,7 +958,7 @@ function EnhancedTable(props) {
     return selected.includes(id);
   }, [selected]);
   var visibleRows = React.useMemo(function () {
-    return stableSort(rows, getComparator(order, orderBy), headers).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+    return stableSort(rows, getComparator(order, orderBy), headers, orderBy).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
   }, [headers, order, orderBy, page, rows, rowsPerPage]);
   return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
     sx: {
@@ -966,12 +969,13 @@ function EnhancedTable(props) {
   }, props.loading ? /*#__PURE__*/React.createElement(TableLoader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EnhancedTableHead, {
     order: order,
     orderBy: orderBy,
-    onRequestSort: handleRequestSort,
+    onRequestSort: handleSort,
     headings: headers,
     selectRows: props.selectRows,
     numSelected: selected.length,
     rowCount: rows.length,
-    onSelectAllClick: props.handleSelectAllClick
+    onSelectAllClick: props.handleSelectAllClick,
+    async: async
   }), /*#__PURE__*/React.createElement(TableBody, null, visibleRows.map(function (row, index) {
     var rowKey = selectID ? row[selectID] : "row-".concat(page * rowsPerPage + index);
     var rowID = getSelectableRowId(row, index, selectID);
@@ -1021,9 +1025,17 @@ EnhancedTable.propTypes = {
   handleClick: PropTypes.func,
   selected: PropTypes.array,
   selectID: PropTypes.string,
+  async: PropTypes.bool,
   resetFlag: PropTypes.string,
   pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
-  name: PropTypes.string
+  name: PropTypes.string,
+  setLoading: PropTypes.func,
+  searchTerm: PropTypes.string,
+  setOrder: PropTypes.func,
+  setOrderBy: PropTypes.func,
+  order: PropTypes.string,
+  orderBy: PropTypes.string,
+  asyncPages: PropTypes.number
 };
 
 function UniversalTable(_ref) {
@@ -1048,12 +1060,23 @@ function UniversalTable(_ref) {
     selectIcon = _ref.selectIcon,
     onSelection = _ref.onSelection,
     pageSizeOptions = _ref.pageSizeOptions,
-    persistSearch = _ref.persistSearch;
+    persistSearch = _ref.persistSearch,
+    asyncPages = _ref.asyncPages;
+  var debounceRef = React.useRef(null);
+  var async = typeof asyncPages === "number" && asyncPages > 0;
   var head = headers || [];
-  var _useSearchableRows = useSearchableRows(data, head),
+  var _useSearchableRows = useSearchableRows(data, head, async),
     rows = _useSearchableRows.rows,
     searchTerm = _useSearchableRows.searchTerm,
     setSearchTerm = _useSearchableRows.setSearchTerm;
+  var _React$useState = React.useState("asc"),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    order = _React$useState2[0],
+    setOrder = _React$useState2[1];
+  var _React$useState3 = React.useState(""),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    orderBy = _React$useState4[0],
+    setOrderBy = _React$useState4[1];
   var _useSelectableRows = useSelectableRows({
       rows: rows,
       selectRows: selectRows,
@@ -1067,6 +1090,41 @@ function UniversalTable(_ref) {
     clearSelection();
     setSearchTerm(value);
   }, [clearSelection, setSearchTerm]);
+  var handleSearch = function handleSearch(searchValue) {
+    if (async) {
+      setSearchTerm(searchValue);
+      clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(function () {
+        setLoading({
+          searchTerm: searchValue,
+          direction: order,
+          column: orderBy,
+          pages: asyncPages
+        });
+      }, 500);
+    } else {
+      handleSearchChange(searchValue);
+    }
+  };
+  React.useEffect(function () {
+    return function () {
+      return clearTimeout(debounceRef.current);
+    };
+  }, []);
+  var handleReload = React.useCallback(function () {
+    if (typeof onReload === "function") {
+      onReload();
+      return;
+    }
+    if (typeof setLoading === "function") {
+      setLoading(async ? {
+        searchTerm: searchTerm,
+        direction: order,
+        column: orderBy,
+        pages: asyncPages
+      } : true);
+    }
+  }, [async, onReload, setLoading, searchTerm, order, orderBy, asyncPages]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LazyLoadingIndicator, {
     show: lazyloading,
     currentPage: currentPage,
@@ -1083,17 +1141,17 @@ function UniversalTable(_ref) {
     name: name,
     subTable: subTable
   }), !subTable && /*#__PURE__*/React.createElement(TableToolbarContent, {
-    setLoading: setLoading,
-    onReload: onReload,
+    onReload: typeof onReload === "function" || typeof setLoading === "function" ? handleReload : undefined,
     reloadBtnLoading: reloadBtnLoading,
     searchTerm: searchTerm,
-    onSearchChange: handleSearchChange,
+    onSearchChange: handleSearch,
     name: name,
     persistSearch: persistSearch
   }), /*#__PURE__*/React.createElement(EnhancedTable, {
     headers: head,
     rows: rows,
     resetFlag: searchTerm,
+    searchTerm: searchTerm,
     subTable: subTable,
     hideBadge: hideBadge,
     loading: loading,
@@ -1103,7 +1161,14 @@ function UniversalTable(_ref) {
     selected: selected,
     selectID: selectID,
     pageSizeOptions: pageSizeOptions,
-    name: name
+    name: name,
+    setLoading: setLoading,
+    order: order,
+    orderBy: orderBy,
+    setOrder: setOrder,
+    setOrderBy: setOrderBy,
+    asyncPages: asyncPages,
+    async: async
   })));
 }
 UniversalTable.propTypes = {
@@ -1127,7 +1192,8 @@ UniversalTable.propTypes = {
   /** Override default page size options (e.g. [10, 25, 50]). Default auto-computed. */
   pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
   /** Persist search term to sessionStorage (requires name prop). Default: false */
-  persistSearch: PropTypes.bool
+  persistSearch: PropTypes.bool,
+  asyncPages: PropTypes.number
 };
 
 var UniversalTable$1 = /*#__PURE__*/Object.freeze({