diff --git a/README.md b/README.md index 3938c5f..81e14f3 100755 --- a/README.md +++ b/README.md @@ -118,4 +118,6 @@ Look at [react-search-input.css](react-search-input.css) for an idea on how to s --- +## Ref +Passing ref to input with inputRef property MIT Licensed diff --git a/src/index.js b/src/index.js index bcda2dc..3e70137 100644 --- a/src/index.js +++ b/src/index.js @@ -1,107 +1,148 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import {createFilter} from './util' - -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) +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.createFilter = undefined; + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _util = require('./util'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var Search = function (_Component) { + _inherits(Search, _Component); + + function Search(props) { + _classCallCheck(this, Search); + + var _this = _possibleConstructorReturn(this, (Search.__proto__ || Object.getPrototypeOf(Search)).call(this, props)); + + _this.state = { + searchTerm: _this.props.value || '' + }; + _this.updateSearch = _this.updateSearch.bind(_this); + _this.filter = _this.filter.bind(_this); + return _this; } - componentWillReceiveProps (nextProps) { - if ( - typeof nextProps.value !== 'undefined' && - nextProps.value !== this.props.value - ) { - const e = { - target: { - value: nextProps.value - } + _createClass(Search, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (typeof nextProps.value !== 'undefined' && nextProps.value !== this.props.value) { + var e = { + target: { + value: nextProps.value + } + }; + this.updateSearch(e); } - this.updateSearch(e) } - } + }, { + key: 'render', + value: function render() { + var _props = this.props, + className = _props.className, + onChange = _props.onChange, + caseSensitive = _props.caseSensitive, + sortResults = _props.sortResults, + throttle = _props.throttle, + filterKeys = _props.filterKeys, + value = _props.value, + fuzzy = _props.fuzzy, + inputClassName = _props.inputClassName, + inputRef = _props.inputRef, + inputProps = _objectWithoutProperties(_props, ['className', 'onChange', 'caseSensitive', 'sortResults', 'throttle', 'filterKeys', 'value', 'fuzzy', 'inputClassName', 'inputRef']); // eslint-disable-line no-unused-vars - render () { - 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 - inputProps.className = inputClassName - inputProps.placeholder = inputProps.placeholder || 'Search' - return ( -
- -
- ) - } - updateSearch (e) { - const searchTerm = e.target.value - this.setState( - { + inputProps.type = inputProps.type || 'search'; + inputProps.value = this.state.searchTerm; + inputProps.onChange = this.updateSearch; + inputProps.className = inputClassName; + inputProps.ref = inputRef; + inputProps.placeholder = inputProps.placeholder || 'Search'; + return _react2.default.createElement( + 'div', + { className: className }, + _react2.default.createElement('input', inputProps) + ); + } + }, { + key: 'updateSearch', + value: function updateSearch(e) { + var _this2 = this; + + var searchTerm = e.target.value; + this.setState({ searchTerm: searchTerm - }, - () => { - if (this._throttleTimeout) { - clearTimeout(this._throttleTimeout) + }, function () { + if (_this2._throttleTimeout) { + clearTimeout(_this2._throttleTimeout); } - this._throttleTimeout = setTimeout( - () => this.props.onChange(searchTerm), - this.props.throttle - ) - } - ) - } + _this2._throttleTimeout = setTimeout(function () { + return _this2.props.onChange(searchTerm); + }, _this2.props.throttle); + }); + } + }, { + key: 'filter', + value: function filter(keys) { + var _props2 = this.props, + filterKeys = _props2.filterKeys, + caseSensitive = _props2.caseSensitive, + fuzzy = _props2.fuzzy, + sortResults = _props2.sortResults; - filter (keys) { - const {filterKeys, caseSensitive, fuzzy, sortResults} = this.props - return createFilter(this.state.searchTerm, keys || filterKeys, { - caseSensitive, - fuzzy, - sortResults - }) - } -} + return (0, _util.createFilter)(this.state.searchTerm, keys || filterKeys, { + caseSensitive: caseSensitive, + fuzzy: fuzzy, + sortResults: sortResults + }); + } + }]); + + return Search; +}(_react.Component); Search.defaultProps = { className: '', - onChange () {}, + onChange: function 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} + className: _propTypes2.default.string, + inputClassName: _propTypes2.default.string, + inputRef: _propTypes2.default.func, + onChange: _propTypes2.default.func, + caseSensitive: _propTypes2.default.bool, + sortResults: _propTypes2.default.bool, + fuzzy: _propTypes2.default.bool, + throttle: _propTypes2.default.number, + filterKeys: _propTypes2.default.oneOf([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]), + value: _propTypes2.default.string +}; + +exports.default = Search; +exports.createFilter = _util.createFilter; \ No newline at end of file