@m4l/components 0.0.4 → 0.0.7

package/dist/vendor.js

@@ -1,21 +1,33 @@
 import "@mui/material/Box";
 import "react/jsx-runtime";
 import "./components/mui_extended/MenuPopover/index.js";
-import "react";
-import "@m4l/core";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useHostTools, useNetwork } from "@m4l/core";
 import "@mui/material";
 import "react-router-dom";
 import "./components/mui_extended/MenuActions/index.js";
+import "./components/mui_extended/Pager/index.js";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { i as initialPagerState } from "./components/DataGrid/index.js";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "@mui_extended";
+import "./contexts/ModalContext/index.js";
+import "@mui/x-date-pickers";
+import "@mui/lab/AdapterDateFns";
+import "date-fns";
+import "./components/ObjectLogs/index.js";
+import "./react-json-view.js";
 import "./components/FormActions/index.js";
 import "./react-draggable.js";
-import "./contexts/ModalContext/index.js";
 import "./components/ModalDialog/index.js";
 import "./components/Resizeable/index.js";
+import "./components/NoItemSelected/index.js";
 import "./react-splitter-layout.js";
 import "./components/SplitLayout/index.js";
 import "./components/mui_extended/BoxIcon/index.js";
+import "./components/mui_extended/IconButton/index.js";
 import "./components/mui_extended/Breadcrumbs/index.js";
 import "./hooks/useModal/index.js";
 function useResponsive(query, key, start, end) {
@@ -41,4 +53,67 @@ function useResponsiveDesktop() {
   const isDesktop = useResponsive("up", "sm");
   return isDesktop;
 }
-export { useResponsiveDesktop as u };
+const usePaginate = (props) => {
+  const { endPoint, timeout = 5e3, queryParams = {}, fireOnEnter = true } = props;
+  const [refresh, setRefresh] = useState(0);
+  const [rows, setRows] = useState([]);
+  const [pagerState, setPagerState] = useState(initialPagerState);
+  const refPagerState = useRef(initialPagerState);
+  const [fire, setFire] = useState(fireOnEnter);
+  const { startProgress, stopProgress } = useHostTools();
+  const { networkOperation } = useNetwork();
+  const Refresh = useCallback(() => {
+    setRefresh((oldValue) => oldValue + 1);
+  }, []);
+  useEffect(() => {
+    let mounted = true;
+    if (!fire) {
+      setFire(true);
+      return;
+    }
+    startProgress();
+    networkOperation({
+      method: "GET",
+      endPoint,
+      timeout,
+      parms: {
+        ...queryParams,
+        page: refPagerState.current.page,
+        limit: refPagerState.current.rowsPerPage
+      }
+    }).then((response) => {
+      if (mounted) {
+        setRows(response.data);
+        refPagerState.current.page = response.pager.page;
+        setPagerState((oldPagerState) => ({
+          ...oldPagerState,
+          page: response.pager.page,
+          totalRecords: response.pager.total
+        }));
+      }
+    }).finally(() => {
+      if (mounted) {
+        stopProgress();
+      }
+    });
+    return function cleanUp() {
+      stopProgress();
+      mounted = false;
+    };
+  }, [refresh, queryParams]);
+  const onPageChange = (newPage) => {
+    refPagerState.current.page = newPage;
+    setRefresh((oldValue) => oldValue + 1);
+  };
+  const onRowsPerPageChange = (newRowsPerPage) => {
+    refPagerState.current.rowsPerPage = newRowsPerPage;
+    setPagerState((oldPagerState) => ({ ...oldPagerState, rowsPerPage: newRowsPerPage }));
+    setRefresh((oldValue) => oldValue + 1);
+  };
+  const clearRows = () => {
+    setRows([]);
+    setPagerState(initialPagerState);
+  };
+  return { onPageChange, onRowsPerPageChange, pagerState, rows, clearRows, Refresh };
+};
+export { usePaginate as a, useResponsiveDesktop as u };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.4",
+  "version": "0.0.7",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",
@@ -19,18 +19,25 @@
   },
   "peerDependencies": {
     "@m4l/core": "^0.0.26",
+    "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",
+    "@mui/x-date-pickers": "^5.0.0-beta.0",
+    "clsx": "^1.2.1",
+    "date-fns": "^2.28.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.0 || 18.x",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.0.0",
-    "react-router-dom": "^6.3.0",
-    "clsx": "^1.2.1"
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@emotion/styled": "^11.9.3",
     "@m4l/core": "^0.0.26",
     "@m4l/graphics": "^0.0.14",
+    "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",
+    "@mui/x-date-pickers": "^5.0.0-beta.0",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.1",
     "@types/node": "^17.0.40",
@@ -42,6 +49,7 @@
     "@typescript-eslint/parser": "^5.27.1",
     "@vitejs/plugin-react": "^1.3.2",
     "clsx": "^1.2.1",
+    "date-fns": "^2.28.0",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -53,7 +61,11 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "prettier": "^2.6.2",
     "prop-types": "^15.8.1",
+    "react-data-grid": "^7.0.0-beta.13",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-draggable": "^4.4.5",
+    "react-json-view": "^1.21.3",
     "react-resizable": "^3.0.4",
     "react-splitter-layout": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",

package/dist/prop-types.js

@@ -1 +0,0 @@
-import "prop-types";

package/dist/react.js

@@ -1,2 +0,0 @@
-import "react";
-import "react-dom";