fix: Odd Panels would not Collapse properly (#840)

* fix: fixed the bug that prevented 3 panels from collapsing properly

* chore: left console and versioning

* chore: left console and versioning

Author: brandenTenbrink

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 6.3.5 (2022-09-19)
+
+- [835](https://github.com/influxdata/clockface/pull/840): Fixed a bug with odd numbered collapsible panels. Last panel would not collapse.
+
 ### 6.3.4 (2022-09-19)
 
 - [835](https://github.com/influxdata/clockface/pull/835): Added a SaveOutline Icon

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/clockface",
-  "version": "6.3.4",
+  "version": "6.3.5",
   "license": "MIT",
   "main": "dist/index.js",
   "style": "dist/index.css",

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

@@ -112,11 +112,12 @@ draggableResizerStories.add(
 )
 
 draggableResizerExamplesStories.add(
-  '2 Panels',
+  '3 Panels',
   () => {
-    const [position, updatePosition] = useState<number[]>([0.5])
+    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'}
 
@@ -147,16 +148,30 @@ draggableResizerExamplesStories.add(
           handlePositions={position}
           onChangePositions={handlePositions => updatePosition(handlePositions)}
         >
-          <DraggableResizer.Panel ref={draggableResizerPanelRef1}>
+          <DraggableResizer.Panel
+            ref={draggableResizerPanelRef1}
+            isCollapsible={true}
+          >
             <div className="mockCard">
               <span>1</span>
             </div>
           </DraggableResizer.Panel>
-          <DraggableResizer.Panel ref={draggableResizerPanelRef2}>
+          <DraggableResizer.Panel
+            ref={draggableResizerPanelRef2}
+            isCollapsible={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>
@@ -226,7 +241,10 @@ draggableResizerExamplesStories.add(
               <span>2</span>
             </div>
           </DraggableResizer.Panel>
-          <DraggableResizer.Panel ref={draggableResizerPanelRef3}>
+          <DraggableResizer.Panel
+            ref={draggableResizerPanelRef3}
+            isCollapsible={true}
+          >
             <div className="mockCard">
               <span>3</span>
             </div>

src/Components/DraggableResizer/DraggableResizer.tsx

@@ -48,6 +48,8 @@ export const DraggableResizerRoot: FunctionComponent<DraggableResizerProps> = ({
   backgroundStyle,
   handleBarStyle,
 }) => {
+  const PANEL_COUNT = React.Children.toArray(children).length
+
   const [startPosition] = useState<number[]>(handlePositions)
   const [dragIndex, setDragIndex] = useState<number>(NULL_DRAG)
 
@@ -131,7 +133,9 @@ export const DraggableResizerRoot: FunctionComponent<DraggableResizerProps> = ({
 
   const calculateCollapsePosition = (direction: number, dragIndex: number) => {
     const totalDrag = handlePositions.length - 1
-    const directionIndex = direction === 0 ? dragIndex : dragIndex + 2
+    const directionOffset = PANEL_COUNT % 2 == 0 ? 2 : 3
+    const directionIndex =
+      direction === 0 ? dragIndex : dragIndex + directionOffset
     const currentPosition = handlePositions[dragIndex]
     let collapsedPosition = directionIndex * 0.25