diff --git a/README.md b/README.md
index 4c21d66..3938c5f 100755
--- a/README.md
+++ b/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({
})}
)
- },
+ }
searchUpdated (term) {
this.setState({searchTerm: term})
}
-})
+}
```
diff --git a/example/src/app.js b/example/src/app.js
index d21ce3a..82330cc 100644
--- a/example/src/app.js
+++ b/example/src/app.js
@@ -1,5 +1,5 @@
-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'
@@ -7,10 +7,14 @@ 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({
})}
)
- },
+ }
searchUpdated (term) {
this.setState({searchTerm: term})
}
-})
+}
-ReactDOM.render(, document.getElementById('app'))
+render(, document.getElementById('app'))
diff --git a/package.json b/package.json
index 5f09d2c..4da5d4e 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/index.js b/src/index.js
index 7055ae4..bcda2dc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,42 +1,22 @@
-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
@@ -44,10 +24,21 @@ const Search = createReactClass({
}
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({
)
- },
+ }
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}