@beisen-phoenix/select/lib/components/Tags.js

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import React from 'react';
import Circle from '@beisen-phoenix/icon/lib/circle';
import ToolTip from '@beisen-phoenix/tooltip';
import { $M4, $M5 } from '@beisen-phoenix/style-token';
import utils from '@beisen-phoenix/common-utils';
var classes = utils.BEMClass('select');
import './index.css';

var Tags =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(Tags, _React$PureComponent);

  function Tags() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, Tags);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Tags)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.tagSpanRef = React.createRef();
    _this.state = {
      hover: false
    };

    _this.onMouseEnter = function () {
      _this.setState({
        hover: true
      });
    };

    _this.onMouseLeave = function () {
      _this.setState({
        hover: false
      });
    };

    return _this;
  }

  _createClass(Tags, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          _onClick = _this$props.onClick,
          item = _this$props.item,
          selectDisabled = _this$props.selectDisabled,
          size = _this$props.size;
      var hover = this.state.hover;
      var itemDisabled = item.disabled,
          label = item.label;
      var TempCommponent = React.createElement("span", {
        ref: this.tagSpanRef,
        className: classes({
          element: "tag",
          modifiers: {
            safari: utils.Browser.SAFARI
          }
        })
      }, label);
      return React.createElement("li", {
        className: classes({
          element: "tagItem",
          modifiers: {
            itemDisabled: itemDisabled,
            selectDisabled: selectDisabled,
            small: size === 'small'
          }
        })
      }, React.createElement(ToolTip, {
        title: label,
        showOverflowTooltip: true
      }, TempCommponent), selectDisabled || itemDisabled ? null : React.createElement("span", {
        className: classes({
          element: "tagIcon"
        })
      }, React.createElement(Circle, {
        color: hover && !selectDisabled ? $M4 : $M5,
        onClick: function onClick(e) {
          _onClick && !selectDisabled && _onClick(item);
          "";
          e.stopPropagation && e.stopPropagation();
        },
        onMouseEnter: this.onMouseEnter,
        onMouseLeave: this.onMouseLeave
      })));
    }
  }]);

  return Tags;
}(React.PureComponent);

export { Tags as default };