[ARVADOS-WORKBENCH2] created: 1.3.0-243-g9e5ba9af
Git user
git at public.curoverse.com
Fri Dec 21 10:54:38 EST 2018
at 9e5ba9af996126cdf1186df49ff4c177af62e41d (commit)
commit 9e5ba9af996126cdf1186df49ff4c177af62e41d
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Dec 21 16:54:24 2018 +0100
Create a Backdrop layer for SearchBarView
Feature #14649
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index 51ea3fa1..6251308d 100644
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -11,7 +11,6 @@ import {
WithStyles,
Tooltip,
InputAdornment, Input,
- ClickAwayListener
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
@@ -41,12 +40,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
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',
@@ -144,10 +145,14 @@ const handleDropdownClick = (e: React.MouseEvent, props: SearchBarViewProps) =>
};
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
@@ -179,10 +184,10 @@ export const SearchBarView = withStyles(styles)(
} />
</form>
<div className={classes.view}>
- {isPopoverOpen && getView({...props})}
+ {isPopoverOpen && getView({ ...props })}
</div>
</Paper >
- </ClickAwayListener>
+ </>
);
}
);
@@ -211,3 +216,16 @@ const getView = (props: SearchBarViewProps) => {
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} />);
commit 51cd088a325c728b9322a151a579236ce73ef006
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Dec 21 16:46:06 2018 +0100
Restore ClickAwayListener usage to SearchBarView
Feature #14649
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index 8d767b2b..51ea3fa1 100644
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -11,7 +11,7 @@ import {
WithStyles,
Tooltip,
InputAdornment, Input,
- Popover,
+ ClickAwayListener
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
@@ -144,99 +144,49 @@ const handleDropdownClick = (e: React.MouseEvent, props: SearchBarViewProps) =>
};
export const SearchBarView = withStyles(styles)(
- 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>
+ (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>
- <SearchViewContainer
- {...props}
- width={this.getViewWidth()}
- anchorEl={this.viewAnchorRef.current}>
- <form onSubmit={props.onSubmit}>
- <SearchInput
- {...props}
- autoFocus
- disableClickHandler />
- </form>
- {getView({ ...props })}
- </SearchViewContainer>
</Paper >
- );
- }
-
- getViewWidth() {
- const { current } = this.viewAnchorRef;
- return current ? current.offsetWidth : 0;
- }
+ </ClickAwayListener>
+ );
}
-
);
-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:
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list