@nethru/ui 1.0.9 → 1.0.11

package/dist/AvatarDropdown.js

@@ -0,0 +1,80 @@
+import { useMemo, useState } from 'react';
+import { Avatar, Box, IconButton } from '@mui/material';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Divider from '@mui/material/Divider';
+import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
+import { red } from '@mui/material/colors';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function AvatarDropdown({
+  name,
+  color,
+  bgcolor,
+  children,
+  onProfileClick,
+  onLogoutClick,
+  ...props
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const firstLetter = useMemo(() => {
+    return name && name.length > 0 ? name[0].toUpperCase() : "?";
+  }, [name]);
+  const handleClick = event => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+  const styles = {
+    color: color ? color : '#fff',
+    bgcolor: bgcolor ? bgcolor : red[900],
+    width: 32,
+    height: 32,
+    fontSize: 16
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    ...props,
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      onClick: handleClick,
+      size: "small",
+      sx: {
+        ml: 2
+      },
+      children: /*#__PURE__*/_jsx(Avatar, {
+        sx: styles,
+        children: firstLetter
+      })
+    }), /*#__PURE__*/_jsxs(Menu, {
+      anchorEl: anchorEl,
+      open: open,
+      onClose: handleClose,
+      onClick: handleClose,
+      sx: {
+        '.MuiButtonBase-root.MuiMenuItem-root': {
+          fontSize: 14
+        }
+      },
+      children: [/*#__PURE__*/_jsxs(MenuItem, {
+        onClick: onProfileClick,
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(Avatar, {
+            sx: {
+              ...styles,
+              mr: 1,
+              fontSize: 13,
+              width: 22,
+              height: 22
+            },
+            children: firstLetter
+          })
+        }), name]
+      }), /*#__PURE__*/_jsx(Divider, {}), children, children && /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(MenuItem, {
+        onClick: onLogoutClick,
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(LogoutRoundedIcon, {
+            fontSize: "small"
+          })
+        }), "\uB85C\uADF8\uC544\uC6C3"]
+      })]
+    })]
+  });
+}

package/dist/Frame.js

@@ -1,13 +1,13 @@
-import { Outlet } from 'react-router-dom';
 import { Box } from '@mui/material';
 import { SidebarContextProvider } from './sidebar/SidebarContext';
-import Sidebar from "./sidebar/Sidebar";
 import { variables } from './variables';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 export default function Frame({
   appBar,
+  sideBar,
+  children,
   footer,
   menu,
   menuIcons = {}
@@ -30,12 +30,12 @@ export default function Frame({
       children: [/*#__PURE__*/_jsx(SidebarContextProvider, {
         menu: menu,
         icons: menuIcons,
-        children: /*#__PURE__*/_jsx(Sidebar, {})
+        children: sideBar
       }), /*#__PURE__*/_jsxs(Box, {
         component: "section",
         sx: contentStyles,
         children: [/*#__PURE__*/_jsx("main", {
-          children: /*#__PURE__*/_jsx(Outlet, {})
+          children: children
         }), footer]
       })]
     })]

package/dist/Slider.js

@@ -11,7 +11,7 @@ export default function Slider({
   const autoMarks = useMemo(() => {
     let values = value || defaultValue;
     if (values === undefined) return {};
-    if (values instanceof Array == false) values = [values];
+    if (values instanceof Array === false) values = [values];
     return values.map(v => {
       return {
         value: v,

package/dist/StatusChip.js

@@ -6,7 +6,7 @@ export default function StatusChip({
   id,
   label,
   status,
-  onOperate,
+  onDelete,
   ...props
 }) {
   const styles = {
@@ -14,7 +14,7 @@ export default function StatusChip({
       bgcolor: status === 'normal' ? '#4caf50' : '#fff'
     },
     '.MuiSvgIcon-root.MuiChip-deleteIcon': {
-      cursor: onOperate ? 'pointer' : 'default'
+      cursor: onDelete ? 'pointer' : 'default'
     }
   };
   return /*#__PURE__*/_jsx(Chip, {
@@ -23,7 +23,7 @@ export default function StatusChip({
     variant: status === 'normal' ? 'filled' : 'outlined',
     color: status === 'normal' ? 'success' : 'default',
     deleteIcon: status === 'normal' ? /*#__PURE__*/_jsx(CheckCircleIcon, {}) : /*#__PURE__*/_jsx(ErrorIcon, {}),
-    onDelete: _ => onOperate && onOperate(id, status),
+    onDelete: _ => onDelete && onDelete(id, status),
     sx: styles,
     ...props
   });

package/dist/index.js

@@ -3,6 +3,7 @@ export { default as AccordionDetails } from "./AccordionDetails";
 export { default as AccordionSummary } from "./AccordionSummary";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as AppBar } from "./AppBar";
+export { default as AvatarDropdown } from "./AvatarDropdown";
 export { default as Checkbox } from "./Checkbox";
 export { default as ConfirmDialog } from "./ConfirmDialog";
 export { default as DataGrid } from "./DataGrid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "main": "dist/index.js",
   "files": [
     "/dist"