@m4l/graphics 7.0.10 → 7.0.11

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,73 @@
+import { useState as n, useRef as H, useCallback as U, useEffect as m } from "react";
+import { i as s } from "./types.js";
+import { useHostTools as j, useNetwork as v } from "@m4l/core";
+const K = (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: b = [],
+    externalCondition: c = !0,
+    onNetworkError: f,
+    getLabel: E
+  } = h, [p, g] = n(i ? 1 : 0), [O, a] = n(b), [x, o] = n({ ...s, rowsPerPage: u }), t = H({ ...s, rowsPerPage: u }), [F, L] = n(R), { startProgress: N, stopProgress: Q } = j(), { networkOperation: q } = v(), l = U(() => {
+    g((r) => r + 1);
+  }, []);
+  return m(() => {
+    if (F) {
+      L(!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, E]), { 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: x, rows: O, clearRows: () => {
+    a([]), o(s);
+  }, Refresh: l, setRows: a };
+};
+export {
+  K as u
+};

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

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { HostToolsType } from '@m4l/core';
+import { Id, ToastOptions } from 'react-toastify';
+export declare const mock_addFlag: import('vitest').Mock<(...args: any[]) => any>;
+export declare const mock_networkOperation: import('vitest').Mock<(...args: any[]) => any>;
+export declare const mock_events_add_listener: import('vitest').Mock<(...args: any[]) => any>;
+export declare const mock_events_remove_listener: import('vitest').Mock<(...args: any[]) => any>;
+export declare const mock_events_emit: import('vitest').Mock<(...args: any[]) => any>;
+export declare const mock_startProgress: import('vitest').Mock<(...args: any[]) => any>;
+export declare const mock_stopProgress: import('vitest').Mock<(...args: any[]) => any>;
+export interface ToasterFunctionProps {
+    title: ReactNode;
+    description?: ReactNode;
+}
+export type Toaster = {
+    (props: ToasterFunctionProps, toastOptions?: ToastOptions): Id;
+    success(props: ToasterFunctionProps, toastOptions?: ToastOptions): Id;
+    info(props: ToasterFunctionProps, toastOptions?: ToastOptions): Id;
+    warning(props: ToasterFunctionProps, toastOptions?: ToastOptions): Id;
+    error(props: ToasterFunctionProps, toastOptions?: ToastOptions): Id;
+};
+export declare const mock_toaster: Toaster;
+export declare const environmentDataForTesting: {
+    isLocalhost: boolean;
+    host: string;
+    domain_token: string;
+    host_api_local: string;
+    host_api_remote: string;
+    host_static_assets: string;
+    environment_assets: string;
+    isMicroFrontend: boolean;
+    isIsolatation: boolean;
+    database: string;
+};
+export declare const hostToolsDataForTesting: HostToolsType;

package/hooks/usePaginate/types.d.ts

@@ -0,0 +1,17 @@
+import { AxiosOptions, GetLabelType, 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;
+    getLabel?: GetLabelType;
+}

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",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "type": "module",
@@ -17,8 +17,8 @@
     "zustand": "4.3.6"
   },
   "peerDependencies": {
-    "@m4l/core": "^2.0.15",
-    "@m4l/styles": "^7.1.18",
+    "@m4l/core": "^2.0.0",
+    "@m4l/styles": "^7.0.0",
     "@mui/material": "5.16.7",
     "@mui/x-date-pickers": "6.20.2",
     "@types/react": "^18.0.0",

package/test/utils.d.ts

@@ -0,0 +1,9 @@
+import { cleanup, screen } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import { default as React, act } from 'react';
+/**
+ * customRender
+ */
+declare const customRender: (ui: React.ReactElement, options?: {}) => import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export { default as userEvent } from '@testing-library/user-event';
+export { customRender as render, renderHook, screen, cleanup, act };