Merge remote-tracking branch 'origin/main' into 18207-Workbench2-is-not-clearing...

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

diff --git a/src/components/chips/chips.tsx b/src/components/chips/chips.tsx
index 36cf2412c42d1300340ff6dafa4656c30fc97cfe..c4724d1bb1a8d9b0ffcb3c79b6127c1a1fddd6c1 100644 (file)
--- a/src/components/chips/chips.tsx
+++ b/src/components/chips/chips.tsx
@@ -2,10 +2,19 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import { Chip, Grid, StyleRulesCallback, withStyles } from '@material-ui/core';
-import { DragSource, DragSourceSpec, DragSourceCollector, ConnectDragSource, DropTarget, DropTargetSpec, DropTargetCollector, ConnectDropTarget } from 'react-dnd';
-import { compose, noop } from 'lodash/fp';
+import {
+    DragSource,
+    DragSourceSpec,
+    DragSourceCollector,
+    ConnectDragSource,
+    DropTarget,
+    DropTargetSpec,
+    DropTargetCollector,
+    ConnectDropTarget
+} from 'react-dnd';
+import { compose } from 'lodash/fp';
 import { WithStyles } from '@material-ui/core/styles';
 interface ChipsProps<Value> {
     values: Value[];
@@ -14,6 +23,7 @@ interface ChipsProps<Value> {
     deletable?: boolean;
     orderable?: boolean;
     onChange: (value: Value[]) => void;
+    clickable?: boolean;
 }
 
 type CssRules = 'root';
@@ -28,15 +38,18 @@ export const Chips = withStyles(styles)(
         render() {
             const { values, filler } = this.props;
             return <Grid container spacing={8} className={this.props.classes.root}>
-                {values.map(this.renderChip)}
+                {values && values.map(this.renderChip)}
                 {filler && <Grid item xs>{filler}</Grid>}
             </Grid>;
         }
 
-        renderChip = (value: Value, index: number) =>
-            <Grid item key={index}>
-                <this.chip {...{ value }} />
+        renderChip = (value: Value, index: number) => {
+            const { deletable, getLabel } = this.props;
+            return <Grid item key={index}>
+                <Chip onDelete={deletable ? this.deleteValue(value) : undefined}
+                    label={getLabel !== undefined ? getLabel(value) : value} />
             </Grid>
+        }
 
         type = 'chip';
 
@@ -90,6 +103,7 @@ export const Chips = withStyles(styles)(
                             onDelete={this.props.deletable
                                 ? this.deleteValue(value)
                                 : undefined}
+                            clickable={this.props.clickable}
                             label={this.props.getLabel ?
                                 this.props.getLabel(value)
                                 : typeof value === 'object'
@@ -121,4 +135,4 @@ interface CollectedProps {
 
 interface DraggableChipProps<Value> {
     value: Value;
-}
\ No newline at end of file
+}