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

一个设计体系组件库

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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) {
  _inherits(Tag, _Component);

  var _super = _createSuper(Tag);

  function Tag(props) {
    var _this;

    _classCallCheck(this, Tag);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_this), ['handleBodyClick', 'handleTailClick', 'handleAnimationInit', 'handleAnimationEnd', 'renderTailNode']);
    return _this;
  }

  _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 _classNames,
          _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)], (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "tag-closable"), closable), _defineProperty(_classNames, "".concat(prefix, "tag-body-pointer"), closable && closeArea === 'tag'), _classNames), 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;
    }
  }]);

  return Tag;
}(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);