GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 07:21:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Wei-Wei Wu 2018-03-10 13:25:04 -08:00
parent b0c7462524
commit aaed49216c
1 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
lib/ui/src/modules/ui/components/layout/index.js
View File

@ -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;
onResize(pane, mode, size) {
this.layerSizes[pane][mode] = size;
saveSizes(this.layerSizes);
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);
};
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)}>
{/*