@bluemarble/bm-components 1.5.0 → 1.7.0

package/dist/index.d.mts

@@ -223,6 +223,7 @@ interface SearchOptions$1 {
     value: string;
 }
 interface UseGridProps$1<T> {
+    updatedTimes: number;
     columns: ColumnsProps[];
     filters?: FilterProps[];
     rowsPerPageOptions?: number[];
@@ -233,6 +234,7 @@ interface UseGridProps$1<T> {
 }
 declare function useGrid<T extends Record<string, any>>({ columns, filters, search, rowsPerPageOptions, defaultData: externalDefaultData, defaultCurrentPage, defaultSortedBy }: UseGridProps$1<T>): {
     data: T[];
+    updatedTimes: number;
     set: (data: T[]) => void;
     onSortBy: (prop: string) => void;
     sortedBy: SortedByProps$1[];

package/dist/index.d.ts

@@ -223,6 +223,7 @@ interface SearchOptions$1 {
     value: string;
 }
 interface UseGridProps$1<T> {
+    updatedTimes: number;
     columns: ColumnsProps[];
     filters?: FilterProps[];
     rowsPerPageOptions?: number[];
@@ -233,6 +234,7 @@ interface UseGridProps$1<T> {
 }
 declare function useGrid<T extends Record<string, any>>({ columns, filters, search, rowsPerPageOptions, defaultData: externalDefaultData, defaultCurrentPage, defaultSortedBy }: UseGridProps$1<T>): {
     data: T[];
+    updatedTimes: number;
     set: (data: T[]) => void;
     onSortBy: (prop: string) => void;
     sortedBy: SortedByProps$1[];

package/dist/index.js

@@ -4146,14 +4146,17 @@ var AlertProvider = ({ children }) => {
   const [severity, setSeverity] = _react.useState.call(void 0, "info");
   const [message, setMessage] = _react.useState.call(void 0, "");
   const [isVisible, setIsVisible] = _react.useState.call(void 0, false);
-  const createAlert = (newMessage, severity2) => {
-    setMessage(newMessage);
-    setSeverity(severity2);
-    setIsVisible(true);
-  };
-  function onCloseToast() {
+  const createAlert = _react.useCallback.call(void 0, 
+    (newMessage, severity2) => {
+      setMessage(newMessage);
+      setSeverity(severity2);
+      setIsVisible(true);
+    },
+    []
+  );
+  const onCloseToast = _react.useCallback.call(void 0, () => {
     setIsVisible(false);
-  }
+  }, []);
   return /* @__PURE__ */ React2.default.createElement(AlertContext.Provider, { value: { createAlert } }, children, /* @__PURE__ */ React2.default.createElement(
     Toast,
     {
@@ -4174,13 +4177,13 @@ var useAlert = () => {
 
 function useLoading() {
   const [state, setState] = _react.useState.call(void 0, []);
-  const isLoading = (prop) => state.includes(prop);
-  const setLoading = (prop, remove) => {
+  const isLoading = _react.useCallback.call(void 0, (prop) => state.includes(prop), [state]);
+  const setLoading = _react.useCallback.call(void 0, (prop, remove) => {
     if (remove)
       setState((prevState) => prevState.filter((state2) => state2 !== prop));
     else
       setState((prevState) => [...prevState, prop]);
-  };
+  }, []);
   return { isLoading, setLoading };
 }
 
@@ -4200,59 +4203,68 @@ function useFormHelper() {
   const { createAlert } = alertProps;
   const { setLoading } = loadingProps;
   const sourceRef = _react.useRef.call(void 0, new AbortController());
-  function onSubmitWrapper(fn, { name }) {
-    return (fields, methods) => __async(this, null, function* () {
-      const LOADING_NAME = name;
-      setLoading(LOADING_NAME);
-      try {
-        yield fn(fields, methods);
-      } catch (error) {
-        errorHandler(error, methods.setErrors);
-      } finally {
-        setLoading(LOADING_NAME, true);
-      }
-    });
-  }
-  function onRequestWrapper(fn, { name }) {
-    return (...params) => __async(this, null, function* () {
-      const LOADING_NAME = name;
-      setLoading(LOADING_NAME);
-      api.interceptors.request.use(
-        (config) => {
-          if (!config.signal && sourceRef.current && config.method === "get") {
-            config.signal = sourceRef.current.signal;
+  const onSubmitWrapper = _react.useCallback.call(void 0, 
+    (fn, { name }) => {
+      return (fields, methods) => __async(this, null, function* () {
+        const LOADING_NAME = name;
+        setLoading(LOADING_NAME);
+        try {
+          yield fn(fields, methods);
+        } catch (error) {
+          errorHandler(error, methods.setErrors);
+        } finally {
+          setLoading(LOADING_NAME, true);
+        }
+      });
+    },
+    [setLoading]
+  );
+  const onRequestWrapper = _react.useCallback.call(void 0, 
+    (fn, { name }) => {
+      return (...params) => __async(this, null, function* () {
+        const LOADING_NAME = name;
+        setLoading(LOADING_NAME);
+        api.interceptors.request.use(
+          (config) => {
+            if (!config.signal && sourceRef.current && config.method === "get") {
+              config.signal = sourceRef.current.signal;
+            }
+            return config;
+          },
+          (error) => {
+            return Promise.reject(error);
           }
-          return config;
-        },
-        (error) => {
-          return Promise.reject(error);
+        );
+        try {
+          const response = yield fn(...params);
+          return response;
+        } catch (error) {
+          errorHandler(error);
+        } finally {
+          setLoading(LOADING_NAME, true);
+        }
+      });
+    },
+    [setLoading, api]
+  );
+  const errorHandler = _react.useCallback.call(void 0, 
+    (error, callback) => {
+      if ((error == null ? void 0 : error.message) === "cancel.navigation")
+        return;
+      if (callback) {
+        if (error.response.data.code === "invalid.body") {
+          const errors = error.response.data.details.issues;
+          const currentErrors = errors.reduce((acc, item) => {
+            acc[item.path.join(".")] = item.message;
+            return acc;
+          }, {});
+          callback(currentErrors);
         }
-      );
-      try {
-        const response = yield fn(...params);
-        return response;
-      } catch (error) {
-        errorHandler(error);
-      } finally {
-        setLoading(LOADING_NAME, true);
-      }
-    });
-  }
-  function errorHandler(error, callback) {
-    if ((error == null ? void 0 : error.message) === "cancel.navigation")
-      return;
-    if (callback) {
-      if (error.response.data.code === "invalid.body") {
-        const errors = error.response.data.details.issues;
-        const currentErrors = errors.reduce((acc, item) => {
-          acc[item.path.join(".")] = item.message;
-          return acc;
-        }, {});
-        callback(currentErrors);
       }
-    }
-    createAlert(formatErrorMessage(error), "error");
-  }
+      createAlert(formatErrorMessage(error), "error");
+    },
+    [formatErrorMessage, createAlert]
+  );
   _react.useEffect.call(void 0, () => {
     return () => {
       sourceRef.current.abort();
@@ -4600,7 +4612,7 @@ function getObjectValue(obj) {
 // src/hooks/useFilter.ts
 function useFilter() {
   const [selectedFilters, setSelectedFilters] = _react.useState.call(void 0, []);
-  const filterBy = (newFilter) => {
+  const filterBy = _react.useCallback.call(void 0, (newFilter) => {
     const propToCompare = (newFilter == null ? void 0 : newFilter.id) ? "id" : "prop";
     function removeRepeatedFilters(filter) {
       return filter[propToCompare] !== newFilter[propToCompare];
@@ -4609,13 +4621,16 @@ function useFilter() {
       ...filters.filter(removeRepeatedFilters),
       newFilter
     ]);
-  };
-  const removeFilter = (prop, isId) => {
-    const propToCompare = isId ? "id" : "prop";
-    setSelectedFilters(
-      selectedFilters.filter((filter) => filter[propToCompare] !== prop)
-    );
-  };
+  }, []);
+  const removeFilter = _react.useCallback.call(void 0, 
+    (prop, isId) => {
+      const propToCompare = isId ? "id" : "prop";
+      setSelectedFilters(
+        selectedFilters.filter((filter) => filter[propToCompare] !== prop)
+      );
+    },
+    [selectedFilters]
+  );
   function clearAllFilters() {
     setSelectedFilters([]);
   }
@@ -4686,68 +4701,82 @@ function useGrid({
   );
   const [currentPage, setCurrentPage] = _react.useState.call(void 0, defaultCurrentPage || 0);
   const [rowsPerPage, setRowsPerPage] = _react.useState.call(void 0, rowsPerPageOptions[0]);
-  const toggleSortedDirection = (direction) => {
-    if (direction === "asc")
-      return "desc";
-    return "asc";
-  };
-  function setSort(prop, direction) {
+  const [updatedTimes, setUpdatedTimes] = _react.useState.call(void 0, 0);
+  const toggleSortedDirection = _react.useCallback.call(void 0, 
+    (direction) => {
+      if (direction === "asc")
+        return "desc";
+      return "asc";
+    },
+    []
+  );
+  const setSort = _react.useCallback.call(void 0, (prop, direction) => {
     setSortedBy((prev) => [...prev, { prop, direction }]);
-  }
-  const onSortBy = (prop) => {
-    if (!prop)
-      return;
-    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)
-            };
+  }, []);
+  const onSortBy = _react.useCallback.call(void 0, 
+    (prop) => {
+      if (!prop)
+        return;
+      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);
           });
-          return [...newArr].slice(0);
-        });
+        }
+      } else {
+        setSortedBy((prev) => [...prev, { prop, direction: "desc" }]);
       }
-    } else {
-      setSortedBy((prev) => [...prev, { prop, direction: "desc" }]);
-    }
-  };
-  const set = (data) => {
+    },
+    [toggleSortedDirection, sortedBy]
+  );
+  const set = _react.useCallback.call(void 0, (data) => {
+    setUpdatedTimes((prev) => prev + 1);
     setDefaultData(data);
-  };
-  function sortData(data) {
-    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;
-  }
-  const onPageChange = (pageNumber) => {
+  }, []);
+  const sortData = _react.useCallback.call(void 0, 
+    (data) => {
+      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;
+    },
+    [sortedBy]
+  );
+  const onPageChange = _react.useCallback.call(void 0, (pageNumber) => {
     if (pageNumber < 0)
       return;
     if (pageNumber > totalNumberOfPages)
       return;
     setCurrentPage(pageNumber);
-  };
-  const onChangeRowsPerPage = (rows) => {
-    let totalNumberOfPages2 = Math.round(filteredData.length / rows) - 1;
-    totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
-    if (currentPage > totalNumberOfPages2)
-      setCurrentPage(totalNumberOfPages2);
-    setRowsPerPage(rows);
-  };
+  }, []);
+  const onChangeRowsPerPage = _react.useCallback.call(void 0, 
+    (rows) => {
+      let totalNumberOfPages2 = Math.round(filteredData.length / rows) - 1;
+      totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
+      if (currentPage > totalNumberOfPages2)
+        setCurrentPage(totalNumberOfPages2);
+      setRowsPerPage(rows);
+    },
+    [currentPage]
+  );
   const filteredData = _react.useMemo.call(void 0, () => {
     let newData = defaultData.slice(0);
     if (search && search.value !== "") {
@@ -4762,10 +4791,11 @@ function useGrid({
     const startPage = currentPage * rowsPerPage;
     const endPage = startPage + rowsPerPage;
     return sortedData.slice(startPage, endPage);
-  }, [sortedBy, filteredData, currentPage, rowsPerPage]);
+  }, [filteredData, currentPage, rowsPerPage, sortData]);
   const totalNumberOfPages = Math.ceil(filteredData.length / rowsPerPage) - 1;
   return {
     data: displayData,
+    updatedTimes,
     set,
     onSortBy,
     sortedBy,
@@ -4838,49 +4868,52 @@ function useAsyncGrid({
   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) {
+  const toggleSortedDirection = _react.useCallback.call(void 0, 
+    (direction) => {
+      if (direction === "asc")
+        return "desc";
+      return "asc";
+    },
+    []
+  );
+  const setSort = _react.useCallback.call(void 0, (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);
+  }, []);
+  const onSortBy = _react.useCallback.call(void 0, 
+    (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.map((p) => {
-          if (p.prop !== prop)
-            return p;
-          return {
-            prop: p.prop,
-            direction: toggleSortedDirection(p.direction)
-          };
-        });
+        finalArr = [...sortedBy, { prop, direction: "desc" }];
       }
-    } else {
-      finalArr = [...sortedBy, { prop, direction: "desc" }];
-    }
-    yield updateGridContent({
-      page: currentPage,
-      sortedBy: finalArr,
-      rowsPerPage
-    });
-  });
-  const set = _react.useCallback.call(void 0, 
-    (data) => {
-      setDefaultData(data);
-    },
-    [setDefaultData]
+      yield updateGridContent({
+        page: currentPage,
+        sortedBy: finalArr,
+        rowsPerPage
+      });
+    }),
+    [sortedBy, toggleSortedDirection, rowsPerPage, currentPage]
   );
-  function baseRequest(_0) {
-    return __async(this, arguments, function* ({
+  const set = _react.useCallback.call(void 0, (data) => {
+    setDefaultData(data);
+  }, []);
+  const baseRequest = _react.useCallback.call(void 0, 
+    (_0) => __async(this, [_0], function* ({
       page,
       search: search2,
       filters: filters2,
@@ -4903,11 +4936,12 @@ function useAsyncGrid({
         const { data } = yield axiosInstance.get(pathWithParams);
         setTotalNumberOfItems(data.totalNumberOfItems);
         return data.rows;
-      } catch (error) {
+      } catch (_) {
         return [];
       }
-    });
-  }
+    }),
+    [axiosInstance, url]
+  );
   const updateGridContent = _react.useCallback.call(void 0, 
     (_0) => __async(this, [_0], function* ({
       page,
@@ -4928,40 +4962,44 @@ function useAsyncGrid({
         setRowsPerPage(rowsPerPage2);
         set(result);
         setCurrentPage(page);
-      } catch (error) {
-        throw error;
       } finally {
         setIsLoading(false);
       }
     }),
-    [set, rowsPerPage, setCurrentPage, search, filters]
+    [set, search, filters, onRequest, baseRequest]
   );
-  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)
+  const onPageChange = _react.useCallback.call(void 0, 
+    (pageNumber) => {
+      if (pageNumber < 0)
+        return;
+      if (pageNumber > totalNumberOfPages)
+        return;
+      updateGridContent({ page: pageNumber, sortedBy, rowsPerPage });
+    },
+    [updateGridContent, totalNumberOfPages, sortedBy, rowsPerPage]
+  );
+  const onChangeRowsPerPage = _react.useCallback.call(void 0, 
+    (rows) => {
+      let totalNumberOfPages2 = Math.round(totalNumberOfItems / rows) - 1;
+      totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
+      if (currentPage > totalNumberOfPages2)
+        updateGridContent({
+          page: totalNumberOfPages2,
+          sortedBy,
+          rowsPerPage: rows
+        });
       updateGridContent({
-        page: totalNumberOfPages2,
+        page: currentPage,
         sortedBy,
         rowsPerPage: rows
       });
-    updateGridContent({
-      page: currentPage,
-      sortedBy,
-      rowsPerPage: rows
-    });
-  };
+    },
+    [updateGridContent, totalNumberOfItems, sortedBy, currentPage]
+  );
   const displayData = defaultData;
   _react.useEffect.call(void 0, () => {
     updateGridContent({ page: 0, sortedBy: [], rowsPerPage });
-  }, []);
+  }, [updateGridContent, rowsPerPage]);
   return {
     data: displayData,
     set,
@@ -5012,31 +5050,32 @@ function CreateAuthProvider({
   const [user, setUser] = _react.useState.call(void 0, );
   const [status, setStatus] = _react.useState.call(void 0, "unauthenticated");
   const { createAlert } = useAlert();
-  const signIn = (_0) => __async(this, [_0], function* ({ email, password }) {
-    setStatus("loading");
-    try {
-      const response = yield api.post("/auth/login", {
-        email,
-        password
-      });
-      const { token } = response.data;
-      api.defaults.headers.common.Authorization = `Bearer ${token}`;
-      const { data } = yield api.get("/auth/me");
-      setUser(data);
-      setStatus("autenticated");
-      return true;
-    } catch (error) {
-      createAlert(error.response.data.error, "error");
-      setStatus("unauthenticated");
-      throw error;
-    }
-  });
-  function ClientSignOut() {
-    return __async(this, null, function* () {
-      yield api.get("/auth/logout");
-      setUser(void 0);
-    });
-  }
+  const signIn = _react.useCallback.call(void 0, 
+    (_0) => __async(this, [_0], function* ({ email, password }) {
+      setStatus("loading");
+      try {
+        const response = yield api.post("/auth/login", {
+          email,
+          password
+        });
+        const { token } = response.data;
+        api.defaults.headers.common.Authorization = `Bearer ${token}`;
+        const { data } = yield api.get("/auth/me");
+        setUser(data);
+        setStatus("autenticated");
+        return true;
+      } catch (error) {
+        createAlert(error.response.data.error, "error");
+        setStatus("unauthenticated");
+        throw error;
+      }
+    }),
+    [createAlert, api]
+  );
+  const ClientSignOut = _react.useCallback.call(void 0, () => __async(this, null, function* () {
+    yield api.get("/auth/logout");
+    setUser(void 0);
+  }), [api]);
   _react.useEffect.call(void 0, () => {
     const token = _nookies.parseCookies.call(void 0, )[sessionTokenName];
     if (token) {