@asaleh37/ui-base 26.2.16 → 27.5.26

package/src/hooks/UseConfirmationWindow.tsx

@@ -1,56 +1,56 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from "@mui/material";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
-interface ConfirmationWindowProps {
-  title: string;
-  body: string;
-  onConfirmationCallBk: () => void;
-}
-
-export const useConfirmationWindow = (props: ConfirmationWindowProps) => {
-  const [open, setOpen] = useState<boolean>(false);
-  const { t } = useTranslation();
-  const ConfirmationWindow: React.FC = () => {
-    return (
-      <Dialog open={open}>
-        <DialogTitle>{props.title}</DialogTitle>
-        <DialogContent>
-          <DialogContentText>{props.body}</DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            variant="contained"
-            sx={{ marginRight: 2, marginLeft: 2 }}
-            color="secondary"
-            onClick={() => {
-              setOpen(false);
-            }}
-          >
-            {t("NO_LABEL")}
-          </Button>
-          <Button
-            variant="contained"
-            sx={{ marginRight: 2, marginLeft: 2 }}
-            color="error"
-            onClick={() => {
-              props.onConfirmationCallBk();
-              setOpen(false);
-            }}
-            autoFocus
-          >
-            {t("YES_LABEL")}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-  };
-  return { ConfirmationWindow, open, setOpen };
-};
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+interface ConfirmationWindowProps {
+  title: string;
+  body: string;
+  onConfirmationCallBk: () => void;
+}
+
+export const useConfirmationWindow = (props: ConfirmationWindowProps) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const { t } = useTranslation();
+  const ConfirmationWindow: React.FC = () => {
+    return (
+      <Dialog open={open}>
+        <DialogTitle>{props.title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{props.body}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            sx={{ marginRight: 2, marginLeft: 2 }}
+            color="secondary"
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            {t("NO_LABEL")}
+          </Button>
+          <Button
+            variant="contained"
+            sx={{ marginRight: 2, marginLeft: 2 }}
+            color="error"
+            onClick={() => {
+              props.onConfirmationCallBk();
+              setOpen(false);
+            }}
+            autoFocus
+          >
+            {t("YES_LABEL")}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  };
+  return { ConfirmationWindow, open, setOpen };
+};

package/src/hooks/UseMobile.tsx

@@ -1,13 +1,13 @@
-import { useEffect, useState } from "react";
-
-export const useIsMobile = (breakpoint = 768) => {
-  const [isMobile, setIsMobile] = useState(window.innerWidth < breakpoint);
-
-  useEffect(() => {
-    const handleResize = () => setIsMobile(window.innerWidth < breakpoint);
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [breakpoint]);
-
-  return isMobile;
-};
+import { useEffect, useState } from "react";
+
+export const useIsMobile = (breakpoint = 768) => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth < breakpoint);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < breakpoint);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoint]);
+
+  return isMobile;
+};

package/src/hooks/UseSession.tsx

@@ -1,59 +1,59 @@
-import { useSelector } from "react-redux";
-
-const useSession = () => {
-  const UserSession = useSelector((state: any) => state.UserSession);
-  const UserInfo = UserSession.value;
-
-  const isCurrentOrganizationAuthorizedToModule = (
-    moduleCode: string
-  ): Boolean => {
-    if (UserInfo?.currentOrganization?.systemApplicationModules) {
-      for (const subscripedModule of UserInfo.currentOrganization
-        .systemApplicationModules) {
-        if (subscripedModule.toLowerCase() == moduleCode.toLowerCase()) {
-          return true;
-        }
-      }
-    }
-    return false;
-  };
-  const isUserAuthorized = (authorityCode: string): boolean => {
-    if (UserSession?.value?.authorities) {
-      for (let grantedAuthority of UserSession.value.authorities) {
-        if (
-          authorityCode === "DEVELOPMENT_ADMIN" &&
-          (grantedAuthority?.authority === "DEVELOPMENT_ADMIN" ||
-            grantedAuthority?.authority === "ORGANIZATION_ADMIN")
-        ) {
-          return true;
-        } else if (
-          authorityCode === "ORGANIZATION_ADMIN" &&
-          grantedAuthority?.authority === "ORGANIZATION_ADMIN"
-        ) {
-          return true;
-        } else if (
-          authorityCode !== "DEVELOPMENT_ADMIN" &&
-          authorityCode !== "ORGANIZATION_ADMIN"
-        ) {
-          if (
-            grantedAuthority?.authority === "ORGANIZATION_ADMIN" ||
-            grantedAuthority?.authority === "DEVELOPMENT_ADMIN" ||
-            grantedAuthority?.authority === "SYSTEM_ADMIN" ||
-            grantedAuthority?.authority === authorityCode
-          ) {
-            return true;
-          }
-        }
-      }
-    }
-    return false;
-  };
-  return {
-    UserSession,
-    isUserAuthorized,
-    isCurrentOrganizationAuthorizedToModule,
-    UserInfo,
-  };
-};
-
-export default useSession;
+import { useSelector } from "react-redux";
+
+const useSession = () => {
+  const UserSession = useSelector((state: any) => state.UserSession);
+  const UserInfo = UserSession.value;
+
+  const isCurrentOrganizationAuthorizedToModule = (
+    moduleCode: string
+  ): Boolean => {
+    if (UserInfo?.currentOrganization?.systemApplicationModules) {
+      for (const subscripedModule of UserInfo.currentOrganization
+        .systemApplicationModules) {
+        if (subscripedModule.toLowerCase() == moduleCode.toLowerCase()) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  const isUserAuthorized = (authorityCode: string): boolean => {
+    if (UserSession?.value?.authorities) {
+      for (let grantedAuthority of UserSession.value.authorities) {
+        if (
+          authorityCode === "DEVELOPMENT_ADMIN" &&
+          (grantedAuthority?.authority === "DEVELOPMENT_ADMIN" ||
+            grantedAuthority?.authority === "ORGANIZATION_ADMIN")
+        ) {
+          return true;
+        } else if (
+          authorityCode === "ORGANIZATION_ADMIN" &&
+          grantedAuthority?.authority === "ORGANIZATION_ADMIN"
+        ) {
+          return true;
+        } else if (
+          authorityCode !== "DEVELOPMENT_ADMIN" &&
+          authorityCode !== "ORGANIZATION_ADMIN"
+        ) {
+          if (
+            grantedAuthority?.authority === "ORGANIZATION_ADMIN" ||
+            grantedAuthority?.authority === "DEVELOPMENT_ADMIN" ||
+            grantedAuthority?.authority === "SYSTEM_ADMIN" ||
+            grantedAuthority?.authority === authorityCode
+          ) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  };
+  return {
+    UserSession,
+    isUserAuthorized,
+    isCurrentOrganizationAuthorizedToModule,
+    UserInfo,
+  };
+};
+
+export default useSession;

package/src/hooks/UseWindow.tsx

@@ -1,111 +1,111 @@
-import { useEffect, useState } from "react";
-import {
-  AppBar,
-  Box,
-  IconButton,
-  Modal,
-  Paper,
-  Toolbar,
-  Typography,
-} from "@mui/material";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { useSelector } from "react-redux";
-
-export interface TemplateWindowProp {
-  height?: any;
-  width?: any;
-  minWidth?: any;
-  minHeight?: any;
-  windowIcon?: IconProp;
-  windowTitle?: string;
-  onCloseCallBack?: any;
-}
-
-interface WindowProps {
-  children?: React.ReactNode;
-}
-
-export const useWindow = (props: TemplateWindowProp) => {
-  const [windowState, setWindowState] = useState(false);
-  const appDirection = useSelector(
-    (state: any) => state.AppLayout.appDirection
-  );
-  const Window: React.FC<WindowProps> = (windowProps: WindowProps) => {
-    return (
-      <Modal
-        open={windowState}
-        sx={{ zIndex: (theme) => theme.zIndex.drawer }}
-        onClose={() => {
-          if (!windowState && props?.onCloseCallBack) {
-            props.onCloseCallBack();
-          }
-        }}
-      >
-        <Box
-          dir={appDirection}
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            maxHeight: "90%",
-            transform: "translate(-50%, -50%)",
-            height: props?.height || "80%",
-            width: props?.width || "90%",
-            minWidth: props.minWidth || 400,
-            minHeight: props.minHeight || 200,
-            overflow: "hidden",
-            bgcolor: "modalBackground.main",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "flex-start",
-          }}
-        >
-          <AppBar position="static">
-            <Toolbar variant="dense">
-              <FontAwesomeIcon
-                icon={props?.windowIcon || "window-maximize"}
-                style={{ marginRight: 5 }}
-              />
-              <Typography variant="h6" color="inherit" component="div">
-                {props?.windowTitle || "window"}
-              </Typography>
-              <div style={{ flexGrow: 1 }}></div>
-              <IconButton
-                onClick={() => {
-                  setWindowState(false);
-                  if (
-                    props.onCloseCallBack != undefined &&
-                    props.onCloseCallBack != null
-                  ) {
-                    props.onCloseCallBack();
-                  }
-                }}
-                color="secondary"
-              >
-                <FontAwesomeIcon icon="xmark-square" color="white" />
-              </IconButton>
-            </Toolbar>
-          </AppBar>
-          <Paper
-            sx={{
-              // flexGrow: 1,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              width: "100%",
-              height: "100%",
-              padding: 1,
-              // justifyContent: "center",
-              overflow: "hidden",
-            }}
-          >
-            {windowProps?.children}
-          </Paper>
-        </Box>
-      </Modal>
-    );
-  };
-  return { windowState, setWindowState, Window };
-};
+import { useEffect, useState } from "react";
+import {
+  AppBar,
+  Box,
+  IconButton,
+  Modal,
+  Paper,
+  Toolbar,
+  Typography,
+} from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { useSelector } from "react-redux";
+
+export interface TemplateWindowProp {
+  height?: any;
+  width?: any;
+  minWidth?: any;
+  minHeight?: any;
+  windowIcon?: IconProp;
+  windowTitle?: string;
+  onCloseCallBack?: any;
+}
+
+interface WindowProps {
+  children?: React.ReactNode;
+}
+
+export const useWindow = (props: TemplateWindowProp) => {
+  const [windowState, setWindowState] = useState(false);
+  const appDirection = useSelector(
+    (state: any) => state.AppLayout.appDirection
+  );
+  const Window: React.FC<WindowProps> = (windowProps: WindowProps) => {
+    return (
+      <Modal
+        open={windowState}
+        sx={{ zIndex: (theme) => theme.zIndex.drawer }}
+        onClose={() => {
+          if (!windowState && props?.onCloseCallBack) {
+            props.onCloseCallBack();
+          }
+        }}
+      >
+        <Box
+          dir={appDirection}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            maxHeight: "90%",
+            transform: "translate(-50%, -50%)",
+            height: props?.height || "80%",
+            width: props?.width || "90%",
+            minWidth: props.minWidth || 400,
+            minHeight: props.minHeight || 200,
+            overflow: "hidden",
+            bgcolor: "modalBackground.main",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "flex-start",
+          }}
+        >
+          <AppBar position="static">
+            <Toolbar variant="dense">
+              <FontAwesomeIcon
+                icon={props?.windowIcon || "window-maximize"}
+                style={{ marginRight: 5 }}
+              />
+              <Typography variant="h6" color="inherit" component="div">
+                {props?.windowTitle || "window"}
+              </Typography>
+              <div style={{ flexGrow: 1 }}></div>
+              <IconButton
+                onClick={() => {
+                  setWindowState(false);
+                  if (
+                    props.onCloseCallBack != undefined &&
+                    props.onCloseCallBack != null
+                  ) {
+                    props.onCloseCallBack();
+                  }
+                }}
+                color="secondary"
+              >
+                <FontAwesomeIcon icon="xmark-square" color="white" />
+              </IconButton>
+            </Toolbar>
+          </AppBar>
+          <Paper
+            sx={{
+              // flexGrow: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              width: "100%",
+              height: "100%",
+              padding: 1,
+              // justifyContent: "center",
+              overflow: "hidden",
+            }}
+          >
+            {windowProps?.children}
+          </Paper>
+        </Box>
+      </Modal>
+    );
+  };
+  return { windowState, setWindowState, Window };
+};

package/src/hooks/index.ts

@@ -1,22 +1,22 @@
-import { useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { useForm } from "react-hook-form";
-import { useParams } from "react-router-dom";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useNavigate } from "react-router-dom";
-import * as z from "zod";
-import { useDispatch, useSelector } from "react-redux";
-export { default as useAxios } from "./useAxios";
-export { useConfirmationWindow } from "./UseConfirmationWindow";
-export { default as useLoadingMask } from "./useLoadingMask";
-export { useIsMobile } from "./UseMobile";
-export { default as useSession } from "./UseSession";
-export { useWindow } from "./UseWindow";
-export { default as useApiActions } from "./useApiActions";
-export { default as useCommonStore } from "./useCommonStore";
-export { useDispatch };
-export { useSelector };
-export { useParams };
-export { useForm, zodResolver, z };
-export { useTranslation };
-export { useNavigate };
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useForm } from "react-hook-form";
+import { useParams } from "react-router-dom";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "react-router-dom";
+import * as z from "zod";
+import { useDispatch, useSelector } from "react-redux";
+export { default as useAxios } from "./useAxios";
+export { useConfirmationWindow } from "./UseConfirmationWindow";
+export { default as useLoadingMask } from "./useLoadingMask";
+export { useIsMobile } from "./UseMobile";
+export { default as useSession } from "./UseSession";
+export { useWindow } from "./UseWindow";
+export { default as useApiActions } from "./useApiActions";
+export { default as useCommonStore } from "./useCommonStore";
+export { useDispatch };
+export { useSelector };
+export { useParams };
+export { useForm, zodResolver, z };
+export { useTranslation };
+export { useNavigate };