Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-React into refactor/modal-shorthand

Author: Alexander Fedyashov

CHANGELOG.md

@@ -1,13 +1,13 @@
 <!-- Logo -->
 <p align="center">
-  <a href="http://react.semantic-ui.com">
+  <a href="https://react.semantic-ui.com">
     <img height="128" width="128" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/app/logo.png">
   </a>
 </p>
 
 <!-- Name -->
 <h1 align="center">
-  <a href="http://react.semantic-ui.com/">Semantic UI React</a>
+  <a href="https://react.semantic-ui.com/">Semantic UI React</a>
 </h1>
 
 <!-- Badges -->
@@ -44,6 +44,9 @@ See the [Documentation][2] for an introduction, usage information, and extensive
 
 This is a listing of example projects and guides that will help you integrate Semantic UI React into your new or existing projects.
 
+### [react-semantic.ui-starter][102]
+Production-ready, performance-first, optimized, robust, fully-featured boilerplate/example for your new Progressive Web App.
+
 ### [semantic-ui-react-todos][100]
 This example modifies the well-known [react-redux Todo List][101] to use Semantic UI components. There is also a write-up on the process in the project README.
 
@@ -68,12 +71,14 @@ Here are some helpful links:
 
 These great products are built on Semantic UI React. Add yours [here][22].
 
+- Netflix's Edge Developer Experience team's numerous [internal apps](https://github.com/Semantic-Org/Semantic-UI-React/issues/1604)
 - http://stoplight.io
 - https://roadmap.space
 - https://edabit.com
 - https://blackship.com
 - http://www.brewhousesolutions.com
 - https://www.lifebot.fr
+- https://www.stackforge.co
 
 ## Voice Your Opinion
 
@@ -113,7 +118,7 @@ Once you change the flag, you need to refresh your browser to see the changes in
 |-----------------|-----------------|-----------------|-----------------|--------------------|
 | ✓ Button        | ✓ Breadcrumb    | ✓ Advertisement | ✓ Accordion     |   Form Validation  |
 | ✓ Container     | ✓ Form          | ✓ Card          | ✓ Checkbox      | *API (NA)*         |
-| ✓ Divider       | ✓ Grid          | ✓ Comment       | ✓ Dimmer        | *Visibility (NA)*  |
+| ✓ Divider       | ✓ Grid          | ✓ Comment       | ✓ Dimmer        | ✓ Visibility (NA)  |
 | ✓ Flag          | ✓ Menu          | ✓ Feed          | ✓ Dropdown      |                    |
 | ✓ Header        | ✓ Message       | ✓ Item          | ✓ Embed         |                    |
 | ✓ Icon          | ✓ Table         | ✓ Statistic     | ✓ Modal         |                    |
@@ -176,7 +181,7 @@ Big thanks to our [contributors][20], especially:
 - @layershifter for bringing momentum and continual support
 
 [1]: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/.github/CONTRIBUTING.md
-[2]: http://react.semantic-ui.com/
+[2]: https://react.semantic-ui.com/
 [3]: https://facebook.github.io/react/
 [4]: https://github.com/Semantic-Org/Semantic-UI-React/labels/help%20wanted
 [5]: https://semantic-ui.com/
@@ -197,10 +202,11 @@ Big thanks to our [contributors][20], especially:
 [20]: https://github.com/Semantic-Org/Semantic-UI-React/graphs/contributors
 [21]: https://github.com/Semantic-Org/Semantic-UI-React/labels/good%20first%20contribution
 [22]: https://github.com/Semantic-Org/Semantic-UI-React/edit/master/README.md
-[23]: http://react.semantic-ui.com/usage#css
+[23]: https://react.semantic-ui.com/usage#css
 [24]: https://github.com/Semantic-Org/Semantic-UI-React/issues/802#issuecomment-258990274
 [25]: http://learnsemantic.com/themes/creating.html
 [26]: https://github.com/Semantic-Org/Semantic-UI-Meteor
 <!-- Examples -->
 [100]: https://github.com/wyc/semantic-ui-react-todos
 [101]: https://github.com/reactjs/redux/tree/master/examples/todos
+[102]: https://github.com/Metnew/react-semantic.ui-starter

README.md

@@ -11,5 +11,6 @@ test:
   pre:
     - npm run lint
     - npm run tsd:lint
+    - npm run tsd:test
   post:
     - bash <(curl -s https://codecov.io/bash)

circle.yml

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <!-- Hack to redirect SPA routes back to the index.html -->
-  <meta http-equiv="refresh" content="0;URL='http://react.semantic-ui.com'" />
+  <meta http-equiv="refresh" content="0;URL='https://react.semantic-ui.com'" />
   <script>sessionStorage.redirect = location.href</script>
 </head>
 <body></body>

docs/app/404.html

@@ -103,7 +103,7 @@ class ComponentExample extends Component {
     e.preventDefault()
     this.setHashAndScroll()
 
-    copyToClipboard(this.anchorName)
+    copyToClipboard(location.href)
     this.setState({ copiedDirectLink: true })
 
     setTimeout(() => this.setState({ copiedDirectLink: false }), 1000)
@@ -138,7 +138,7 @@ class ComponentExample extends Component {
   resetJSX = () => {
     const { sourceCode } = this.state
     const original = this.getOriginalSourceCode()
-    if (sourceCode !== original && confirm('Loose your changes?')) { // eslint-disable-line no-alert
+    if (sourceCode !== original && confirm('Lose your changes?')) { // eslint-disable-line no-alert
       this.setState({ sourceCode: original })
       this.renderSourceCode()
     }

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import { Header, Icon, Popup, Table } from 'src'
-import { SUI } from 'src/lib'
 
 const extraDescriptionStyle = {
   color: '#666',
@@ -113,43 +112,22 @@ export default class ComponentProps extends Component {
     )
   }
 
-  expandEnums = (value) => {
-    const parts = value.split('.')
-    if (parts[0] === 'SUI') {
-      return SUI[parts[1]]
-    }
-    return value
-  }
-
-  renderEnums = (item) => {
-    if (item.type !== '{enum}') return
+  renderEnums = ({ name, type, value }) => {
+    if (type !== '{enum}' || !value) return
 
     const { showEnumsFor } = this.state
     const truncateAt = 10
-
-    if (!item.value) return null
-
-    const values = [].concat(item.value).reduce((accumulator, v) => {
-      return accumulator.concat(this.expandEnums(_.trim(v.value || v, '.\'')))
-    }, [])
-
-    const valueElements = _.map(values, val => <span key={val}><code>{val}</code> </span>)
+    const valueElements = _.map(value, val => <span key={val}><code>{val}</code> </span>)
 
     // show all if there are few
-    if (values.length < truncateAt) {
-      return (
-        <Extra title='Enums:' inline>
-          {valueElements}
-        </Extra>
-      )
-    }
+    if (value.length < truncateAt) return <Extra title='Enums:' inline>{valueElements}</Extra>
 
     // add button to show more when there are many values and it is not toggled
-    if (!showEnumsFor[item.name]) {
+    if (!showEnumsFor[name]) {
       return (
         <Extra title='Enums:' inline>
-          <a style={{ cursor: 'pointer' }} onClick={this.toggleEnumsFor(item.name)}>
-            Show all {values.length}
+          <a style={{ cursor: 'pointer' }} onClick={this.toggleEnumsFor(name)}>
+            Show all {value.length}
           </a>
           <div>{valueElements.slice(0, truncateAt - 1)}...</div>
         </Extra>
@@ -159,9 +137,7 @@ export default class ComponentProps extends Component {
     // add "show more" button when there are many
     return (
       <Extra title='Enums:' inline>
-        <a style={{ cursor: 'pointer' }} onClick={this.toggleEnumsFor(item.name)}>
-          Show less
-        </a>
+        <a style={{ cursor: 'pointer' }} onClick={this.toggleEnumsFor(name)}>Show less</a>
         <div>{valueElements}</div>
       </Extra>
     )
@@ -170,9 +146,9 @@ export default class ComponentProps extends Component {
   renderRow = item => {
     return (
       <Table.Row key={item.name}>
-        <Table.Cell>{this.renderName(item)}{this.renderRequired(item)}</Table.Cell>
-        <Table.Cell>{this.renderDefaultValue(item)}</Table.Cell>
-        <Table.Cell>{item.type}</Table.Cell>
+        <Table.Cell collapsing>{this.renderName(item)}{this.renderRequired(item)}</Table.Cell>
+        <Table.Cell collapsing>{this.renderDefaultValue(item)}</Table.Cell>
+        <Table.Cell collapsing>{item.type}</Table.Cell>
         <Table.Cell>
           {item.description && <p>{item.description}</p>}
           {this.renderFunctionSignature(item)}

docs/app/Components/ComponentDoc/ComponentProps.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>
+    )
+  }
+}

docs/app/Examples/behaviors/Visibility/Settings/CallbackFrequencyExample.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

docs/app/Examples/behaviors/Visibility/Settings/GroupedCallbacksExample.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