16086: Enhances readability by using plural on Array var's name.

[arvados-workbench2.git] / src / components / chips-input / chips-input.tsx

diff --git a/src/components/chips-input/chips-input.tsx b/src/components/chips-input/chips-input.tsx
index fc5fda01be0e7366c9de395b9c38a0b9bafe459d..790d49ebd6e306e202bb691d553bba8f57ccf2b1 100644 (file)
--- a/src/components/chips-input/chips-input.tsx
+++ b/src/components/chips-input/chips-input.tsx
@@ -9,7 +9,7 @@ import { StyleRulesCallback } from '@material-ui/core/styles';
 import { InputProps } from '@material-ui/core/Input';
 
 interface ChipsInputProps<Value> {
-    value: Value[];
+    values: Value[];
     getLabel?: (value: Value) => string;
     onChange: (value: Value[]) => void;
     createNewValue: (value: string) => Value;
@@ -17,6 +17,7 @@ interface ChipsInputProps<Value> {
     inputProps?: InputProps;
     deletable?: boolean;
     orderable?: boolean;
+    disabled?: boolean;
 }
 
 type CssRules = 'chips' | 'input' | 'inputContainer';
@@ -63,13 +64,13 @@ export const ChipsInput = withStyles(styles)(
             if (this.state.text) {
                 const newValue = this.props.createNewValue(this.state.text);
                 this.setState({ text: '' });
-                this.props.onChange([...this.props.value, newValue]);
+                this.props.onChange([...this.props.values, newValue]);
             }
         }
 
         deleteLastValue = () => {
-            if (this.state.text.length === 0 && this.props.value.length > 0) {
-                this.props.onChange(this.props.value.slice(0, -1));
+            if (this.state.text.length === 0 && this.props.values.length > 0) {
+                this.props.onChange(this.props.values.slice(0, -1));
             }
         }
 
@@ -102,11 +103,11 @@ export const ChipsInput = withStyles(styles)(
         }
 
         renderChips() {
-            const { classes, value, ...props } = this.props;
+            const { classes, ...props } = this.props;
             return <div className={classes.chips}>
                 <Chips
                     {...props}
-                    values={value}
+                    clickable={!props.disabled}
                     filler={<div ref={this.filler} />}
                 />
             </div>;
@@ -118,6 +119,7 @@ export const ChipsInput = withStyles(styles)(
                 {...InputProps}
                 value={this.state.text}
                 onChange={this.setText}
+                disabled={this.props.disabled}
                 onKeyDown={this.handleKeyPress}
                 inputProps={{
                     ...(InputProps && InputProps.inputProps),
@@ -129,7 +131,7 @@ export const ChipsInput = withStyles(styles)(
         }
 
         componentDidUpdate(prevProps: ChipsInputProps<Value>) {
-            if (prevProps.value !== this.props.value) {
+            if (prevProps.values !== this.props.values) {
                 this.updateCursorPosition();
             }
         }