diff --git a/src/components/filter/filter.jsx b/src/components/filter/filter.jsx index 0d5b743a12804dc563e17f1face34a5ee0c9b5fd..af501c68ba993616260f164c0b6edb7527778399 100644 --- a/src/components/filter/filter.jsx +++ b/src/components/filter/filter.jsx @@ -23,21 +23,20 @@ const FilterComponent = props => { <img className={styles.filterIcon} src={filterIcon} - ></img> + /> <input autoFocus className={styles.filterInput} - type='text' placeholder={placeholderText} + type="text" value={filterQuery} onChange={onChange} - > - </input> + /> <div className={styles.xIconWrapper}> <img className={styles.xIcon} src={xIcon} - ></img> + /> </div> </div> ); @@ -45,6 +44,8 @@ const FilterComponent = props => { FilterComponent.propTypes = { active: PropTypes.bool, + filterQuery: PropTypes.string, + onChange: PropTypes.func, placeholderText: PropTypes.string }; FilterComponent.defaultProps = { diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx index fc0118a9b471c8cd1d0f9ef0812156c6cddf3a6c..540eef09b3145aed1819b6167e8d2e14a6b9f0d7 100644 --- a/src/components/library/library.jsx +++ b/src/components/library/library.jsx @@ -1,4 +1,3 @@ -const classNames = require('classnames'); const bindAll = require('lodash.bindall'); const PropTypes = require('prop-types'); const React = require('react'); diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx index 86fde1ae326059a5df779c36c6b53f56057c847f..b29af276b87556dd7c30d6bbc873f0ade1c0a4e8 100644 --- a/src/components/modal/modal.jsx +++ b/src/components/modal/modal.jsx @@ -24,7 +24,7 @@ class ModalComponent extends React.Component { > <div className={styles.header}> <div className={classNames(styles.headerItem, styles.headerItemFilter)}> - <Filter></Filter> + <Filter /> </div> <div className={classNames( @@ -56,6 +56,7 @@ class ModalComponent extends React.Component { ModalComponent.propTypes = { children: PropTypes.node, contentLabel: PropTypes.string.isRequired, + onRequestClose: PropTypes.func, visible: PropTypes.bool.isRequired }; diff --git a/src/containers/filter.jsx b/src/containers/filter.jsx index 8173dba64a1dce1a968b5bdfc7a4575ac25c7355..b1481113f30ce50a151c47e0a408000b3b7ee6e2 100644 --- a/src/containers/filter.jsx +++ b/src/containers/filter.jsx @@ -1,5 +1,4 @@ const bindAll = require('lodash.bindall'); -const PropTypes = require('prop-types'); const React = require('react'); const FilterComponent = require('../components/filter/filter.jsx'); @@ -8,21 +7,21 @@ class Filter extends React.Component { constructor (props) { super(props); bindAll(this, [ - 'updateSearch' + 'handleOnChange' ]); this.state = { active: false, filterQuery: '' }; } - updateSearch(event) { + handleOnChange (event) { this.setState({ filterQuery: event.target.value - }) - if(event.target.value){ + }); + + if (event.target.value){ this.setState({active: true}); - } - else { + } else { this.setState({active: false}); } } @@ -31,7 +30,7 @@ class Filter extends React.Component { <FilterComponent active={this.state.active} filterQuery={this.state.filterQuery} - onChange={this.updateSearch} + onChange={this.handleOnChange} /> ); }