-const SearchViewContainer = (props: SearchBarViewProps & { width: number, anchorEl: HTMLElement | null, children: React.ReactNode }) =>
- <Popover
- PaperProps={{
- style: {
- width: props.width,
- borderRadius: '0 0 4px 4px',
- }
- }}
- anchorEl={props.anchorEl}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'center',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}
- disableAutoFocus
- open={props.isPopoverOpen}
- onClose={props.closeView}>
- {
- props.children
+ 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 >
+ </>
+ );