@nethru/ui 2.0.12 → 2.0.13

package/base/AccordionSummary.js

@@ -31,6 +31,10 @@ const AccordionSummary = /*#__PURE__*/forwardRef(({
       }), children, subcontent && /*#__PURE__*/_jsx(Typography, {
         variant: "bodySmSemibold",
         color: grey[600],
+        sx: {
+          whiteSpace: 'normal',
+          wordBreak: 'break-all'
+        },
         children: subcontent
       })]
     })

package/base/assets/icons.js

@@ -484,4 +484,17 @@ export const DisapprovalIcon = createSvgIcon( /*#__PURE__*/_jsx("svg", {
     d: "M12 16C12.2833 16 12.5208 15.9042 12.7125 15.7125C12.9042 15.5208 13 15.2833 13 15C13 14.7167 12.9042 14.4792 12.7125 14.2875C12.5208 14.0958 12.2833 14 12 14C11.7167 14 11.4792 14.0958 11.2875 14.2875C11.0958 14.4792 11 14.7167 11 15C11 15.2833 11.0958 15.5208 11.2875 15.7125C11.4792 15.9042 11.7167 16 12 16ZM11 12H13V7H11V12ZM12 22C9.68333 21.4167 7.77083 20.0875 6.2625 18.0125C4.75417 15.9375 4 13.6333 4 11.1V5L12 2L20 5V11.1C20 13.6333 19.2458 15.9375 17.7375 18.0125C16.2292 20.0875 14.3167 21.4167 12 22ZM12 19.9C13.7333 19.35 15.1667 18.25 16.3 16.6C17.4333 14.95 18 13.1167 18 11.1V6.375L12 4.125L6 6.375V11.1C6 13.1167 6.56667 14.95 7.7 16.6C8.83333 18.25 10.2667 19.35 12 19.9Z",
     fill: "#7B7B7B"
   })
-}), 'Disapproval');
+}), 'Disapproval');
+export const SplitLayoutIcon = createSvgIcon( /*#__PURE__*/_jsx("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.9 6.8H16C16.6627 6.8 17.2 7.33726 17.2 8V16C17.2 16.6627 16.6627 17.2 16 17.2H14.9V6.8ZM13.1 6.8H8C7.33726 6.8 6.8 7.33726 6.8 8V16C6.8 16.6627 7.33726 17.2 8 17.2H13.1V6.8ZM5 8C5 6.34315 6.34315 5 8 5H16C17.6569 5 19 6.34315 19 8V16C19 17.6569 17.6569 19 16 19H8C6.34315 19 5 17.6569 5 16V8Z",
+    fill: "#7B7B7B"
+  })
+}), 'SplitLayout');

package/base/frame/Frame.js

@@ -10,37 +10,32 @@ const Frame = /*#__PURE__*/forwardRef(({
   menu,
   menuIcons = {},
   children,
-  footer,
   mainRef,
   onScroll
 }, ref) => {
   const containerStyles = useMemo(() => ({
     display: 'flex',
-    flexGrow: 1,
-    overflow: 'auto',
-    marginTop: 'var(--gnb-height)'
+    height: '100%'
   }), []);
   const contentStyles = useMemo(() => ({
     flexGrow: 1,
     overflow: 'auto',
-    padding: '24px 28px',
+    height: '100%',
     backgroundColor: blueGrey.contentBg
   }), []);
   return /*#__PURE__*/_jsx(Box, {
     ref: ref,
+    height: "100%",
     children: /*#__PURE__*/_jsxs(SidebarContextProvider, {
       menu: menu,
       icons: menuIcons,
       children: [appBar, /*#__PURE__*/_jsxs(Box, {
         sx: containerStyles,
-        children: [sideBar, /*#__PURE__*/_jsxs(Box, {
+        children: [sideBar, /*#__PURE__*/_jsx(Box, {
           ref: mainRef,
-          component: "section",
           sx: contentStyles,
           onScroll: onScroll,
-          children: [/*#__PURE__*/_jsx("main", {
-            children: children
-          }), footer]
+          children: children
         })]
       })]
     })

package/base/frame/SimpleLayout.js

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import { Box } from '@mui/material';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SimpleLayout = /*#__PURE__*/forwardRef(({
+  children,
+  footer,
+  sx,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsxs(Box, {
+    ref: ref,
+    component: "section",
+    sx: {
+      ...sectionStyles,
+      ...sx
+    },
+    ...props,
+    children: [children, footer]
+  });
+});
+export default SimpleLayout;
+const sectionStyles = {
+  height: '100%',
+  padding: '24px 28px'
+};

package/base/frame/SplitLayout.js

@@ -0,0 +1,149 @@
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Grid, IconButton, Stack, Tooltip } from '@mui/material';
+import { blueGrey, grey } from "../colors";
+import { SplitLayoutIcon } from "../assets/icons";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SplitLayout = /*#__PURE__*/forwardRef(({
+  defaultAsidePortion = 33,
+  minWidths = [500, 300],
+  resetButtonMarginTop = 13,
+  children,
+  aside,
+  footer,
+  sx,
+  ...props
+}, ref) => {
+  const containerRef = useRef(null);
+  const asideRef = useRef(null);
+  const currentX = useRef();
+  const [resizing, setResizing] = useState(false);
+  const [asidePortion, setAsidePortion] = useState(aside ? defaultAsidePortion : 0);
+  const arrangedMinWidths = useMemo(() => [Math.min(minWidths[0], 703), Math.min(minWidths[1], 346)], [minWidths]);
+  const resetButtonStyles = useMemo(() => ({
+    position: 'absolute',
+    top: `${resetButtonMarginTop}px`,
+    right: '16px',
+    zIndex: 'var(--aside-button-zindex)',
+    transition: 'opacity .5s',
+    '&': {
+      backgroundColor: '#dfe0e1'
+    },
+    ':hover, &.Mui-focusVisible': {
+      backgroundColor: '#d9dadb'
+    },
+    '&:active': {
+      backgroundColor: '#c7c8c8'
+    }
+  }), [resetButtonMarginTop]);
+  const handleMouseDown = useCallback(event => {
+    event.preventDefault();
+    currentX.current = event.clientX;
+    setResizing(true);
+  }, [setResizing]);
+  const handleMouseUp = useCallback(event => {
+    setResizing(false);
+  }, [setResizing]);
+  const handleMouseMove = useCallback(event => {
+    if (!resizing) return;
+    const containerWidth = containerRef.current.clientWidth;
+    const asideWidth = asideRef.current.clientWidth + currentX.current - event.clientX;
+    const sectionWidth = containerWidth - asideWidth;
+    currentX.current = event.clientX;
+    if (sectionWidth < arrangedMinWidths[0] || asideWidth < arrangedMinWidths[1]) return;
+    setAsidePortion(asideWidth / containerWidth * 100);
+  }, [resizing, arrangedMinWidths]);
+  const reset = useCallback(event => {
+    setAsidePortion(defaultAsidePortion);
+  }, [defaultAsidePortion]);
+  useEffect(() => {
+    if (resizing) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = 'col-resize';
+    } else {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = 'unset';
+    }
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [resizing, handleMouseMove, handleMouseUp]);
+  useEffect(() => {
+    if (!aside) setAsidePortion(0);else if (asidePortion === 0) setAsidePortion(defaultAsidePortion);
+    // eslint-disable-next-line
+  }, [aside]);
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    ref: containerRef,
+    columns: 100,
+    columnSpacing: 0,
+    sx: {
+      ...containerStyles,
+      ...sx
+    },
+    ...props,
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      component: "section",
+      xs: 100 - asidePortion,
+      sx: sectionStyles,
+      children: [children, footer]
+    }), aside && /*#__PURE__*/_jsxs(Grid, {
+      ref: asideRef,
+      item: true,
+      component: "aside",
+      xs: asidePortion,
+      sx: {
+        position: 'relative'
+      },
+      children: [/*#__PURE__*/_jsxs(Stack, {
+        direction: "row",
+        sx: {
+          height: '100%'
+        },
+        children: [/*#__PURE__*/_jsx(Box, {
+          onMouseDown: handleMouseDown,
+          sx: dividerStyles
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: asideStyles,
+          children: aside
+        })]
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "\uAE30\uBCF8 \uBD84\uD560\uB85C \uBCC0\uACBD",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          variant: "crud",
+          onClick: reset,
+          sx: {
+            ...resetButtonStyles,
+            opacity: asidePortion > 0 && asidePortion !== defaultAsidePortion ? 1 : 0
+          },
+          children: /*#__PURE__*/_jsx(SplitLayoutIcon, {})
+        })
+      })]
+    })]
+  });
+});
+export default SplitLayout;
+const containerStyles = {
+  height: '100%'
+};
+const sectionStyles = {
+  padding: '24px 28px'
+};
+const dividerStyles = {
+  width: '6px',
+  height: '100%',
+  borderLeft: `1px solid ${grey[400]}`,
+  backgroundColor: blueGrey.frameBg,
+  cursor: 'col-resize',
+  zIndex: 'var(--divider-zindex)'
+};
+const asideStyles = {
+  flexGrow: 1,
+  backgroundColor: blueGrey.frameBg,
+  padding: '6px 16px 6px 10px',
+  zIndex: 'var(--aside-zindex)'
+};

package/base/frame/sidebar/css/primary.module.css

@@ -4,8 +4,9 @@
     flex-direction: column;
     width: calc(var(--primary-menu-width) + 10px);
     padding-right: 10px;
-    height: 100%;
+    height: calc(100% - var(--gnb-height));
     background-color: var(--frame-background-color);
+    z-index: var(--primary-menu-zindex);
 }
 .container a {
     text-decoration: none;

package/base/frame/sidebar/css/sidebar.module.css

@@ -15,7 +15,7 @@
 .secondary {
     position: fixed;
     left: var(--primary-menu-width);
-    height: 100%;
+    height: calc(100% - var(--gnb-height));
     z-index: var(--secondary-menu-zindex);
     white-space: nowrap;
     overflow-x: hidden;

package/base/index.js

@@ -33,8 +33,10 @@ export { default as SearchTextField } from "./SearchTextField";
 export { default as SectionLabel } from "./SectionLabel";
 export { default as Select } from "./Select";
 export { default as Sidebar } from "./frame/sidebar/Sidebar";
+export { default as SimpleLayout } from "./frame/SimpleLayout";
 export { default as Slider } from "./Slider";
 export { default as Snackbar } from "./Snackbar";
+export { default as SplitLayout } from "./frame/SplitLayout";
 export { default as Switch } from "./Switch";
 export * from './frame/sidebar/SidebarContext';
 export { default as Error } from "./error/Error";

package/base/styles/globalStyles.js

@@ -8,10 +8,14 @@ const globalStyles = {
     '--gnb-height': '64px',
     '--gnb-zindex': 1100,
     '--primary-menu-width': '72px',
+    '--primary-menu-zindex': 1101,
     '--secondary-menu-width': '180px',
     '--secondary-menu-collapsed-width': '30px',
-    '--secondary-menu-zindex': 1101,
-    '--secondary-menu-toggler-zindex': 1102
+    '--secondary-menu-zindex': 1102,
+    '--secondary-menu-toggler-zindex': 1103,
+    '--aside-zindex': 1104,
+    '--aside-button-zindex': 1105,
+    '--divider-zindex': 1106
   },
   'html, body, #root': {
     margin: 0,
@@ -20,7 +24,8 @@ const globalStyles = {
   body: {
     fontFamily: typography.fontFamily,
     backgroundColor: blueGrey.contentBg,
-    minWidth: '1280px'
+    minWidth: '1280px',
+    paddingTop: 'var(--gnb-height)'
   },
   '.highcharts-tooltip-box': {
     fillOpacity: 0

package/package.json

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