diff --git a/src/components/sprite-selector/sprite-list.jsx b/src/components/sprite-selector/sprite-list.jsx index 2c9ad0ccc8ab7b060e828eef550848af16ff0e49..e89898e47ce621fb3c6e7a349c7ac0fc0cdd497b 100644 --- a/src/components/sprite-selector/sprite-list.jsx +++ b/src/components/sprite-selector/sprite-list.jsx @@ -12,7 +12,7 @@ import ThrottledPropertyHOC from '../../lib/throttled-property-hoc.jsx'; import styles from './sprite-selector.css'; -const ThrottledSpriteSelectorItem = ThrottledPropertyHOC('asset', 500, SpriteSelectorItem); +const ThrottledSpriteSelectorItem = ThrottledPropertyHOC('asset', 500)(SpriteSelectorItem); const SpriteList = function (props) { const { diff --git a/src/containers/stage-selector.jsx b/src/containers/stage-selector.jsx index 2da74038859932ba0d8f99aeaf779ebfa800610c..988ebeddc7c5fbf9f4ae97ac5c3cc1b7828751ec 100644 --- a/src/containers/stage-selector.jsx +++ b/src/containers/stage-selector.jsx @@ -29,7 +29,7 @@ const dragTypes = [ ]; const DroppableThrottledStage = DropAreaHOC(dragTypes)( - ThrottledPropertyHOC('url', 500, StageSelectorComponent) + ThrottledPropertyHOC('url', 500)(StageSelectorComponent) ); class StageSelector extends React.Component { diff --git a/src/containers/watermark.jsx b/src/containers/watermark.jsx index d0d60638cfa30fbc286f4a1a750f165d2d5d0fdc..fcb08ead285571471953bbec9b8a2aa24edbc056 100644 --- a/src/containers/watermark.jsx +++ b/src/containers/watermark.jsx @@ -65,7 +65,7 @@ const mapStateToProps = state => { const ConnectedComponent = connect( mapStateToProps )( - ThrottledPropertyHOC('asset', 500, Watermark) + ThrottledPropertyHOC('asset', 500)(Watermark) ); export default ConnectedComponent; diff --git a/src/lib/throttled-property-hoc.jsx b/src/lib/throttled-property-hoc.jsx index cd7cd8ed821857d61f8a1c29275b79233f2ac644..7e508dfbea48be828ddfdde0c38cb4bf17c7542a 100644 --- a/src/lib/throttled-property-hoc.jsx +++ b/src/lib/throttled-property-hoc.jsx @@ -6,38 +6,44 @@ import React from 'react'; * rendered value of a prop for comparison. * @param {string} propName the name of the prop to throttle updates from. * @param {string} throttleTime the minimum time between updates to that specific property. - * @param {React.Component} WrappedComponent component who will not update for certain props. - * @returns {React.Component} component with throttling behavior + * @returns {function} a function that accepts a component to wrap. */ -const ThrottledPropertyHOC = function (propName, throttleTime, WrappedComponent) { - class ThrottledPropertyWrapper extends React.Component { - shouldComponentUpdate (nextProps) { - for (const property in nextProps) { - if (property !== propName && this.props[property] !== nextProps[property]) { - return true; // Always update if another property has changed +const ThrottledPropertyHOC = function (propName, throttleTime) { + /** + * The function to be called with a React component to wrap it. + * @param {React.Component} WrappedComponent - Component to wrap with throttler. + * @returns {React.Component} the component wrapped with the throttler. + */ + return function (WrappedComponent) { + class ThrottledPropertyWrapper extends React.Component { + shouldComponentUpdate (nextProps) { + for (const property in nextProps) { + if (property !== propName && this.props[property] !== nextProps[property]) { + return true; // Always update if another property has changed + } } - } - // If only that prop has changed, allow update to go to render based - // on _lastRenderedTime and _lastRenderTime are updated in render - if (nextProps[propName] !== this._lastRenderedValue && - Date.now() - this._lastRenderTime > throttleTime - ) { - return true; // Allow this update to go to render - } + // If only that prop has changed, allow update to go to render based + // on _lastRenderedTime and _lastRenderTime are updated in render + if (nextProps[propName] !== this._lastRenderedValue && + Date.now() - this._lastRenderTime > throttleTime + ) { + return true; // Allow this update to go to render + } - return false; - } - render () { - this._lastRenderTime = Date.now(); - this._lastRenderedValue = this.props[propName]; - return ( - <WrappedComponent {...this.props} /> - ); + return false; + } + render () { + this._lastRenderTime = Date.now(); + this._lastRenderedValue = this.props[propName]; + return ( + <WrappedComponent {...this.props} /> + ); + } } - } - return ThrottledPropertyWrapper; + return ThrottledPropertyWrapper; + }; }; export default ThrottledPropertyHOC; diff --git a/test/unit/util/throttled-property-hoc.test.jsx b/test/unit/util/throttled-property-hoc.test.jsx index 37fca7022d77dfce6c68a2113eec928fbc8b5ecf..c24f937a357f9195d593aa31820452ca608f08bb 100644 --- a/test/unit/util/throttled-property-hoc.test.jsx +++ b/test/unit/util/throttled-property-hoc.test.jsx @@ -13,7 +13,7 @@ describe('VMListenerHOC', () => { value={propToThrottle} /> ); - const WrappedComponent = ThrottledPropertyHOC('propToThrottle', throttleTime, Component); + const WrappedComponent = ThrottledPropertyHOC('propToThrottle', throttleTime)(Component); global.Date.now = () => 0;