From 8b1b02d25a3955b74c8b3bce41d7d945767e2962 Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Sat, 23 Sep 2017 20:05:48 +0300 Subject: [PATCH] feat(Visibility): add `direction` for calculations (#2090) --- README.md | 2 +- .../Settings/VisibilityExampleFireOnMount.js | 5 +++ .../Types/VisibilityExampleVisibility.js | 5 +++ src/behaviors/Visibility/Visibility.d.ts | 1 + src/behaviors/Visibility/Visibility.js | 5 +++ .../behaviors/Visibility/Visibility-test.js | 35 +++++++++++++++++++ 6 files changed, 52 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 0aab8c6c9b..778279d41b 100644 --- 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 index 1193681e9c..6de8036b8f 100644 --- 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 { + + direction + {calculations.direction} + pixelsPassed {calculations.pixelsPassed.toFixed()}px diff --git a/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js b/docs/app/Examples/behaviors/Visibility/Types/VisibilityExampleVisibility.js index 418c85f676..879799652d 100644 --- 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 { + + direction + {calculations.direction} + pixelsPassed {calculations.pixelsPassed.toFixed()}px diff --git a/src/behaviors/Visibility/Visibility.d.ts b/src/behaviors/Visibility/Visibility.d.ts index 9d6b24abf8..b1fba0a916 100644 --- 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 index baf82b2ecd..739c5b7ad0 100644 --- 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 index ab6d70413d..d40777bc36 100644 --- 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() + + 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() + + window.pageYOffset = 50 + domEvent.scroll(window) + onUpdate.should.have.been.calledWithMatch(null, { + calculations: { direction: 'up' }, + }) + }) + }) }) describe('context', () => {