fix: enlarge the side panel does not appear anymore after shrinking it (

#155) * fix: enlarge the side panel does not appear anymore after shrinking it * chore: add comments on resize handler function * chore: update split pane story
zakodium-oss · Jun 23, 2022 · 3fe3637 · 3fe3637
1 parent 378ec45
commit 3fe3637
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 11 deletions.
diff --git a/src/components/SplitPane.tsx b/src/components/SplitPane.tsx
@@ -125,6 +125,7 @@ export function SplitPane(props: SplitPaneProps) {
   const parentRef = useRef<HTMLDivElement>(null);
   const touchedRef = useRef<boolean>(false);
   const panelRef = useRef<HTMLDivElement>(null);
+  const parenSizeRef = useRef<number>(0);
 
   const [[size, type], setSize] = useState(() => {
     const [, value, type] = /(?<value>^\d+)(?<type>.+)$/.exec(
@@ -146,16 +147,29 @@ export function SplitPane(props: SplitPaneProps) {
 
   useResizeObserver<HTMLDivElement>({
     onResize: ({ width, height }) => {
+      // size based on the split pane orientation
       const size = orientation === 'horizontal' ? width : height;
 
-      if (
-        size &&
-        minimumSize &&
-        size <= minimumSize &&
-        !isFinalClosed &&
-        !touchedRef.current
-      ) {
-        toggle();
+      // if the separator is not touched or minimumSize is defined then the automatic close/open work
+      if (size && minimumSize && !touchedRef.current) {
+        /**
+         *  if the size is less than or equal to the minimumSize and the panel is not closed yet then save the split pane width to use as
+           a reference value for checking if there is enough room to open the panel or not and then close the panel.
+         */
+        if (size <= minimumSize && !isFinalClosed) {
+          const parentBounding = parentRef.current?.getBoundingClientRect();
+          if (parentBounding) {
+            parenSizeRef.current =
+              orientation === 'horizontal'
+                ? parentBounding.width
+                : parentBounding.height;
+          }
+          toggle();
+
+          //  if the size grater than reference size value and the panel is already closed then open it again
+        } else if (size > parenSizeRef.current && isFinalClosed) {
+          toggle();
+        }
       }
     },
     ref: panelRef,

diff --git a/stories/split.stories.tsx b/stories/split.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { ComponentStory, Meta } from '@storybook/react';
 import React from 'react';
 
 import { Accordion, SplitPane } from '../src';
@@ -16,6 +16,14 @@ export default {
   },
   argTypes: {
     onChange: { action: 'handle' },
+    orientation: {
+      options: ['vertical', 'horizontal'],
+      control: { type: 'radio' },
+    },
+    sideSeparation: {
+      options: ['start', 'end'],
+      control: { type: 'radio' },
+    },
   },
   component: SplitPane,
 } as Meta<SplitPaneProps>;
@@ -119,7 +127,9 @@ export function WithEvilChild() {
     </div>
   );
 }
-export function WithMinimalSize(props: Omit<SplitPaneProps, 'children'>) {
+const WithMinimalSizeExample: ComponentStory<typeof SplitPane> = (
+  props: Omit<SplitPaneProps, 'children'>,
+) => {
   const { sideSeparation, minimumSize = 300 } = props;
   return (
     <div
@@ -140,4 +150,13 @@ export function WithMinimalSize(props: Omit<SplitPaneProps, 'children'>) {
       </SplitPane>
     </div>
   );
-}
+};
+
+export const WithMinimalSize = WithMinimalSizeExample.bind({});
+WithMinimalSize.args = {
+  initialSeparation: '500px',
+  orientation: 'horizontal',
+  sideSeparation: 'end',
+  initialClosed: false,
+  minimumSize: 300,
+};