feat: DevTools - Fixed orientation change issue.

facebook · Feb 25, 2020 · 554f7e8 · 554f7e8
1 parent 3ba1909
commit 554f7e8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 18 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.css b/packages/react-devtools-shared/src/devtools/views/Components/Components.css
@@ -1,5 +1,5 @@
 .TreeWrapper {
-  flex: 0 0 65%;
+  flex: 0 0 var(--horizontal-resize-percentage);
   overflow: auto;
 }
 
@@ -24,7 +24,7 @@
 
 @media screen and (max-width: 600px) {
   .TreeWrapper {
-    flex: 0 0 50%;
+    flex: 0 0 var(--vertical-resize-percentage);
   }
 
   .SelectedElementWrapper {

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {Suspense, Fragment } from 'react';
+import {Suspense, Fragment} from 'react';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
 import {InspectedElementContextController} from './InspectedElementContext';
@@ -30,10 +30,7 @@ function Components(_: {||}) {
           <ComponentsResizer>
             {({resizeElementRef, onResizeStart}) => (
               <Fragment>
-                <div
-                  ref={resizeElementRef}
-                  className={styles.TreeWrapper}
-                >
+                <div ref={resizeElementRef} className={styles.TreeWrapper}>
                   <Tree />
                 </div>
                 <div className={styles.ResizeBarWrapper}>

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ComponentsResizer.js b/packages/react-devtools-shared/src/devtools/views/Components/ComponentsResizer.js
@@ -20,8 +20,8 @@ type Props = {|
 |};
 
 export default function ComponentsResizer({children}: Props) {
-  const wrapperElementRef = useRef<HTMLDivElement>(null);
-  const resizeElementRef = useRef<HTMLElement>(null);
+  const wrapperElementRef = useRef(null);
+  const resizeElementRef = useRef(null);
   const [state, dispatch] = createResizeReducer(
     wrapperElementRef,
     resizeElementRef,
@@ -67,10 +67,12 @@ export default function ComponentsResizer({children}: Props) {
         orientation === 'horizontal'
           ? 'ACTION_SET_HORIZONTAL_PERCENTAGE'
           : 'ACTION_SET_VERTICAL_PERCENTAGE';
+      const percentage = (currentMousePosition / resizedElementDimension) * 100;
 
-      resizeElement.style.flexBasis = `${(currentMousePosition /
-        resizedElementDimension) *
-      100}%`;
+      resizeElement.style.setProperty(
+        `--${orientation}-resize-percentage`,
+        `${percentage}%`,
+      );
 
       dispatch({
         type: actionType,
@@ -166,11 +168,7 @@ function getOrientation(
 }
 
 function createResizeReducer(wrapperElementRef, resizeElementRef) {
-  const [state, dispatch] = useReducer<ResizeState, ResizeAction>(
-    resizeReducer,
-    null,
-    initResizeState,
-  );
+  const [state, dispatch] = useReducer(resizeReducer, null, initResizeState);
   const {horizontalPercentage, verticalPercentage} = state;
   const orientationRef = useRef(null);
 
@@ -185,7 +183,11 @@ function createResizeReducer(wrapperElementRef, resizeElementRef) {
           ? horizontalPercentage
           : verticalPercentage;
       const resizeElement = resizeElementRef.current;
-      resizeElement.style.flexBasis = `${percentage * 100}%`;
+
+      resizeElement.style.setProperty(
+        `--${orientation}-resize-percentage`,
+        `${percentage * 100}%`,
+      );
     }
   });