WithStyles,
Tooltip,
InputAdornment, Input,
- ListItem, ListItemText, ListItemSecondaryAction,
ClickAwayListener
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
-import { RemoveIcon } from '~/components/icon/icon';
-import { SearchView } from '~/store/search-bar/search-bar-reducer';
-import { SearchBarBasicView } from '~/views-components/search-bar/search-bar-basic-view';
-import { SearchBarAdvancedView } from '~/views-components/search-bar/search-bar-advanced-view';
-import { SearchBarAutocompleteView, SearchBarAutocompleteViewDataProps } from '~/views-components/search-bar/search-bar-autocomplete-view';
import { ArvadosTheme } from '~/common/custom-theme';
+import { SearchView } from '~/store/search-bar/search-bar-reducer';
+import {
+ SearchBarBasicView,
+ SearchBarBasicViewDataProps,
+ SearchBarBasicViewActionProps
+} from '~/views-components/search-bar/search-bar-basic-view';
+import {
+ SearchBarAutocompleteView,
+ SearchBarAutocompleteViewDataProps,
+ SearchBarAutocompleteViewActionProps
+} from '~/views-components/search-bar/search-bar-autocomplete-view';
+import {
+ SearchBarAdvancedView,
+ SearchBarAdvancedViewDataProps,
+ SearchBarAdvancedViewActionProps
+} from '~/views-components/search-bar/search-bar-advanced-view';
-type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'searchBar' | 'view';
+type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'view';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
return {
container: {
position: 'relative',
width: '100%',
- borderRadius: theme.spacing.unit / 4
+ borderRadius: theme.spacing.unit / 2
},
containerSearchViewOpened: {
position: 'relative',
width: '100%',
- borderRadius: `${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px 0 0`
+ borderRadius: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px 0 0`
},
input: {
border: 'none',
padding: `0px ${theme.spacing.unit}px`
},
- searchBar: {
- height: '30px'
- },
view: {
position: 'absolute',
- width: '100%'
+ width: '100%',
+ zIndex: 1
}
};
};
-type SearchBarDataProps = {
+export type SearchBarDataProps = SearchBarViewDataProps
+ & SearchBarAutocompleteViewDataProps
+ & SearchBarAdvancedViewDataProps
+ & SearchBarBasicViewDataProps;
+
+interface SearchBarViewDataProps {
searchValue: string;
currentView: string;
- open: boolean;
-} & SearchBarAutocompleteViewDataProps;
-
-interface SearchBarActionProps {
- onSearch: (value: string) => any;
+ isPopoverOpen: boolean;
debounce?: number;
- onSetView: (currentView: string) => void;
- openView: () => void;
- closeView: () => void;
- saveQuery: (query: string) => void;
- loadQueries: () => string[];
}
-type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
-
-interface SearchBarState {
- value: string;
-}
+export type SearchBarActionProps = SearchBarViewActionProps
+ & SearchBarAutocompleteViewActionProps
+ & SearchBarAdvancedViewActionProps
+ & SearchBarBasicViewActionProps;
-interface RenderQueriesProps {
- text: string | JSX.Element;
+interface SearchBarViewActionProps {
+ onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+ onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+ onSetView: (currentView: string) => void;
+ closeView: () => void;
+ openSearchView: () => void;
+ loadRecentQueries: () => string[];
}
-export const RecentQueriesItem = (props: RenderQueriesProps) => {
- return <ListItem button>
- <ListItemText secondary={props.text} />
- </ListItem>;
-};
-
-
-export const RenderSavedQueries = (props: RenderQueriesProps) => {
- return <ListItem button>
- <ListItemText secondary={props.text} />
- <ListItemSecondaryAction>
- <Tooltip title="Remove">
- <IconButton aria-label="Remove">
- <RemoveIcon />
- </IconButton>
- </Tooltip>
- </ListItemSecondaryAction>
- </ListItem>;
-};
-
-export const DEFAULT_SEARCH_DEBOUNCE = 1000;
+type SearchBarViewProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
export const SearchBarView = withStyles(styles)(
- class extends React.Component<SearchBarProps> {
- state: SearchBarState = {
- value: ""
- };
-
- timeout: number;
-
- render() {
- const { classes, currentView, openView, closeView, open } = this.props;
- return <ClickAwayListener onClickAway={() => closeView()}>
- <Paper className={open ? classes.containerSearchViewOpened : classes.container} >
- <form onSubmit={this.handleSubmit} className={classes.searchBar}>
+ (props : SearchBarViewProps) => {
+ const { classes, isPopoverOpen, closeView, searchValue, openSearchView, onChange, onSubmit } = props;
+ return (
+ <ClickAwayListener onClickAway={closeView}>
+ <Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
+ <form onSubmit={onSubmit}>
<Input
className={classes.input}
- onChange={this.handleChange}
+ onChange={onChange}
placeholder="Search"
- value={this.state.value}
+ value={searchValue}
fullWidth={true}
disableUnderline={true}
- onClick={() => openView()}
+ onClick={openSearchView}
endAdornment={
<InputAdornment position="end">
<Tooltip title='Search'>
- <IconButton>
+ <IconButton type="submit">
<SearchIcon />
</IconButton>
</Tooltip>
} />
</form>
<div className={classes.view}>
- {open && this.getView(currentView)}
+ {isPopoverOpen && getView({...props})}
</div>
- </Paper>
- </ClickAwayListener>;
- }
-
- componentDidMount() {
- this.setState({ value: this.props.searchValue });
- }
-
- componentWillReceiveProps(nextProps: SearchBarProps) {
- if (nextProps.searchValue !== this.props.searchValue) {
- this.setState({ value: nextProps.searchValue });
- }
- }
-
- componentWillUnmount() {
- clearTimeout(this.timeout);
- }
-
- getView = (currentView: string) => {
- switch (currentView) {
- case SearchView.BASIC:
- return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadQueries} />;
- case SearchView.ADVANCED:
- return <SearchBarAdvancedView setView={this.props.onSetView} />;
- case SearchView.AUTOCOMPLETE:
- return <SearchBarAutocompleteView
- searchResults={this.props.searchResults}
- searchValue={this.props.searchValue} />;
- default:
- return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadQueries} />;
- }
- }
-
- handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
- event.preventDefault();
- clearTimeout(this.timeout);
- this.props.saveQuery(this.state.value);
- this.props.onSearch(this.state.value);
- this.props.loadQueries();
- }
-
- handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- clearTimeout(this.timeout);
- this.setState({ value: event.target.value });
- this.timeout = window.setTimeout(
- () => this.props.onSearch(this.state.value),
- this.props.debounce || DEFAULT_SEARCH_DEBOUNCE
- );
- if (event.target.value.length > 0) {
- this.props.onSetView(SearchView.AUTOCOMPLETE);
- } else {
- this.props.onSetView(SearchView.BASIC);
- }
- }
+ </Paper >
+ </ClickAwayListener>
+ );
}
);
+
+const getView = (props: SearchBarViewProps) => {
+ const { onSetView, closeAdvanceView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue,
+ searchResults, onSearch, navigateTo, editSavedQuery, tags, currentView } = props;
+ switch (currentView) {
+ case SearchView.AUTOCOMPLETE:
+ return <SearchBarAutocompleteView
+ navigateTo={navigateTo}
+ searchResults={searchResults}
+ searchValue={searchValue} />;
+ case SearchView.ADVANCED:
+ return <SearchBarAdvancedView
+ closeAdvanceView={closeAdvanceView}
+ tags={tags} />;
+ default:
+ return <SearchBarBasicView
+ onSetView={onSetView}
+ onSearch={onSearch}
+ loadRecentQueries={loadRecentQueries}
+ savedQueries={savedQueries}
+ deleteSavedQuery={deleteSavedQuery}
+ editSavedQuery={editSavedQuery} />;
+ }
+};
projects / arvados-workbench2.git / blobdiff