//
// 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';
label?: string;
value: string;
items: Item[];
+ disabled?: boolean;
suggestions?: Suggestion[];
error?: boolean;
helperText?: string;
onDelete?: (item: Item, index: number) => void;
onSelect?: (suggestion: Suggestion) => void;
renderChipValue?: (item: Item) => string;
+ renderChipTooltip?: (item: Item) => string;
renderSuggestion?: (suggestion: Suggestion) => React.ReactNode;
}
renderInput() {
return <Input
+ disabled={this.props.disabled}
autoFocus={this.props.autofocus}
inputRef={this.inputRef}
value={this.props.value}
}
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 <Tooltip title={tooltip}>
+ <Chip
+ label={this.renderChipValue(item)}
+ key={index}
+ onDelete={onDelete && !this.props.disabled ? (() => onDelete(item, index)) : undefined} />
+ </Tooltip>
+ } else {
+ return <Chip
+ label={this.renderChipValue(item)}
+ key={index}
+ onDelete={onDelete && !this.props.disabled ? (() => onDelete(item, index)) : undefined} />
+ }
+ }
);
}