Merge branch '21128-toolbar-context-menu'

[arvados-workbench2.git] / src / components / autocomplete / autocomplete.tsx

diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
index c5811bb6ea716b44692752c68d7f630d61208e7f..17d85e856c3cb53901f468b31ccd5bf4e93c6d40 100644 (file)
--- a/src/components/autocomplete/autocomplete.tsx
+++ b/src/components/autocomplete/autocomplete.tsx
@@ -2,8 +2,14 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
-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';
+import React from 'react';
+import {
+    Input as MuiInput,
+    Chip as MuiChip,
+    Popper as MuiPopper,
+    Paper as MuiPaper,
+    FormControl, InputLabel, StyleRulesCallback, withStyles, RootRef, ListItemText, ListItem, List, FormHelperText, Tooltip
+} from '@material-ui/core';
 import { PopperProps } from '@material-ui/core/Popper';
 import { WithStyles } from '@material-ui/core/styles';
 import { noop } from 'lodash';
@@ -12,9 +18,11 @@ export interface AutocompleteProps<Item, Suggestion> {
     label?: string;
     value: string;
     items: Item[];
+    disabled?: boolean;
     suggestions?: Suggestion[];
     error?: boolean;
     helperText?: string;
+    autofocus?: boolean;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
@@ -22,6 +30,7 @@ export interface AutocompleteProps<Item, Suggestion> {
     onDelete?: (item: Item, index: number) => void;
     onSelect?: (suggestion: Suggestion) => void;
     renderChipValue?: (item: Item) => string;
+    renderChipTooltip?: (item: Item) => string;
     renderSuggestion?: (suggestion: Suggestion) => React.ReactNode;
 }
 
@@ -29,6 +38,7 @@ export interface AutocompleteState {
     suggestionsOpen: boolean;
     selectedSuggestionIndex: number;
 }
+
 export class Autocomplete<Value, Suggestion> extends React.Component<AutocompleteProps<Value, Suggestion>, AutocompleteState> {
 
     state = {
@@ -59,6 +69,8 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
 
     renderInput() {
         return <Input
+            disabled={this.props.disabled}
+            autoFocus={this.props.autofocus}
             inputRef={this.inputRef}
             value={this.props.value}
             startAdornment={this.renderChips()}
@@ -124,7 +136,7 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
         if (event.key === 'Enter') {
             if (this.isSuggestionBoxOpen() && selectedSuggestionIndex < suggestions.length) {
                 // prevent form submissions when selecting a suggestion
-                event.preventDefault(); 
+                event.preventDefault();
                 onSelect(suggestions[selectedSuggestionIndex]);
             } else if (this.props.value.length > 0) {
                 onCreate();
@@ -149,12 +161,33 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
 
     renderChips() {
         const { items, onDelete } = this.props;
+
+        /**
+         * If input startAdornment prop is not undefined, input's label will stay above the input.
+         * If there is not items, we want the label to go back to placeholder position.
+         * That why we return without a value instead of returning a result of a _map_ which is an empty array.
+         */
+        if (items.length === 0) {
+            return;
+        }
+
         return items.map(
-            (item, index) =>
-                <Chip
-                    label={this.renderChipValue(item)}
-                    key={index}
-                    onDelete={() => onDelete ? onDelete(item, index) : undefined} />
+            (item, index) => {
+                const tooltip = this.props.renderChipTooltip ? this.props.renderChipTooltip(item) : '';
+                if (tooltip && tooltip.length) {
+                    return <span key={index}>
+                        <Tooltip title={tooltip}>
+                        <Chip
+                            label={this.renderChipValue(item)}
+                            key={index}
+                            onDelete={onDelete && !this.props.disabled ? (() =>  onDelete(item, index)) : undefined} />
+                    </Tooltip></span>
+                } else {
+                    return <span key={index}><Chip
+                        label={this.renderChipValue(item)}
+                        onDelete={onDelete && !this.props.disabled ? (() =>  onDelete(item, index)) : undefined} /></span>
+                }
+            }
         );
     }