From d061f9f9e5cb0d055b789ccf4ecbe2a63ca35f24 Mon Sep 17 00:00:00 2001 From: Steve Carlson Date: Fri, 20 May 2016 00:16:49 +0000 Subject: [PATCH 1/5] Adding support for shouldFreeze hook --- package.json | 2 +- src/Sticky.jsx | 14 +++++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 6093c118..6d52caf1 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ ], "dependencies": { "classnames": "^2.0.0", - "is-equal-shallow": "^0.1.0", + "deep-equal": "~1.0.1", "subscribe-ui-event": "^1.0.0" }, "devDependencies": { diff --git a/src/Sticky.jsx b/src/Sticky.jsx index e593974b..3ee06cfd 100644 --- a/src/Sticky.jsx +++ b/src/Sticky.jsx @@ -10,7 +10,7 @@ import React, {Component, PropTypes} from 'react'; import {subscribe} from 'subscribe-ui-event'; import classNames from 'classnames'; -import isEqual from 'is-equal-shallow'; +import isEqual from 'deep-equal'; // constants const STATUS_ORIGINAL = 0; // The default status, locating at the original position. @@ -170,17 +170,23 @@ class Sticky extends Component { } handleResize (e, ae) { + if (this.props.shouldFreeze()) { return; } + winHeight = ae.resize.height; this.updateInitialDimension(); this.update(); } handleScrollStart (e, ae) { + if (this.props.shouldFreeze()) { return; } + scrollTop = ae.scroll.top; this.updateInitialDimension(); } handleScroll (e, ae) { + if (this.props.shouldFreeze()) { return; } + scrollDelta = ae.scroll.delta; scrollTop = ae.scroll.top; this.update(); @@ -337,7 +343,7 @@ class Sticky extends Component { } shouldComponentUpdate (nextProps, nextState) { - return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState); + return !this.props.shouldFreeze() && (!isEqual(this.props, nextProps) || !isEqual(this.state, nextState)); } render () { @@ -369,6 +375,7 @@ class Sticky extends Component { Sticky.displayName = 'Sticky'; Sticky.defaultProps = { + shouldFreeze: function () { return false; }, enabled: true, top: 0, bottomBoundary: 0, @@ -397,7 +404,8 @@ Sticky.propTypes = { ]), enableTransforms: PropTypes.bool, activeClass: PropTypes.string, - onStateChange: PropTypes.func + onStateChange: PropTypes.func, + shouldFreeze: PropTypes.func }; Sticky.STATUS_ORIGINAL = STATUS_ORIGINAL; From d698738c1252d89328e8a236f671ebbe697ca795 Mon Sep 17 00:00:00 2001 From: Steve Carlson Date: Fri, 20 May 2016 19:11:08 +0000 Subject: [PATCH 2/5] Swapping ~ for ^ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6d52caf1..e1569399 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ ], "dependencies": { "classnames": "^2.0.0", - "deep-equal": "~1.0.1", + "deep-equal": "^1.0.1", "subscribe-ui-event": "^1.0.0" }, "devDependencies": { From 8e3f01bb6a5dbe2b6438db7743bc64e5cb4f2276 Mon Sep 17 00:00:00 2001 From: Steve Carlson Date: Fri, 20 May 2016 19:18:24 +0000 Subject: [PATCH 3/5] Adding some docs for shouldFreeze() --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index a0b1f0b2..b245e497 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ var Sticky = require('react-stickynode'); - `enableTransforms {Boolean}` - Enable the use of CSS3 transforms (true by default). - `activeClass {String}` - Class name to be applied to the element when the sticky state is active (`active` by default). - `onStateChange {Function}` - Callback for when the sticky state changes. See below. +- `shouldFreeze {Function}` - Callback to indicate when the sticky plugin should freeze position and ignore scroll/resize events. See below. ### Handling State Change @@ -78,6 +79,10 @@ const handleStateChange = (status) => { ``` +### Freezing + +You can provide a function in the `shouldFreeze` prop which will tell the component to temporarily stop updating during prop and state changes, as well as ignore scroll and resize events. This function should return a boolean indicating whether the component should currently be frozen. + ## Install & Development **Install** From 3932dd273e22f373001655f11b191f895e96e467 Mon Sep 17 00:00:00 2001 From: Steve Carlson Date: Tue, 24 May 2016 05:37:36 +0000 Subject: [PATCH 4/5] Caching 'frozen' state while scrolling --- src/Sticky.jsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/Sticky.jsx b/src/Sticky.jsx index 3ee06cfd..920545c6 100644 --- a/src/Sticky.jsx +++ b/src/Sticky.jsx @@ -54,6 +54,7 @@ class Sticky extends Component { this.delta = 0; this.stickyTop = 0; this.stickyBottom = 0; + this.frozen = false; this.bottomBoundaryTarget; this.topTarget; @@ -170,7 +171,9 @@ class Sticky extends Component { } handleResize (e, ae) { - if (this.props.shouldFreeze()) { return; } + if (this.props.shouldFreeze()) { + return; + } winHeight = ae.resize.height; this.updateInitialDimension(); @@ -178,14 +181,20 @@ class Sticky extends Component { } handleScrollStart (e, ae) { - if (this.props.shouldFreeze()) { return; } + this.frozen = this.props.shouldFreeze(); + + if (this.frozen) { + return; + } scrollTop = ae.scroll.top; this.updateInitialDimension(); } handleScroll (e, ae) { - if (this.props.shouldFreeze()) { return; } + if (this.frozen) { + return; + } scrollDelta = ae.scroll.delta; scrollTop = ae.scroll.top; From 23d53d33e2ebd3b21be546d8fb8e9875e9351f6d Mon Sep 17 00:00:00 2001 From: Steve Carlson Date: Tue, 24 May 2016 21:03:54 +0000 Subject: [PATCH 5/5] Switching back to is-equal-shallow for now --- package.json | 2 +- src/Sticky.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e1569399..6093c118 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ ], "dependencies": { "classnames": "^2.0.0", - "deep-equal": "^1.0.1", + "is-equal-shallow": "^0.1.0", "subscribe-ui-event": "^1.0.0" }, "devDependencies": { diff --git a/src/Sticky.jsx b/src/Sticky.jsx index 920545c6..2ffac7aa 100644 --- a/src/Sticky.jsx +++ b/src/Sticky.jsx @@ -10,7 +10,7 @@ import React, {Component, PropTypes} from 'react'; import {subscribe} from 'subscribe-ui-event'; import classNames from 'classnames'; -import isEqual from 'deep-equal'; +import isEqual from 'is-equal-shallow'; // constants const STATUS_ORIGINAL = 0; // The default status, locating at the original position.