feat(Visibility): add offset (#2016)

* feat(Visibility): add offset * fix(ComponentExample): add Wireframe, fix editor padding * docs(Visibility): better event log ux
Semantic-Org · Sep 1, 2017 · 12107db · 12107db
1 parent f1f7ceb
commit 12107db
Show file tree

Hide file tree

Showing 15 changed files with 418 additions and 243 deletions.
diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -166,6 +166,7 @@ class ComponentExample extends Component {
     const LODASH = require('lodash')
     const REACT = require('react')
     const SEMANTIC_UI_REACT = require('semantic-ui-react')
+    let WIREFRAME
     let COMMON
     /* eslint-enable no-unused-vars */
 
@@ -191,6 +192,8 @@ class ComponentExample extends Component {
         if (module === 'COMMON') {
           const componentPath = examplePath.split(__PATH_SEP__).splice(0, 2).join(__PATH_SEP__)
           COMMON = require(`docs/app/Examples/${componentPath}/common`)
+        } else if (module === 'WIREFRAME') {
+          WIREFRAME = require('docs/app/Examples/behaviors/Visibility/Wireframe').default
         }
 
         const constStatements = []
@@ -420,8 +423,10 @@ class ComponentExample extends Component {
           <Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>
             {exampleElement}
           </Grid.Column>
-          {this.renderJSX()}
-          {this.renderHTML()}
+          <Grid.Column>
+            {this.renderJSX()}
+            {this.renderHTML()}
+          </Grid.Column>
         </Grid.Row>
       </Grid>
     )

diff --git a/docs/app/Examples/behaviors/Visibility/Settings/CallbackFrequencyExample.js b/docs/app/Examples/behaviors/Visibility/Settings/CallbackFrequencyExample.js
diff --git a/docs/app/Examples/behaviors/Visibility/Settings/GroupedCallbacksExample.js b/docs/app/Examples/behaviors/Visibility/Settings/GroupedCallbacksExample.js
diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react'
+import { Button, Checkbox, Divider, Grid, Label, Segment, Sticky, Visibility } from 'semantic-ui-react'
+
+import Wireframe from '../Wireframe'
+
+export default class VisibilityExampleCallbackFrequency extends Component {
+  state = {
+    continuous: false,
+    log: [],
+    logCount: 0,
+    once: true,
+  }
+
+  handleContextRef = contextRef => this.setState({ contextRef })
+
+  updateLog = eventName => () => this.setState(({
+    log: [
+      `${new Date().toLocaleTimeString()}: ${eventName}`,
+      ...this.state.log,
+    ].slice(0, 20),
+    logCount: this.state.logCount + 1,
+  }))
+
+  clearLog = () => this.setState({ log: [], logCount: 0 })
+
+  toggleOnce = () => this.setState({ once: !this.state.once })
+
+  toggleContinuous = () => this.setState({ continuous: !this.state.continuous })
+
+  render() {
+    const { continuous, contextRef, log, logCount, once } = this.state
+
+    return (
+      <div ref={this.handleContextRef}>
+        <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>
+            <Sticky context={contextRef}>
+              <Segment.Group>
+                <Segment>
+                  <Checkbox checked={once} label='Once' onChange={this.toggleOnce} toggle />
+                  <Divider />
+                  <Checkbox checked={continuous} label='Continuous' onChange={this.toggleContinuous} toggle />
+                </Segment>
+                <Segment>
+                  <Button compact size='small' floated='right' onClick={this.clearLog}>Clear</Button>
+                  Event Log <Label circular>{logCount}</Label>
+                </Segment>
+                <Segment secondary>
+                  <pre>{log.map((e, i) => <div key={i}>{e}</div>)}</pre>
+                </Segment>
+              </Segment.Group>
+            </Sticky>
+          </Grid.Column>
+        </Grid>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks.js
@@ -0,0 +1,75 @@
+import React, { Component } from 'react'
+import { Button, Checkbox, Divider, Grid, Label, Segment, Sticky, Visibility } from 'semantic-ui-react'
+
+import Wireframe from '../Wireframe'
+
+export default class VisibilityExampleGroupedCallbacks extends Component {
+  state = {
+    continuous: false,
+    log: [],
+    logCount: 0,
+    once: true,
+  }
+
+  handleContextRef = contextRef => this.setState({ contextRef })
+
+  updateLog = eventName => () => this.setState(({
+    log: [
+      `${new Date().toLocaleTimeString()}: ${eventName}`,
+      ...this.state.log,
+    ].slice(0, 20),
+    logCount: this.state.logCount + 1,
+  }))
+
+  clearLog = () => this.setState({ log: [], logCount: 0 })
+
+  toggleOnce = () => this.setState({ once: !this.state.once })
+
+  toggleContinuous = () => this.setState({ continuous: !this.state.continuous })
+
+  render() {
+    const { continuous, contextRef, log, logCount, once } = this.state
+
+    return (
+      <div ref={this.handleContextRef}>
+        <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>
+            <Sticky context={contextRef}>
+              <Segment.Group>
+                <Segment>
+                  <Checkbox checked={once} label='Once' onChange={this.toggleOnce} toggle />
+                  <Divider />
+                  <Checkbox checked={continuous} label='Continuous' onChange={this.toggleContinuous} toggle />
+                </Segment>
+                <Segment>
+                  <Button compact size='small' floated='right' onClick={this.clearLog}>Clear</Button>
+                  Event Log <Label circular>{logCount}</Label>
+                </Segment>
+                <Segment secondary>
+                  <pre>{log.map((e, i) => <div key={i}>{e}</div>)}</pre>
+                </Segment>
+              </Segment.Group>
+            </Sticky>
+          </Grid.Column>
+        </Grid>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleOffset.js
@@ -0,0 +1,66 @@
+import React, { Component } from 'react'
+import { Grid, Sticky, Table, Visibility } from 'semantic-ui-react'
+
+import Wireframe from '../Wireframe'
+
+export default class VisibilityExampleOffset extends Component {
+  state = {
+    calculations: {
+      topPassed: false,
+      bottomPassed: false,
+      topVisible: false,
+      bottomVisible: false,
+    },
+  }
+
+  handleContextRef = contextRef => this.setState({ contextRef })
+
+  handleUpdate = (e, { calculations }) => this.setState({ calculations })
+
+  render() {
+    const { calculations, contextRef } = this.state
+
+    return (
+      <div ref={this.handleContextRef}>
+        <Grid columns={2}>
+          <Grid.Column>
+            <Visibility offset={[10, 10]} onUpdate={this.handleUpdate}>
+              <Wireframe />
+            </Visibility>
+          </Grid.Column>
+
+          <Grid.Column>
+            <Sticky context={contextRef}>
+              <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>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>
+            </Sticky>
+          </Grid.Column>
+        </Grid>
+      </div>
+    )
+  }
+}