Skip to content

Commit

Permalink
rewriting onResize so it doens't return a function. Throttled to 200ms.
Browse files Browse the repository at this point in the history
  • Loading branch information
wuweiweiwu committed Mar 11, 2018
1 parent 93c8e30 commit 65329d3
Showing 1 changed file with 19 additions and 21 deletions.
40 changes: 19 additions & 21 deletions lib/ui/src/modules/ui/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
}
Expand All @@ -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() {
Expand Down Expand Up @@ -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>
Expand All @@ -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)}>
{/*
Expand Down

0 comments on commit 65329d3

Please sign in to comment.