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, InputLabel, StyleRulesCallback, withStyles, RootRef, ListItemText, ListItem, List, FormHelperText, Tooltip, Typography
  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 import { isGroup } from 'common/isGroup';
  17 import { sortByKey } from 'common/objects';
  18
  19 export interface AutocompleteProps<Item, Suggestion> {
  20     label?: string;
  21     value: string;
  22     items: Item[];
  23     disabled?: boolean;
  24     suggestions?: Suggestion[];
  25     error?: boolean;
  26     helperText?: string;
  27     autofocus?: boolean;
  28     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  29     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
  30     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
  31     onCreate?: () => void;
  32     onDelete?: (item: Item, index: number) => void;
  33     onSelect?: (suggestion: Suggestion) => void;
  34     renderChipValue?: (item: Item) => string;
  35     renderChipTooltip?: (item: Item) => string;
  36     renderSuggestion?: (suggestion: Suggestion) => React.ReactNode;
  37     category?: AutocompleteCat;
  38 }
  39
  40 type AutocompleteClasses = 'sharingList' | 'emptyList' | 'listSubHeader' | 'numFound';
  41
  42 const autocompleteStyles: StyleRulesCallback<AutocompleteClasses> = theme => ({
  43     sharingList: {
  44         maxHeight: '10rem',
  45         overflowY: 'scroll',
  46         scrollbarColor: 'rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0)',
  47         '&::-webkit-scrollbar': {
  48             width: '0.4em',
  49         },
  50         '&::-webkit-scrollbar-thumb': {
  51             backgroundColor: 'rgba(0, 0, 0, 0.3)',
  52             borderRadius: '4px',
  53         },
  54         '&::-webkit-scrollbar-track': {
  55             backgroundColor: 'rgba(0, 0, 0, 0)',
  56         },
  57     },
  58     emptyList: {
  59         padding: '0.5rem',
  60         fontStyle: 'italic',
  61     },
  62     listSubHeader: {
  63         padding: '0.5rem',
  64         display: 'flex',
  65         alignItems: 'flex-end',
  66         justifyContent: 'space-between',
  67     },
  68     numFound: {
  69         fontStyle: 'italic',
  70         fontSize: '0.8rem',
  71     },
  72 });
  73
  74 export enum AutocompleteCat {
  75     SHARING = 'sharing',
  76 };
  77
  78 export interface AutocompleteState {
  79     suggestionsOpen: boolean;
  80     selectedSuggestionIndex: number;
  81 }
  82
  83 export const Autocomplete = withStyles(autocompleteStyles)(
  84     class Autocomplete<Value, Suggestion> extends React.Component<AutocompleteProps<Value, Suggestion> & WithStyles<AutocompleteClasses>, AutocompleteState> {
  85
  86     state = {
  87         suggestionsOpen: false,
  88         selectedSuggestionIndex: 0,
  89     };
  90
  91     containerRef = React.createRef<HTMLDivElement>();
  92     inputRef = React.createRef<HTMLInputElement>();
  93
  94     render() {
  95         return (
  96             <RootRef rootRef={this.containerRef}>
  97                 <FormControl fullWidth error={this.props.error}>
  98                     {this.renderLabel()}
  99                     {this.renderInput()}
 100                     {this.renderHelperText()}
 101                     {this.props.category === AutocompleteCat.SHARING ? this.renderSharingSuggestions() : this.renderSuggestions()}
 102                 </FormControl>
 103             </RootRef>
 104         );
 105     }
 106
 107     renderLabel() {
 108         const { label } = this.props;
 109         return label && <InputLabel>{label}</InputLabel>;
 110     }
 111
 112     renderInput() {
 113         return <Input
 114             disabled={this.props.disabled}
 115             autoFocus={this.props.autofocus}
 116             inputRef={this.inputRef}
 117             value={this.props.value}
 118             startAdornment={this.renderChips()}
 119             onFocus={this.handleFocus}
 120             onBlur={this.handleBlur}
 121             onChange={this.props.onChange}
 122             onKeyPress={this.handleKeyPress}
 123             onKeyDown={this.handleNavigationKeyPress}
 124         />;
 125     }
 126
 127     renderHelperText() {
 128         return <FormHelperText>{this.props.helperText}</FormHelperText>;
 129     }
 130
 131     renderSuggestions() {
 132         const { suggestions = [] } = this.props;
 133         return (
 134             <Popper
 135                 open={this.isSuggestionBoxOpen()}
 136                 anchorEl={this.inputRef.current}
 137                 key={suggestions.length}>
 138                 <Paper onMouseDown={this.preventBlur}>
 139                     <List dense style={{ width: this.getSuggestionsWidth() }}>
 140                         {suggestions.map(
 141                             (suggestion, index) =>
 142                                 <ListItem
 143                                     button
 144                                     key={index}
 145                                     onClick={this.handleSelect(suggestion)}
 146                                     selected={index === this.state.selectedSuggestionIndex}>
 147                                     {this.renderSuggestion(suggestion)}
 148                                 </ListItem>
 149                         )}
 150                     </List>
 151                 </Paper>
 152             </Popper>
 153         );
 154     }
 155
 156     renderSharingSuggestions() {
 157         const { suggestions = [], classes } = this.props;
 158         const users = sortByKey<Suggestion>(suggestions.filter(item => !isGroup(item)), 'fullName');
 159         const groups = sortByKey<Suggestion>(suggestions.filter(item => isGroup(item)), 'name');
 160
 161         return (
 162             <Popper
 163                 open={this.isSuggestionBoxOpen()}
 164                 anchorEl={this.inputRef.current}
 165                 key={suggestions.length}>
 166                 <Paper onMouseDown={this.preventBlur}>
 167                     <div className={classes.listSubHeader}>
 168                         Groups {<span className={classes.numFound}>{groups.length} {groups.length === 1 ? 'match' : 'matches'} found</span>}
 169                     </div>
 170                     <List dense className={classes.sharingList} style={{width: this.getSuggestionsWidth()}}>
 171                         {groups.map(
 172                             (suggestion, index) =>
 173                                 <ListItem
 174                                     button
 175                                     id={`groups-${index}`}
 176                                     key={`groups-${index}`}
 177                                     onClick={this.handleSelect(suggestion)}>
 178                                     {this.renderSharingSuggestion(suggestion)}
 179                                 </ListItem>
 180                         )}
 181                     </List>
 182                     <div className={classes.listSubHeader}>
 183                         Users {<span className={classes.numFound}>{users.length} {users.length === 1 ? 'match' : 'matches'} found</span>}
 184                     </div>
 185                     <List dense className={classes.sharingList} style={{width: this.getSuggestionsWidth()}}>
 186                         {users.map(
 187                             (suggestion, index) =>
 188                                 <ListItem
 189                                     button
 190                                     id={`users-${index}`}
 191                                     key={`users-${index}`}
 192                                     onClick={this.handleSelect(suggestion)}>
 193                                     {this.renderSharingSuggestion(suggestion)}
 194                                 </ListItem>
 195                         )}
 196                     </List>
 197                 </Paper>
 198             </Popper>
 199         );
 200     }
 201
 202     isSuggestionBoxOpen() {
 203         const { suggestions = [] } = this.props;
 204         return this.state.suggestionsOpen && suggestions.length > 0;
 205     }
 206
 207     handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
 208         const { onFocus = noop } = this.props;
 209         this.setState({ suggestionsOpen: true });
 210         onFocus(event);
 211     }
 212
 213     handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
 214         setTimeout(() => {
 215             const { onBlur = noop } = this.props;
 216             this.setState({ suggestionsOpen: false });
 217             onBlur(event);
 218         });
 219     }
 220
 221     handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
 222         const { onCreate = noop, onSelect = noop, suggestions = [] } = this.props;
 223         const { selectedSuggestionIndex } = this.state;
 224         if (event.key === 'Enter') {
 225             if (this.isSuggestionBoxOpen() && selectedSuggestionIndex < suggestions.length) {
 226                 // prevent form submissions when selecting a suggestion
 227                 event.preventDefault();
 228                 onSelect(suggestions[selectedSuggestionIndex]);
 229             } else if (this.props.value.length > 0) {
 230                 onCreate();
 231             }
 232         }
 233     }
 234
 235     handleNavigationKeyPress = ({ key }: React.KeyboardEvent<HTMLInputElement>) => {
 236         if (key === 'ArrowUp') {
 237             this.updateSelectedSuggestionIndex(-1);
 238         } else if (key === 'ArrowDown') {
 239             this.updateSelectedSuggestionIndex(1);
 240         }
 241     }
 242
 243     updateSelectedSuggestionIndex(value: -1 | 1) {
 244         const { suggestions = [] } = this.props;
 245         this.setState(({ selectedSuggestionIndex }) => ({
 246             selectedSuggestionIndex: (selectedSuggestionIndex + value) % suggestions.length
 247         }));
 248     }
 249
 250     renderChips() {
 251         const { items, onDelete } = this.props;
 252
 253         /**
 254          * If input startAdornment prop is not undefined, input's label will stay above the input.
 255          * If there is not items, we want the label to go back to placeholder position.
 256          * That why we return without a value instead of returning a result of a _map_ which is an empty array.
 257          */
 258         if (items.length === 0) {
 259             return;
 260         }
 261
 262         return items.map(
 263             (item, index) => {
 264                 const tooltip = this.props.renderChipTooltip ? this.props.renderChipTooltip(item) : '';
 265                 if (tooltip && tooltip.length) {
 266                     return <span key={index}>
 267                         <Tooltip title={tooltip}>
 268                         <Chip
 269                             label={this.renderChipValue(item)}
 270                             key={index}
 271                             onDelete={onDelete && !this.props.disabled ? (() =>  onDelete(item, index)) : undefined} />
 272                     </Tooltip></span>
 273                 } else {
 274                     return <span key={index}><Chip
 275                         label={this.renderChipValue(item)}
 276                         onDelete={onDelete && !this.props.disabled ? (() =>  onDelete(item, index)) : undefined} /></span>
 277                 }
 278             }
 279         );
 280     }
 281
 282     renderChipValue(value: Value) {
 283         const { renderChipValue } = this.props;
 284         return renderChipValue ? renderChipValue(value) : JSON.stringify(value);
 285     }
 286
 287     preventBlur = (event: React.MouseEvent<HTMLElement>) => {
 288         event.preventDefault();
 289     }
 290
 291     handleClickAway = (event: React.MouseEvent<HTMLElement>) => {
 292         if (event.target !== this.inputRef.current) {
 293             this.setState({ suggestionsOpen: false });
 294         }
 295     }
 296
 297     handleSelect(suggestion: Suggestion) {
 298         return () => {
 299             const { onSelect = noop } = this.props;
 300             const { current } = this.inputRef;
 301             if (current) {
 302                 current.focus();
 303             }
 304             onSelect(suggestion);
 305         };
 306     }
 307
 308     renderSuggestion(suggestion: Suggestion) {
 309         const { renderSuggestion } = this.props;
 310         return renderSuggestion
 311             ? renderSuggestion(suggestion)
 312             : <ListItemText>{JSON.stringify(suggestion)}</ListItemText>;
 313     }
 314
 315     renderSharingSuggestion(suggestion: Suggestion) {
 316         if (isGroup(suggestion)) {
 317             return <ListItemText>
 318                         <Typography noWrap data-cy="sharing-suggestion">
 319                             {(suggestion as any).name}
 320                         </Typography>
 321                     </ListItemText>;}
 322         return <ListItemText>
 323                     <Typography data-cy="sharing-suggestion">
 324                         {`${(suggestion as any).fullName} (${(suggestion as any).username})`}
 325                     </Typography>
 326                 </ListItemText>;
 327     }
 328
 329     getSuggestionsWidth() {
 330         return this.containerRef.current ? this.containerRef.current.offsetWidth : 'auto';
 331     }
 332 });
 333
 334 type ChipClasses = 'root';
 335
 336 const chipStyles: StyleRulesCallback<ChipClasses> = theme => ({
 337     root: {
 338         marginRight: theme.spacing.unit / 4,
 339         height: theme.spacing.unit * 3,
 340     }
 341 });
 342
 343 const Chip = withStyles(chipStyles)(MuiChip);
 344
 345 type PopperClasses = 'root';
 346
 347 const popperStyles: StyleRulesCallback<PopperClasses> = theme => ({
 348     root: {
 349         zIndex: theme.zIndex.modal,
 350     }
 351 });
 352
 353 const Popper = withStyles(popperStyles)(
 354     ({ classes, ...props }: PopperProps & WithStyles<PopperClasses>) =>
 355         <MuiPopper {...props} className={classes.root} />
 356 );
 357
 358 type InputClasses = 'root';
 359
 360 const inputStyles: StyleRulesCallback<InputClasses> = () => ({
 361     root: {
 362         display: 'flex',
 363         flexWrap: 'wrap',
 364     },
 365     input: {
 366         minWidth: '20%',
 367         flex: 1,
 368     },
 369 });
 370
 371 const Input = withStyles(inputStyles)(MuiInput);
 372
 373 const Paper = withStyles({
 374     root: {
 375         maxHeight: '80vh',
 376         overflowY: 'auto',
 377     }
 378 })(MuiPaper);