35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
import React, { Component, PropTypes } from "react";
|
|
|
|
export default class FilterBar extends Component {
|
|
constructor (props) {
|
|
super(props);
|
|
this.handleChange = this.handleChange.bind(this);
|
|
}
|
|
|
|
handleChange (e) {
|
|
e.preventDefault();
|
|
|
|
this.props.onUserInput(this.refs.filterTextInput.value);
|
|
}
|
|
|
|
render () {
|
|
return (
|
|
<div className="filter">
|
|
<p className="col-xs-12 col-sm-6 col-md-4 col-md-offset-1 filter-legend">What are we listening to today?</p>
|
|
<div className="col-xs-12 col-sm-6 col-md-4 input-group">
|
|
<form className="form-inline" onSubmit={this.handleChange}>
|
|
<div className="form-group">
|
|
<input type="text" className="form-control filter-input" placeholder="Filter…" aria-label="Filter…" value={this.props.filterText} onChange={this.handleChange} ref="filterTextInput" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
FilterBar.propTypes = {
|
|
onUserInput: PropTypes.func,
|
|
filterText: PropTypes.string
|
|
};
|