diff --git a/lib/ui/package.json b/lib/ui/package.json index d27cc5ddc0ec..1644db0cb442 100644 --- 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 index fb69ee9b6db5..016670037f4e 100755 --- a/lib/ui/src/modules/ui/components/layout/index.js +++ b/lib/ui/src/modules/ui/components/layout/index.js @@ -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)} >
{storiesPanel()}
@@ -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) } >
diff --git a/yarn.lock b/yarn.lock index 662fde38038f..6c3fa75a018e 100644 --- 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"