@m4l/components 0.0.4 → 0.0.5

package/dist/components/mui_extended/Pager/index.js

@@ -0,0 +1,201 @@
+import { useMemo } from "react";
+import { Skeleton, TablePagination } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { I as IconButton } from "../IconButton/index.js";
+import { useEnvironment } from "@m4l/core";
+import { jsxs, jsx } from "react/jsx-runtime";
+const WrapperPagerActions = styled("div")(({ theme }) => ({
+  width: "100%",
+  justifyContent: "center",
+  display: "flex",
+  marginLeft: 0,
+  [theme.breakpoints.up("sm")]: {
+    display: "flex",
+    alignItems: "center",
+    marginLeft: theme.spacing(3)
+  }
+}));
+function PagerActions(props) {
+  const {
+    count,
+    page,
+    rowsPerPage,
+    onPageChange
+  } = props;
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  const handleFirstPageButtonClick = (event) => {
+    onPageChange(event, 0);
+  };
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
+  const handleLastPageButtonClick = (event) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+  return /* @__PURE__ */ jsxs(WrapperPagerActions, {
+    id: "WrapperPagerActions",
+    children: [/* @__PURE__ */ jsx(IconButton, {
+      dictionaryTooltip: "pager.first",
+      onClick: handleFirstPageButtonClick,
+      disabled: page === 0,
+      "aria-label": "first page",
+      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/first.svg`
+    }), /* @__PURE__ */ jsx(IconButton, {
+      dictionaryTooltip: "pager.previous",
+      onClick: handleBackButtonClick,
+      disabled: page === 0,
+      "aria-label": "first page",
+      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/previous.svg`
+    }), /* @__PURE__ */ jsx(IconButton, {
+      dictionaryTooltip: "pager.next",
+      onClick: handleNextButtonClick,
+      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      "aria-label": "next page",
+      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/next.svg`
+    }), /* @__PURE__ */ jsx(IconButton, {
+      dictionaryTooltip: "pager.last",
+      onClick: handleLastPageButtonClick,
+      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      "aria-label": "last page",
+      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/last.svg`
+    })]
+  });
+}
+styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden"
+}));
+const SKTWrapperPagerActions = styled("div")(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  marginLeft: theme.spacing(3)
+}));
+const SKTSvgIconButtonContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  marginLeft: theme.spacing(3)
+}));
+const SKTSvgIconButton = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: theme.spacing(3.75),
+  height: theme.spacing(3.75)
+}));
+const SKTWrapperRowsPerPage = styled("div")(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "auto auto",
+  gridGap: theme.spacing(1),
+  marginRight: theme.spacing(3)
+}));
+function Pager(props) {
+  const {
+    totalRecords,
+    rowsPerPageOptions = [5, 10, 2],
+    rowsPerPage = 25,
+    page,
+    onPageChange,
+    onRowsPerPageChange,
+    labelRows = "Rows per page",
+    labelOf = "Of",
+    isSkeleton = "false",
+    isDesktop
+  } = props;
+  const currentPage = useMemo(() => {
+    if (rowsPerPage * page > totalRecords) {
+      return Math.floor(totalRecords / rowsPerPage);
+    }
+    return page;
+  }, [page, rowsPerPage, totalRecords]);
+  const handleChangeRowsPerPage = (event) => {
+    onRowsPerPageChange(parseInt(event.target.value, 10));
+    onPageChange(0);
+  };
+  const handleChangePage = (_event, newPage) => {
+    onPageChange(newPage);
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsxs(SKTWrapperPagerActions, {
+      children: [/* @__PURE__ */ jsxs(SKTWrapperRowsPerPage, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: "40px",
+          height: "16px"
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: "20px",
+          height: "16px"
+        })]
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "50px",
+        height: "16px"
+      }), /* @__PURE__ */ jsxs(SKTSvgIconButtonContainer, {
+        children: [/* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        })]
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsx(TablePagination, {
+    id: "TablePagination",
+    rowsPerPageOptions,
+    component: "div",
+    count: totalRecords,
+    rowsPerPage,
+    page: currentPage,
+    onPageChange: handleChangePage,
+    onRowsPerPageChange: handleChangeRowsPerPage,
+    labelDisplayedRows: isDesktop ? ({
+      from,
+      to,
+      count
+    }) => `${from}-${to} ${labelOf} ${count}` : () => ``,
+    labelRowsPerPage: isDesktop ? labelRows : "",
+    ActionsComponent: PagerActions
+  });
+}
+function getPagerComponentsDictionary() {
+  return ["pager"];
+}
+const defaultPagerDictionary = {
+  pager: {
+    first: "First",
+    previous: "Previous",
+    before: "Before",
+    last: "Last",
+    of: "of"
+  }
+};
+export { Pager as P, defaultPagerDictionary as d, getPagerComponentsDictionary as g };

package/dist/components/mui_extended/Pager/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Pager: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTWrapperPagerActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTSvgIconButtonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTSvgIconButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTWrapperRowsPerPage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/mui_extended/Pager/types.d.ts

@@ -0,0 +1,13 @@
+export interface PagerProps {
+    records: number;
+    totalRecords: number;
+    rowsPerPageOptions?: number[];
+    rowsPerPage?: number;
+    page: number;
+    onPageChange: (newPage: number) => void;
+    onRowsPerPageChange: (newRowsPerPage: number) => void;
+    labelRows?: string;
+    labelOf?: string;
+    isSkeleton?: boolean;
+    isDesktop?: boolean;
+}

package/dist/components/mui_extended/index.d.ts

@@ -1,9 +1,13 @@
 export { BoxIcon } from './BoxIcon';
 export { default as MenuPopover } from './MenuPopover';
+export { default as IconButton } from './IconButton';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export type { TLink } from './Breadcrumbs/types';
 export { default as MenuActions } from './MenuActions';
 export type { MenuAction, ComponentActionProps } from './MenuActions/types';
+export { default as Pager } from './Pager';
+export { getPagerComponentsDictionary, defaultPagerDictionary } from './Pager/dicctionary';
+export type { PagerProps } from './Pager/types';
 declare module '@mui/material/styles/createPalette' {
     interface TypeBackground {
         neutral: string;

package/dist/hooks/usePaginate.d.ts

@@ -0,0 +1,15 @@
+import type { PagerState } from '../components/DataGrid/types';
+export interface propsUsePaginate {
+    endPoint: string;
+    timeout?: number;
+    fireOnEnter?: boolean;
+    queryParams?: Record<string, unknown>;
+}
+export declare const usePaginate: <TRow>(props: propsUsePaginate) => {
+    onPageChange: (newPage: number) => void;
+    onRowsPerPageChange: (newRowsPerPage: number) => void;
+    pagerState: PagerState;
+    rows: TRow[];
+    clearRows: () => void;
+    Refresh: () => void;
+};

package/dist/index.js

@@ -1,7 +1,11 @@
 export { B as BoxIcon } from "./components/mui_extended/BoxIcon/index.js";
 export { M as MenuPopover } from "./components/mui_extended/MenuPopover/index.js";
+export { I as IconButton } from "./components/mui_extended/IconButton/index.js";
 export { B as Breadcrumbs } from "./components/mui_extended/Breadcrumbs/index.js";
 export { M as MenuActions } from "./components/mui_extended/MenuActions/index.js";
+export { P as Pager, d as defaultPagerDictionary, g as getPagerComponentsDictionary } from "./components/mui_extended/Pager/index.js";
+export { a as DataGrid } from "./components/DataGrid/index.js";
+export { O as ObjectLogs } from "./components/ObjectLogs/index.js";
 export { F as FormActions } from "./components/FormActions/index.js";
 export { M as ModalDialog, d as defaultModalDialogDictionary, g as getModalDialogComponentsDictionary } from "./components/ModalDialog/index.js";
 export { R as Resizeable } from "./components/Resizeable/index.js";
@@ -15,13 +19,21 @@ import "@mui/material";
 import "react";
 import "@m4l/core";
 import "react-router-dom";
-import "./react-draggable.js";
-import "prop-types";
-import "react-dom";
+import "./react-data-grid.js";
 import "clsx";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "@mui_extended";
 import "./vendor.js";
 import "@mui/material/useMediaQuery";
-import "./react-splitter-layout.js";
+import "@mui/x-date-pickers";
+import "@mui/lab/AdapterDateFns";
+import "date-fns";
+import "./react-json-view.js";
 import "./commonjs.js";
+import "prop-types";
+import "react-dom";
+import "./react-draggable.js";
+import "./react-splitter-layout.js";
 import "./react-resizable.js";
 import "@mui/material/Typography";