Add viewport calculation use cases

Author: aitherios

src/__tests__/within-viewport-test.js

@@ -25,8 +25,109 @@ describe('WithinViewport()(Component)', () => {
   })
 
   describe('when composing with a custom transform function', () => {
+    const Decorated = WithinViewport({ transform: (v) => ({ insideViewport: v }) })(Header)
+
+    beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
+
+    it('injects property insideViewport', () => {
+      expect(subject.find(Header).prop('insideViewport')).not.toBeUndefined()
+    })
   })
 
-  describe('when composing with a different default value', () => {
+  describe('when composing with a diferent default value', () => {
+    const Decorated = WithinViewport({ defaultAnswer: false })(Header)
+
+    beforeEach(() => {
+      subject = mount(<Decorated title={'My title'} />)
+      subject.setState({ updated: false })
+    })
+
+    it('changes the default answer', () => {
+      expect(subject.find(Header).prop('inViewport')).toBe(false)
+    })
+  })
+
+  describe('when composed is smaller than viewport', () => {
+    describe('and inside viewport', () => {
+      const Decorated = WithinViewport({
+        getHeight: () => 20,
+        getWidth: () => 20,
+        getTop: () => 0,
+        getLeft: () => 0,
+        getViewportHeight: () => 200,
+        getViewportWidth: () => 200,
+      })(Header)
+      beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
+
+      it('flags inViewport true', () => {
+        expect(subject.find(Header).prop('inViewport')).toBe(true)
+      })
+    })
+
+    describe('and outside (top left) of viewport', () => {
+      const Decorated = WithinViewport({
+        getHeight: () => 20,
+        getWidth: () => 20,
+        getTop: () => -30,
+        getLeft: () => -30,
+        getViewportHeight: () => 200,
+        getViewportWidth: () => 200,
+      })(Header)
+      beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
+
+      it('flags inViewport false', () => {
+        expect(subject.find(Header).prop('inViewport')).toBe(false)
+      })
+    })
+
+    describe('and outside (far right) of viewport', () => {
+      const Decorated = WithinViewport({
+        getHeight: () => 20,
+        getWidth: () => 20,
+        getTop: () => 0,
+        getLeft: () => 300,
+        getViewportHeight: () => 200,
+        getViewportWidth: () => 200,
+      })(Header)
+      beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
+
+      it('flags inViewport false', () => {
+        expect(subject.find(Header).prop('inViewport')).toBe(false)
+      })
+    })
+
+    describe('and outside (far bottom) of viewport', () => {
+      const Decorated = WithinViewport({
+        getHeight: () => 20,
+        getWidth: () => 20,
+        getTop: () => 300,
+        getLeft: () => 0,
+        getViewportHeight: () => 200,
+        getViewportWidth: () => 200,
+      })(Header)
+      beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
+
+      it('flags inViewport false', () => {
+        expect(subject.find(Header).prop('inViewport')).toBe(false)
+      })
+    })
+  })
+
+  describe('when composed is bigger than viewport', () => {
+    describe('and inside viewport', () => {
+      const Decorated = WithinViewport({
+        getHeight: () => 300,
+        getWidth: () => 300,
+        getTop: () => -50,
+        getLeft: () => -50,
+        getViewportHeight: () => 200,
+        getViewportWidth: () => 200,
+      })(Header)
+      beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
+
+      it('flags inViewport true', () => {
+        expect(subject.find(Header).prop('inViewport')).toBe(true)
+      })
+    })
   })
 })

src/within-viewport.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import wrapDisplayName from 'recompose/wrapDisplayName'
+import debounce from 'lodash.debounce'
 
 const withinViewport = ({
   transform = ((inViewport) => ({ inViewport })),
@@ -9,17 +10,99 @@ const withinViewport = ({
     padding: 0,
     border: 0,
   }),
+  getHeight = ((elem) => elem.getBoundingClientRect().height),
+  getWidth = ((elem) => elem.getBoundingClientRect().width),
+  getTop = ((elem) => elem.getBoundingClientRect().top),
+  getLeft = ((elem) => elem.getBoundingClientRect().left),
+  getViewportHeight = ((_window, _document) => _window.innerHeight || _document.clientHeight),
+  getViewportWidth = ((_window, _document) => _window.innerWidth || _document.clientWidth),
+  defaultAnswer = true,
+  wait = 200,
 } = {}) => (BaseComponent) => class extends Component {
   static displayName = wrapDisplayName(BaseComponent, 'withinViewport')
 
+  state = {
+    containerWidth: null,
+    containerHeight: null,
+    containerTopOffset: null,
+    containerLeftOffset: null,
+    windowWidth: null,
+    windowHeight: null,
+    updated: false,
+  }
+
+  componentDidMount() {
+    if (window && window.addEventListener) {
+      this.debouncedUpdate = debounce(this.updateState, wait)
+      window.addEventListener('resize', this.debouncedUpdate)
+      window.addEventListener('scroll', this.debouncedUpdate)
+      this.updateState()
+    }
+  }
+
+  componentWillUnmount() {
+    if (window && window.removeEventListener) {
+      window.removeEventListener('resize', this.debouncedUpdate)
+      window.removeEventListener('scroll', this.debouncedUpdate)
+    }
+  }
+
+  updateState = () => {
+    const update = () => {
+      const elem = this.refs.withinViewportContainer
+
+      this.setState({
+        containerWidth: getWidth(elem),
+        containerHeight: getHeight(elem),
+        containerTopOffset: getTop(elem),
+        containerLeftOffset: getLeft(elem),
+        windowWidth: getViewportWidth(window, document),
+        windowHeight: getViewportHeight(window, document),
+        updated: true,
+      })
+    }
+
+    if (window.requestAnimationFrame) {
+      window.requestAnimationFrame(() => update())
+    } else {
+      update()
+    }
+  }
+
+  inViewport = () => {
+    if (this.state.updated) {
+      return (
+        (
+          this.state.containerTopOffset < 0 &&
+          (this.state.containerHeight + this.state.containerTopOffset) > 0
+        ) ||
+        (
+          this.state.containerTopOffset >= 0 &&
+          this.state.containerTopOffset < this.state.windowHeight
+        )
+      ) &&
+      (
+        (
+          this.state.containerLeftOffset < 0 &&
+          (this.state.containerWidth + this.state.containerLeftOffset) > 0
+        ) ||
+        (
+          this.state.containerLeftOffset >= 0 &&
+          this.state.containerLeftOffset < this.state.windowWidth
+        )
+      )
+    }
+    return defaultAnswer
+  }
+
   render() {
     return (
       <div
         ref={'withinViewportContainer'}
         style={containerStyle}
       >
         <BaseComponent
-          {...transform(true)}
+          {...transform(this.inViewport())}
           {...this.props}
         />
       </div>