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

throttling saveSize and updateState. Separating logic

Browse Source
This commit is contained in:
Wei-Wei Wu 2018-03-11 14:46:32 -07:00
parent ab70d3ccac
commit 31e2a2b4d3
3 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/ui/package.json
View File

@ -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",

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

@ -2,7 +2,7 @@ import { localStorage, window } 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 throttle from 'lodash.throttle';
import USplit from './usplit';
import Dimensions from './dimensions';
@ -136,17 +136,18 @@ class Layout extends React.Component {
isDragging: false,
};
this.onThrottledResize = _.throttle(this.onResize.bind(this), 200);
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.onThrottledResize);
window.addEventListener('resize', this.throttledUpdatePreviewPanelState);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onThrottledResize);
window.removeEventListener('resize', this.throttledUpdatePreviewPanelState);
}
onDragStart() {
@ -158,12 +159,18 @@ class Layout extends React.Component {
}
onResize(pane, mode, size) {
if (pane && mode && size) {
this.layerSizes[pane][mode] = size;
saveSizes(this.layerSizes);
}
this.throttledSaveSizes(pane, mode, size);
this.throttledUpdatePreviewPanelState();
}
saveSizes(pane, mode, size) {
this.layerSizes[pane][mode] = size;
saveSizes(this.layerSizes);
}
updatePrevewPanelState() {
const { clientWidth, clientHeight } = this.previewPanelRef;
this.setState({
previewPanelDimensions: {
width: clientWidth,
@ -216,9 +223,7 @@ class Layout extends React.Component {
resizerStyle={storiesResizerStyle(showStoriesPanel, storiesPanelOnTop)}
onDragStarted={this.onDragStart}
onDragFinished={this.onDragEnd}
onChange={size =>
this.onThrottledResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left', size)
}
onChange={size => this.onResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left', size)}
>
<div style={storiesPanelStyle(showStoriesPanel, storiesPanelOnTop)}>
<div style={{ flexGrow: 1, height: '100%', width: '100%' }}>{storiesPanel()}</div>
@ -236,7 +241,7 @@ class Layout extends React.Component {
onDragStarted={this.onDragStart}
onDragFinished={this.onDragEnd}
onChange={size =>
this.onThrottledResize('addonPanel', addonPanelInRight ? 'right' : 'down', size)
this.onResize('addonPanel', addonPanelInRight ? 'right' : 'down', size)
}
>
<div style={contentPanelStyle(addonPanelInRight, storiesPanelOnTop)}>

4
yarn.lock
View File

@ -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"