WithStyles,
Tooltip,
InputAdornment, Input,
- ClickAwayListener
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
container: {
position: 'relative',
width: '100%',
- borderRadius: theme.spacing.unit / 2
+ borderRadius: theme.spacing.unit / 2,
+ zIndex: theme.zIndex.modal,
},
containerSearchViewOpened: {
position: 'relative',
width: '100%',
- borderRadius: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px 0 0`
+ borderRadius: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px 0 0`,
+ zIndex: theme.zIndex.modal,
},
input: {
border: 'none',
loadRecentQueries: () => string[];
moveUp: () => void;
moveDown: () => void;
+ setAdvancedDataFromSearchValue: (search: string) => void;
}
type SearchBarViewProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
if (e.keyCode === KEY_CODE_DOWN) {
e.preventDefault();
if (!props.isPopoverOpen) {
+ props.onSetView(SearchView.AUTOCOMPLETE);
props.openSearchView();
} else {
props.moveDown();
}
};
+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) => {
+ (props: SearchBarViewProps) => {
const { classes, isPopoverOpen } = props;
return (
- <ClickAwayListener onClickAway={props.closeView}>
+ <>
+
+ {isPopoverOpen &&
+ <Backdrop onClick={props.closeView} />}
+
<Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
<form onSubmit={props.onSubmit}>
<Input
value={props.searchValue}
fullWidth={true}
disableUnderline={true}
- onClick={props.openSearchView}
+ onClick={e => handleInputClick(e, props)}
onKeyDown={e => handleKeyDown(e, props)}
startAdornment={
<InputAdornment position="start">
endAdornment={
<InputAdornment position="end">
<Tooltip title='Advanced search'>
- <IconButton onClick={() => props.onSetView(SearchView.ADVANCED)}>
+ <IconButton onClick={e => handleDropdownClick(e, props)}>
<ArrowDropDownIcon />
</IconButton>
</Tooltip>
} />
</form>
<div className={classes.view}>
- {isPopoverOpen && getView({...props})}
+ {isPopoverOpen && getView({ ...props })}
</div>
</Paper >
- </ClickAwayListener>
+ </>
);
}
);
case SearchView.ADVANCED:
return <SearchBarAdvancedView
closeAdvanceView={props.closeAdvanceView}
- tags={props.tags} />;
+ tags={props.tags}
+ saveQuery={props.saveQuery} />;
default:
return <SearchBarBasicView
onSetView={props.onSetView}
selectedItem={props.selectedItem} />;
}
};
+
+const Backdrop = withStyles<'backdrop'>(theme => ({
+ backdrop: {
+ position: 'fixed',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ zIndex: theme.zIndex.modal
+ }
+}))(
+ ({ classes, ...props }: WithStyles<'backdrop'> & React.HTMLProps<HTMLDivElement>) =>
+ <div className={classes.backdrop} {...props} />);