@txdfe/at/es/tag/tag.js

一个设计体系组件库

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Animate from '../animate';
import Icon from '../icon';
import { obj, func, support, KEYCODE } from '../util';
import zhCN from '../locale/zh-cn';
import ConfigProvider from '../config-provider';
var noop = func.noop,
  bindCtx = func.bindCtx;

/**
 * Tag
 */
var Tag = /*#__PURE__*/function (_Component) {
  function Tag(props) {
    var _this;
    _classCallCheck(this, Tag);
    _this = _callSuper(this, Tag, [props]);
    _defineProperty(_this, "onKeyDown", function (e) {
      // 针对无障碍化要求 添加键盘SPACE事件
      var _this$props = _this.props,
        closable = _this$props.closable,
        closeArea = _this$props.closeArea,
        onClick = _this$props.onClick,
        disabled = _this$props.disabled;
      if (e.keyCode !== KEYCODE.SPACE || disabled) {
        return;
      }
      e.preventDefault();
      e.stopPropagation();
      if (closable) {
        _this.handleClose(closeArea);
      } else {
        typeof onClick === 'function' && onClick(e);
      }
    });
    _this.state = {
      visible: true
    };
    bindCtx(_this, ['handleBodyClick', 'handleTailClick', 'handleAnimationInit', 'handleAnimationEnd', 'renderTailNode']);
    return _this;
  }
  _inherits(Tag, _Component);
  return _createClass(Tag, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.__destroyed = true;
    }
  }, {
    key: "handleClose",
    value: function handleClose(from) {
      var _this2 = this;
      var _this$props2 = this.props,
        animation = _this$props2.animation,
        onClose = _this$props2.onClose;
      var hasAnimation = support.animation && animation;

      // 先执行回调
      var result = onClose(from, this.tagNode);

      // 如果回调函数返回 false，则阻止关闭行为
      if (result !== false && !this.__destroyed) {
        this.setState({
          visible: false
        }, function () {
          // 如果没有动画，则直接执行 afterClose
          !hasAnimation && _this2.props.afterClose(_this2.tagNode);
        });
      }
    }

    // 标签体点击
  }, {
    key: "handleBodyClick",
    value: function handleBodyClick(e) {
      var _this$props3 = this.props,
        closable = _this$props3.closable,
        closeArea = _this$props3.closeArea,
        onClick = _this$props3.onClick;
      if (closable && closeArea === 'tag') {
        this.handleClose('tag');
      }
      if (typeof onClick === 'function') {
        return onClick(e);
      }
    }
  }, {
    key: "handleTailClick",
    value: function handleTailClick(e) {
      e && e.preventDefault();
      e && e.stopPropagation();
      this.handleClose('tail');
    }
  }, {
    key: "handleAnimationInit",
    value: function handleAnimationInit(node) {
      this.props.afterAppear(node);
    }
  }, {
    key: "handleAnimationEnd",
    value: function handleAnimationEnd(node) {
      this.props.afterClose(node);
    }
  }, {
    key: "renderAnimatedTag",
    value: function renderAnimatedTag(children, animationName) {
      return /*#__PURE__*/React.createElement(Animate, {
        animation: animationName,
        afterAppear: this.handleAnimationInit,
        afterLeave: this.handleAnimationEnd
      }, children);
    }
  }, {
    key: "renderIcon",
    value: function renderIcon(leftCls) {
      var icon = this.props.icon;
      if (icon) {
        if (typeof icon === 'string') {
          return /*#__PURE__*/React.createElement(Icon, {
            type: icon,
            className: leftCls
          });
        } else {
          return /*#__PURE__*/React.cloneElement(icon, {
            className: leftCls
          });
        }
      }
    }
  }, {
    key: "handleMouseDown",
    value: function handleMouseDown(e) {
      e && e.preventDefault();
      e && e.stopPropagation();
    }
  }, {
    key: "renderTailNode",
    value: function renderTailNode() {
      var _this$props4 = this.props,
        prefix = _this$props4.prefix,
        closable = _this$props4.closable,
        locale = _this$props4.locale;
      if (!closable) {
        return null;
      }
      return /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefix, "tag-close-btn"),
        onClick: this.handleTailClick,
        onMouseDown: this.handleMouseDown,
        role: "button",
        "aria-label": locale["delete"]
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "remove"
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;
      var _this$props5 = this.props,
        prefix = _this$props5.prefix,
        type = _this$props5.type,
        size = _this$props5.size,
        _shape = _this$props5._shape,
        closable = _this$props5.closable,
        closeArea = _this$props5.closeArea,
        className = _this$props5.className,
        children = _this$props5.children,
        animation = _this$props5.animation,
        disabled = _this$props5.disabled,
        color = _this$props5.color,
        rtl = _this$props5.rtl;
      var visible = this.state.visible;
      var others = obj.pickOthers(Tag.propTypes, this.props);
      var shape = closable ? 'closable' : _shape;
      var isChecked = _shape === 'checkable' && this.props['aria-checked'];
      var bodyClazz = classNames(["".concat(prefix, "tag"), "".concat(prefix, "tag-").concat(color), "".concat(prefix, "tag-").concat(shape), "".concat(prefix, "tag-level-").concat(type), "".concat(prefix, "tag-").concat(size)], _defineProperty(_defineProperty({}, "".concat(prefix, "tag-closable"), closable), "".concat(prefix, "tag-body-pointer"), closable && closeArea === 'tag'), className);
      // icon class
      var leftCls = "".concat(prefix, "tag-left-icon");
      // close btn
      var tailNode = this.renderTailNode();
      // tag node
      var tagNode = !visible ? null : /*#__PURE__*/React.createElement("div", _extends({
        className: bodyClazz,
        onClick: this.handleBodyClick,
        onKeyDown: this.onKeyDown,
        tabIndex: disabled ? '' : '0',
        role: "button",
        "aria-disabled": disabled,
        disabled: disabled,
        dir: rtl ? 'rtl' : undefined,
        ref: function ref(n) {
          _this3.tagNode = n;
        }
      }, others), /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefix, "tag-body")
      }, this.renderIcon(leftCls), children), isChecked && type === 'normal' ? /*#__PURE__*/React.createElement(Icon, {
        className: "".concat(prefix, "tag-checkable-tick"),
        size: "xs",
        type: "tick-bold"
      }) : null, tailNode);
      if (animation && support.animation) {
        return this.renderAnimatedTag(tagNode, "".concat(prefix, "tag-zoom"));
      }

      // 未开启或不支持动画
      return tagNode;
    }
  }]);
}(Component);
_defineProperty(Tag, "displayName", 'Tag');
_defineProperty(Tag, "propTypes", {
  /**
   * 标签类名前缀,提供给二次开发者用
   * @default next-
   */
  prefix: PropTypes.string,
  /**
   * 标签的类型
   */
  type: PropTypes.oneOf(['normal', 'primary']),
  /**
   * 标签的尺寸（large 尺寸为兼容表单场景 large = medium）
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  closable: PropTypes.bool,
  /**
   * 是否开启动效
   */
  animation: PropTypes.bool,
  closeArea: PropTypes.oneOf(['tag', 'tail']),
  onClose: PropTypes.func,
  afterClose: PropTypes.func,
  /**
   * 标签出现动画结束后执行的回调
   */
  afterAppear: PropTypes.func,
  className: PropTypes.any,
  children: PropTypes.node,
  /**
   * 点击回调
   */
  onClick: PropTypes.func,
  _shape: PropTypes.oneOf(['default', 'closable', 'checkable']),
  disabled: PropTypes.bool,
  rtl: PropTypes.bool,
  locale: PropTypes.object,
  /**
   * color 标签的颜色，可选值 'red'、'green'、'yellow'、'blue'、'gray'
   */
  color: PropTypes.string,
  /**
   * icon 左侧图标
   */
  icon: PropTypes.any
});
_defineProperty(Tag, "defaultProps", {
  prefix: 'next-',
  type: 'normal',
  size: 'medium',
  closeArea: 'tail',
  color: 'blue',
  animation: false,
  onClose: noop,
  afterClose: noop,
  afterAppear: noop,
  onClick: noop,
  _shape: 'default',
  disabled: false,
  rtl: false,
  locale: zhCN.Tag
});
export default ConfigProvider.config(Tag);