WithStyles,
Tooltip,
InputAdornment, Input,
- ClickAwayListener
+ Popover,
} 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>;
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) => {
- const { classes, isPopoverOpen } = props;
- return (
- <ClickAwayListener onClickAway={props.closeView}>
- <Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
- <form onSubmit={props.onSubmit}>
- <Input
- className={classes.input}
- onChange={props.onChange}
- placeholder="Search"
- value={props.searchValue}
- fullWidth={true}
- disableUnderline={true}
- onClick={props.openSearchView}
- onKeyDown={e => handleKeyDown(e, props)}
- endAdornment={
- <InputAdornment position="end">
- <Tooltip title='Search'>
- <IconButton type="submit">
- <SearchIcon />
- </IconButton>
- </Tooltip>
- </InputAdornment>
- } />
- </form>
- <div className={classes.view}>
- {isPopoverOpen && getView({...props})}
+ class SearchBarView extends React.Component<SearchBarViewProps> {
+
+ viewAnchorRef = React.createRef<HTMLDivElement>();
+
+ render() {
+ const { children, ...props } = this.props;
+ const { classes } = props;
+ return (
+ <Paper className={classes.container}>
+ <div ref={this.viewAnchorRef}>
+ <form onSubmit={props.onSubmit}>
+ <SearchInput {...props} />
+ </form>
</div>
+ <SearchViewContainer
+ {...props}
+ width={this.getViewWidth()}
+ anchorEl={this.viewAnchorRef.current}>
+ <form onSubmit={props.onSubmit}>
+ <SearchInput
+ {...props}
+ autoFocus
+ disableClickHandler />
+ </form>
+ {getView({ ...props })}
+ </SearchViewContainer>
</Paper >
- </ClickAwayListener>
- );
+ );
+ }
+
+ getViewWidth() {
+ const { current } = this.viewAnchorRef;
+ return current ? current.offsetWidth : 0;
+ }
}
+
);
+const SearchInput = (props: SearchBarViewProps & { disableClickHandler?: boolean; autoFocus?: boolean }) => {
+ const { classes } = props;
+ return <Input
+ autoFocus={props.autoFocus}
+ className={classes.input}
+ onChange={props.onChange}
+ placeholder="Search"
+ value={props.searchValue}
+ fullWidth={true}
+ disableUnderline={true}
+ onClick={e => !props.disableClickHandler && 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>
+ } />;
+};
+
+const SearchViewContainer = (props: SearchBarViewProps & { width: number, anchorEl: HTMLElement | null, children: React.ReactNode }) =>
+ <Popover
+ PaperProps={{
+ style: { width: props.width }
+ }}
+ anchorEl={props.anchorEl}
+ anchorOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}
+ disableAutoFocus
+ open={props.isPopoverOpen}
+ onClose={props.closeView}>
+ {
+ props.children
+ }
+ </Popover>;
+
+
const getView = (props: SearchBarViewProps) => {
switch (props.currentView) {
case SearchView.AUTOCOMPLETE:
case SearchView.ADVANCED:
return <SearchBarAdvancedView
closeAdvanceView={props.closeAdvanceView}
- tags={props.tags} />;
+ tags={props.tags}
+ saveQuery={props.saveQuery} />;
default:
return <SearchBarBasicView
onSetView={props.onSetView}