2016-08-10 21:36:11 +02:00
|
|
|
// NPM imports
|
2016-07-07 23:23:18 +02:00
|
|
|
import React, { Component, PropTypes } from "react";
|
2016-07-29 23:57:21 +02:00
|
|
|
import CSSModules from "react-css-modules";
|
2016-07-28 23:14:52 +02:00
|
|
|
import { defineMessages, injectIntl, intlShape, FormattedMessage } from "react-intl";
|
2016-07-07 23:23:18 +02:00
|
|
|
|
2016-08-10 21:36:11 +02:00
|
|
|
// Local imports
|
2016-07-28 23:14:52 +02:00
|
|
|
import { messagesMap } from "../../utils";
|
2016-08-10 21:36:11 +02:00
|
|
|
|
|
|
|
// Translations
|
2016-07-28 23:14:52 +02:00
|
|
|
import messages from "../../locales/messagesDescriptors/elements/FilterBar";
|
|
|
|
|
2016-08-10 21:36:11 +02:00
|
|
|
// Styles
|
2016-07-29 23:57:21 +02:00
|
|
|
import css from "../../styles/elements/FilterBar.scss";
|
|
|
|
|
2016-08-10 21:36:11 +02:00
|
|
|
// Define translations
|
2016-08-06 16:46:54 +02:00
|
|
|
const filterMessages = defineMessages(messagesMap(Array.concat([], messages)));
|
2016-07-28 23:14:52 +02:00
|
|
|
|
2016-08-10 21:36:11 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Filter bar element with input filter.
|
|
|
|
*/
|
2016-07-29 23:57:21 +02:00
|
|
|
class FilterBarCSSIntl extends Component {
|
2016-08-10 23:50:23 +02:00
|
|
|
constructor(props) {
|
2016-07-07 23:23:18 +02:00
|
|
|
super(props);
|
2016-08-10 21:36:11 +02:00
|
|
|
// Bind this on methods
|
2016-07-07 23:23:18 +02:00
|
|
|
this.handleChange = this.handleChange.bind(this);
|
|
|
|
}
|
|
|
|
|
2016-08-10 21:36:11 +02:00
|
|
|
/**
|
|
|
|
* Method to handle a change of filter input value.
|
|
|
|
*
|
|
|
|
* Calls the user input handler passed from parent component.
|
|
|
|
*
|
|
|
|
* @param e A JS event.
|
|
|
|
*/
|
2016-08-10 23:50:23 +02:00
|
|
|
handleChange(e) {
|
2016-07-07 23:23:18 +02:00
|
|
|
e.preventDefault();
|
|
|
|
this.props.onUserInput(this.refs.filterTextInput.value);
|
|
|
|
}
|
|
|
|
|
2016-08-10 23:50:23 +02:00
|
|
|
render() {
|
2016-07-28 23:14:52 +02:00
|
|
|
const {formatMessage} = this.props.intl;
|
2016-08-10 21:36:11 +02:00
|
|
|
|
2016-07-07 23:23:18 +02:00
|
|
|
return (
|
2016-07-29 23:57:21 +02:00
|
|
|
<div styleName="filter">
|
|
|
|
<p className="col-xs-12 col-sm-6 col-md-4 col-md-offset-1" styleName="legend" id="filterInputDescription">
|
2016-07-28 23:14:52 +02:00
|
|
|
<FormattedMessage {...filterMessages["app.filter.whatAreWeListeningToToday"]} />
|
|
|
|
</p>
|
2016-07-07 23:23:18 +02:00
|
|
|
<div className="col-xs-12 col-sm-6 col-md-4 input-group">
|
2016-08-02 13:07:12 +02:00
|
|
|
<form className="form-inline" onSubmit={this.handleChange} aria-describedby="filterInputDescription" role="search" aria-label={formatMessage(filterMessages["app.filter.filter"])}>
|
2016-07-29 23:57:21 +02:00
|
|
|
<div className="form-group" styleName="form-group">
|
2016-08-03 15:44:29 +02:00
|
|
|
<input type="search" 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" />
|
2016-07-07 23:23:18 +02:00
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2016-07-29 23:57:21 +02:00
|
|
|
FilterBarCSSIntl.propTypes = {
|
2016-07-07 23:23:18 +02:00
|
|
|
onUserInput: PropTypes.func,
|
2016-07-28 23:14:52 +02:00
|
|
|
filterText: PropTypes.string,
|
2016-08-10 23:50:23 +02:00
|
|
|
intl: intlShape.isRequired,
|
2016-07-07 23:23:18 +02:00
|
|
|
};
|
2016-07-29 23:57:21 +02:00
|
|
|
export default injectIntl(CSSModules(FilterBarCSSIntl, css));
|