17782: Fixes almost all tests (4 left) mostly by fixing namespace-type imports.
[arvados.git] / src / components / autocomplete / autocomplete.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React from 'react';
6 import {
7     Input as MuiInput,
8     Chip as MuiChip,
9     Popper as MuiPopper,
10     Paper as MuiPaper,
11     FormControl, InputLabel, StyleRulesCallback, withStyles, RootRef, ListItemText, ListItem, List, FormHelperText
12 } from '@material-ui/core';
13 import { PopperProps } from '@material-ui/core/Popper';
14 import { WithStyles } from '@material-ui/core/styles';
15 import { noop } from 'lodash';
16
17 export interface AutocompleteProps<Item, Suggestion> {
18     label?: string;
19     value: string;
20     items: Item[];
21     disabled?: boolean;
22     suggestions?: Suggestion[];
23     error?: boolean;
24     helperText?: string;
25     autofocus?: boolean;
26     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
27     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
28     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
29     onCreate?: () => void;
30     onDelete?: (item: Item, index: number) => void;
31     onSelect?: (suggestion: Suggestion) => void;
32     renderChipValue?: (item: Item) => string;
33     renderSuggestion?: (suggestion: Suggestion) => React.ReactNode;
34 }
35
36 export interface AutocompleteState {
37     suggestionsOpen: boolean;
38     selectedSuggestionIndex: number;
39 }
40
41 export class Autocomplete<Value, Suggestion> extends React.Component<AutocompleteProps<Value, Suggestion>, AutocompleteState> {
42
43     state = {
44         suggestionsOpen: false,
45         selectedSuggestionIndex: 0,
46     };
47
48     containerRef = React.createRef<HTMLDivElement>();
49     inputRef = React.createRef<HTMLInputElement>();
50
51     render() {
52         return (
53             <RootRef rootRef={this.containerRef}>
54                 <FormControl fullWidth error={this.props.error}>
55                     {this.renderLabel()}
56                     {this.renderInput()}
57                     {this.renderHelperText()}
58                     {this.renderSuggestions()}
59                 </FormControl>
60             </RootRef>
61         );
62     }
63
64     renderLabel() {
65         const { label } = this.props;
66         return label && <InputLabel>{label}</InputLabel>;
67     }
68
69     renderInput() {
70         return <Input
71             disabled={this.props.disabled}
72             autoFocus={this.props.autofocus}
73             inputRef={this.inputRef}
74             value={this.props.value}
75             startAdornment={this.renderChips()}
76             onFocus={this.handleFocus}
77             onBlur={this.handleBlur}
78             onChange={this.props.onChange}
79             onKeyPress={this.handleKeyPress}
80             onKeyDown={this.handleNavigationKeyPress}
81         />;
82     }
83
84     renderHelperText() {
85         return <FormHelperText>{this.props.helperText}</FormHelperText>;
86     }
87
88     renderSuggestions() {
89         const { suggestions = [] } = this.props;
90         return (
91             <Popper
92                 open={this.isSuggestionBoxOpen()}
93                 anchorEl={this.inputRef.current}
94                 key={suggestions.length}>
95                 <Paper onMouseDown={this.preventBlur}>
96                     <List dense style={{ width: this.getSuggestionsWidth() }}>
97                         {suggestions.map(
98                             (suggestion, index) =>
99                                 <ListItem
100                                     button
101                                     key={index}
102                                     onClick={this.handleSelect(suggestion)}
103                                     selected={index === this.state.selectedSuggestionIndex}>
104                                     {this.renderSuggestion(suggestion)}
105                                 </ListItem>
106                         )}
107                     </List>
108                 </Paper>
109             </Popper>
110         );
111     }
112
113     isSuggestionBoxOpen() {
114         const { suggestions = [] } = this.props;
115         return this.state.suggestionsOpen && suggestions.length > 0;
116     }
117
118     handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
119         const { onFocus = noop } = this.props;
120         this.setState({ suggestionsOpen: true });
121         onFocus(event);
122     }
123
124     handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
125         setTimeout(() => {
126             const { onBlur = noop } = this.props;
127             this.setState({ suggestionsOpen: false });
128             onBlur(event);
129         });
130     }
131
132     handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
133         const { onCreate = noop, onSelect = noop, suggestions = [] } = this.props;
134         const { selectedSuggestionIndex } = this.state;
135         if (event.key === 'Enter') {
136             if (this.isSuggestionBoxOpen() && selectedSuggestionIndex < suggestions.length) {
137                 // prevent form submissions when selecting a suggestion
138                 event.preventDefault();
139                 onSelect(suggestions[selectedSuggestionIndex]);
140             } else if (this.props.value.length > 0) {
141                 onCreate();
142             }
143         }
144     }
145
146     handleNavigationKeyPress = ({ key }: React.KeyboardEvent<HTMLInputElement>) => {
147         if (key === 'ArrowUp') {
148             this.updateSelectedSuggestionIndex(-1);
149         } else if (key === 'ArrowDown') {
150             this.updateSelectedSuggestionIndex(1);
151         }
152     }
153
154     updateSelectedSuggestionIndex(value: -1 | 1) {
155         const { suggestions = [] } = this.props;
156         this.setState(({ selectedSuggestionIndex }) => ({
157             selectedSuggestionIndex: (selectedSuggestionIndex + value) % suggestions.length
158         }));
159     }
160
161     renderChips() {
162         const { items, onDelete } = this.props;
163
164         /**
165          * If input startAdornment prop is not undefined, input's label will stay above the input.
166          * If there is not items, we want the label to go back to placeholder position.
167          * That why we return without a value instead of returning a result of a _map_ which is an empty array.
168          */
169         if (items.length === 0) {
170             return;
171         }
172
173         return items.map(
174             (item, index) =>
175                 <Chip
176                     label={this.renderChipValue(item)}
177                     key={index}
178                     onDelete={() => onDelete ? onDelete(item, index) : undefined} />
179         );
180     }
181
182     renderChipValue(value: Value) {
183         const { renderChipValue } = this.props;
184         return renderChipValue ? renderChipValue(value) : JSON.stringify(value);
185     }
186
187     preventBlur = (event: React.MouseEvent<HTMLElement>) => {
188         event.preventDefault();
189     }
190
191     handleClickAway = (event: React.MouseEvent<HTMLElement>) => {
192         if (event.target !== this.inputRef.current) {
193             this.setState({ suggestionsOpen: false });
194         }
195     }
196
197     handleSelect(suggestion: Suggestion) {
198         return () => {
199             const { onSelect = noop } = this.props;
200             const { current } = this.inputRef;
201             if (current) {
202                 current.focus();
203             }
204             onSelect(suggestion);
205         };
206     }
207
208     renderSuggestion(suggestion: Suggestion) {
209         const { renderSuggestion } = this.props;
210         return renderSuggestion
211             ? renderSuggestion(suggestion)
212             : <ListItemText>{JSON.stringify(suggestion)}</ListItemText>;
213     }
214
215     getSuggestionsWidth() {
216         return this.containerRef.current ? this.containerRef.current.offsetWidth : 'auto';
217     }
218 }
219
220 type ChipClasses = 'root';
221
222 const chipStyles: StyleRulesCallback<ChipClasses> = theme => ({
223     root: {
224         marginRight: theme.spacing.unit / 4,
225         height: theme.spacing.unit * 3,
226     }
227 });
228
229 const Chip = withStyles(chipStyles)(MuiChip);
230
231 type PopperClasses = 'root';
232
233 const popperStyles: StyleRulesCallback<ChipClasses> = theme => ({
234     root: {
235         zIndex: theme.zIndex.modal,
236     }
237 });
238
239 const Popper = withStyles(popperStyles)(
240     ({ classes, ...props }: PopperProps & WithStyles<PopperClasses>) =>
241         <MuiPopper {...props} className={classes.root} />
242 );
243
244 type InputClasses = 'root';
245
246 const inputStyles: StyleRulesCallback<InputClasses> = () => ({
247     root: {
248         display: 'flex',
249         flexWrap: 'wrap',
250     },
251     input: {
252         minWidth: '20%',
253         flex: 1,
254     },
255 });
256
257 const Input = withStyles(inputStyles)(MuiInput);
258
259 const Paper = withStyles({
260     root: {
261         maxHeight: '80vh',
262         overflowY: 'auto',
263     }
264 })(MuiPaper);