diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js new file mode 100644 index 0000000000..1193681e9c --- /dev/null +++ b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js @@ -0,0 +1,112 @@ +import React, { Component } from 'react' +import { Divider, Grid, Image, Table, Segment, Visibility } from 'semantic-ui-react' + +export default class VisibilityExampleFireOnMount extends Component { + state = { + calculations: { + height: 0, + width: 0, + topPassed: false, + bottomPassed: false, + pixelsPassed: 0, + percentagePassed: 0, + topVisible: false, + bottomVisible: false, + fits: false, + passing: false, + onScreen: false, + offScreen: false, + }, + } + + handleOnScreen = (e, { calculations }) => this.setState({ calculations }) + + handleOffScreen = (e, { calculations }) => this.setState({ calculations }) + + render() { + const { calculations } = this.state + + return ( + + + + + + + + + + + + + + + + + + + + Calculation + Value + + + + + pixelsPassed + {calculations.pixelsPassed.toFixed()}px + + + percentagePassed + {(calculations.percentagePassed * 100).toFixed()}% + + + fits + {calculations.fits.toString()} + + + width + {calculations.width.toFixed()}px + + + height + {calculations.height.toFixed()}px + + + onScreen + {calculations.onScreen.toString()} + + + offScreen + {calculations.offScreen.toString()} + + + passing + {calculations.passing.toString()} + + + topVisible + {calculations.topVisible.toString()} + + + bottomVisible + {calculations.bottomVisible.toString()} + + + topPassed + {calculations.topPassed.toString()} + + + bottomPassed + {calculations.bottomPassed.toString()} + + +
+
+
+ ) + } +} diff --git a/docs/app/Examples/behaviors/Visibility/Settings/index.js b/docs/app/Examples/behaviors/Visibility/Settings/index.js index e2f372d761..c68dbd1dfc 100644 --- a/docs/app/Examples/behaviors/Visibility/Settings/index.js +++ b/docs/app/Examples/behaviors/Visibility/Settings/index.js @@ -5,14 +5,19 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' const VisibilityExample = () => ( + diff --git a/docs/app/Examples/behaviors/Visibility/Types/index.js b/docs/app/Examples/behaviors/Visibility/Types/index.js index 08f39c1ec4..ceed463a2b 100644 --- a/docs/app/Examples/behaviors/Visibility/Types/index.js +++ b/docs/app/Examples/behaviors/Visibility/Types/index.js @@ -7,7 +7,7 @@ const VisibilityExample = () => ( diff --git a/src/behaviors/Visibility/Visibility.d.ts b/src/behaviors/Visibility/Visibility.d.ts index dc7ad7fdb8..1ce1d60b90 100644 --- a/src/behaviors/Visibility/Visibility.d.ts +++ b/src/behaviors/Visibility/Visibility.d.ts @@ -18,6 +18,9 @@ export interface VisibilityProps { */ continuous?: boolean; + /** Fires callbacks immediately after mount. */ + fireOnMount?: boolean; + /** * Element's bottom edge has passed top of screen. * diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js index 547cda644b..ef41889e02 100644 --- a/src/behaviors/Visibility/Visibility.js +++ b/src/behaviors/Visibility/Visibility.js @@ -30,6 +30,9 @@ export default class Visibility extends Component { */ continuous: PropTypes.bool, + /** Fires callbacks immediately after mount. */ + fireOnMount: PropTypes.bool, + /** * Element's bottom edge has passed top of screen. * @@ -173,15 +176,17 @@ export default class Visibility extends Component { componentDidMount() { if (!isBrowser) return - const { context } = this.props - context.addEventListener('scroll', this.handleScroll) + const { context, fireOnMount } = this.props + + context.addEventListener('scroll', this.handleUpdate) + if (fireOnMount) this.handleUpdate() } componentWillUnmount() { if (!isBrowser) return const { context } = this.props - context.removeEventListener('scroll', this.handleScroll) + context.removeEventListener('scroll', this.handleUpdate) } execute = (callback, name) => { @@ -274,7 +279,7 @@ export default class Visibility extends Component { handleRef = c => (this.ref = c) - handleScroll = () => { + handleUpdate = () => { const { bottom, height, top, width } = this.ref.getBoundingClientRect() const topPassed = top < 0 diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js index 703a37a335..a9da20a139 100644 --- a/test/specs/behaviors/Visibility/Visibility-test.js +++ b/test/specs/behaviors/Visibility/Visibility-test.js @@ -185,6 +185,21 @@ describe('Visibility', () => { }) }) + describe('fireOnMount', () => { + it('fires callbacks after mount', () => { + const onUpdate = sandbox.spy() + + mockScroll(0, 0) + wrapperMount() + + onUpdate.should.have.been.calledOnce() + onUpdate.should.have.been.calledWithMatch(null, { + calculations: { height: 0, width: 0 }, + fireOnMount: true, + }) + }) + }) + describe('onPassed', () => { it('fires callback when pixels passed', () => { const onPassed = {