@m4l/graphics 7.0.9 → 7.0.11-beta.1

package/contexts/LocalesContext/helper.js

@@ -1,11 +1,11 @@
 import o from "date-fns/locale/en-US";
 async function g(n, e, s) {
-  const r = l(n), i = { ...n };
-  let t;
-  return r === "es" ? t = (await import("date-fns/locale/es")).default : r === "fr" ? t = (await import("date-fns/locale/fr")).default : r === "en-US" ? t = o : (t = o, i.lang = "en", i.script = void 0, i.region = "US", i.url_icon = `${e}/${s}/frontend/commons/assets/icons/langs/lang_en.svg`, i.name = "English US*"), {
-    ...i,
-    module: t,
-    localeString: l(i)
+  const r = l(n), t = { ...n };
+  let i;
+  return r === "es" ? i = (await import("date-fns/locale/es")).default : r === "fr" ? i = (await import("date-fns/locale/fr")).default : r === "en-US" ? i = o : (i = o, t.lang = "en", t.script = void 0, t.region = "US", t.urlIcon = `${e}/${s}/frontend/commons/assets/icons/langs/lang_en.svg`, t.name = "English US*"), {
+    ...t,
+    module: i,
+    localeString: l(t)
   };
 }
 function l(n) {

package/contexts/LocalesContext/index.js

@@ -1,38 +1,40 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import { createContext as A, useState as d, useCallback as O, useEffect as E } from "react";
 import { AdapterDateFns as k } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider as x } from "@mui/x-date-pickers";
-import { useEnvironment as F, useNetwork as P, useHostTools as j, useLocalStorageWithListener as G, EmitEvents as i } from "@m4l/core";
+import { useEnvironment as F, useNetwork as P, useHostTools as j, useLocalStorageWithListener as G, EmitEvents as a } from "@m4l/core";
 import { s as I, j as V } from "./helper.js";
-const U = A(null);
+const b = A(null);
 function B(_) {
-  const { children: g, isMicroFrontEnd: e, localeHost: a, getLocaleFromNetwork: s } = _;
-  if (e && !a)
+  const { children: g, isMicroFrontEnd: e, localeHost: i, getLocaleFromNetwork: s } = _;
+  if (e && !i)
     throw Error("Must set localeHost in microfrontend");
   if (!e && !s)
     throw Error("Must set getLocaleFromNetwork in host");
-  const { domain_token: L, host_static_assets: p, environment_assets: h } = F(), { networkOperation: v } = P(), { events_add_listener: S, events_remove_listener: C, events_emit: T } = j(), [r, l] = d(() => {
+  const { domain_token: L, host_static_assets: p, environment_assets: C } = F(), { networkOperation: S } = P(), { events_add_listener: h, events_remove_listener: v, events_emit: T } = j(), [r, l] = d(() => {
     if (e)
-      return a;
+      return i;
   }), [o, c] = G(
     "localeHost",
     navigator.language
   ), [H, N] = d(""), u = O((t) => {
     l(t);
   }, []);
-  if (E(() => (e && S(i.EMMIT_EVENT_HOST_LOCALE_CHANGE, u), () => {
-    e && C(i.EMMIT_EVENT_HOST_LOCALE_CHANGE, u);
+  if (E(() => (e && h(a.EMMIT_EVENT_HOST_LOCALE_CHANGE, u), () => {
+    e && v(a.EMMIT_EVENT_HOST_LOCALE_CHANGE, u);
   }), []), E(() => {
     let t = !0;
     if (!e && s && !(o === H && o !== ""))
-      return v({
+      return S({
         method: "POST",
         endPoint: "na/locales",
-        data: { ...I(o), domain_token: L }
-      }).then((f) => {
-        t && s(f.data, p, h).then(
+        data: { ...I(o), domain_token: L },
+        responseToCamelCase: !0,
+        bodyToSnakeCase: !0
+      }).then((m) => {
+        t && s(m.data, p, C).then(
           (n) => {
-            l(n), N(n.localeString), o !== n.localeString && c(n.localeString), T(i.EMMIT_EVENT_HOST_LOCALE_CHANGE, n);
+            l(n), N(n.localeString), o !== n.localeString && c(n.localeString), T(a.EMMIT_EVENT_HOST_LOCALE_CHANGE, n);
           }
         );
       }).finally(() => {
@@ -44,14 +46,14 @@ function B(_) {
   const M = (t) => {
     (t.lang !== r.lang || t.script !== r.script || t.region !== r.region) && c(V(t));
   };
-  return /* @__PURE__ */ m(
-    U.Provider,
+  return /* @__PURE__ */ f(
+    b.Provider,
     {
       value: {
         currentLocale: r,
         onChangeLocale: M
       },
-      children: /* @__PURE__ */ m(
+      children: /* @__PURE__ */ f(
         x,
         {
           dateAdapter: k,
@@ -64,6 +66,6 @@ function B(_) {
   );
 }
 export {
-  U as L,
+  b as L,
   B as a
 };

package/contexts/LocalesContext/types.d.ts

@@ -8,7 +8,7 @@ export interface BaseLocale {
 }
 export interface NetworkLocaleType extends BaseLocale {
     name: string;
-    url_icon: string;
+    urlIcon: string;
 }
 export interface LocaleType extends NetworkLocaleType {
     module: Locale;

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.9",
+  "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",