Merge pull request #3180 from wuweiweiwu/issue-1990

Delaying update of height and width in Layout
storybookjs · Mar 11, 2018 · 123a9c0 · 123a9c0
2 parents 7daa522 + 31e2a2b
commit 123a9c0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/lib/ui/package.json b/lib/ui/package.json
@@ -28,6 +28,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
+    "lodash.throttle": "^4.1.1",
     "prop-types": "^15.6.1",
     "qs": "^6.5.1",
     "react-fuzzy": "^0.5.2",

diff --git a/lib/ui/src/modules/ui/components/layout/index.js b/lib/ui/src/modules/ui/components/layout/index.js
@@ -2,6 +2,7 @@ import { localStorage, window } from 'global';
 import PropTypes from 'prop-types';
 import React from 'react';
 import SplitPane from 'react-split-pane';
+import throttle from 'lodash.throttle';
 
 import USplit from './usplit';
 import Dimensions from './dimensions';
@@ -135,17 +136,18 @@ class Layout extends React.Component {
       isDragging: false,
     };
 
-    this.onResize = this.onResize.bind(this);
+    this.throttledUpdatePreviewPanelState = throttle(this.updatePrevewPanelState.bind(this), 200);
+    this.throttledSaveSizes = throttle(this.saveSizes, 25);
     this.onDragStart = this.onDragStart.bind(this);
     this.onDragEnd = this.onDragEnd.bind(this);
   }
 
   componentDidMount() {
-    window.addEventListener('resize', this.onResize);
+    window.addEventListener('resize', this.throttledUpdatePreviewPanelState);
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this.onResize);
+    window.removeEventListener('resize', this.throttledUpdatePreviewPanelState);
   }
 
   onDragStart() {
@@ -156,20 +158,25 @@ class Layout extends React.Component {
     this.setState({ isDragging: false });
   }
 
-  onResize(pane, mode) {
-    return size => {
-      this.layerSizes[pane][mode] = size;
-      saveSizes(this.layerSizes);
+  onResize(pane, mode, size) {
+    this.throttledSaveSizes(pane, mode, size);
+    this.throttledUpdatePreviewPanelState();
+  }
 
-      const { clientWidth, clientHeight } = this.previewPanelRef;
+  saveSizes(pane, mode, size) {
+    this.layerSizes[pane][mode] = size;
+    saveSizes(this.layerSizes);
+  }
 
-      this.setState({
-        previewPanelDimensions: {
-          width: clientWidth,
-          height: clientHeight,
-        },
-      });
-    };
+  updatePrevewPanelState() {
+    const { clientWidth, clientHeight } = this.previewPanelRef;
+
+    this.setState({
+      previewPanelDimensions: {
+        width: clientWidth,
+        height: clientHeight,
+      },
+    });
   }
 
   render() {
@@ -216,7 +223,7 @@ class Layout extends React.Component {
           resizerStyle={storiesResizerStyle(showStoriesPanel, storiesPanelOnTop)}
           onDragStarted={this.onDragStart}
           onDragFinished={this.onDragEnd}
-          onChange={this.onResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left')}
+          onChange={size => this.onResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left', size)}
         >
           <div style={storiesPanelStyle(showStoriesPanel, storiesPanelOnTop)}>
             <div style={{ flexGrow: 1, height: '100%', width: '100%' }}>{storiesPanel()}</div>
@@ -233,7 +240,9 @@ class Layout extends React.Component {
             resizerStyle={addonResizerStyle(showAddonPanel, addonPanelInRight)}
             onDragStarted={this.onDragStart}
             onDragFinished={this.onDragEnd}
-            onChange={this.onResize('addonPanel', addonPanelInRight ? 'right' : 'down')}
+            onChange={size =>
+              this.onResize('addonPanel', addonPanelInRight ? 'right' : 'down', size)
+            }
           >
             <div style={contentPanelStyle(addonPanelInRight, storiesPanelOnTop)}>
               {/*

diff --git a/yarn.lock b/yarn.lock
@@ -9729,6 +9729,10 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+
 lodash.union@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"