WithStyles,
Tooltip,
InputAdornment, Input,
- Popover,
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
SearchBarAdvancedViewActionProps
} from '~/views-components/search-bar/search-bar-advanced-view';
import { KEY_CODE_DOWN, KEY_CODE_ESC, KEY_CODE_UP, KEY_ENTER } from "~/common/codes";
+import { debounce } from 'debounce';
type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'view';
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',
};
export const SearchBarView = withStyles(styles)(
- class SearchBarView extends React.Component<SearchBarViewProps> {
+ class extends React.Component<SearchBarViewProps> {
- viewAnchorRef = React.createRef<HTMLDivElement>();
+ debouncedSearch = debounce(() => {
+ this.props.onSearch(this.props.searchValue);
+ }, 1000);
+
+ handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ this.debouncedSearch();
+ this.props.onChange(event);
+ }
+
+ handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+ this.debouncedSearch.clear();
+ this.props.onSubmit(event);
+ }
+
+ componentWillUnmount() {
+ this.debouncedSearch.clear();
+ }
render() {
const { children, ...props } = this.props;
- const { classes, isPopoverOpen } = props;
+ const { classes, isPopoverOpen } = this.props;
return (
- <Paper
- className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container}>
- <div ref={this.viewAnchorRef}>
- <form onSubmit={props.onSubmit}>
+ <>
+
+ {isPopoverOpen &&
+ <Backdrop onClick={props.closeView} />}
+
+ <Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
+ <form onSubmit={this.handleSubmit}>
<Input
className={classes.input}
- onChange={props.onChange}
+ onChange={this.handleChange}
placeholder="Search"
value={props.searchValue}
fullWidth={true}
</InputAdornment>
} />
</form>
- </div>
- <Popover
- PaperProps={{
- style: {
- width: this.getViewWidth(),
- borderRadius: '0 0 4px 4px',
- }
- }}
- anchorEl={this.viewAnchorRef.current}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'center',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}
- disableAutoFocus
- open={isPopoverOpen}
- onClose={props.closeView}>
- {getView({ ...props })}
- </Popover>
- </Paper >
+ <div className={classes.view}>
+ {isPopoverOpen && getView({ ...props })}
+ </div>
+ </Paper >
+ </>
);
}
-
- getViewWidth() {
- const { current } = this.viewAnchorRef;
- return current ? current.offsetWidth : 0;
- }
- }
-
-);
+ });
const getView = (props: SearchBarViewProps) => {
switch (props.currentView) {
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} />);