@bluemarble/bm-components 1.4.2 → 1.5.0

package/dist/index.js

@@ -255,7 +255,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment2 = REACT_FRAGMENT_TYPE;
+        var Fragment3 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -314,7 +314,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment2;
+        exports.Fragment = Fragment3;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -2404,7 +2404,7 @@ function createBox(options = {}) {
   const BoxRoot = styled("div", {
     shouldForwardProp: (prop) => prop !== "theme" && prop !== "sx" && prop !== "as"
   })(styleFunctionSx_default);
-  const Box6 = /* @__PURE__ */ React3.forwardRef(function Box7(inProps, ref) {
+  const Box7 = /* @__PURE__ */ React3.forwardRef(function Box8(inProps, ref) {
     const theme = useTheme_default(defaultTheme);
     const _extendSxProp = extendSxProp(inProps), {
       className,
@@ -2417,7 +2417,7 @@ function createBox(options = {}) {
       theme: themeId ? theme[themeId] || theme : theme
     }, other));
   });
-  return Box6;
+  return Box7;
 }
 
 // node_modules/@mui/utils/generateUtilityClass/generateUtilityClass.js
@@ -3712,6 +3712,7 @@ var TabPanel = (props) => {
 
 
 
+
 // src/components/BaseGrid/Pagination/index.tsx
 
 
@@ -3817,7 +3818,6 @@ function BaseGrid({
   tableBodyProps,
   tableHeadProps,
   tableProps,
-  sortedDirection,
   sortedBy,
   onSortBy,
   dense = true,
@@ -3825,6 +3825,8 @@ function BaseGrid({
   bordered,
   currentPage,
   totalNumberOfPages,
+  tableSortLabelProps,
+  boxContainerProps,
   onPageChange,
   rowsPerPage,
   setRowsPerPage,
@@ -3832,6 +3834,7 @@ function BaseGrid({
   hideFooter,
   prependColumn,
   appendColumn,
+  loadingColSpan,
   isLoading
 }) {
   return /* @__PURE__ */ React2.default.createElement(
@@ -3840,34 +3843,52 @@ function BaseGrid({
       sx: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, styles.rowGap(dense)), styles.bordered(bordered)), styles.striped(striped)), styles.lastRowBorder(hideFooter)), paperProps == null ? void 0 : paperProps.sx)
     }),
     /* @__PURE__ */ React2.default.createElement(
-      _material.Table,
-      __spreadProps(__spreadValues({
-        size: "small",
-        stickyHeader: true
-      }, tableProps), {
-        sx: __spreadValues({}, tableProps == null ? void 0 : tableProps.sx)
+      _material.Box,
+      __spreadProps(__spreadValues({}, boxContainerProps), {
+        sx: __spreadValues({ overflowX: "auto" }, boxContainerProps == null ? void 0 : boxContainerProps.sx)
       }),
-      /* @__PURE__ */ React2.default.createElement(_material.TableHead, __spreadValues({}, tableHeadProps), /* @__PURE__ */ React2.default.createElement(_material.TableRow, null, prependColumn, columns.map((column) => /* @__PURE__ */ React2.default.createElement(
-        _material.TableCell,
-        {
-          key: column.name,
-          padding: dense ? "none" : "normal",
-          sx: __spreadValues({
-            pl: 2
-          }, column == null ? void 0 : column.sx)
-        },
-        column.children ? column.children : /* @__PURE__ */ React2.default.createElement(
-          _material.TableSortLabel,
+      /* @__PURE__ */ React2.default.createElement(
+        _material.Table,
+        __spreadProps(__spreadValues({
+          size: "small",
+          stickyHeader: true
+        }, tableProps), {
+          sx: __spreadValues({}, tableProps == null ? void 0 : tableProps.sx)
+        }),
+        /* @__PURE__ */ React2.default.createElement(_material.TableHead, __spreadValues({}, tableHeadProps), /* @__PURE__ */ React2.default.createElement(_material.TableRow, null, prependColumn, columns.map((column) => {
+          var _a;
+          return /* @__PURE__ */ React2.default.createElement(
+            _material.TableCell,
+            {
+              key: column.name,
+              padding: dense ? "none" : "normal",
+              sx: __spreadValues({
+                pl: 2
+              }, column == null ? void 0 : column.sx)
+            },
+            column.children ? column.children : /* @__PURE__ */ React2.default.createElement(
+              _material.TableSortLabel,
+              __spreadProps(__spreadValues({
+                active: sortedBy.some((p) => p.prop === column.name),
+                direction: ((_a = sortedBy.find((p) => p.prop === column.name)) == null ? void 0 : _a.direction) || "desc",
+                onClick: () => onSortBy(column.name),
+                disabled: column.canSort === false
+              }, tableSortLabelProps), {
+                sx: __spreadValues({}, tableSortLabelProps == null ? void 0 : tableSortLabelProps.sx)
+              }),
+              column.label
+            )
+          );
+        }), appendColumn), isLoading && /* @__PURE__ */ React2.default.createElement(_material.TableRow, null, /* @__PURE__ */ React2.default.createElement(
+          _material.TableCell,
           {
-            active: sortedBy === column.name,
-            direction: sortedDirection,
-            onClick: () => onSortBy(column.name),
-            disabled: column.canSort === false
+            colSpan: loadingColSpan || columns.length,
+            sx: { p: 0, border: "none" }
           },
-          column.label
-        )
-      )), appendColumn), isLoading && /* @__PURE__ */ React2.default.createElement(_material.TableRow, null, /* @__PURE__ */ React2.default.createElement(_material.TableCell, { colSpan: columns.length, sx: { p: 0, border: "none" } }, /* @__PURE__ */ React2.default.createElement(_material.LinearProgress, null)))),
-      /* @__PURE__ */ React2.default.createElement(_material.TableBody, __spreadValues({}, tableBodyProps), children)
+          /* @__PURE__ */ React2.default.createElement(_material.LinearProgress, null)
+        ))),
+        /* @__PURE__ */ React2.default.createElement(_material.TableBody, __spreadValues({}, tableBodyProps), children)
+      )
     ),
     !hideFooter && /* @__PURE__ */ React2.default.createElement(
       GridPagination,
@@ -3884,6 +3905,18 @@ function BaseGrid({
   );
 }
 
+// src/components/BaseGrid/BaseGridAutoRows.tsx
+
+
+
+function BaseGridAutoRows({
+  data,
+  columns,
+  rowKey
+}) {
+  return /* @__PURE__ */ React2.default.createElement(_react.Fragment, null, data.map((row) => /* @__PURE__ */ React2.default.createElement(_material.TableRow, { key: row[rowKey] }, columns.map((column) => /* @__PURE__ */ React2.default.createElement(_material.TableCell, { key: column.name }, row[column.name])))));
+}
+
 // src/components/Modal/index.tsx
 
 
@@ -4637,53 +4670,67 @@ function createFilter(filters) {
 }
 
 // src/hooks/useGrid.ts
+var _sortby = require('sort-by'); var _sortby2 = _interopRequireDefault(_sortby);
 function useGrid({
   columns,
   filters = [],
   search,
-  rowsPerPageOptions = [30, 60, 100]
+  rowsPerPageOptions = [30, 60, 100],
+  defaultData: externalDefaultData,
+  defaultCurrentPage,
+  defaultSortedBy
 }) {
-  const [defaultData, setDefaultData] = _react.useState.call(void 0, []);
-  const [sortedBy, setSortedBy] = _react.useState.call(void 0, "");
-  const [sortedDirection, setSortedDirection] = _react.useState.call(void 0, "desc");
-  const [currentPage, setCurrentPage] = _react.useState.call(void 0, 0);
+  const [defaultData, setDefaultData] = _react.useState.call(void 0, externalDefaultData || []);
+  const [sortedBy, setSortedBy] = _react.useState.call(void 0, 
+    defaultSortedBy || []
+  );
+  const [currentPage, setCurrentPage] = _react.useState.call(void 0, defaultCurrentPage || 0);
   const [rowsPerPage, setRowsPerPage] = _react.useState.call(void 0, rowsPerPageOptions[0]);
-  const toggleSortedDirection = () => {
-    if (sortedDirection === "desc")
-      setSortedDirection("asc");
-    if (sortedDirection === "asc")
-      setSortedDirection("desc");
+  const toggleSortedDirection = (direction) => {
+    if (direction === "asc")
+      return "desc";
+    return "asc";
   };
   function setSort(prop, direction) {
-    setSortedBy(prop);
-    setSortedDirection(direction);
+    setSortedBy((prev) => [...prev, { prop, direction }]);
   }
   const onSortBy = (prop) => {
     if (!prop)
       return;
-    if (prop === sortedBy) {
-      if (sortedDirection === "asc") {
-        toggleSortedDirection();
-        setSortedBy("");
-      } else
-        toggleSortedDirection();
+    const currentSorted = sortedBy.find((p) => p.prop === prop);
+    if (currentSorted) {
+      if (currentSorted.direction === "asc") {
+        setSortedBy((prev) => prev.filter((p) => p.prop !== prop));
+      } else {
+        setSortedBy((prev) => {
+          const newArr = prev.map((p) => {
+            if (p.prop !== prop)
+              return p;
+            return {
+              prop: p.prop,
+              direction: toggleSortedDirection(p.direction)
+            };
+          });
+          return [...newArr].slice(0);
+        });
+      }
     } else {
-      setSortedDirection("desc");
-      setSortedBy(prop);
+      setSortedBy((prev) => [...prev, { prop, direction: "desc" }]);
     }
   };
   const set = (data) => {
     setDefaultData(data);
   };
   function sortData(data) {
-    if (sortedBy) {
-      return data.sort((a, b) => {
-        const rowValue = (row) => getObjectValue(row)(sortedBy);
-        const compare = rowValue(b) > rowValue(a);
-        if (sortedDirection === "desc")
-          return compare ? 1 : -1;
-        return compare ? -1 : 1;
-      });
+    if (sortedBy.length > 0) {
+      const symbolDir = {
+        asc: "",
+        desc: "-"
+      };
+      const formattedKeys = sortedBy.map(
+        ({ prop, direction }) => `${symbolDir[direction]}${prop}`
+      );
+      return data.sort(_sortby2.default.call(void 0, ...formattedKeys));
     } else
       return data;
   }
@@ -4715,7 +4762,7 @@ function useGrid({
     const startPage = currentPage * rowsPerPage;
     const endPage = startPage + rowsPerPage;
     return sortedData.slice(startPage, endPage);
-  }, [sortedBy, sortedDirection, filteredData, currentPage, rowsPerPage]);
+  }, [sortedBy, filteredData, currentPage, rowsPerPage]);
   const totalNumberOfPages = Math.ceil(filteredData.length / rowsPerPage) - 1;
   return {
     data: displayData,
@@ -4723,7 +4770,6 @@ function useGrid({
     onSortBy,
     sortedBy,
     defaultData,
-    sortedDirection,
     columns,
     currentPage,
     totalNumberOfPages: totalNumberOfPages < 0 ? 0 : totalNumberOfPages,
@@ -4769,6 +4815,172 @@ function createSearch(options) {
   };
 }
 
+// src/hooks/useAsyncGrid.ts
+
+function useAsyncGrid({
+  columns,
+  filters = [],
+  search,
+  rowsPerPageOptions = [30, 60, 100],
+  onRequest,
+  axiosInstance,
+  url,
+  defaultData: externalDefaultData,
+  defaultCurrentPage,
+  defaultSortedBy
+}) {
+  const [defaultData, setDefaultData] = _react.useState.call(void 0, externalDefaultData || []);
+  const [sortedBy, setSortedBy] = _react.useState.call(void 0, 
+    defaultSortedBy || []
+  );
+  const [totalNumberOfItems, setTotalNumberOfItems] = _react.useState.call(void 0, 0);
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
+  const [currentPage, setCurrentPage] = _react.useState.call(void 0, defaultCurrentPage || 0);
+  const [rowsPerPage, setRowsPerPage] = _react.useState.call(void 0, rowsPerPageOptions[0]);
+  const totalNumberOfPages = Math.ceil(totalNumberOfItems / rowsPerPage) - 1;
+  const toggleSortedDirection = (direction) => {
+    if (direction === "asc")
+      return "desc";
+    return "asc";
+  };
+  function setSort(prop, direction) {
+    setSortedBy((prev) => [...prev, { prop, direction }]);
+  }
+  const onSortBy = (prop) => __async(this, null, function* () {
+    if (!prop)
+      return;
+    let finalArr = [];
+    const currentSorted = sortedBy.find((p) => p.prop === prop);
+    if (currentSorted) {
+      if (currentSorted.direction === "asc") {
+        finalArr = sortedBy.filter((p) => p.prop !== prop);
+      } else {
+        finalArr = sortedBy.map((p) => {
+          if (p.prop !== prop)
+            return p;
+          return {
+            prop: p.prop,
+            direction: toggleSortedDirection(p.direction)
+          };
+        });
+      }
+    } else {
+      finalArr = [...sortedBy, { prop, direction: "desc" }];
+    }
+    yield updateGridContent({
+      page: currentPage,
+      sortedBy: finalArr,
+      rowsPerPage
+    });
+  });
+  const set = _react.useCallback.call(void 0, 
+    (data) => {
+      setDefaultData(data);
+    },
+    [setDefaultData]
+  );
+  function baseRequest(_0) {
+    return __async(this, arguments, function* ({
+      page,
+      search: search2,
+      filters: filters2,
+      sortedBy: sortedBy2,
+      rowsPerPage: rowsPerPage2
+    }) {
+      if (!axiosInstance)
+        throw new Error("Axios instance not provided");
+      try {
+        const params = new URLSearchParams({
+          page: String(page),
+          rowsPerPage: String(rowsPerPage2),
+          searchText: (search2 == null ? void 0 : search2.value) || "",
+          sort: sortedBy2.map(({ prop, direction }) => `${prop}:${direction}`).join(","),
+          filters: filters2.map(
+            (filter) => `${filter.prop}:${filter.compareType}:${filter.value}`
+          ).join(",")
+        });
+        const pathWithParams = `${url}?${params.toString()}`;
+        const { data } = yield axiosInstance.get(pathWithParams);
+        setTotalNumberOfItems(data.totalNumberOfItems);
+        return data.rows;
+      } catch (error) {
+        return [];
+      }
+    });
+  }
+  const updateGridContent = _react.useCallback.call(void 0, 
+    (_0) => __async(this, [_0], function* ({
+      page,
+      sortedBy: sortedBy2,
+      rowsPerPage: rowsPerPage2
+    }) {
+      setIsLoading(true);
+      try {
+        const props = {
+          page,
+          rowsPerPage: rowsPerPage2,
+          sortedBy: sortedBy2,
+          search,
+          filters
+        };
+        const result = !onRequest ? yield baseRequest(props) : yield onRequest(props);
+        setSortedBy(sortedBy2);
+        setRowsPerPage(rowsPerPage2);
+        set(result);
+        setCurrentPage(page);
+      } catch (error) {
+        throw error;
+      } finally {
+        setIsLoading(false);
+      }
+    }),
+    [set, rowsPerPage, setCurrentPage, search, filters]
+  );
+  const onPageChange = (pageNumber) => {
+    if (pageNumber < 0)
+      return;
+    if (pageNumber > totalNumberOfPages)
+      return;
+    updateGridContent({ page: pageNumber, sortedBy, rowsPerPage });
+  };
+  const onChangeRowsPerPage = (rows) => {
+    let totalNumberOfPages2 = Math.round(totalNumberOfItems / rows) - 1;
+    totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
+    if (currentPage > totalNumberOfPages2)
+      updateGridContent({
+        page: totalNumberOfPages2,
+        sortedBy,
+        rowsPerPage: rows
+      });
+    updateGridContent({
+      page: currentPage,
+      sortedBy,
+      rowsPerPage: rows
+    });
+  };
+  const displayData = defaultData;
+  _react.useEffect.call(void 0, () => {
+    updateGridContent({ page: 0, sortedBy: [], rowsPerPage });
+  }, []);
+  return {
+    data: displayData,
+    set,
+    onSortBy,
+    sortedBy,
+    defaultData,
+    columns,
+    currentPage,
+    totalNumberOfPages: totalNumberOfPages < 0 ? 0 : totalNumberOfPages,
+    onPageChange,
+    setRowsPerPage: onChangeRowsPerPage,
+    rowsPerPageOptions,
+    rowsPerPage,
+    setSort,
+    isLoading,
+    setIsLoading
+  };
+}
+
 // src/hooks/useEvent.ts
 
 function useEvent(event, handler, passive = false) {
@@ -4886,7 +5098,9 @@ function CreateAuthProvider({
 
 
 
-exports.AlertContext = AlertContext; exports.AlertProvider = AlertProvider; exports.ApiHelper = ApiHelper; exports.AuthHelper = AuthHelper; exports.Autocomplete = Autocomplete2; exports.BaseGrid = BaseGrid; exports.Checkbox = Checkbox; exports.CreateAuthProvider = CreateAuthProvider; exports.Dialog = Dialog; exports.EditableTableCell = EditableTableCell; exports.FormHelperContext = FormHelperContext; exports.FormHelperProvider = FormHelperProvider; exports.GetInputLabel = GetInputLabel; exports.Grid = Grid_default; exports.HttpError = HttpError; exports.Input = Input; exports.InputMask = InputMask2; exports.LargeButton = LargeButton; exports.Modal = Modal; exports.Radio = Radio; exports.Select = Select; exports.Switch = Switch; exports.TabPanel = TabPanel; exports.Td = Td; exports.Tr = Tr; exports.createAuthContext = createAuthContext; exports.createFilter = createFilter; exports.filterData = filterData; exports.getTabProps = getTabProps; exports.useAlert = useAlert; exports.useEvent = useEvent; exports.useFilter = useFilter; exports.useFormHelper = useFormHelper; exports.useGrid = useGrid; exports.useLoading = useLoading;
+
+
+exports.AlertContext = AlertContext; exports.AlertProvider = AlertProvider; exports.ApiHelper = ApiHelper; exports.AuthHelper = AuthHelper; exports.Autocomplete = Autocomplete2; exports.BaseGrid = BaseGrid; exports.BaseGridAutoRows = BaseGridAutoRows; exports.Checkbox = Checkbox; exports.CreateAuthProvider = CreateAuthProvider; exports.Dialog = Dialog; exports.EditableTableCell = EditableTableCell; exports.FormHelperContext = FormHelperContext; exports.FormHelperProvider = FormHelperProvider; exports.GetInputLabel = GetInputLabel; exports.Grid = Grid_default; exports.HttpError = HttpError; exports.Input = Input; exports.InputMask = InputMask2; exports.LargeButton = LargeButton; exports.Modal = Modal; exports.Radio = Radio; exports.Select = Select; exports.Switch = Switch; exports.TabPanel = TabPanel; exports.Td = Td; exports.Tr = Tr; exports.createAuthContext = createAuthContext; exports.createFilter = createFilter; exports.filterData = filterData; exports.getTabProps = getTabProps; exports.useAlert = useAlert; exports.useAsyncGrid = useAsyncGrid; exports.useEvent = useEvent; exports.useFilter = useFilter; exports.useFormHelper = useFormHelper; exports.useGrid = useGrid; exports.useLoading = useLoading;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: