@nethru/ui 2.1.46 → 2.1.48

package/base/frame/SplitLayout.js

@@ -15,27 +15,12 @@ const SplitLayout = /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   const containerRef = useRef(null);
-  const asideRef = useRef(null);
+  const sectionRef = useRef(null);
   const currentX = useRef();
   const [resizing, setResizing] = useState(false);
+  const [asideWidth, setAsideWidth] = useState(0);
   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;
@@ -47,13 +32,15 @@ const SplitLayout = /*#__PURE__*/forwardRef(({
   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;
+    const sectionWidth = sectionRef.current.clientWidth - (currentX.current - event.clientX);
+    const asideWidth = containerWidth - sectionWidth;
     currentX.current = event.clientX;
     if (sectionWidth < arrangedMinWidths[0] || asideWidth < arrangedMinWidths[1]) return;
+    setAsideWidth(asideWidth);
     setAsidePortion(asideWidth / containerWidth * 100);
   }, [resizing, arrangedMinWidths]);
   const reset = useCallback(event => {
+    setAsideWidth(calcAsideWidth(containerRef.current.clientWidth, defaultAsidePortion));
     setAsidePortion(defaultAsidePortion);
   }, [defaultAsidePortion]);
   useEffect(() => {
@@ -71,6 +58,9 @@ const SplitLayout = /*#__PURE__*/forwardRef(({
       document.removeEventListener('mouseup', handleMouseUp);
     };
   }, [resizing, handleMouseMove, handleMouseUp]);
+  useEffect(() => {
+    setAsideWidth(calcAsideWidth(containerRef.current.clientWidth, defaultAsidePortion));
+  }, [containerRef, defaultAsidePortion]);
   useEffect(() => {
     if (!aside) setAsidePortion(0);else if (asidePortion === 0) setAsidePortion(defaultAsidePortion);
     // eslint-disable-next-line
@@ -81,22 +71,20 @@ const SplitLayout = /*#__PURE__*/forwardRef(({
     columns: 100,
     columnSpacing: 0,
     sx: {
-      ...containerStyles,
+      ...styles.container,
       ...sx
     },
     ...props,
     children: [/*#__PURE__*/_jsxs(Grid2, {
+      ref: sectionRef,
       component: "section",
       size: 100 - asidePortion,
-      sx: sectionStyles,
+      sx: styles.section,
       children: [children, footer]
     }), aside && /*#__PURE__*/_jsxs(Grid2, {
-      ref: asideRef,
       component: "aside",
       size: asidePortion,
-      sx: {
-        position: 'relative'
-      },
+      sx: styles.aside.container(asideWidth),
       children: [/*#__PURE__*/_jsxs(Stack, {
         direction: "row",
         sx: {
@@ -104,9 +92,9 @@ const SplitLayout = /*#__PURE__*/forwardRef(({
         },
         children: [/*#__PURE__*/_jsx(Box, {
           onMouseDown: handleMouseDown,
-          sx: dividerStyles
+          sx: styles.divider
         }), /*#__PURE__*/_jsx(Box, {
-          sx: asideStyles,
+          sx: styles.aside.body,
           children: aside
         })]
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -115,7 +103,7 @@ const SplitLayout = /*#__PURE__*/forwardRef(({
           variant: "crud",
           onClick: reset,
           sx: {
-            ...resetButtonStyles,
+            ...styles.aside.resetButton(resetButtonMarginTop),
             opacity: asidePortion > 0 && asidePortion !== defaultAsidePortion ? 1 : 0
           },
           children: /*#__PURE__*/_jsx(SplitLayoutIcon, {})
@@ -125,24 +113,55 @@ const SplitLayout = /*#__PURE__*/forwardRef(({
   });
 });
 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 styles = {
+  container: {
+    height: '100%'
+  },
+  section: {
+    padding: '24px 28px'
+  },
+  divider: {
+    width: '6px',
+    height: '100%',
+    borderLeft: `1px solid ${grey[400]}`,
+    backgroundColor: blueGrey.frameBg,
+    cursor: 'col-resize',
+    zIndex: 'var(--divider-zindex)'
+  },
+  aside: {
+    container: width => ({
+      position: 'fixed',
+      right: 0,
+      width: `${width}px`,
+      height: 'calc(100vh - var(--gnb-height))'
+    }),
+    body: {
+      width: '100%',
+      height: '100%',
+      flexGrow: 1,
+      backgroundColor: blueGrey.frameBg,
+      padding: '6px 16px 6px 10px',
+      overflowX: 'hidden',
+      zIndex: 'var(--aside-zindex)'
+    },
+    resetButton: marginTop => ({
+      position: 'absolute',
+      top: `${marginTop}px`,
+      right: '16px',
+      zIndex: 'var(--aside-button-zindex)',
+      transition: 'opacity .5s',
+      '&': {
+        backgroundColor: '#dfe0e1'
+      },
+      ':hover, &.Mui-focusVisible': {
+        backgroundColor: '#d9dadb'
+      },
+      '&:active': {
+        backgroundColor: '#c7c8c8'
+      }
+    })
+  }
 };
-const asideStyles = {
-  flexGrow: 1,
-  backgroundColor: blueGrey.frameBg,
-  padding: '6px 16px 6px 10px',
-  overflowX: 'hidden',
-  zIndex: 'var(--aside-zindex)'
-};
+function calcAsideWidth(containerWidth, asidePortion) {
+  return containerWidth * (asidePortion / 100);
+}

package/package.json

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