From 4da0849237067c9f710a8cf67c2f1f72a4b8782a Mon Sep 17 00:00:00 2001 From: Mario Lamacchia Date: Thu, 17 Aug 2017 12:16:27 +0200 Subject: [PATCH 1/4] fix(Visibility): add context prop --- src/behaviors/Visibility/Visibility.d.ts | 3 +++ src/behaviors/Visibility/Visibility.js | 10 ++++++++-- .../behaviors/Visibility/Visibility-test.js | 17 +++++++++++++++++ 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/src/behaviors/Visibility/Visibility.d.ts b/src/behaviors/Visibility/Visibility.d.ts index 3e8bbd13a3..dc7ad7fdb8 100644 --- a/src/behaviors/Visibility/Visibility.d.ts +++ b/src/behaviors/Visibility/Visibility.d.ts @@ -9,6 +9,9 @@ export interface VisibilityProps { /** Primary content. */ children?: React.ReactNode; + /** Context which sticky element should stick to. */ + context?: object; + /** * When set to true a callback will occur anytime an element passes a condition not just immediately after the * threshold is met. diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js index 1d8944bc24..f528aaea6a 100644 --- a/src/behaviors/Visibility/Visibility.js +++ b/src/behaviors/Visibility/Visibility.js @@ -20,6 +20,9 @@ export default class Visibility extends Component { /** Primary content. */ children: PropTypes.node, + /** The scroll context visibility should use. */ + context: PropTypes.object, + /** * When set to true a callback will occur anytime an element passes a condition not just immediately after the * threshold is met. @@ -138,6 +141,7 @@ export default class Visibility extends Component { } static defaultProps = { + context: window, continuous: false, once: true, } @@ -166,11 +170,13 @@ export default class Visibility extends Component { } componentDidMount() { - window.addEventListener('scroll', this.handleScroll) + const { context } = this.props + context.addEventListener('scroll', this.handleScroll) } componentWillUnmount() { - window.removeEventListener('scroll', this.handleScroll) + const { context } = this.props + context.removeEventListener('scroll', this.handleScroll) } execute = (callback, name) => { diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js index cd2084af7e..40a768d4a0 100644 --- a/test/specs/behaviors/Visibility/Visibility-test.js +++ b/test/specs/behaviors/Visibility/Visibility-test.js @@ -103,6 +103,23 @@ describe('Visibility', () => { if (wrapper && wrapper.unmount) wrapper.unmount() }) + it('should use window as default scroll context', () => { + const spy = sandbox.spy() + mount() + window.dispatchEvent(new Event('scroll')) + spy.should.have.been.called() + }) + + it('should set a scroll context', () => { + const div = document.createElement('div') + const spy = sandbox.spy() + mount() + window.dispatchEvent(new Event('scroll')) + spy.should.not.have.been.called() + div.dispatchEvent(new Event('scroll')) + spy.should.have.been.called() + }) + describe('calculations', () => { expectations.forEach((expectation) => { it(`calculates ${expectation.name}`, () => { From a875f3f27fbeb3ba89084ba18b017eb4583c5155 Mon Sep 17 00:00:00 2001 From: Mario Lamacchia Date: Thu, 17 Aug 2017 12:41:41 +0200 Subject: [PATCH 2/4] style(Visibility): change spy name --- test/specs/behaviors/Visibility/Visibility-test.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js index 40a768d4a0..703a37a335 100644 --- a/test/specs/behaviors/Visibility/Visibility-test.js +++ b/test/specs/behaviors/Visibility/Visibility-test.js @@ -104,20 +104,20 @@ describe('Visibility', () => { }) it('should use window as default scroll context', () => { - const spy = sandbox.spy() - mount() + const onUpdate = sandbox.spy() + mount() window.dispatchEvent(new Event('scroll')) - spy.should.have.been.called() + onUpdate.should.have.been.called() }) it('should set a scroll context', () => { const div = document.createElement('div') - const spy = sandbox.spy() - mount() + const onUpdate = sandbox.spy() + mount() window.dispatchEvent(new Event('scroll')) - spy.should.not.have.been.called() + onUpdate.should.not.have.been.called() div.dispatchEvent(new Event('scroll')) - spy.should.have.been.called() + onUpdate.should.have.been.called() }) describe('calculations', () => { From 380cbe191bb451d67f25a459cc2d7bf8539c9f0b Mon Sep 17 00:00:00 2001 From: Mario Lamacchia Date: Thu, 17 Aug 2017 14:50:35 +0200 Subject: [PATCH 3/4] feat(Sticky): add scrollContext prop --- src/modules/Sticky/Sticky.d.ts | 3 +++ src/modules/Sticky/Sticky.js | 10 ++++++++-- test/specs/modules/Sticky/Sticky-test.js | 21 +++++++++++++++++++++ 3 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/modules/Sticky/Sticky.d.ts b/src/modules/Sticky/Sticky.d.ts index ecb8a1bb34..6229beb5b9 100644 --- a/src/modules/Sticky/Sticky.d.ts +++ b/src/modules/Sticky/Sticky.d.ts @@ -55,6 +55,9 @@ export interface StickyProps { /** Whether element should be "pushed" by the viewport, attaching to the bottom of the screen when scrolling up. */ pushing?: boolean; + + /** Context which sticky should attach onscroll events. */ + scrollContext?: object; } declare const Sticky: React.ComponentClass; diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js index b0433ff7de..fe39814b0c 100644 --- a/src/modules/Sticky/Sticky.js +++ b/src/modules/Sticky/Sticky.js @@ -66,11 +66,15 @@ export default class Sticky extends Component { /** Whether element should be "pushed" by the viewport, attaching to the bottom of the screen when scrolling up. */ pushing: PropTypes.bool, + + /** Context which sticky should attach `onscroll` events. */ + scrollContext: PropTypes.object, } static defaultProps = { bottomOffset: 0, offset: 0, + scrollContext: window, } static _meta = { @@ -83,12 +87,14 @@ export default class Sticky extends Component { } componentDidMount() { + const { scrollContext } = this.props this.handleUpdate() - window.addEventListener('scroll', this.handleUpdate) + scrollContext.addEventListener('scroll', this.handleUpdate) } componentWillUnmount() { - window.removeEventListener('scroll', this.handleUpdate) + const { scrollContext } = this.props + scrollContext.removeEventListener('scroll', this.handleUpdate) } // ---------------------------------------- diff --git a/test/specs/modules/Sticky/Sticky-test.js b/test/specs/modules/Sticky/Sticky-test.js index 480580f832..ce42e65af4 100644 --- a/test/specs/modules/Sticky/Sticky-test.js +++ b/test/specs/modules/Sticky/Sticky-test.js @@ -57,6 +57,27 @@ describe('Sticky', () => { window.requestAnimationFrame = requestAnimationFrame }) + it('should use window as default scroll context', () => { + const onStick = sandbox.spy() + const wrapper = mount() + const instance = wrapper.instance() + instance.triggerRef = { getBoundingClientRect: () => ({ top: -1 }) } + window.dispatchEvent(new Event('scroll')) + onStick.should.have.been.called() + }) + + it('should set a scroll context', () => { + const div = document.createElement('div') + const onStick = sandbox.spy() + const wrapper = mount() + const instance = wrapper.instance() + instance.triggerRef = { getBoundingClientRect: () => ({ top: -1 }) } + window.dispatchEvent(new Event('scroll')) + onStick.should.not.have.been.called() + div.dispatchEvent(new Event('scroll')) + onStick.should.have.been.called() + }) + it('should create two divs', () => { const children = shallow().children() From 4f1980f7cdf9388b00870862d0fe85da78e2ab14 Mon Sep 17 00:00:00 2001 From: Mario Lamacchia Date: Fri, 18 Aug 2017 17:18:39 +0200 Subject: [PATCH 4/4] docs(Visibility, Sticky): change prop description --- src/behaviors/Visibility/Visibility.js | 2 +- src/modules/Sticky/Sticky.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js index f528aaea6a..4c1126eee1 100644 --- a/src/behaviors/Visibility/Visibility.js +++ b/src/behaviors/Visibility/Visibility.js @@ -20,7 +20,7 @@ export default class Visibility extends Component { /** Primary content. */ children: PropTypes.node, - /** The scroll context visibility should use. */ + /** Context which visibility should attach onscroll events. */ context: PropTypes.object, /** diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js index fe39814b0c..3b7cd0316c 100644 --- a/src/modules/Sticky/Sticky.js +++ b/src/modules/Sticky/Sticky.js @@ -67,7 +67,7 @@ export default class Sticky extends Component { /** Whether element should be "pushed" by the viewport, attaching to the bottom of the screen when scrolling up. */ pushing: PropTypes.bool, - /** Context which sticky should attach `onscroll` events. */ + /** Context which sticky should attach onscroll events. */ scrollContext: PropTypes.object, }