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
 156         /**
 157          * If input startAdornment prop is not undefined, input's label will stay above the input.
 158          * If there is not items, we want the label to go back to placeholder position.
 159          * That why we return without a value instead of returning a result of a _map_ which is an empty array.
 160          */
 161         if (items.length === 0) {
 162             return;
 163         }
 164
 165         return items.map(
 166             (item, index) =>
 167                 <Chip
 168                     label={this.renderChipValue(item)}
 169                     key={index}
 170                     onDelete={() => onDelete ? onDelete(item, index) : undefined} />
 171         );
 172     }
 173
 174     renderChipValue(value: Value) {
 175         const { renderChipValue } = this.props;
 176         return renderChipValue ? renderChipValue(value) : JSON.stringify(value);
 177     }
 178
 179     preventBlur = (event: React.MouseEvent<HTMLElement>) => {
 180         event.preventDefault();
 181     }
 182
 183     handleClickAway = (event: React.MouseEvent<HTMLElement>) => {
 184         if (event.target !== this.inputRef.current) {
 185             this.setState({ suggestionsOpen: false });
 186         }
 187     }
 188
 189     handleSelect(suggestion: Suggestion) {
 190         return () => {
 191             const { onSelect = noop } = this.props;
 192             const { current } = this.inputRef;
 193             if (current) {
 194                 current.focus();
 195             }
 196             onSelect(suggestion);
 197         };
 198     }
 199
 200     renderSuggestion(suggestion: Suggestion) {
 201         const { renderSuggestion } = this.props;
 202         return renderSuggestion
 203             ? renderSuggestion(suggestion)
 204             : <ListItemText>{JSON.stringify(suggestion)}</ListItemText>;
 205     }
 206
 207     getSuggestionsWidth() {
 208         return this.containerRef.current ? this.containerRef.current.offsetWidth : 'auto';
 209     }
 210 }
 211
 212 type ChipClasses = 'root';
 213
 214 const chipStyles: StyleRulesCallback<ChipClasses> = theme => ({
 215     root: {
 216         marginRight: theme.spacing.unit / 4,
 217         height: theme.spacing.unit * 3,
 218     }
 219 });
 220
 221 const Chip = withStyles(chipStyles)(MuiChip);
 222
 223 type PopperClasses = 'root';
 224
 225 const popperStyles: StyleRulesCallback<ChipClasses> = theme => ({
 226     root: {
 227         zIndex: theme.zIndex.modal,
 228     }
 229 });
 230
 231 const Popper = withStyles(popperStyles)(
 232     ({ classes, ...props }: PopperProps & WithStyles<PopperClasses>) =>
 233         <MuiPopper {...props} className={classes.root} />
 234 );
 235
 236 type InputClasses = 'root';
 237
 238 const inputStyles: StyleRulesCallback<InputClasses> = () => ({
 239     root: {
 240         display: 'flex',
 241         flexWrap: 'wrap',
 242     },
 243     input: {
 244         minWidth: '20%',
 245         flex: 1,
 246     },
 247 });
 248
 249 const Input = withStyles(inputStyles)(MuiInput);
 250
 251 const Paper = withStyles({
 252     root: {
 253         maxHeight: '80vh',
 254         overflowY: 'auto',
 255     }
 256 })(MuiPaper);