ClickAwayListener
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import { ArvadosTheme } from '~/common/custom-theme';
import { SearchView } from '~/store/search-bar/search-bar-reducer';
import {
},
input: {
border: 'none',
- padding: `0px ${theme.spacing.unit}px`
+ padding: `0`
},
view: {
position: 'absolute',
loadRecentQueries: () => string[];
moveUp: () => void;
moveDown: () => void;
+ setAdvancedDataFromSearchValue: (search: string) => void;
}
type SearchBarViewProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
+const handleKeyDown = (e: React.KeyboardEvent, props: SearchBarViewProps) => {
+ if (e.keyCode === KEY_CODE_DOWN) {
+ e.preventDefault();
+ if (!props.isPopoverOpen) {
+ props.onSetView(SearchView.AUTOCOMPLETE);
+ props.openSearchView();
+ } else {
+ props.moveDown();
+ }
+ } else if (e.keyCode === KEY_CODE_UP) {
+ e.preventDefault();
+ props.moveUp();
+ } else if (e.keyCode === KEY_CODE_ESC) {
+ e.preventDefault();
+ props.closeView();
+ } else if (e.keyCode === KEY_ENTER) {
+ if (props.currentView === SearchView.BASIC) {
+ e.preventDefault();
+ props.onSearch(props.selectedItem.query);
+ } else if (props.currentView === SearchView.AUTOCOMPLETE) {
+ if (props.selectedItem.id !== props.searchValue) {
+ e.preventDefault();
+ props.navigateTo(props.selectedItem.id);
+ }
+ }
+ }
+};
+
+const handleInputClick = (e: React.MouseEvent, props: SearchBarViewProps) => {
+ if (props.searchValue) {
+ props.onSetView(SearchView.AUTOCOMPLETE);
+ props.openSearchView();
+ } else {
+ props.closeView();
+ }
+};
+
+const handleDropdownClick = (e: React.MouseEvent, props: SearchBarViewProps) => {
+ e.stopPropagation();
+ if (props.isPopoverOpen) {
+ if (props.currentView === SearchView.ADVANCED) {
+ props.closeView();
+ } else {
+ props.setAdvancedDataFromSearchValue(props.searchValue);
+ props.onSetView(SearchView.ADVANCED);
+ }
+ } else {
+ props.setAdvancedDataFromSearchValue(props.searchValue);
+ props.onSetView(SearchView.ADVANCED);
+ }
+};
+
export const SearchBarView = withStyles(styles)(
(props : SearchBarViewProps) => {
const { classes, isPopoverOpen } = props;
value={props.searchValue}
fullWidth={true}
disableUnderline={true}
- onClick={props.openSearchView}
- onKeyDown={e => {
- if (e.keyCode === KEY_CODE_DOWN) {
- e.preventDefault();
- if (!isPopoverOpen) {
- props.openSearchView();
- } else {
- props.moveDown();
- }
- } else if (e.keyCode === KEY_CODE_UP) {
- e.preventDefault();
- props.moveUp();
- } else if (e.keyCode === KEY_CODE_ESC) {
- props.closeView();
- } else if (e.keyCode === KEY_ENTER) {
- if (props.selectedItem !== props.searchValue) {
- e.preventDefault();
- props.navigateTo(props.selectedItem);
- }
- }
- }}
- endAdornment={
- <InputAdornment position="end">
+ onClick={e => handleInputClick(e, props)}
+ onKeyDown={e => handleKeyDown(e, props)}
+ startAdornment={
+ <InputAdornment position="start">
<Tooltip title='Search'>
<IconButton type="submit">
<SearchIcon />
</IconButton>
</Tooltip>
</InputAdornment>
+ }
+ endAdornment={
+ <InputAdornment position="end">
+ <Tooltip title='Advanced search'>
+ <IconButton onClick={e => handleDropdownClick(e, props)}>
+ <ArrowDropDownIcon />
+ </IconButton>
+ </Tooltip>
+ </InputAdornment>
} />
</form>
<div className={classes.view}>
case SearchView.ADVANCED:
return <SearchBarAdvancedView
closeAdvanceView={props.closeAdvanceView}
- tags={props.tags} />;
+ tags={props.tags}
+ saveQuery={props.saveQuery} />;
default:
return <SearchBarBasicView
onSetView={props.onSetView}
loadRecentQueries={props.loadRecentQueries}
savedQueries={props.savedQueries}
deleteSavedQuery={props.deleteSavedQuery}
- editSavedQuery={props.editSavedQuery} />;
+ editSavedQuery={props.editSavedQuery}
+ selectedItem={props.selectedItem} />;
}
};