@m4l/graphics 7.0.10 → 7.0.11-beta.1

package/contexts/ThemeSettingsContext/store.js

@@ -1,7 +1,7 @@
 import { createStore as S } from "zustand";
 import { devtools as c } from "zustand/middleware";
 import { immer as p } from "zustand/middleware/immer";
-import { getPaletteByPreset as a, typographyOld as d, shadows as h, getColorPresets as u, createCustomShadows as f } from "@m4l/styles";
+import { getPaletteByPreset as a, createCustomShadows as d, shadows as h, typographyOld as u, getColorPresets as f } from "@m4l/styles";
 import { alpha as U } from "@mui/system";
 import { d as s } from "./constants.js";
 function g(r, o = "m4l") {
@@ -18,7 +18,7 @@ const n = (r) => {
   const o = r.themeUserSettings || s, m = o.themeMode === "light", t = a(o.themeColor), e = m ? t.light : t.dark;
   r.themeOptions = {
     ...r.themeOptions,
-    ...d,
+    ...u,
     palette: {
       ...r.themeOptions?.palette ?? {},
       ...e
@@ -28,10 +28,10 @@ const n = (r) => {
     shadows: m ? h.light : h.dark,
     customShadows: {
       primary: `0 8px 16px 0 ${U(
-        u(o.themeColor)?.main || "#fff",
+        f(o.themeColor)?.main || "#fff",
         0.2
       )}`,
-      ...f(o.themeMode)
+      ...d(o.themeMode)
     },
     stretch: o.themeStretch
   }, g(r.themeOptions);

package/hooks/index.d.ts

@@ -10,3 +10,4 @@ export { useHostTheme } from './useHostTheme';
 export { useResizeObserver } from './useResizeObserver';
 export { useResponsiveDesktop } from './useResponsive';
 export { useThemeSettingsStore } from './useThemSettingsStore';
+export { usePaginate } from './usePaginate';

package/hooks/usePaginate/index.d.ts

@@ -0,0 +1,13 @@
+import { UsePaginateProps, PagerState } from './types';
+/**
+ * Hook para paginar una lista de elementos
+ */
+export declare const usePaginate: <TRow>(props: UsePaginateProps<TRow>) => {
+    onPageChange: (newPage: number) => void;
+    onRowsPerPageChange: (newRowsPerPage: number) => void;
+    pagerState: PagerState;
+    rows: TRow[];
+    clearRows: () => void;
+    Refresh: () => void;
+    setRows: import('react').Dispatch<import('react').SetStateAction<TRow[]>>;
+};

package/hooks/usePaginate/index.js

@@ -0,0 +1,72 @@
+import { useState as n, useRef as H, useCallback as L, useEffect as m } from "react";
+import { i as s } from "./types.js";
+import { useHostTools as U, useNetwork as j } from "@m4l/core";
+const J = (h) => {
+  const {
+    endPoint: w,
+    timeout: C = 5e3,
+    queryParams: P,
+    fireOnChangeParms: i,
+    // Propiedad para permitir que un cambio en los parametros de la consulta dispare la recarga de la red
+    fireOnFirstLoad: R = !0,
+    // propiedad que evita que se cargue la red la en el primer render del hook
+    rowsPerPage: u = s.rowsPerPage,
+    startProgress: d,
+    stopProgress: S,
+    isRemote: k = !0,
+    bodyToSnakeCase: y = !1,
+    responseToCamelCase: T = !1,
+    initialRows: E = [],
+    externalCondition: c = !0,
+    onNetworkError: f
+  } = h, [p, g] = n(i ? 1 : 0), [O, a] = n(E), [b, o] = n({ ...s, rowsPerPage: u }), t = H({ ...s, rowsPerPage: u }), [x, F] = n(R), { startProgress: N, stopProgress: Q } = U(), { networkOperation: q } = j(), l = L(() => {
+    g((r) => r + 1);
+  }, []);
+  return m(() => {
+    if (x) {
+      F(!1);
+      return;
+    }
+    t.current.page = 0, i && l();
+  }, [P]), m(() => {
+    let r = !0;
+    if (!(!c || p === 0))
+      return q({
+        method: "GET",
+        endPoint: w,
+        timeout: C,
+        parms: {
+          ...P,
+          page: t.current.page,
+          limit: t.current.rowsPerPage
+        },
+        bodyToSnakeCase: y,
+        responseToCamelCase: T,
+        options: {
+          startProgress: d || N,
+          stopProgress: S || Q
+        },
+        isRemote: k
+      }).then((e) => {
+        r && (a(e.data), t.current.page = e.pager.page, o((G) => ({
+          ...G,
+          page: e.pager.page,
+          // rowsPerPage: response.pager.limit,
+          totalRecords: e.pager.total
+        })));
+      }).catch((e) => {
+        a([]), o(s), f && f(e.status);
+      }), function() {
+        r = !1;
+      };
+  }, [p, c]), { onPageChange: (r) => {
+    t.current.page = r, g((e) => e + 1);
+  }, onRowsPerPageChange: (r) => {
+    t.current.rowsPerPage = r, o((e) => ({ ...e, rowsPerPage: r })), g((e) => e + 1);
+  }, pagerState: b, rows: O, clearRows: () => {
+    a([]), o(s);
+  }, Refresh: l, setRows: a };
+};
+export {
+  J as u
+};

package/hooks/usePaginate/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/hooks/usePaginate/types.d.ts

@@ -0,0 +1,16 @@
+import { AxiosOptions, NetworkProps } from '@m4l/core';
+export declare interface PagerState {
+    page: number;
+    rowsPerPage: number;
+    totalRecords: number;
+}
+export declare const initialPagerState: PagerState;
+export interface UsePaginateProps<TRow> extends Pick<NetworkProps, 'endPoint' | 'timeout' | 'isRemote' | 'bodyToSnakeCase' | 'responseToCamelCase'>, AxiosOptions {
+    fireOnChangeParms?: boolean;
+    fireOnFirstLoad?: boolean;
+    queryParams: Record<string, unknown>;
+    rowsPerPage?: number;
+    initialRows?: TRow[];
+    externalCondition?: boolean;
+    onNetworkError?: (code: number) => void;
+}

package/hooks/usePaginate/types.js

@@ -0,0 +1,8 @@
+const a = {
+  page: 0,
+  rowsPerPage: 25,
+  totalRecords: 0
+};
+export {
+  a as i
+};

package/index.js

@@ -2,11 +2,11 @@ import { G as r } from "./components/GlobalStyles/index.js";
 import { g as s } from "./contexts/LocalesContext/helper.js";
 import { F as m, a as p } from "./contexts/FormatterContext/index.js";
 import { L as f, a as i } from "./contexts/LocalesContext/index.js";
-import { R as u, a as v } from "./contexts/ResponsiveContainerContext/index.js";
+import { R as n, a as v } from "./contexts/ResponsiveContainerContext/index.js";
 import { H as l, a as T } from "./contexts/HostThemeContext/index.js";
-import { D as g, a as C } from "./contexts/DeviceTypeContext/index.js";
-import { d as R } from "./contexts/ThemeSettingsContext/constants.js";
-import { T as P, a as F } from "./contexts/ThemeSettingsContext/ThemeSettingsContext.js";
+import { D as c, a as C } from "./contexts/DeviceTypeContext/index.js";
+import { d as P } from "./contexts/ThemeSettingsContext/constants.js";
+import { T as S, a as F } from "./contexts/ThemeSettingsContext/ThemeSettingsContext.js";
 import { u as D } from "./hooks/useFirstRender/index.js";
 import { u as b } from "./hooks/useFormatter/index.js";
 import { u as k } from "./hooks/useIsMountedRef/index.js";
@@ -19,10 +19,11 @@ import { u as j } from "./hooks/useHostTheme/index.js";
 import { u as B } from "./hooks/useResizeObserver/index.js";
 import { u as K } from "./hooks/useResponsive/index.js";
 import { u as V } from "./hooks/useThemSettingsStore/index.js";
-import { c as Y } from "./utils/strings.js";
-import { g as _ } from "./utils/anchorEl.js";
+import { u as Y } from "./hooks/usePaginate/index.js";
+import { c as _ } from "./utils/strings.js";
+import { g as ee } from "./utils/anchorEl.js";
 export {
-  g as DeviceTypeContext,
+  c as DeviceTypeContext,
   C as DeviceTypeProvider,
   m as FormatterContext,
   p as FormatterProvider,
@@ -31,13 +32,13 @@ export {
   T as HostThemeProvider,
   f as LocalesContext,
   i as LocalesProvider,
-  u as ResponsiveContainerContext,
+  n as ResponsiveContainerContext,
   v as ResponsiveContainerProvider,
-  P as ThemeSettingsContext,
+  S as ThemeSettingsContext,
   F as ThemeSettingsProvider,
-  Y as capitalize,
-  R as defaultThemeSettings,
-  _ as getAnchorElPositionWindow,
+  _ as capitalize,
+  P as defaultThemeSettings,
+  ee as getAnchorElPositionWindow,
   s as getLocaleFromNetwork,
   D as useFirstRender,
   b as useFormatter,
@@ -46,6 +47,7 @@ export {
   k as useIsMountedRef,
   z as useLocales,
   U as useOffSetTop,
+  Y as usePaginate,
   B as useResizeObserver,
   G as useResponsiveContainerStore,
   K as useResponsiveDesktop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "7.0.10",
+  "version": "7.0.11-beta.1",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "type": "module",
@@ -17,7 +17,7 @@
     "zustand": "4.3.6"
   },
   "peerDependencies": {
-    "@m4l/core": "^2.0.15",
+    "@m4l/core": "2.0.20-beta.1",
     "@m4l/styles": "^7.1.18",
     "@mui/material": "5.16.7",
     "@mui/x-date-pickers": "6.20.2",