Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…

…React into perf/visibility-raf

# Conflicts:
#	src/behaviors/Visibility/Visibility.js
#	test/specs/behaviors/Visibility/Visibility-test.js

README.md

@@ -81,6 +81,7 @@ These great products are built on Semantic UI React. Add yours [here][22].
 - https://www.stackforge.co
 - https://sublimefund.org
 - https://thefaithcircle.com
+- https://appfollow.io
 
 ## Voice Your Opinion
 

docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -8,21 +8,15 @@ import { html } from 'js-beautify'
 import copyToClipboard from 'copy-to-clipboard'
 
 import { exampleContext, repoURL, scrollToAnchor } from 'docs/app/utils'
-import { Divider, Grid, Header, Menu } from 'src'
+import { Divider, Grid, Menu } from 'src'
 import Editor from 'docs/app/Components/Editor/Editor'
 import ComponentControls from '../ComponentControls'
+import ComponentExampleTitle from './ComponentExampleTitle'
 
 const babelConfig = {
   presets: ['es2015', 'react', 'stage-1'],
 }
 
-const titleStyle = {
-  margin: 0,
-}
-const descriptionStyle = {
-  maxWidth: '50rem',
-}
-
 const headerColumnStyle = {
   // provide room for absolutely positions toggle code icons
   minHeight: '4em',
@@ -53,6 +47,7 @@ class ComponentExample extends Component {
     history: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     match: PropTypes.object.isRequired,
+    suiVersion: PropTypes.string,
     title: PropTypes.node,
   }
 
@@ -166,6 +161,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 +187,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 = []
@@ -374,7 +372,7 @@ class ComponentExample extends Component {
   }
 
   render() {
-    const { children, description, title } = this.props
+    const { children, description, suiVersion, title } = this.props
     const { controlsVisible, exampleElement, showCode, showHTML } = this.state
     const exampleStyle = {}
 
@@ -392,8 +390,11 @@ class ComponentExample extends Component {
       >
         <Grid.Row columns={2}>
           <Grid.Column style={headerColumnStyle}>
-            {title && <Header as='h3' className='no-anchor' style={titleStyle} content={title} />}
-            {description && <p style={descriptionStyle}>{description}</p>}
+            <ComponentExampleTitle
+              description={description}
+              title={title}
+              suiVersion={suiVersion}
+            />
           </Grid.Column>
           <Grid.Column textAlign='right'>
             <ComponentControls
@@ -420,8 +421,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>
     )

docs/app/Components/ComponentDoc/ComponentExample/ComponentExampleTitle.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Header, Label } from 'semantic-ui-react'
+
+import { pure } from 'docs/app/HOC'
+
+const titleStyle = {
+  margin: 0,
+}
+const descriptionStyle = {
+  maxWidth: '50rem',
+}
+
+const ComponentExampleTitle = ({ description, title, suiVersion }) => (
+  <div>
+    {title && (
+      <Header as='h3' className='no-anchor' style={titleStyle}>
+        {title}
+        {suiVersion && (
+          <Label
+            as='a'
+            color='teal'
+            content={suiVersion}
+            size='tiny'
+            title={`Available from Semantic UI ${suiVersion}`}
+          />
+        )}
+      </Header>
+    )}
+    {description && <p style={descriptionStyle}>{description}</p>}
+  </div>
+)
+
+ComponentExampleTitle.propTypes = {
+  description: PropTypes.node,
+  title: PropTypes.node,
+  suiVersion: PropTypes.string,
+}
+
+export default pure(ComponentExampleTitle)

docs/app/Components/ComponentDoc/ShorthandExample.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import ComponentExample from './ComponentExample'
+
+const ShorthandExample = ({ description, ...rest }) => <ComponentExample {...rest} description={description} />
+
+ShorthandExample.propTypes = {
+  description: PropTypes.node,
+}
+
+ShorthandExample.defaultProps = {
+  description: 'You can do the same using shorthands.',
+}
+
+export default ShorthandExample

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>
+    )
+  }
+}