feat(Sticky|Visibility): listen for resize events (#2091)

Semantic-Org · Sep 23, 2017 · ab48884 · ab48884
1 parent 0c66410
commit ab48884
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 3 deletions.
diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js
@@ -200,15 +200,17 @@ 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()
   }
 
   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
@@ -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
@@ -401,6 +401,14 @@ describe('Visibility', () => {
       onUpdate.should.have.been.calledTwice()
     })
 
+    it('fires when window resized', () => {
+      const onUpdate = sandbox.spy()
+      wrapperMount(<Visibility onUpdate={onUpdate} />)
+
+      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
@@ -304,4 +304,22 @@ describe('Sticky', () => {
       onStick.should.have.been.called()
     })
   })
+
+  describe('update', () => {
+    it('is called on scroll', () => {
+      const instance = mount(<Sticky />).instance()
+      const update = sandbox.spy(instance, 'update')
+
+      domEvent.scroll(window)
+      update.should.have.been.calledOnce()
+    })
+
+    it('is called on resize', () => {
+      const instance = mount(<Sticky />).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
@@ -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,
 }