feat(ui-6240): accept collapsed status on resizer panel, during mounting and props change

Author: wiedld

src/Components/DraggableResizer/Documentation/DraggableResizer.stories.tsx

@@ -187,7 +187,7 @@ draggableResizerExamplesStories.add(
 )
 
 draggableResizerExamplesStories.add(
-  '4 Panels',
+  '4 Panels, init rightmost collapsed',
   () => {
     const [positions, updatePositions] = useState<number[]>([0.25, 0.5, 0.75])
 
@@ -252,6 +252,7 @@ draggableResizerExamplesStories.add(
           <DraggableResizer.Panel
             ref={draggableResizerPanelRef4}
             isCollapsible={true}
+            collapsed={true}
           >
             <div className="mockCard">
               <span>4</span>
@@ -270,3 +271,83 @@ draggableResizerExamplesStories.add(
     },
   }
 )
+
+draggableResizerExamplesStories.add(
+  '3 Horizontal Panels, init middle collapsed',
+  () => {
+    const [position, updatePosition] = useState<number[]>([0.25, 0.5])
+    const draggableResizerPanelRef1 = createRef<DraggableResizerPanelRef>()
+    const draggableResizerPanelRef2 = createRef<DraggableResizerPanelRef>()
+    const draggableResizerPanelRef3 = createRef<DraggableResizerPanelRef>()
+    const defaultBackgroundStyle = {backgroundColor: 'transparent'}
+    const defaultBarStyle = {backgroundColor: '#ffffff'}
+
+    const logRef = (): void => {
+      /* eslint-disable */
+      console.log(draggableResizerPanelRef1.current)
+      console.log(draggableResizerPanelRef2.current)
+      /* eslint-enable */
+    }
+
+    return (
+      <div className="mockPage padded">
+        <DraggableResizer
+          handleOrientation={
+            Orientation[
+              select(
+                'handleOrientation',
+                mapEnumKeys(Orientation),
+                'Horizontal'
+              )
+            ]
+          }
+          handleGradient={
+            Gradients[
+              Gradients[
+                select('handleGradient', mapEnumKeys(Gradients), 'PastelGothic')
+              ]
+            ]
+          }
+          backgroundStyle={object('backgroundStyle', defaultBackgroundStyle)}
+          handleBarStyle={object('handleBarStyle', defaultBarStyle)}
+          handlePositions={position}
+          onChangePositions={handlePositions => updatePosition(handlePositions)}
+        >
+          <DraggableResizer.Panel
+            ref={draggableResizerPanelRef1}
+            isCollapsible={true}
+          >
+            <div className="mockCard">
+              <span>1</span>
+            </div>
+          </DraggableResizer.Panel>
+          <DraggableResizer.Panel
+            ref={draggableResizerPanelRef2}
+            isCollapsible={true}
+            collapsed={true}
+          >
+            <div className="mockCard">
+              <span>2</span>
+            </div>
+          </DraggableResizer.Panel>
+          <DraggableResizer.Panel
+            ref={draggableResizerPanelRef3}
+            isCollapsible={true}
+          >
+            <div className="mockCard">
+              <span>3</span>
+            </div>
+          </DraggableResizer.Panel>
+        </DraggableResizer>
+        <div className="story--test-buttons">
+          <button onClick={logRef}>Log Ref</button>
+        </div>
+      </div>
+    )
+  },
+  {
+    readme: {
+      content: marked(DraggableResizerExampleAReadme),
+    },
+  }
+)

src/Components/DraggableResizer/Documentation/DraggableResizerExampleA.md

@@ -1,6 +1,6 @@
-# 2 Panel Stateful Example
+# 3 Panel Stateful Example
 
-Here's a stateful example of `DraggableResizer` with 2 panels. Because this example contained in a stateful wrapper the example code in the JSX tab is obscured. Try looking at the State tab to see state changes in real time. 
+Here's a stateful example of `DraggableResizer` with 3 panels. Because this example contained in a stateful wrapper the example code in the JSX tab is obscured. Try looking at the State tab to see state changes in real time. 
 
 ### Usage
 ```tsx

src/Components/DraggableResizer/DraggableResizer.tsx

@@ -201,16 +201,21 @@ export const DraggableResizerRoot: FunctionComponent<DraggableResizerProps> = ({
         const dragging = i === dragIndex
 
         const isCollapsibleToLower = child.props.isCollapsible
+        const collapsedLower = child.props.collapsed
         const isCollapsibleToUpper =
           !isLastPanel && children && children[i + 1].props.isCollapsible
+        const collapsedUpper =
+          !isLastPanel && children && children[i + 1].props.collapsed
 
         return (
           <>
             {cloneElement(child, {sizePercent: calculatePanelSize(i)})}
             {!isLastPanel && (
               <DraggableResizerHandle
                 isCollapsibleToLower={isCollapsibleToLower}
+                collapsedLower={collapsedLower}
                 isCollapsibleToUpper={isCollapsibleToUpper}
+                collapsedUpper={collapsedUpper}
                 onCollapseButtonClick={onCollapseButtonClick}
                 dragIndex={i}
                 onStartDrag={handleStartDrag}

src/Components/DraggableResizer/DraggableResizerHandle.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {forwardRef, CSSProperties, useState} from 'react'
+import React, {forwardRef, CSSProperties, useState, useEffect} from 'react'
 import classnames from 'classnames'
 
 // Components
@@ -19,8 +19,12 @@ import {getColorsFromGradient} from '../../Utils/colors'
 export interface DraggableResizerHandleProps extends StandardFunctionProps {
   /** Enables a 0.0 direction (Left/Up) Collapse button */
   isCollapsibleToLower?: boolean
+  /** Collapsed state observed from parent */
+  collapsedLower?: boolean
   /** Enables a 1.0 direction (Right/Down) Collapse Button */
   isCollapsibleToUpper?: boolean
+  /** Collapsed state observed from parent */
+  collapsedUpper?: boolean
   /** Function that updates panel positions after collapsing */
   onCollapseButtonClick: (direction: number, dragIndex: number) => void
   /** Gets passed a function by being a child of DraggableResizer */
@@ -52,7 +56,9 @@ export const DraggableResizerHandle = forwardRef<
       className,
       orientation,
       isCollapsibleToLower = false,
+      collapsedLower = false,
       isCollapsibleToUpper = false,
+      collapsedUpper = false,
       onCollapseButtonClick,
       dragging = false,
       dragIndex = 9999,
@@ -63,8 +69,21 @@ export const DraggableResizerHandle = forwardRef<
     },
     ref
   ) => {
-    const [collapsibleLower, setCollapsibleLower] = useState<boolean>(false)
-    const [collapsibleUpper, setCollapsibleUpper] = useState<boolean>(false)
+    const [collapsibleLower, setCollapsibleLower] = useState<boolean>(
+      collapsedLower
+    )
+    const [collapsibleUpper, setCollapsibleUpper] = useState<boolean>(
+      collapsedUpper
+    )
+
+    useEffect(() => {
+      if (isCollapsibleToLower && collapsedLower) {
+        onCollapseButtonClick(0, dragIndex)
+      }
+      if (isCollapsibleToUpper && collapsedUpper) {
+        onCollapseButtonClick(1, dragIndex)
+      }
+    }, [ref, collapsedLower, collapsedUpper])
 
     const handleMouseDown = (): void => {
       onStartDrag(dragIndex)

src/Components/DraggableResizer/DraggableResizerPanel.tsx

@@ -8,6 +8,8 @@ import {StandardFunctionProps} from '../../Types'
 export interface DraggableResizerPanelProps extends StandardFunctionProps {
   /** Checks if the current panel is collapsible or not */
   isCollapsible?: boolean
+  /** Collapse state, consumed on component mounting and prop change from parent */
+  collapsed?: boolean
   /** Panel will not shrink past this size (experimental, not guaranteed to work) */
   minSizePixels?: number
   /** Does not have a value initially, gets passed a value by being a child of DraggableResizer */