From 4d3068bd33b80c68501b99d80495a393393bf1fe Mon Sep 17 00:00:00 2001
From: Daniil Suleiman <daniil_suleiman@epam.com>
Date: Tue, 26 Jan 2021 17:04:06 +0300
Subject: [PATCH] Remove resize observer

---
 .../resizable_container_basic.js              |  2 +-
 src/components/resizable_container/helpers.ts | 31 ++++++-------------
 .../resizable_container.tsx                   | 19 +-----------
 src/components/resizable_container/types.ts   |  6 ----
 4 files changed, 12 insertions(+), 46 deletions(-)

diff --git a/src-docs/src/views/resizable_container/resizable_container_basic.js b/src-docs/src/views/resizable_container/resizable_container_basic.js
index cd2e441b6b1..29f027281ca 100644
--- a/src-docs/src/views/resizable_container/resizable_container_basic.js
+++ b/src-docs/src/views/resizable_container/resizable_container_basic.js
@@ -18,7 +18,7 @@ export default () => {
     dom.current.innerHTML = 'YOLO';
   });
   useEffect(() => {
-    setTimeout(() => setStyles({ display: 'flex' }), 1000);
+    setTimeout(() => setStyles({ display: 'flex' }), 3000);
   }, []);
   return (
     <EuiResizableContainer style={{ ...styles, height: '200px' }}>
diff --git a/src/components/resizable_container/helpers.ts b/src/components/resizable_container/helpers.ts
index 4577cb13268..cd2aac611c8 100644
--- a/src/components/resizable_container/helpers.ts
+++ b/src/components/resizable_container/helpers.ts
@@ -152,12 +152,6 @@ export const useContainerCallbacks = ({
     };
 
     switch (action.type) {
-      case 'EUI_RESIZABLE_CONTAINER_INIT': {
-        return {
-          ...state,
-          containerSize: getContainerSize(),
-        };
-      }
       case 'EUI_RESIZABLE_PANEL_REGISTER': {
         const { panel } = action.payload;
         return {
@@ -229,19 +223,19 @@ export const useContainerCallbacks = ({
 
         const prevPanelMin = getPanelMinSize(
           prevPanel.minSize,
-          state.containerSize
+          getContainerSize()
         );
         const nextPanelMin = getPanelMinSize(
           nextPanel.minSize,
-          state.containerSize
+          getContainerSize()
         );
         const prevPanelSize = pxToPercent(
           prevPanel.getSizePx() + delta,
-          state.containerSize
+          getContainerSize()
         );
         const nextPanelSize = pxToPercent(
           nextPanel.getSizePx() - delta,
-          state.containerSize
+          getContainerSize()
         );
 
         if (prevPanelSize >= prevPanelMin && nextPanelSize >= nextPanelMin) {
@@ -271,19 +265,19 @@ export const useContainerCallbacks = ({
 
         const prevPanelMin = getPanelMinSize(
           prevPanel.minSize,
-          state.containerSize
+          getContainerSize()
         );
         const nextPanelMin = getPanelMinSize(
           nextPanel.minSize,
-          state.containerSize
+          getContainerSize()
         );
         const prevPanelSize = pxToPercent(
           prevPanel.getSizePx() - (direction === 'backward' ? 10 : -10),
-          state.containerSize
+          getContainerSize()
         );
         const nextPanelSize = pxToPercent(
           nextPanel.getSizePx() - (direction === 'forward' ? 10 : -10),
-          state.containerSize
+          getContainerSize()
         );
 
         if (prevPanelSize >= prevPanelMin && nextPanelSize >= nextPanelMin) {
@@ -377,7 +371,7 @@ export const useContainerCallbacks = ({
         let newPanelSize = shouldCollapse
           ? pxToPercent(
               !currentPanel.mode ? 0 : 24, // size of the default toggle button
-              state.containerSize
+              getContainerSize()
             )
           : currentPanel.prevSize;
 
@@ -408,7 +402,7 @@ export const useContainerCallbacks = ({
           Object.values(otherPanels).some(
             (panel) =>
               panel.size + delta <
-              getPanelMinSize(panel.minSize, state.containerSize)
+              getPanelMinSize(panel.minSize, getContainerSize())
           )
         ) {
           // A toggling sequence has occurred where a to-be-opened panel is
@@ -524,7 +518,6 @@ export const useContainerCallbacks = ({
           ...initialState,
           panels: state.panels,
           resizers: state.resizers,
-          containerSize: state.containerSize,
         };
       }
       case 'EUI_RESIZABLE_ONCHANGE': {
@@ -547,10 +540,6 @@ export const useContainerCallbacks = ({
   const actions: EuiResizableContainerActions = useMemo(() => {
     return {
       reset: () => dispatch({ type: 'EUI_RESIZABLE_RESET' }),
-      initContainer: () =>
-        dispatch({
-          type: 'EUI_RESIZABLE_CONTAINER_INIT',
-        }),
       registerPanel: (panel: EuiResizablePanelController) =>
         dispatch({
           type: 'EUI_RESIZABLE_PANEL_REGISTER',
diff --git a/src/components/resizable_container/resizable_container.tsx b/src/components/resizable_container/resizable_container.tsx
index 30dfdad3431..5c8bd2c86e4 100644
--- a/src/components/resizable_container/resizable_container.tsx
+++ b/src/components/resizable_container/resizable_container.tsx
@@ -20,7 +20,6 @@
 import React, {
   ReactNode,
   ReactElement,
-  useEffect,
   useRef,
   useCallback,
   CSSProperties,
@@ -32,7 +31,6 @@ import classNames from 'classnames';
 
 import { CommonProps } from '../common';
 import { keys } from '../../services';
-import { useResizeObserver } from '../observer/resize_observer';
 import { EuiResizableContainerContextProvider } from './context';
 import {
   EuiResizableButtonProps,
@@ -118,21 +116,6 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
     onPanelWidthChange,
   });
 
-  const initialize = useCallback(() => {
-    actions.initContainer();
-  }, [actions]);
-
-  const containerSize = useResizeObserver(
-    containerRef.current,
-    isHorizontal ? 'width' : 'height'
-  );
-
-  useEffect(() => {
-    if (containerSize.width > 0 && containerSize.height > 0) {
-      initialize();
-    }
-  }, [initialize, containerSize]);
-
   const onMouseDown = useCallback(
     (event: EuiResizableButtonMouseEvent) => {
       const currentTarget = event.currentTarget;
@@ -275,7 +258,7 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
         onTouchMove={onMouseMove}
         onTouchEnd={onMouseUp}
         {...rest}>
-        {!!reducerState.containerSize && render()}
+        {render()}
       </div>
     </EuiResizableContainerContextProvider>
   );
diff --git a/src/components/resizable_container/types.ts b/src/components/resizable_container/types.ts
index cf064411a26..ca5bfea4b3e 100644
--- a/src/components/resizable_container/types.ts
+++ b/src/components/resizable_container/types.ts
@@ -73,10 +73,6 @@ interface ActionReset {
   type: 'EUI_RESIZABLE_RESET';
 }
 
-interface ActionInit {
-  type: 'EUI_RESIZABLE_CONTAINER_INIT';
-}
-
 export interface ActionDragStart {
   type: 'EUI_RESIZABLE_DRAG_START';
   payload: { prevPanelId: string; nextPanelId: string; position: number };
@@ -153,7 +149,6 @@ interface ActionOnChange {
 
 export type EuiResizableContainerAction =
   | ActionReset
-  | ActionInit
   | ActionRegisterPanel
   | ActionDeregisterPanel
   | ActionRegisterResizer
@@ -169,7 +164,6 @@ export type EuiResizableContainerAction =
 
 export interface EuiResizableContainerActions {
   reset: () => void;
-  initContainer: () => void;
   registerPanel: (panel: EuiResizablePanelController) => void;
   deregisterPanel: (panelId: EuiResizablePanelController['id']) => void;
   registerResizer: (resizer: EuiResizableButtonController) => void;