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}