@nethru/ui 2.1.52 → 2.1.53

package/base/context/AutoLogoutContext.js

@@ -0,0 +1,22 @@
+import { createContext, useContext, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AutoLogoutContext = /*#__PURE__*/createContext();
+export function AutoLogoutContextProvider({
+  sessionTimeout,
+  sessionTimeoutWarningTime,
+  children
+}) {
+  const [refresh, setRefresh] = useState(false);
+  return /*#__PURE__*/_jsx(AutoLogoutContext.Provider, {
+    value: {
+      sessionTimeout,
+      sessionTimeoutWarningTime,
+      refresh,
+      setRefresh
+    },
+    children: children
+  });
+}
+export function useAutoLogoutContext() {
+  return useContext(AutoLogoutContext);
+}

package/base/frame/AppBar.js

@@ -8,6 +8,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const AppBar = /*#__PURE__*/forwardRef(({
   appsSlot,
   brandSlot,
+  sessionSlot,
   avatarSlot,
   children,
   ...props
@@ -42,7 +43,12 @@ const AppBar = /*#__PURE__*/forwardRef(({
           alignItems: "center",
           flexGrow: 1,
           gap: 6,
-          children: [children, !children && /*#__PURE__*/_jsx(Box, {}), avatarSlot]
+          children: [children, !children && /*#__PURE__*/_jsx(Box, {}), /*#__PURE__*/_jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            gap: 2,
+            children: [sessionSlot, avatarSlot]
+          })]
         })]
       })
     }), !isEmpty(sections) && /*#__PURE__*/_jsx(Box, {

package/base/frame/AutoLogoutWarning.js

@@ -0,0 +1,115 @@
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
+import { Box, Button, Popover, Stack, Typography } from "@mui/material";
+import useInterval from "../hook/Timer";
+import { useAutoLogoutContext } from "../context/AutoLogoutContext";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const AutoLogoutWarning = /*#__PURE__*/forwardRef(({
+  onExtendSession,
+  onTimeout,
+  ...props
+}, ref) => {
+  const {
+    sessionTimeout,
+    sessionTimeoutWarningTime,
+    refresh
+  } = useAutoLogoutContext();
+  const [remaingTime, setRemainingTime] = useState(sessionTimeout);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const isVisible = useMemo(() => remaingTime >= 0 && remaingTime <= sessionTimeoutWarningTime, [remaingTime, sessionTimeoutWarningTime]);
+  const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
+  const handleOpen = useCallback(event => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  const handleExtend = useCallback(() => {
+    setAnchorEl(null);
+    onExtendSession?.();
+  }, [onExtendSession]);
+  useInterval(() => {
+    if (remaingTime === 0) onTimeout?.();
+    setRemainingTime(prev => prev - 1);
+  }, remaingTime >= 0 ? 1000 : null);
+  useEffect(() => {
+    setRemainingTime(sessionTimeout);
+    // eslint-disable-next-line
+  }, [refresh]);
+  console.log(remaingTime);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isVisible && /*#__PURE__*/_jsx(Button, {
+      color: "curd",
+      onClick: handleOpen,
+      children: /*#__PURE__*/_jsxs(Stack, {
+        sx: styles.container,
+        ...props,
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          variant: "bodySmBold",
+          children: [remaingTime, "\uCD08"]
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "bodyXsMedium",
+          sx: styles.description,
+          children: "\uB85C\uADF8\uC544\uC6C3\uAE4C\uC9C0 \uB0A8\uC740 \uC2DC\uAC04"
+        })]
+      })
+    }), remaingTime > 0 && /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      onClose: handleClose,
+      disableRestoreFocus: true,
+      sx: styles.popover,
+      children: /*#__PURE__*/_jsxs(Stack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "bodySmBold",
+          children: "\uC790\uB3D9 \uB85C\uADF8\uC544\uC6C3 \uC548\uB0B4"
+        }), /*#__PURE__*/_jsxs(Typography, {
+          variant: "bodySmRegular",
+          children: [Math.round(sessionTimeout / 60), "\uBD84 \uB3D9\uC548 \uC11C\uBE44\uC2A4\uB97C \uC774\uC6A9\uD558\uC9C0 \uC54A\uC544", /*#__PURE__*/_jsx("br", {}), "\uC7A0\uC2DC \uD6C4 \uC790\uB3D9\uC73C\uB85C \uB85C\uADF8\uC544\uC6C3\uB420 \uC608\uC815\uC785\uB2C8\uB2E4.", /*#__PURE__*/_jsx("br", {}), "\uB85C\uADF8\uC778 \uC2DC\uAC04\uC744 \uC5F0\uC7A5\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?"]
+        }), /*#__PURE__*/_jsx(Box, {
+          children: /*#__PURE__*/_jsx(Button, {
+            size: "small",
+            onClick: handleExtend,
+            children: "\uB85C\uADF8\uC778 \uC5F0\uC7A5"
+          })
+        })]
+      })
+    })]
+  });
+});
+const styles = {
+  container: {
+    height: '36px',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  timeRemaining: {},
+  description: {
+    lineHeight: 1
+  },
+  popover: {
+    '& .MuiPaper-root': {
+      padding: 3
+    },
+    '& .MuiBox-root': {
+      width: '100%',
+      textAlign: 'center'
+    },
+    '& .MuiTypography-root': {
+      lineHeight: 1.2,
+      whiteSpace: 'pre',
+      cursor: 'default'
+    }
+  }
+};
+export default AutoLogoutWarning;

package/base/hook/Timer.js

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+const useInterval = (callback, delay, onMount) => {
+  const callbackRef = useRef(null);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    let timerId;
+    if (delay) {
+      timerId = setInterval(() => {
+        callbackRef.current();
+      }, delay);
+    }
+    if (onMount) onMount(timerId);
+    return () => clearInterval(timerId);
+  }, [delay, onMount]);
+};
+export default useInterval;

package/base/index.js

@@ -10,6 +10,7 @@ export { default as AddableFormList } from "./AddableFormList";
 export { default as Alert } from "./Alert";
 export { default as AlertDialog } from "./dialog/AlertDialog";
 export { default as AppBar } from "./frame/AppBar";
+export { default as AutoLogoutWarning } from "./frame/AutoLogoutWarning";
 export { default as Brand } from "./frame/Brand";
 export { default as CircularProgressButton } from "./CircularProgressButton";
 export { default as Checkbox } from "./Checkbox";
@@ -39,6 +40,7 @@ export { default as Snackbar } from "./Snackbar";
 export { default as SplitLayout } from "./frame/SplitLayout";
 export { default as Switch } from "./Switch";
 export { default as TextField } from "./TextField";
+export * from "./context/AutoLogoutContext";
 export * from './frame/sidebar/SidebarContext';
 export { default as Error } from "./error/Error";
 export { default as HttpError } from "./error/HttpError";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.1.52",
+  "version": "2.1.53",
   "main": "base/index.js",
   "files": [
     "/base"