1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
13 InputAdornment, Input,
14 ListItem, ListItemText, ListItemSecondaryAction,
16 } from '@material-ui/core';
17 import SearchIcon from '@material-ui/icons/Search';
18 import { RemoveIcon } from '~/components/icon/icon';
19 import { SearchView } from '~/store/search-bar/search-bar-reducer';
20 import { SearchBarBasicView } from '~/views-components/search-bar/search-bar-basic-view';
21 import { SearchBarAdvancedView } from '~/views-components/search-bar/search-bar-advanced-view';
22 import { SearchBarAutocompleteView, SearchBarAutocompleteViewDataProps } from '~/views-components/search-bar/search-bar-autocomplete-view';
23 import { ArvadosTheme } from '~/common/custom-theme';
25 type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'searchBar' | 'view';
27 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
32 borderRadius: theme.spacing.unit / 4
34 containerSearchViewOpened: {
37 borderRadius: `${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px 0 0`
41 padding: `0px ${theme.spacing.unit}px`
53 type SearchBarDataProps = {
56 isPopoverOpen: boolean;
57 } & SearchBarAutocompleteViewDataProps;
59 interface SearchBarActionProps {
60 onSearch: (value: string) => any;
62 onSetView: (currentView: string) => void;
64 closeView: () => void;
65 saveRecentQuery: (query: string) => void;
66 loadRecentQueries: () => string[];
67 saveQuery: (query: string) => void;
68 loadSavedQueries: () => string[];
69 deleteSavedQuery: (id: number) => void;
72 type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
74 interface SearchBarState {
78 interface RenderSavedQueriesProps {
79 text: string | JSX.Element;
81 deleteSavedQuery: (id: number) => void;
84 interface RenderRecentQueriesProps {
85 text: string | JSX.Element;
88 export const RecentQueriesItem = (props: RenderRecentQueriesProps) => {
89 return <ListItem button>
90 <ListItemText secondary={props.text} />
95 export const RenderSavedQueries = (props: RenderSavedQueriesProps) => {
96 return <ListItem button>
97 <ListItemText secondary={props.text} />
98 <ListItemSecondaryAction>
99 <Tooltip title="Remove">
100 <IconButton aria-label="Remove" onClick={() => props.deleteSavedQuery(props.id)}>
104 </ListItemSecondaryAction>
108 export const DEFAULT_SEARCH_DEBOUNCE = 1000;
110 export const SearchBarView = withStyles(styles)(
111 class extends React.Component<SearchBarProps> {
112 state: SearchBarState = {
119 const { classes, currentView, openView, closeView, isPopoverOpen } = this.props;
120 return <ClickAwayListener onClickAway={() => closeView()}>
121 <Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
122 <form onSubmit={this.handleSubmit} className={classes.searchBar}>
124 className={classes.input}
125 onChange={this.handleChange}
127 value={this.state.value}
129 disableUnderline={true}
130 onClick={() => openView()}
132 <InputAdornment position="end">
133 <Tooltip title='Search'>
141 <div className={classes.view}>
142 {isPopoverOpen && this.getView(currentView)}
145 </ClickAwayListener>;
148 componentDidMount() {
149 this.setState({ value: this.props.searchValue });
152 componentWillReceiveProps(nextProps: SearchBarProps) {
153 if (nextProps.searchValue !== this.props.searchValue) {
154 this.setState({ value: nextProps.searchValue });
158 componentWillUnmount() {
159 clearTimeout(this.timeout);
162 getView = (currentView: string) => {
163 switch (currentView) {
164 case SearchView.BASIC:
165 return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadRecentQueries} savedQueries={this.props.loadSavedQueries} deleteSavedQuery={this.props.deleteSavedQuery}/>;
166 case SearchView.ADVANCED:
167 return <SearchBarAdvancedView setView={this.props.onSetView} />;
168 case SearchView.AUTOCOMPLETE:
169 return <SearchBarAutocompleteView
170 searchResults={this.props.searchResults}
171 searchValue={this.props.searchValue} />;
173 return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadRecentQueries} savedQueries={this.props.loadSavedQueries} deleteSavedQuery={this.props.deleteSavedQuery}/>;
177 handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
178 event.preventDefault();
179 clearTimeout(this.timeout);
180 this.props.saveRecentQuery(this.state.value);
181 this.props.saveQuery(this.state.value);
182 this.props.onSearch(this.state.value);
183 this.props.loadRecentQueries();
184 this.props.loadSavedQueries();
187 handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
188 clearTimeout(this.timeout);
189 this.setState({ value: event.target.value });
190 this.timeout = window.setTimeout(
191 () => this.props.onSearch(this.state.value),
192 this.props.debounce || DEFAULT_SEARCH_DEBOUNCE
194 if (event.target.value.length > 0) {
195 this.props.onSetView(SearchView.AUTOCOMPLETE);
197 this.props.onSetView(SearchView.BASIC);