feat(Visibility): add direction for calculations (#2090)

Semantic-Org · Sep 23, 2017 · 8b1b02d · 8b1b02d
1 parent 5fbba00
commit 8b1b02d
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 1 deletion.
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.d.ts b/src/behaviors/Visibility/Visibility.d.ts
@@ -141,6 +141,7 @@ export interface VisibilityProps {
 export interface VisibilityCalculations {
   bottomPassed: boolean;
   bottomVisible: boolean;
+  direction: 'down' | 'up';
   fits: boolean;
   height: number;
   passing: boolean;

diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js
@@ -199,7 +199,9 @@ export default class Visibility extends Component {
 
     const { context, fireOnMount } = this.props
 
+    this.pageYOffset = window.pageYOffset
     context.addEventListener('scroll', this.handleScroll)
+
     if (fireOnMount) this.update()
   }
 
@@ -272,6 +274,7 @@ export default class Visibility extends Component {
 
     this.oldCalculations = this.calculations
     this.calculations = this.computeCalculations()
+    this.pageYOffset = window.pageYOffset
 
     const {
       onBottomPassed,
@@ -322,6 +325,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
 
@@ -340,6 +344,7 @@ export default class Visibility extends Component {
     return {
       bottomPassed,
       bottomVisible,
+      direction,
       fits,
       height,
       passing,

diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js
@@ -243,6 +243,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', () => {