Sent all the panel sizes via onPanelWidthChange in `EuiResizableCom…

…ponent` rather than just the 2 panel sizes (#3630) * Sent all the panel sizes via in rather than just the 2 panels * Fixed lint errors * sent percentages instead of pixels and formatted * Lint * Lint errors fixed * updated changes * Updated changes * CL Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
elastic · Jun 29, 2020 · c042314 · c042314
1 parent 88f1167
commit c042314
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added `gutterSize` prop to `EuiFacetGroup` ([#3639](https://github.com/elastic/eui/pull/3639))
 - Updated props of `EuiCode` and `EuiCodeBlock` to reflect only functional props ([#3647](https://github.com/elastic/eui/pull/3647))
+- Updated `EuiResizableContainer` `onPanelWidthChange` callback method to include all panel widths ([#3630](https://github.com/elastic/eui/pull/3630))
 
 **Bug fixes**
 

diff --git a/src/components/resizable_container/context.tsx b/src/components/resizable_container/context.tsx
@@ -40,6 +40,21 @@ export class EuiResizablePanelRegistry {
   getResizerSiblings(prevPanelId: string, nextPanelId: string) {
     return [this.panels[prevPanelId], this.panels[nextPanelId]];
   }
+
+  fetchAllPanels(
+    prevPanelId: string,
+    nextPanelId: string,
+    containerSize: number
+  ) {
+    const panelWithSizes: { [key: string]: number } = {};
+    for (const key in this.panels) {
+      if (key !== prevPanelId && key !== nextPanelId) {
+        panelWithSizes[key] =
+          (this.panels[key].getSizePx() / containerSize) * 100;
+      }
+    }
+    return panelWithSizes;
+  }
 }
 
 interface ContextProps {

diff --git a/src/components/resizable_container/helpers.ts b/src/components/resizable_container/helpers.ts
@@ -145,12 +145,18 @@ export const useContainerCallbacks = ({
         );
 
         setState({ ...state, isDragging: false });
-        if (onPanelWidthChange) {
+        const panelObject = registry.fetchAllPanels(
+          prevPanelId,
+          nextPanelId,
+          containerSize - resizersSize
+        );
+        if (prevPanelSize !== nextPanelSize && onPanelWidthChange) {
           onPanelWidthChange({
+            ...panelObject,
             [prevPanelId]: prevPanelSize,
             [nextPanelId]: nextPanelSize,
           });
-        } else {
+
           prevPanel.setSize(prevPanelSize);
           nextPanel.setSize(nextPanelSize);
         }
@@ -204,16 +210,21 @@ export const useContainerCallbacks = ({
           containerSize
         );
 
+        const panelObject = registry.fetchAllPanels(
+          state.previousPanelId,
+          state.nextPanelId,
+          containerSize
+        );
         if (prevPanelSize >= prevPanelMin && nextPanelSize >= nextPanelMin) {
           if (onPanelWidthChange) {
             onPanelWidthChange({
+              ...panelObject,
               [state.previousPanelId]: prevPanelSize,
               [state.nextPanelId]: nextPanelSize,
             });
-          } else {
-            prevPanel.setSize(prevPanelSize);
-            nextPanel.setSize(nextPanelSize);
           }
+          prevPanel.setSize(prevPanelSize);
+          nextPanel.setSize(nextPanelSize);
 
           setState({ ...state, currentResizerPos: x });
         }