-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={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}>
- {isPopoverOpen && getView({...props})}
- </div>
- </Paper >
- </ClickAwayListener>
- );
- }
-);
+export const SearchBarView = compose(connectVocabulary, withStyles(styles))(
+ class extends React.Component<SearchBarViewProps> {
+
+ 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 } = this.props;
+ return (
+ <>
+
+ {isPopoverOpen &&
+ <Backdrop onClick={props.closeView} />}
+
+ <Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
+ <form onSubmit={this.handleSubmit}>
+ <Input
+ data-cy='searchbar-input-field'
+ className={classes.input}
+ onChange={this.handleChange}
+ placeholder="Search"
+ value={props.searchValue}
+ fullWidth={true}
+ disableUnderline={true}
+ 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}>
+ {isPopoverOpen && getView({ ...props })}
+ </div>
+ </Paper >
+ </>
+ );
+ }
+ });