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