diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js index a9a7b576d2..cf4c3a3d81 100644 --- a/src/behaviors/Visibility/Visibility.js +++ b/src/behaviors/Visibility/Visibility.js @@ -200,7 +200,8 @@ export default class Visibility extends Component { const { context, fireOnMount } = this.props this.pageYOffset = window.pageYOffset - eventStack.sub('scroll', this.handleScroll, { target: context }) + eventStack.sub('resize', this.handleUpdate, { target: context }) + eventStack.sub('scroll', this.handleUpdate, { target: context }) if (fireOnMount) this.update() } @@ -208,7 +209,8 @@ export default class Visibility extends Component { componentWillUnmount() { const { context } = this.props - eventStack.unsub('scroll', this.handleScroll, { target: context }) + eventStack.unsub('resize', this.handleUpdate, { target: context }) + eventStack.unsub('scroll', this.handleUpdate, { target: context }) } // ---------------------------------------- @@ -261,7 +263,7 @@ export default class Visibility extends Component { }) } - handleScroll = () => { + handleUpdate = () => { if (this.ticking) return this.ticking = true diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js index 819b2b2827..d8e80a74ea 100644 --- a/src/modules/Sticky/Sticky.js +++ b/src/modules/Sticky/Sticky.js @@ -129,12 +129,14 @@ export default class Sticky extends Component { addListener = () => { const { scrollContext } = this.props + eventStack.sub('resize', this.handleUpdate, { target: scrollContext }) eventStack.sub('scroll', this.handleUpdate, { target: scrollContext }) } removeListener = () => { const { scrollContext } = this.props + eventStack.unsub('resize', this.handleUpdate, { target: scrollContext }) eventStack.unsub('scroll', this.handleUpdate, { target: scrollContext }) } diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js index d40777bc36..7c0cb97666 100644 --- a/test/specs/behaviors/Visibility/Visibility-test.js +++ b/test/specs/behaviors/Visibility/Visibility-test.js @@ -401,6 +401,14 @@ describe('Visibility', () => { onUpdate.should.have.been.calledTwice() }) + it('fires when window resized', () => { + const onUpdate = sandbox.spy() + wrapperMount() + + domEvent.resize(window) + onUpdate.should.have.been.calledOnce() + }) + it('passes calculations to onUpdate', () => { let calculations const onUpdate = (e, props) => (calculations = props.calculations) diff --git a/test/specs/modules/Sticky/Sticky-test.js b/test/specs/modules/Sticky/Sticky-test.js index 5dfb17772e..92d9dbef4b 100644 --- a/test/specs/modules/Sticky/Sticky-test.js +++ b/test/specs/modules/Sticky/Sticky-test.js @@ -304,4 +304,22 @@ describe('Sticky', () => { onStick.should.have.been.called() }) }) + + describe('update', () => { + it('is called on scroll', () => { + const instance = mount().instance() + const update = sandbox.spy(instance, 'update') + + domEvent.scroll(window) + update.should.have.been.calledOnce() + }) + + it('is called on resize', () => { + const instance = mount().instance() + const update = sandbox.spy(instance, 'update') + + domEvent.resize(window) + update.should.have.been.calledOnce() + }) + }) }) diff --git a/test/utils/domEvent.js b/test/utils/domEvent.js index d12dacff54..cc58cd7814 100644 --- a/test/utils/domEvent.js +++ b/test/utils/domEvent.js @@ -66,6 +66,14 @@ export const mouseOver = (node, data) => fire(node, 'mouseover', data) */ export const mouseUp = (node, data) => fire(node, 'mouseup', data) +/** + * Dispatch a 'resize' event on a DOM node. + * @param {String|Object} node A querySelector string or DOM node. + * @param {Object} [data] Additional event data. + * @returns {Object} The event + */ +export const resize = (node, data) => fire(node, 'resize', data) + /** * Dispatch a 'scroll' event on a DOM node. * @param {String|Object} node A querySelector string or DOM node. @@ -82,5 +90,6 @@ export default { mouseLeave, mouseOver, mouseUp, + resize, scroll, }