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