50 lines
1.9 KiB
JavaScript
50 lines
1.9 KiB
JavaScript
import React, { Component, PropTypes } from "react";
|
|
import CSSModules from "react-css-modules";
|
|
import { defineMessages, injectIntl, intlShape, FormattedMessage } from "react-intl";
|
|
|
|
import { messagesMap } from "../../utils";
|
|
import messages from "../../locales/messagesDescriptors/elements/FilterBar";
|
|
|
|
import css from "../../styles/elements/FilterBar.scss";
|
|
|
|
const filterMessages = defineMessages(messagesMap(messages));
|
|
|
|
class FilterBarCSSIntl extends Component {
|
|
constructor (props) {
|
|
super(props);
|
|
this.handleChange = this.handleChange.bind(this);
|
|
}
|
|
|
|
handleChange (e) {
|
|
e.preventDefault();
|
|
|
|
this.props.onUserInput(this.refs.filterTextInput.value);
|
|
}
|
|
|
|
render () {
|
|
const {formatMessage} = this.props.intl;
|
|
return (
|
|
<div styleName="filter">
|
|
<p className="col-xs-12 col-sm-6 col-md-4 col-md-offset-1" styleName="legend" id="filterInputDescription">
|
|
<FormattedMessage {...filterMessages["app.filter.whatAreWeListeningToToday"]} />
|
|
</p>
|
|
<div className="col-xs-12 col-sm-6 col-md-4 input-group">
|
|
<form className="form-inline" onSubmit={this.handleChange} aria-describedby="filterInputDescription">
|
|
<div className="form-group" styleName="form-group">
|
|
<input type="text" className="form-control" placeholder={formatMessage(filterMessages["app.filter.filter"])} aria-label={formatMessage(filterMessages["app.filter.filter"])} value={this.props.filterText} onChange={this.handleChange} ref="filterTextInput" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
FilterBarCSSIntl.propTypes = {
|
|
onUserInput: PropTypes.func,
|
|
filterText: PropTypes.string,
|
|
intl: intlShape.isRequired
|
|
};
|
|
|
|
export default injectIntl(CSSModules(FilterBarCSSIntl, css));
|