rewriting onResize so it doens't return a function. Throttled to 200ms.

storybookjs · Mar 10, 2018 · 8c3514e · 8c3514e
1 parent 2038bfe
commit 8c3514e
Showing 1 changed file with 19 additions and 21 deletions.
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 } from 'global';
 import PropTypes from 'prop-types';
 import React from 'react';
 import SplitPane from 'react-split-pane';
+import _ from 'lodash'; /* eslint-disable-line import/no-extraneous-dependencies */
 
 import USplit from './usplit';
 import Dimensions from './dimensions';
@@ -135,7 +136,7 @@ class Layout extends React.Component {
       isDragging: false,
     };
 
-    this.onResize = this.onResize.bind(this);
+    this.onThrottledResize = _.throttle(this.onResize.bind(this), 200);
     this.onDragStart = this.onDragStart.bind(this);
     this.onDragEnd = this.onDragEnd.bind(this);
   }
@@ -148,24 +149,17 @@ class Layout extends React.Component {
     this.setState({ isDragging: false });
   }
 
-  onResize(pane, mode) {
-    let resizeTimeout;
-
-    return size => {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
-        this.layerSizes[pane][mode] = size;
-        saveSizes(this.layerSizes);
-
-        const { clientWidth, clientHeight } = this.previewPanelRef;
-        this.setState({
-          previewPanelDimensions: {
-            width: clientWidth,
-            height: clientHeight,
-          },
-        });
-      }, 50);
-    };
+  onResize(pane, mode, size) {
+    this.layerSizes[pane][mode] = size;
+    saveSizes(this.layerSizes);
+
+    const { clientWidth, clientHeight } = this.previewPanelRef;
+    this.setState({
+      previewPanelDimensions: {
+        width: clientWidth,
+        height: clientHeight,
+      },
+    });
   }
 
   render() {
@@ -212,7 +206,9 @@ 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.onThrottledResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left', size)
+          }
         >
           <div style={storiesPanelStyle(showStoriesPanel, storiesPanelOnTop)}>
             <div style={{ flexGrow: 1, height: '100%', width: '100%' }}>{storiesPanel()}</div>
@@ -229,7 +225,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.onThrottledResize('addonPanel', addonPanelInRight ? 'right' : 'down', size)
+            }
           >
             <div style={contentPanelStyle(addonPanelInRight, storiesPanelOnTop)}>
               {/*