text: import React, { Component } from 'react';
  import { DragSource, DropTarget } from 'react-dnd';
  import PropTypes from 'prop-types';
  import flow from 'lodash/flow';
  import ClassNames from 'classnames';
  import {
    tagSource,
    tagTarget,
    dragSource,
    dropCollect,
  } from './DragAndDropHelper';
  import { canDrag } from './utils';
  import { Chip } from '@material-ui/core';
  
  import RemoveComponent from './RemoveComponent';
  
  const ItemTypes = { TAG: 'tag' };
  
  class Tag extends Component {
    render() {
      const { props } = this;
      const label = props.tag[props.labelField];
      const {
        connectDragSource,
        isDragging,
        connectDropTarget,
        readOnly,
        tag,
        classNames,
      } = props;
      const { className = '' } = tag;
      const tagComponent = (
        <div className={ClassNames('tag-wrapper', classNames.tag, className)}>
          <Chip
            label={label}
            style={{ opacity: isDragging ? 0 : 1, 'cursor': canDrag(props) ? 'move' : 'auto' }}
            onDelete={(!readOnly) ? props.onDelete : null } />
        </div>
      );
      return connectDragSource(connectDropTarget(tagComponent));
    }
  }
  
  Tag.propTypes = {
    labelField: PropTypes.string,
    onDelete: PropTypes.func.isRequired,
    tag: PropTypes.shape({
      id: PropTypes.string.isRequired,
      className: PropTypes.string,
    }),
    moveTag: PropTypes.func,
    removeComponent: PropTypes.func,
    onTagClicked: PropTypes.func,
    classNames: PropTypes.object,
    readOnly: PropTypes.bool,
    connectDragSource: PropTypes.func.isRequired,
    isDragging: PropTypes.bool.isRequired,
    connectDropTarget: PropTypes.func.isRequired,
  };
  
  Tag.defaultProps = {
    labelField: 'text',
    readOnly: false,
  };
  
  export default flow(
    DragSource(ItemTypes.TAG, tagSource, dragSource),
    DropTarget(ItemTypes.TAG, tagTarget, dropCollect)
  )(Tag);
  