src/components/chips/chips.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Chip, Grid, StyleRulesCallback, withStyles } from '@material-ui/core';
   7 import { DragSource, DragSourceSpec, DragSourceCollector, ConnectDragSource, DropTarget, DropTargetSpec, DropTargetCollector, ConnectDropTarget } from 'react-dnd';
   8 import { compose, noop } from 'lodash/fp';
   9 import { WithStyles } from '@material-ui/core/styles';
  10 interface ChipsProps<Value> {
  11     values: Value[];
  12     getLabel?: (value: Value) => string;
  13     filler?: React.ReactNode;
  14     deletable?: boolean;
  15     orderable?: boolean;
  16     onChange: (value: Value[]) => void;
  17 }
  18
  19 type CssRules = 'root';
  20
  21 const styles: StyleRulesCallback<CssRules> = ({ spacing }) => ({
  22     root: {
  23         margin: `0px -${spacing.unit / 2}px`,
  24     },
  25 });
  26 export const Chips = withStyles(styles)(
  27     class Chips<Value> extends React.Component<ChipsProps<Value> & WithStyles<CssRules>> {
  28         render() {
  29             const { values, filler } = this.props;
  30             return <Grid container spacing={8} className={this.props.classes.root}>
  31                 {values.map(this.renderChip)}
  32                 {filler && <Grid item xs>{filler}</Grid>}
  33             </Grid>;
  34         }
  35
  36         renderChip = (value: Value, index: number) =>
  37             <Grid item key={index}>
  38                 <this.chip {...{ value }} />
  39             </Grid>
  40
  41         type = 'chip';
  42
  43         dragSpec: DragSourceSpec<DraggableChipProps<Value>, { value: Value }> = {
  44             beginDrag: ({ value }) => ({ value }),
  45             endDrag: ({ value: dragValue }, monitor) => {
  46                 const result = monitor.getDropResult();
  47                 if (result) {
  48                     const { value: dropValue } = monitor.getDropResult();
  49                     const dragIndex = this.props.values.indexOf(dragValue);
  50                     const dropIndex = this.props.values.indexOf(dropValue);
  51                     const newValues = this.props.values.slice(0);
  52                     if (dragIndex < dropIndex) {
  53                         newValues.splice(dragIndex, 1);
  54                         newValues.splice(dropIndex - 1 || 0, 0, dragValue);
  55                     } else if (dragIndex > dropIndex) {
  56                         newValues.splice(dragIndex, 1);
  57                         newValues.splice(dropIndex, 0, dragValue);
  58                     }
  59                     this.props.onChange(newValues);
  60                 }
  61             }
  62         };
  63
  64         dragCollector: DragSourceCollector<{}> = connect => ({
  65             connectDragSource: connect.dragSource(),
  66         })
  67
  68         dropSpec: DropTargetSpec<DraggableChipProps<Value>> = {
  69             drop: ({ value }) => ({ value }),
  70         };
  71
  72         dropCollector: DropTargetCollector<{}> = (connect, monitor) => ({
  73             connectDropTarget: connect.dropTarget(),
  74             isOver: monitor.isOver(),
  75         })
  76         chip = compose(
  77             DragSource(this.type, this.dragSpec, this.dragCollector),
  78             DropTarget(this.type, this.dropSpec, this.dropCollector),
  79         )(
  80             ({ connectDragSource, connectDropTarget, isOver, value }: DraggableChipProps<Value> & CollectedProps) => {
  81                 const connect = compose(
  82                     connectDragSource,
  83                     connectDropTarget,
  84                 );
  85
  86                 const chip =
  87                     <span>
  88                         <Chip
  89                             color={isOver ? 'primary' : 'default'}
  90                             onDelete={this.props.deletable
  91                                 ? this.deleteValue(value)
  92                                 : undefined}
  93                             label={this.props.getLabel ?
  94                                 this.props.getLabel(value)
  95                                 : typeof value === 'object'
  96                                     ? JSON.stringify(value)
  97                                     : value} />
  98                     </span>;
  99
 100                 return this.props.orderable
 101                     ? connect(chip)
 102                     : chip;
 103             }
 104         );
 105
 106         deleteValue = (value: Value) => () => {
 107             const { values } = this.props;
 108             const index = values.indexOf(value);
 109             const newValues = values.slice(0);
 110             newValues.splice(index, 1);
 111             this.props.onChange(newValues);
 112         }
 113     });
 114
 115 interface CollectedProps {
 116     connectDragSource: ConnectDragSource;
 117     connectDropTarget: ConnectDropTarget;
 118
 119     isOver: boolean;
 120 }
 121
 122 interface DraggableChipProps<Value> {
 123     value: Value;
 124 }