62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
var React = require('react'),
|
|
Router = require('react-router');
|
|
|
|
var NavigationActions = require('../../actions/navigationActions');
|
|
var SearchActions = require('../../actions/searchActions');
|
|
var SearchStore = require('../../stores/searchStore');
|
|
|
|
var SearchBox = React.createClass({
|
|
getInitialState: function() {
|
|
return SearchStore.getSearchBoxState();
|
|
},
|
|
onSearchClick: function(e) {
|
|
this.doSearch();
|
|
e.preventDefault();
|
|
},
|
|
componentDidMount: function() {
|
|
SearchStore.addChangeListener(this.onSearchStoreChange);
|
|
},
|
|
componentWillUnmount: function() {
|
|
SearchStore.removeChangeListener(this.onSearchStoreChange);
|
|
},
|
|
onSearchStoreChange: function() {
|
|
if(this.isMounted()) {
|
|
this.setState(SearchStore.getSearchBoxState());
|
|
}
|
|
},
|
|
onSearchBoxChange: function(e) {
|
|
SearchActions.searchBoxChange(e.currentTarget.value);
|
|
},
|
|
doSearch: function() {
|
|
if(this.state.q.trim() !== '') {
|
|
NavigationActions.goToSearchResults(this.state.q);
|
|
}
|
|
},
|
|
onKeyPress: function(e) {
|
|
var enterKeyCode = 13;
|
|
if(e.which == enterKeyCode) {
|
|
this.doSearch();
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
render: function() {
|
|
return (<form style={ {marginLeft: '60px', width: '100%'} } className="form-inline">
|
|
<div className="left-inner-addon">
|
|
<i className="glyphicon glyphicon-search"></i>
|
|
<input style={{width: '75%'}} type="search" onKeyPress={this.onKeyPress}
|
|
className="search-box form-control"
|
|
value={this.state.q} onChange={this.onSearchBoxChange}
|
|
aria-hidden="true">
|
|
|
|
</input>
|
|
|
|
<button className="btn btn-default search-button" type="button"
|
|
onClick={this.onSearchClick}>Traži</button>
|
|
|
|
</div>
|
|
</form>)
|
|
}
|
|
});
|
|
|
|
module.exports = SearchBox;
|