feat(Visibility): add component (Semantic-Org#1174)

* feat(visibility): create Visibility component * feat(visibility): add behaviour meta * docs(visibility): create first docs example * feat(visibility): add scroll handler * feat(visibility): generate calculations on scroll * feat(visibility): add standard events * feat(visibility): make Visibility conformant * refactor(visibility): remove empty function * fix(visibility): fix typo * docs(Visibility): callback frequency example * feat(Visibility): add support for continuous * refactor(Visibility): add default values to props * refactor(Visibility): bind handleScroll to this * docs(Visibility): bind `continuous` and `once` * feat(Visibility): add once and continuous * docs(Visibility): minor fix * feat(Visibility): add reverse callbacks * feat(Visibility): add onOnScreen and onOffScreen * docs(Visibility): split examples * fix(Visibility): change once default value * test(Visibility): create tests * feat(Visibility): add grouped callbacks * fix(tests): revert change to tests.bundle.js * chore(behavior): rename from behaviour * chore(behavior): rename from behaviour * Fix(Visibility): remove event listener after unmounting * style(Visibility): shorten example description * tests(common): update regexp * refactor(Visibility): wip * refactor(Visibility): wip * style(Visibility): add typings, update events signatures
aabustamante · May 22, 2017 · 989f52a · 989f52a
1 parent fc61b05
commit 989f52a
Show file tree

Hide file tree

Showing 20 changed files with 1,082 additions and 3 deletions.
diff --git a/docs/app/Examples/behaviors/Visibility/Settings/CallbackFrequencyExample.js b/docs/app/Examples/behaviors/Visibility/Settings/CallbackFrequencyExample.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import { Button, Checkbox, Divider, Grid, Segment, Visibility } from 'semantic-ui-react'
+import Wireframe from '../Wireframe'
+
+export default class VisibilityExample extends Component {
+  state = {
+    continuous: false,
+    log: [],
+    once: true,
+  }
+
+  updateLog = eventName => () => this.setState({ log: [eventName, ...this.state.log] })
+
+  clearLog = () => this.setState({ log: [] })
+
+  toggleOnce = () => this.setState({ once: !this.state.once })
+
+  toggleContinuous = () => this.setState({ continuous: !this.state.continuous })
+
+  render() {
+    const { continuous, log, once } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column>
+          <Visibility
+            continuous={continuous}
+            once={once}
+            onTopVisible={this.updateLog('onTopVisible')}
+            onTopPassed={this.updateLog('onTopPassed')}
+            onBottomVisible={this.updateLog('onBottomVisible')}
+            onBottomPassed={this.updateLog('onBottomPassed')}
+            onTopVisibleReverse={this.updateLog('onTopVisibleReverse')}
+            onTopPassedReverse={this.updateLog('onTopPassedReverse')}
+            onBottomVisibleReverse={this.updateLog('onBottomVisibleReverse')}
+            onBottomPassedReverse={this.updateLog('onBottomPassedReverse')}
+            onPassing={this.updateLog('onPassing')}
+            onPassingReverse={this.updateLog('onPassingReverse')}
+            onOnScreen={this.updateLog('onOnScreen')}
+            onOffScreen={this.updateLog('onOffScreen')}
+          >
+            <Wireframe />
+          </Visibility>
+        </Grid.Column>
+
+        <Grid.Column>
+          <Segment.Group>
+            <Segment>
+              <Button floated='right' onClick={this.clearLog}>Clear</Button>
+              <Checkbox checked={once} label='Once' onChange={this.toggleOnce} toggle />
+              <Divider />
+              <Checkbox checked={continuous} label='Continuous' onChange={this.toggleContinuous} toggle />
+            </Segment>
+            <Segment>Event Log</Segment>
+            <Segment>
+              <pre style={{ height: 300, overflowY: 'scroll' }}>
+                {log.map((e, i) => <p key={i}>{e} fired</p>)}
+              </pre>
+            </Segment>
+          </Segment.Group>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}
diff --git a/docs/app/Examples/behaviors/Visibility/Settings/GroupedCallbacksExample.js b/docs/app/Examples/behaviors/Visibility/Settings/GroupedCallbacksExample.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import { Button, Checkbox, Divider, Grid, Segment, Visibility } from 'semantic-ui-react'
+import Wireframe from '../Wireframe'
+
+class VisibilityExample extends Component {
+  state = {
+    continuous: false,
+    log: [],
+    once: true,
+  }
+
+  updateLog = eventName => () => this.setState({ log: [eventName, ...this.state.log] })
+
+  clearLog = () => this.setState({ log: [] })
+
+  toggleOnce = () => this.setState({ once: !this.state.once })
+
+  toggleContinuous = () => this.setState({ continuous: !this.state.continuous })
+
+  render() {
+    const { continuous, log, once } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column>
+          <Visibility
+            continuous={continuous}
+            once={once}
+            onPassed={{
+              10: this.updateLog('10px'),
+              100: this.updateLog('100px'),
+              500: this.updateLog('500px'),
+              '10%': this.updateLog('10%'),
+              '25%': this.updateLog('25%'),
+              '80%': this.updateLog('80%'),
+            }}
+          >
+            <Wireframe />
+          </Visibility>
+        </Grid.Column>
+
+        <Grid.Column>
+          <Segment.Group>
+            <Segment>
+              <Button floated='right' onClick={this.clearLog}>Clear</Button>
+              <Checkbox checked={once} label='Once' onChange={this.toggleOnce} toggle />
+              <Divider />
+              <Checkbox checked={continuous} label='Continuous' onChange={this.toggleContinuous} toggle />
+            </Segment>
+            <Segment>Event Log</Segment>
+            <Segment>
+              <pre style={{ height: 300, overflowY: 'scroll' }}>
+                {log.map((e, i) => <p key={i}>{e} fired</p>)}
+              </pre>
+            </Segment>
+          </Segment.Group>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}
+
+export default VisibilityExample
diff --git a/docs/app/Examples/behaviors/Visibility/Settings/index.js b/docs/app/Examples/behaviors/Visibility/Settings/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const VisibilityExample = () => (
+  <ExampleSection title='Settings'>
+    <ComponentExample
+      title='Callback frequency'
+      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'
+      examplePath='behaviors/Visibility/Settings/GroupedCallbacksExample'
+    />
+  </ExampleSection>
+)
+
+export default VisibilityExample
diff --git a/docs/app/Examples/behaviors/Visibility/Types/VisibilityExample.js b/docs/app/Examples/behaviors/Visibility/Types/VisibilityExample.js
@@ -0,0 +1,101 @@
+import React, { Component } from 'react'
+import { Grid, Table, Visibility } from 'semantic-ui-react'
+import Wireframe from '../Wireframe'
+
+class VisibilityExample 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,
+    },
+  }
+
+  handleUpdate = (e, { calculations }) => this.setState({ calculations })
+
+  render() {
+    const { calculations } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column>
+          <Visibility onUpdate={this.handleUpdate}>
+            <Wireframe />
+          </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>
+    )
+  }
+}
+
+export default VisibilityExample
diff --git a/docs/app/Examples/behaviors/Visibility/Types/index.js b/docs/app/Examples/behaviors/Visibility/Types/index.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const VisibilityExample = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Default'
+      description='An example of Visibility'
+      examplePath='behaviors/Visibility/Types/VisibilityExample'
+    />
+  </ExampleSection>
+)
+
+export default VisibilityExample
diff --git a/docs/app/Examples/behaviors/Visibility/Wireframe.js b/docs/app/Examples/behaviors/Visibility/Wireframe.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Divider, Image, Segment } from 'semantic-ui-react'
+
+export default (props) => (
+  <Segment>
+    <Image src='http://semantic-ui.com/images/wireframe/centered-paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/centered-paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/centered-paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+    <Divider />
+    <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+  </Segment>
+)
diff --git a/docs/app/Examples/behaviors/Visibility/index.js b/docs/app/Examples/behaviors/Visibility/index.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import Types from './Types'
+import Settings from './Settings'
+
+const VisibilityExamples = () => (
+  <div>
+    <Types />
+    <Settings />
+  </div>
+)
+
+export default VisibilityExamples
diff --git a/docs/app/utils.js b/docs/app/utils.js
@@ -7,6 +7,7 @@ export const typeOrder = [
   META.TYPES.COLLECTION,
   META.TYPES.VIEW,
   META.TYPES.MODULE,
+  META.TYPES.BEHAVIOR,
   META.TYPES.ADDON,
 ]
 

diff --git a/gulp/tasks/docs.js b/gulp/tasks/docs.js
@@ -32,6 +32,7 @@ task('build:docs:docgen', () => {
 
   return src([
     `${config.paths.src()}/addons/**/*.js`,
+    `${config.paths.src()}/behaviors/**/*.js`,
     `${config.paths.src()}/elements/**/*.js`,
     `${config.paths.src()}/collections/**/*.js`,
     `${config.paths.src()}/modules/**/*.js`,

diff --git a/index.d.ts b/index.d.ts
@@ -5,6 +5,15 @@ export { default as Radio, RadioProps } from './dist/commonjs/addons/Radio';
 export { default as Select, SelectProps } from './dist/commonjs/addons/Select';
 export { default as TextArea, TextAreaProps, TextAreaOnChangeData } from './dist/commonjs/addons/TextArea';
 
+// Behaviors
+export {
+  default as Visibility,
+  VisibilityCalculations,
+  VisibilityEventData,
+  VisibilityOnPassed,
+  VisibilityProps
+} from './dist/commonjs/behaviors/Visibility';
+
 // Collections
 export { default as Breadcrumb, BreadcrumbProps } from './dist/commonjs/collections/Breadcrumb';
 export {