Merge pull request #128 from arojunior/es6-classes

createReactClass migration to es6 classes

Author: mathieudutour

README.md

@@ -17,16 +17,21 @@ npm install react-search-input --save
 ## Example
 
 ```javascript
+import React, {Component} from 'react'
 import SearchInput, {createFilter} from 'react-search-input'
 
 import emails from './mails'
 
 const KEYS_TO_FILTERS = ['user.name', 'subject', 'dest.name']
 
-const App = React.createClass({
-  getInitialState () {
-    return { searchTerm: '' }
-  },
+class App extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      searchTerm: ''
+    }
+    this.searchUpdated = this.searchUpdated.bind(this)
+  }
 
   render () {
     const filteredEmails = emails.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
@@ -44,12 +49,12 @@ const App = React.createClass({
         })}
       </div>
     )
-  },
+  }
 
   searchUpdated (term) {
     this.setState({searchTerm: term})
   }
-})
+}
 
 ```
 

example/src/app.js

@@ -1,16 +1,20 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React, {Component} from 'react'
+import {render} from 'react-dom'
 
 import SearchInput, {createFilter} from '../../lib/index'
 
 import emails from './mails'
 
 const KEYS_TO_FILTERS = ['user.name', 'subject', 'dest.name', 'id']
 
-const App = React.createClass({
-  getInitialState () {
-    return { searchTerm: '' }
-  },
+class App extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      searchTerm: ''
+    }
+    this.searchUpdated = this.searchUpdated.bind(this)
+  }
 
   render () {
     const filteredEmails = emails.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
@@ -28,11 +32,11 @@ const App = React.createClass({
         })}
       </div>
     )
-  },
+  }
 
   searchUpdated (term) {
     this.setState({searchTerm: term})
   }
-})
+}
 
-ReactDOM.render(<App />, document.getElementById('app'))
+render(<App />, document.getElementById('app'))

package.json

@@ -4,10 +4,7 @@
   "description": "Simple react.js component for a search input, providing a filter function.",
   "main": "lib/index.js",
   "jsnext:main": "src/index.js",
-  "files": [
-    "lib",
-    "src"
-  ],
+  "files": ["lib", "src"],
   "devDependencies": {
     "babel-cli": "^6.8.0",
     "babel-jest": "^19.0.0",
@@ -46,7 +43,6 @@
   "homepage": "https://github.com/enkidevs/react-search-input",
   "dependencies": {
     "fuse.js": "^3.0.0",
-    "prop-types": "^15.5.8",
-    "create-react-class": "^15.5.2"
+    "prop-types": "^15.5.8"
   }
 }

src/index.js

@@ -1,53 +1,44 @@
-import React from 'react'
+import React, {Component} from 'react'
 import PropTypes from 'prop-types'
-import createReactClass from 'create-react-class'
-import { createFilter } from './util'
+import {createFilter} from './util'
 
-const Search = createReactClass({
-  propTypes: {
-    className: PropTypes.string,
-    inputClassName: PropTypes.string,
-    onChange: PropTypes.func,
-    caseSensitive: PropTypes.bool,
-    sortResults: PropTypes.bool,
-    fuzzy: PropTypes.bool,
-    throttle: PropTypes.number,
-    filterKeys: PropTypes.oneOf([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string)
-    ]),
-    value: PropTypes.string
-  },
-
-  getDefaultProps () {
-    return {
-      className: '',
-      onChange () {},
-      caseSensitive: false,
-      fuzzy: false,
-      throttle: 200
-    }
-  },
-
-  getInitialState () {
-    return {
+class Search extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
       searchTerm: this.props.value || ''
     }
-  },
+    this.updateSearch = this.updateSearch.bind(this)
+    this.filter = this.filter.bind(this)
+  }
 
   componentWillReceiveProps (nextProps) {
-    if (typeof nextProps.value !== 'undefined' && nextProps.value !== this.props.value) {
+    if (
+      typeof nextProps.value !== 'undefined' &&
+      nextProps.value !== this.props.value
+    ) {
       const e = {
         target: {
           value: nextProps.value
         }
       }
       this.updateSearch(e)
     }
-  },
+  }
 
   render () {
-    const {className, onChange, caseSensitive, sortResults, throttle, filterKeys, value, fuzzy, inputClassName, ...inputProps} = this.props // eslint-disable-line no-unused-vars
+    const {
+      className,
+      onChange,
+      caseSensitive,
+      sortResults,
+      throttle,
+      filterKeys,
+      value,
+      fuzzy,
+      inputClassName,
+      ...inputProps
+    } = this.props // eslint-disable-line no-unused-vars
     inputProps.type = inputProps.type || 'search'
     inputProps.value = this.state.searchTerm
     inputProps.onChange = this.updateSearch
@@ -58,33 +49,59 @@ const Search = createReactClass({
         <input {...inputProps} />
       </div>
     )
-  },
+  }
 
   updateSearch (e) {
     const searchTerm = e.target.value
-    this.setState({
-      searchTerm: searchTerm
-    }, () => {
-      if (this._throttleTimeout) {
-        clearTimeout(this._throttleTimeout)
-      }
+    this.setState(
+      {
+        searchTerm: searchTerm
+      },
+      () => {
+        if (this._throttleTimeout) {
+          clearTimeout(this._throttleTimeout)
+        }
 
-      this._throttleTimeout = setTimeout(
-        () => this.props.onChange(searchTerm),
-        this.props.throttle
-      )
-    })
-  },
+        this._throttleTimeout = setTimeout(
+          () => this.props.onChange(searchTerm),
+          this.props.throttle
+        )
+      }
+    )
+  }
 
   filter (keys) {
     const {filterKeys, caseSensitive, fuzzy, sortResults} = this.props
-    return createFilter(
-      this.state.searchTerm,
-      keys || filterKeys,
-      {caseSensitive, fuzzy, sortResults}
-    )
+    return createFilter(this.state.searchTerm, keys || filterKeys, {
+      caseSensitive,
+      fuzzy,
+      sortResults
+    })
   }
-})
+}
+
+Search.defaultProps = {
+  className: '',
+  onChange () {},
+  caseSensitive: false,
+  fuzzy: false,
+  throttle: 200
+}
+
+Search.propTypes = {
+  className: PropTypes.string,
+  inputClassName: PropTypes.string,
+  onChange: PropTypes.func,
+  caseSensitive: PropTypes.bool,
+  sortResults: PropTypes.bool,
+  fuzzy: PropTypes.bool,
+  throttle: PropTypes.number,
+  filterKeys: PropTypes.oneOf([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  value: PropTypes.string
+}
 
 export default Search
-export { createFilter }
+export {createFilter}