},
view: {
position: 'absolute',
- width: '100%'
+ width: '100%',
+ zIndex: 10000
}
};
};
searchValue: string;
currentView: string;
isPopoverOpen: boolean;
+ savedQueries: string[];
} & SearchBarAutocompleteViewDataProps;
interface SearchBarActionProps {
onSearch: (value: string) => any;
debounce?: number;
onSetView: (currentView: string) => void;
- openView: () => void;
closeView: () => void;
saveRecentQuery: (query: string) => void;
loadRecentQueries: () => string[];
saveQuery: (query: string) => void;
- loadSavedQueries: () => string[];
deleteSavedQuery: (id: number) => void;
+ openSearchView: () => void;
}
type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
timeout: number;
render() {
- const { classes, currentView, openView, closeView, isPopoverOpen } = this.props;
+ const { classes, currentView, openSearchView, closeView, isPopoverOpen } = this.props;
return <ClickAwayListener onClickAway={() => closeView()}>
<Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
<form onSubmit={this.handleSubmit} className={classes.searchBar}>
value={this.state.value}
fullWidth={true}
disableUnderline={true}
- onClick={() => openView()}
+ onClick={() => openSearchView()}
endAdornment={
<InputAdornment position="end">
<Tooltip title='Search'>
}
getView = (currentView: string) => {
+ const { onSetView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue, searchResults } = this.props;
switch (currentView) {
case SearchView.BASIC:
- return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadRecentQueries} savedQueries={this.props.loadSavedQueries} deleteSavedQuery={this.props.deleteSavedQuery}/>;
+ return <SearchBarBasicView setView={onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery} />;
case SearchView.ADVANCED:
- return <SearchBarAdvancedView setView={this.props.onSetView} />;
+ return <SearchBarAdvancedView setView={onSetView} />;
case SearchView.AUTOCOMPLETE:
return <SearchBarAutocompleteView
- searchResults={this.props.searchResults}
- searchValue={this.props.searchValue} />;
+ searchResults={searchResults}
+ searchValue={searchValue} />;
default:
- return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadRecentQueries} savedQueries={this.props.loadSavedQueries} deleteSavedQuery={this.props.deleteSavedQuery}/>;
+ return <SearchBarBasicView setView={onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery} />;
}
}
this.props.saveQuery(this.state.value);
this.props.onSearch(this.state.value);
this.props.loadRecentQueries();
- this.props.loadSavedQueries();
}
handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {