feat(Visibility): add direction for calculations

Semantic-Org · Sep 20, 2017 · 10f0f0e · 10f0f0e
1 parent 65ce852
commit 10f0f0e
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -111,7 +111,7 @@ Any other issue labeled [`help wanted`][4] is ready for a PR.
 |-----------------|-----------------|-----------------|-----------------|--------------------|
 | ✓ Button        | ✓ Breadcrumb    | ✓ Advertisement | ✓ Accordion     |   Form Validation  |
 | ✓ Container     | ✓ Form          | ✓ Card          | ✓ Checkbox      | *API (NA)*         |
-| ✓ Divider       | ✓ Grid          | ✓ Comment       | ✓ Dimmer        | ✓ Visibility (NA)  |
+| ✓ Divider       | ✓ Grid          | ✓ Comment       | ✓ Dimmer        | ✓ Visibility       |
 | ✓ Flag          | ✓ Menu          | ✓ Feed          | ✓ Dropdown      |                    |
 | ✓ Header        | ✓ Message       | ✓ Item          | ✓ Embed         |                    |
 | ✓ Icon          | ✓ Table         | ✓ Statistic     | ✓ Modal         |                    |

diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js
@@ -4,6 +4,7 @@ import { Divider, Grid, Image, Table, Segment, Visibility } from 'semantic-ui-re
 export default class VisibilityExampleFireOnMount extends Component {
   state = {
     calculations: {
+      direction: 'none',
       height: 0,
       width: 0,
       topPassed: false,
@@ -55,6 +56,10 @@ export default class VisibilityExampleFireOnMount extends Component {
               </Table.Row>
             </Table.Header>
             <Table.Body>
+              <Table.Row>
+                <Table.Cell>direction</Table.Cell>
+                <Table.Cell>{calculations.direction}</Table.Cell>
+              </Table.Row>
               <Table.Row>
                 <Table.Cell>pixelsPassed</Table.Cell>
                 <Table.Cell>{calculations.pixelsPassed.toFixed()}px</Table.Cell>

diff --git a/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js b/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js
@@ -6,6 +6,7 @@ import Wireframe from '../Wireframe'
 export default class VisibilityExampleVisibility extends Component {
   state = {
     calculations: {
+      direction: 'none',
       height: 0,
       width: 0,
       topPassed: false,
@@ -47,6 +48,10 @@ export default class VisibilityExampleVisibility extends Component {
                   </Table.Row>
                 </Table.Header>
                 <Table.Body>
+                  <Table.Row>
+                    <Table.Cell>direction</Table.Cell>
+                    <Table.Cell>{calculations.direction}</Table.Cell>
+                  </Table.Row>
                   <Table.Row>
                     <Table.Cell>pixelsPassed</Table.Cell>
                     <Table.Cell>{calculations.pixelsPassed.toFixed()}px</Table.Cell>

diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js
@@ -193,6 +193,7 @@ export default class Visibility extends Component {
 
     const { context, fireOnMount } = this.props
 
+    this.pageYOffset = window.pageYOffset
     context.addEventListener('scroll', this.handleScroll)
     if (fireOnMount) this.handleUpdate()
   }
@@ -308,6 +309,7 @@ export default class Visibility extends Component {
     const { bottom, height, top, width } = this.ref.getBoundingClientRect()
     const [topOffset, bottomOffset] = normalizeOffset(offset)
 
+    const direction = window.pageYOffset > this.pageYOffset ? 'down' : 'up'
     const topPassed = top < topOffset
     const bottomPassed = bottom < bottomOffset
 
@@ -327,6 +329,7 @@ export default class Visibility extends Component {
     this.calculations = {
       bottomPassed,
       bottomVisible,
+      direction,
       fits,
       height,
       passing,
@@ -338,6 +341,7 @@ export default class Visibility extends Component {
       topVisible,
       width,
     }
+    this.pageYOffset = window.pageYOffset
 
     this.fireCallbacks()
   }

diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js
@@ -3,7 +3,7 @@ import React from 'react'
 
 import Visibility from 'src/behaviors/Visibility'
 import * as common from 'test/specs/commonTests'
-import { sandbox } from 'test/utils'
+import { domEvent, sandbox } from 'test/utils'
 
 let wrapper
 
@@ -178,6 +178,41 @@ describe('Visibility', () => {
         })
       }
     })
+
+    describe('direction', () => {
+      let pageYOffset
+
+      beforeEach(() => {
+        pageYOffset = window.pageYOffset
+      })
+
+      afterEach(() => {
+        window.pageYOffset = pageYOffset
+      })
+
+      it('returns up when scrolling down', () => {
+        const onUpdate = sandbox.spy()
+        mount(<Visibility onUpdate={onUpdate} />)
+
+        window.pageYOffset = 5
+        domEvent.scroll(window)
+        onUpdate.should.have.been.calledWithMatch(null, {
+          calculations: { direction: 'down' },
+        })
+      })
+
+      it('returns up when scrolling up', () => {
+        window.pageYOffset = 100
+        const onUpdate = sandbox.spy()
+        mount(<Visibility onUpdate={onUpdate} />)
+
+        window.pageYOffset = 50
+        domEvent.scroll(window)
+        onUpdate.should.have.been.calledWithMatch(null, {
+          calculations: { direction: 'up' },
+        })
+      })
+    })
   })
 
   describe('context', () => {