feat(Visibility): add fireOnMount (#2018)

* feat(Visibility): add fireOnMount * docs(Visibility): remove "once" from fireOnMount
Semantic-Org · Sep 1, 2017 · 578b957 · 578b957
1 parent ef9faee
commit 578b957
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 7 deletions.
diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js 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 (
+      <Grid columns={2}>
+        <Grid.Column>
+          <Visibility
+            fireOnMount
+            onOnScreen={this.handleOnScreen}
+            onOffScreen={this.handleOffScreen}
+          >
+            <Segment>
+              <Image src='/assets/images/wireframe/centered-paragraph.png' />
+              <Divider />
+              <Image src='/assets/images/wireframe/short-paragraph.png' />
+              <Divider />
+              <Image src='/assets/images/wireframe/media-paragraph.png' />
+              <Divider />
+              <Image src='/assets/images/wireframe/paragraph.png' />
+            </Segment>
+          </Visibility>
+        </Grid.Column>
+
+        <Grid.Column>
+          <Table celled>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell>Calculation</Table.HeaderCell>
+                <Table.HeaderCell>Value</Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              <Table.Row>
+                <Table.Cell>pixelsPassed</Table.Cell>
+                <Table.Cell>{calculations.pixelsPassed.toFixed()}px</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>percentagePassed</Table.Cell>
+                <Table.Cell>{(calculations.percentagePassed * 100).toFixed()}%</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>fits</Table.Cell>
+                <Table.Cell>{calculations.fits.toString()}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>width</Table.Cell>
+                <Table.Cell>{calculations.width.toFixed()}px</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>height</Table.Cell>
+                <Table.Cell>{calculations.height.toFixed()}px</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>onScreen</Table.Cell>
+                <Table.Cell>{calculations.onScreen.toString()}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>offScreen</Table.Cell>
+                <Table.Cell>{calculations.offScreen.toString()}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>passing</Table.Cell>
+                <Table.Cell>{calculations.passing.toString()}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>topVisible</Table.Cell>
+                <Table.Cell>{calculations.topVisible.toString()}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>bottomVisible</Table.Cell>
+                <Table.Cell>{calculations.bottomVisible.toString()}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>topPassed</Table.Cell>
+                <Table.Cell>{calculations.topPassed.toString()}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>bottomPassed</Table.Cell>
+                <Table.Cell>{calculations.bottomPassed.toString()}</Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}
diff --git 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 = () => (
   <ExampleSection title='Settings'>
+    <ComponentExample
+      title='Fire on mount'
+      description='Fires callbacks immediately after mount.'
+      examplePath='behaviors/Visibility/Settings/VisibilityExampleFireOnMount'
+    />
     <ComponentExample
       title='Callback frequency'
-      description='You can change the callback frequency with `once` and `continuous` settings'
+      description='You can change the callback frequency with `once` and `continuous` settings.'
       examplePath='behaviors/Visibility/Settings/CallbackFrequencyExample'
     />
     <ComponentExample
       title='Grouped callbacks'
-      description='You can specify callbacks that occur after different percentages or pixels of an element are passed'
+      description='You can specify callbacks that occur after different percentages or pixels of an element are passed.'
       examplePath='behaviors/Visibility/Settings/GroupedCallbacksExample'
     />
   </ExampleSection>

diff --git a/docs/app/Examples/behaviors/Visibility/Types/index.js b/docs/app/Examples/behaviors/Visibility/Types/index.js
@@ -7,7 +7,7 @@ const VisibilityExample = () => (
   <ExampleSection title='Types'>
     <ComponentExample
       title='Default'
-      description='An example of Visibility'
+      description='An example of Visibility.'
       examplePath='behaviors/Visibility/Types/VisibilityExample'
     />
   </ExampleSection>

diff --git 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
@@ -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
@@ -185,6 +185,21 @@ describe('Visibility', () => {
     })
   })
 
+  describe('fireOnMount', () => {
+    it('fires callbacks after mount', () => {
+      const onUpdate = sandbox.spy()
+
+      mockScroll(0, 0)
+      wrapperMount(<Visibility fireOnMount onUpdate={onUpdate} />)
+
+      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 = {