- deleteValue = (value: Value) => () => {
- const { values } = this.props;
- const index = values.indexOf(value);
- const newValues = values.slice(0);
- newValues.splice(index, 1);
- this.props.onChange(newValues);
- }
-}
+ dropSpec: DropTargetSpec<DraggableChipProps<Value>> = {
+ drop: ({ value }) => ({ value }),
+ };
+
+ dropCollector: DropTargetCollector<{}> = (connect, monitor) => ({
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver(),
+ })
+ chip = compose(
+ DragSource(this.type, this.dragSpec, this.dragCollector),
+ DropTarget(this.type, this.dropSpec, this.dropCollector),
+ )(
+ ({ connectDragSource, connectDropTarget, isOver, value }: DraggableChipProps<Value> & CollectedProps) => {
+ const connect = compose(
+ connectDragSource,
+ connectDropTarget,
+ );
+
+ const chip =
+ <span>
+ <Chip
+ color={isOver ? 'primary' : 'default'}
+ onDelete={this.props.deletable
+ ? this.deleteValue(value)
+ : undefined}
+ clickable={this.props.clickable}
+ label={this.props.getLabel ?
+ this.props.getLabel(value)
+ : typeof value === 'object'
+ ? JSON.stringify(value)
+ : value} />
+ </span>;
+
+ return this.props.orderable
+ ? connect(chip)
+ : chip;
+ }
+ );
+
+ deleteValue = (value: Value) => () => {
+ const { values } = this.props;
+ const index = values.indexOf(value);
+ const newValues = values.slice(0);
+ newValues.splice(index, 1);
+ this.props.onChange(newValues);
+ }
+ });