1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
11 export interface AutocompleteProps<Item, Suggestion> {
15 suggestions?: Suggestion[];
18 onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
19 onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
20 onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
21 onCreate?: () => void;
22 onDelete?: (item: Item, index: number) => void;
23 onSelect?: (suggestion: Suggestion) => void;
24 renderChipValue?: (item: Item) => string;
25 renderSuggestion?: (suggestion: Suggestion) => React.ReactNode;
28 export interface AutocompleteState {
29 suggestionsOpen: boolean;
30 selectedSuggestionIndex: number;
32 export class Autocomplete<Value, Suggestion> extends React.Component<AutocompleteProps<Value, Suggestion>, AutocompleteState> {
35 suggestionsOpen: false,
36 selectedSuggestionIndex: 0,
39 containerRef = React.createRef<HTMLDivElement>();
40 inputRef = React.createRef<HTMLInputElement>();
44 <RootRef rootRef={this.containerRef}>
45 <FormControl fullWidth error={this.props.error}>
48 {this.renderHelperText()}
49 {this.renderSuggestions()}
56 const { label } = this.props;
57 return label && <InputLabel>{label}</InputLabel>;
62 inputRef={this.inputRef}
63 value={this.props.value}
64 startAdornment={this.renderChips()}
65 onFocus={this.handleFocus}
66 onBlur={this.handleBlur}
67 onChange={this.props.onChange}
68 onKeyPress={this.handleKeyPress}
69 onKeyDown={this.handleNavigationKeyPress}
74 return <FormHelperText>{this.props.helperText}</FormHelperText>;
78 const { suggestions = [] } = this.props;
81 open={this.isSuggestionBoxOpen()}
82 anchorEl={this.inputRef.current}
83 key={suggestions.length}>
84 <Paper onMouseDown={this.preventBlur}>
85 <List dense style={{ width: this.getSuggestionsWidth() }}>
87 (suggestion, index) =>
91 onClick={this.handleSelect(suggestion)}
92 selected={index === this.state.selectedSuggestionIndex}>
93 {this.renderSuggestion(suggestion)}
102 isSuggestionBoxOpen() {
103 const { suggestions = [] } = this.props;
104 return this.state.suggestionsOpen && suggestions.length > 0;
107 handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
108 const { onFocus = noop } = this.props;
109 this.setState({ suggestionsOpen: true });
113 handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
115 const { onBlur = noop } = this.props;
116 this.setState({ suggestionsOpen: false });
121 handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
122 const { onCreate = noop, onSelect = noop, suggestions = [] } = this.props;
123 const { selectedSuggestionIndex } = this.state;
124 if (event.key === 'Enter') {
125 if (this.isSuggestionBoxOpen() && selectedSuggestionIndex < suggestions.length) {
126 // prevent form submissions when selecting a suggestion
127 event.preventDefault();
128 onSelect(suggestions[selectedSuggestionIndex]);
129 } else if (this.props.value.length > 0) {
135 handleNavigationKeyPress = ({ key }: React.KeyboardEvent<HTMLInputElement>) => {
136 if (key === 'ArrowUp') {
137 this.updateSelectedSuggestionIndex(-1);
138 } else if (key === 'ArrowDown') {
139 this.updateSelectedSuggestionIndex(1);
143 updateSelectedSuggestionIndex(value: -1 | 1) {
144 const { suggestions = [] } = this.props;
145 this.setState(({ selectedSuggestionIndex }) => ({
146 selectedSuggestionIndex: (selectedSuggestionIndex + value) % suggestions.length
151 const { items, onDelete } = this.props;
155 label={this.renderChipValue(item)}
157 onDelete={() => onDelete ? onDelete(item, index) : undefined} />
161 renderChipValue(value: Value) {
162 const { renderChipValue } = this.props;
163 return renderChipValue ? renderChipValue(value) : JSON.stringify(value);
166 preventBlur = (event: React.MouseEvent<HTMLElement>) => {
167 event.preventDefault();
170 handleClickAway = (event: React.MouseEvent<HTMLElement>) => {
171 if (event.target !== this.inputRef.current) {
172 this.setState({ suggestionsOpen: false });
176 handleSelect(suggestion: Suggestion) {
178 const { onSelect = noop } = this.props;
179 const { current } = this.inputRef;
183 onSelect(suggestion);
187 renderSuggestion(suggestion: Suggestion) {
188 const { renderSuggestion } = this.props;
189 return renderSuggestion
190 ? renderSuggestion(suggestion)
191 : <ListItemText>{JSON.stringify(suggestion)}</ListItemText>;
194 getSuggestionsWidth() {
195 return this.containerRef.current ? this.containerRef.current.offsetWidth : 'auto';
199 type ChipClasses = 'root';
201 const chipStyles: StyleRulesCallback<ChipClasses> = theme => ({
203 marginRight: theme.spacing.unit / 4,
204 height: theme.spacing.unit * 3,
208 const Chip = withStyles(chipStyles)(MuiChip);
210 type PopperClasses = 'root';
212 const popperStyles: StyleRulesCallback<ChipClasses> = theme => ({
214 zIndex: theme.zIndex.modal,
218 const Popper = withStyles(popperStyles)(
219 ({ classes, ...props }: PopperProps & WithStyles<PopperClasses>) =>
220 <MuiPopper {...props} className={classes.root} />
223 type InputClasses = 'root';
225 const inputStyles: StyleRulesCallback<InputClasses> = () => ({
236 const Input = withStyles(inputStyles)(MuiInput);
238 const Paper = withStyles({