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,
15 } from '@material-ui/core';
16 import SearchIcon from '@material-ui/icons/Search';
17 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
18 import { ArvadosTheme } from '~/common/custom-theme';
19 import { SearchView } from '~/store/search-bar/search-bar-reducer';
22 SearchBarBasicViewDataProps,
23 SearchBarBasicViewActionProps
24 } from '~/views-components/search-bar/search-bar-basic-view';
26 SearchBarAutocompleteView,
27 SearchBarAutocompleteViewDataProps,
28 SearchBarAutocompleteViewActionProps
29 } from '~/views-components/search-bar/search-bar-autocomplete-view';
31 SearchBarAdvancedView,
32 SearchBarAdvancedViewDataProps,
33 SearchBarAdvancedViewActionProps
34 } from '~/views-components/search-bar/search-bar-advanced-view';
35 import { KEY_CODE_DOWN, KEY_CODE_ESC, KEY_CODE_UP, KEY_ENTER } from "~/common/codes";
37 type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'view';
39 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
44 borderRadius: theme.spacing.unit / 2
46 containerSearchViewOpened: {
49 borderRadius: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px 0 0`
63 export type SearchBarDataProps = SearchBarViewDataProps
64 & SearchBarAutocompleteViewDataProps
65 & SearchBarAdvancedViewDataProps
66 & SearchBarBasicViewDataProps;
68 interface SearchBarViewDataProps {
71 isPopoverOpen: boolean;
75 export type SearchBarActionProps = SearchBarViewActionProps
76 & SearchBarAutocompleteViewActionProps
77 & SearchBarAdvancedViewActionProps
78 & SearchBarBasicViewActionProps;
80 interface SearchBarViewActionProps {
81 onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
82 onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
83 onSetView: (currentView: string) => void;
84 closeView: () => void;
85 openSearchView: () => void;
86 loadRecentQueries: () => string[];
89 setAdvancedDataFromSearchValue: (search: string) => void;
92 type SearchBarViewProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
94 const handleKeyDown = (e: React.KeyboardEvent, props: SearchBarViewProps) => {
95 if (e.keyCode === KEY_CODE_DOWN) {
97 if (!props.isPopoverOpen) {
98 props.onSetView(SearchView.AUTOCOMPLETE);
99 props.openSearchView();
103 } else if (e.keyCode === KEY_CODE_UP) {
106 } else if (e.keyCode === KEY_CODE_ESC) {
109 } else if (e.keyCode === KEY_ENTER) {
110 if (props.currentView === SearchView.BASIC) {
112 props.onSearch(props.selectedItem.query);
113 } else if (props.currentView === SearchView.AUTOCOMPLETE) {
114 if (props.selectedItem.id !== props.searchValue) {
116 props.navigateTo(props.selectedItem.id);
122 const handleInputClick = (e: React.MouseEvent, props: SearchBarViewProps) => {
123 if (props.searchValue) {
124 props.onSetView(SearchView.AUTOCOMPLETE);
125 props.openSearchView();
131 const handleDropdownClick = (e: React.MouseEvent, props: SearchBarViewProps) => {
133 if (props.isPopoverOpen) {
134 if (props.currentView === SearchView.ADVANCED) {
137 props.setAdvancedDataFromSearchValue(props.searchValue);
138 props.onSetView(SearchView.ADVANCED);
141 props.setAdvancedDataFromSearchValue(props.searchValue);
142 props.onSetView(SearchView.ADVANCED);
146 export const SearchBarView = withStyles(styles)(
147 class SearchBarView extends React.Component<SearchBarViewProps> {
149 viewAnchorRef = React.createRef<HTMLDivElement>();
152 const { children, ...props } = this.props;
153 const { classes, isPopoverOpen } = props;
156 className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container}>
157 <div ref={this.viewAnchorRef}>
158 <form onSubmit={props.onSubmit}>
159 <SearchInput {...props} />
164 width={this.getViewWidth()}
165 anchorEl={this.viewAnchorRef.current}>
167 getView({ ...props })
169 </SearchViewContainer>
175 const { current } = this.viewAnchorRef;
176 return current ? current.offsetWidth : 0;
182 const SearchInput = (props: SearchBarViewProps) => {
183 const { classes } = props;
185 className={classes.input}
186 onChange={props.onChange}
188 value={props.searchValue}
190 disableUnderline={true}
191 onClick={e => handleInputClick(e, props)}
192 onKeyDown={e => handleKeyDown(e, props)}
194 <InputAdornment position="start">
195 <Tooltip title='Search'>
196 <IconButton type="submit">
203 <InputAdornment position="end">
204 <Tooltip title='Advanced search'>
205 <IconButton onClick={e => handleDropdownClick(e, props)}>
206 <ArrowDropDownIcon />
213 const SearchViewContainer = (props: SearchBarViewProps & { width: number, anchorEl: HTMLElement | null, children: React.ReactNode }) =>
218 borderRadius: '0 0 4px 4px',
221 anchorEl={props.anchorEl}
224 horizontal: 'center',
228 horizontal: 'center',
231 open={props.isPopoverOpen}
232 onClose={props.closeView}>
239 const getView = (props: SearchBarViewProps) => {
240 switch (props.currentView) {
241 case SearchView.AUTOCOMPLETE:
242 return <SearchBarAutocompleteView
243 navigateTo={props.navigateTo}
244 searchResults={props.searchResults}
245 searchValue={props.searchValue}
246 selectedItem={props.selectedItem} />;
247 case SearchView.ADVANCED:
248 return <SearchBarAdvancedView
249 closeAdvanceView={props.closeAdvanceView}
251 saveQuery={props.saveQuery} />;
253 return <SearchBarBasicView
254 onSetView={props.onSetView}
255 onSearch={props.onSearch}
256 loadRecentQueries={props.loadRecentQueries}
257 savedQueries={props.savedQueries}
258 deleteSavedQuery={props.deleteSavedQuery}
259 editSavedQuery={props.editSavedQuery}
260 selectedItem={props.selectedItem} />;