Merge branch 'master' into perf/visibity-raf

Semantic-Org · Sep 1, 2017 · 08df41c · 08df41c
2 parents f08face + 578b957
commit 08df41c
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 14 deletions.
diff --git a/README.md b/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
 

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/karma.conf.babel.js b/karma.conf.babel.js
@@ -1,6 +1,13 @@
+import puppeteerPkg from 'puppeteer/package.json'
+import Downloader from 'puppeteer/utils/ChromiumDownloader'
 import config from './config'
 import webpackConfig from './webpack.config.babel'
 
+const revision = puppeteerPkg.puppeteer.chromium_revision
+const revisionInfo = Downloader.revisionInfo(Downloader.currentPlatform(), revision)
+
+process.env.CHROME_BIN = revisionInfo.executablePath
+
 const formatError = (msg) => {
   // filter out empty lines and node_modules
   if (!msg.trim() || /~/.test(msg)) return ''
@@ -22,7 +29,7 @@ const formatError = (msg) => {
 export default (karmaConfig) => {
   karmaConfig.set({
     basePath: process.cwd(),
-    browsers: ['PhantomJS'],
+    browsers: ['ChromeHeadless'],
     client: {
       mocha: {
         reporter: 'html', // change Karma's debug.html to mocha web reporter
@@ -37,11 +44,10 @@ export default (karmaConfig) => {
       includeAllSources: true,
     },
     files: [
-      'node_modules/es6-shim/es6-shim.js',
       './test/tests.bundle.js',
     ],
     formatError,
-    frameworks: ['phantomjs-shim', 'mocha'],
+    frameworks: ['mocha'],
     reporters: ['mocha', 'coverage'],
     singleRun: true,
     preprocessors: {

diff --git a/package.json b/package.json
@@ -85,7 +85,6 @@
     "doctoc": "^1.3.0",
     "doctrine": "^2.0.0",
     "enzyme": "^2.9.1",
-    "es6-shim": "^0.35.3",
     "eslint": "^4.4.1",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-plugin-import": "^2.7.0",
@@ -105,16 +104,15 @@
     "js-beautify": "^1.6.14",
     "json-loader": "^0.5.7",
     "karma": "^1.7.0",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^1.0.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.3",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-phantomjs-shim": "^1.4.0",
     "karma-webpack-with-fast-source-maps": "^1.10.2",
     "mocha": "^3.5.0",
     "node-sass": "^4.5.3",
-    "phantomjs-prebuilt": "^2.1.15",
+    "puppeteer": "^0.10.1",
     "raw-loader": "^0.5.1",
     "react": "^15.6.1",
     "react-ace": "^5.1.2",

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) => {
@@ -283,6 +288,7 @@ export default class Visibility extends Component {
 
   handleUpdate = () => {
     this.ticking = false
+
     const { bottom, height, top, width } = this.ref.getBoundingClientRect()
 
     const topPassed = top < 0

diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -795,7 +795,8 @@ export default class Dropdown extends Component {
         filteredOptions = search(filteredOptions, searchQuery)
       } else {
         const re = new RegExp(_.escapeRegExp(searchQuery), 'i')
-        filteredOptions = _.filter(filteredOptions, opt => re.test(opt.text))
+        // remove diacritics on search
+        filteredOptions = _.filter(filteredOptions, opt => re.test(_.deburr(opt.text)))
       }
     }
 

diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js
@@ -201,6 +201,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 = {

diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -610,6 +610,23 @@ describe('Dropdown', () => {
         .find('.selected')
         .should.contain.text('a2')
     })
+    it('filter after diacritics', () => {
+      const opts = [
+        { text: 'FLOREŞTI', value: '1' },
+        { text: 'ŞANŢU FLOREŞTI', value: '2' },
+        { text: 'FLOREŞTI Alba', value: '3' },
+      ]
+
+      // search for 'floresti'
+      wrapperMount(<Dropdown options={opts} search selection />)
+        .simulate('click')
+        .find('input.search')
+        .simulate('change', { target: { value: 'floresti' } })
+
+      wrapper
+        .find('.selected')
+        .should.contain.text('FLOREŞTI')
+    })
     it('still works after encountering "no results"', () => {
       const opts = [
         { text: 'a1', value: 'a1' },