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 { ArvadosTheme } from '~/common/custom-theme';
18 import { SearchView } from '~/store/search-bar/search-bar-reducer';
21 SearchBarBasicViewDataProps,
22 SearchBarBasicViewActionProps
23 } from '~/views-components/search-bar/search-bar-basic-view';
25 SearchBarAutocompleteView,
26 SearchBarAutocompleteViewDataProps,
27 SearchBarAutocompleteViewActionProps
28 } from '~/views-components/search-bar/search-bar-autocomplete-view';
30 SearchBarAdvancedView,
31 SearchBarAdvancedViewDataProps,
32 SearchBarAdvancedViewActionProps
33 } from '~/views-components/search-bar/search-bar-advanced-view';
34 import { KEY_CODE_DOWN, KEY_CODE_ESC, KEY_CODE_UP, KEY_ENTER } from "~/common/codes";
36 type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'view';
38 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
43 borderRadius: theme.spacing.unit / 2
45 containerSearchViewOpened: {
48 borderRadius: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px 0 0`
52 padding: `0px ${theme.spacing.unit}px`
62 export type SearchBarDataProps = SearchBarViewDataProps
63 & SearchBarAutocompleteViewDataProps
64 & SearchBarAdvancedViewDataProps
65 & SearchBarBasicViewDataProps;
67 interface SearchBarViewDataProps {
70 isPopoverOpen: boolean;
74 export type SearchBarActionProps = SearchBarViewActionProps
75 & SearchBarAutocompleteViewActionProps
76 & SearchBarAdvancedViewActionProps
77 & SearchBarBasicViewActionProps;
79 interface SearchBarViewActionProps {
80 onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
81 onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
82 onSetView: (currentView: string) => void;
83 closeView: () => void;
84 openSearchView: () => void;
85 loadRecentQueries: () => string[];
90 type SearchBarViewProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
92 export const SearchBarView = withStyles(styles)(
93 (props : SearchBarViewProps) => {
94 const { classes, isPopoverOpen } = props;
96 <ClickAwayListener onClickAway={props.closeView}>
97 <Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
98 <form onSubmit={props.onSubmit}>
100 className={classes.input}
101 onChange={props.onChange}
103 value={props.searchValue}
105 disableUnderline={true}
106 onClick={props.openSearchView}
108 if (e.keyCode === KEY_CODE_DOWN) {
110 if (!isPopoverOpen) {
111 props.openSearchView();
115 } else if (e.keyCode === KEY_CODE_UP) {
118 } else if (e.keyCode === KEY_CODE_ESC) {
120 } else if (e.keyCode === KEY_ENTER) {
121 if (props.selectedItem !== props.searchValue) {
123 props.navigateTo(props.selectedItem);
128 <InputAdornment position="end">
129 <Tooltip title='Search'>
130 <IconButton type="submit">
137 <div className={classes.view}>
138 {isPopoverOpen && getView({...props})}
146 const getView = (props: SearchBarViewProps) => {
147 switch (props.currentView) {
148 case SearchView.AUTOCOMPLETE:
149 return <SearchBarAutocompleteView
150 navigateTo={props.navigateTo}
151 searchResults={props.searchResults}
152 searchValue={props.searchValue}
153 selectedItem={props.selectedItem} />;
154 case SearchView.ADVANCED:
155 return <SearchBarAdvancedView
156 closeAdvanceView={props.closeAdvanceView}
157 tags={props.tags} />;
159 return <SearchBarBasicView
160 onSetView={props.onSetView}
161 onSearch={props.onSearch}
162 loadRecentQueries={props.loadRecentQueries}
163 savedQueries={props.savedQueries}
164 deleteSavedQuery={props.deleteSavedQuery}
165 editSavedQuery={props.editSavedQuery} />;