ant-design-vue/lib/badge/Badge.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _vue = require("vue");

var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));

var _ScrollNumber = _interopRequireDefault(require("./ScrollNumber"));

var _colors = require("../_util/colors");

var _classNames3 = _interopRequireDefault(require("../_util/classNames"));

var _propsUtil = require("../_util/props-util");

var _vnode = require("../_util/vnode");

var _transition = require("../_util/transition");

var _isNumeric = _interopRequireDefault(require("../_util/isNumeric"));

var _configProvider = require("../config-provider");

var _type = require("../_util/type");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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; }

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 _isSlot(s) {
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
}

var BadgeProps = {
  /** Number to show in badge */
  count: _vueTypes.default.VNodeChild,
  showZero: _vueTypes.default.looseBool,

  /** Max count to show */
  overflowCount: _vueTypes.default.number,

  /** whether to show red dot without number */
  dot: _vueTypes.default.looseBool,
  prefixCls: _vueTypes.default.string,
  scrollNumberPrefixCls: _vueTypes.default.string,
  status: _vueTypes.default.oneOf((0, _type.tuple)('success', 'processing', 'default', 'error', 'warning')),
  color: _vueTypes.default.string,
  text: _vueTypes.default.VNodeChild,
  offset: _vueTypes.default.arrayOf(_vueTypes.default.oneOfType([String, Number])),
  numberStyle: _vueTypes.default.style,
  title: _vueTypes.default.string
};

function isPresetColor(color) {
  return _colors.PresetColorTypes.indexOf(color) !== -1;
}

var _default2 = (0, _vue.defineComponent)({
  name: 'ABadge',
  props: (0, _propsUtil.initDefaultProps)(BadgeProps, {
    showZero: false,
    dot: false,
    overflowCount: 99
  }),
  setup: function setup() {
    return {
      configProvider: (0, _vue.inject)('configProvider', _configProvider.defaultConfigProvider),
      badgeCount: undefined
    };
  },
  methods: {
    getNumberedDispayCount: function getNumberedDispayCount() {
      var overflowCount = this.$props.overflowCount;
      var count = this.badgeCount;
      var displayCount = count > overflowCount ? "".concat(overflowCount, "+") : count;
      return displayCount;
    },
    getDispayCount: function getDispayCount() {
      var isDot = this.isDot(); // dot mode don't need count

      if (isDot) {
        return '';
      }

      return this.getNumberedDispayCount();
    },
    getScrollNumberTitle: function getScrollNumberTitle() {
      var title = this.$props.title;
      var count = this.badgeCount;

      if (title) {
        return title;
      }

      return typeof count === 'string' || typeof count === 'number' ? count : undefined;
    },
    getStyleWithOffset: function getStyleWithOffset() {
      var _this$$props = this.$props,
          offset = _this$$props.offset,
          numberStyle = _this$$props.numberStyle;
      return offset ? _extends({
        right: "".concat(-parseInt(offset[0], 10), "px"),
        marginTop: (0, _isNumeric.default)(offset[1]) ? "".concat(offset[1], "px") : offset[1]
      }, numberStyle) : _extends({}, numberStyle);
    },
    getBadgeClassName: function getBadgeClassName(prefixCls, children) {
      var _classNames;

      var hasStatus = this.hasStatus();
      return (0, _classNames3.default)(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-status"), hasStatus), _defineProperty(_classNames, "".concat(prefixCls, "-dot-status"), hasStatus && this.dot && !this.isZero()), _defineProperty(_classNames, "".concat(prefixCls, "-not-a-wrapper"), !children.length), _classNames));
    },
    hasStatus: function hasStatus() {
      var _this$$props2 = this.$props,
          status = _this$$props2.status,
          color = _this$$props2.color;
      return !!status || !!color;
    },
    isZero: function isZero() {
      var numberedDispayCount = this.getNumberedDispayCount();
      return numberedDispayCount === '0' || numberedDispayCount === 0;
    },
    isDot: function isDot() {
      var dot = this.$props.dot;
      var isZero = this.isZero();
      return dot && !isZero || this.hasStatus();
    },
    isHidden: function isHidden() {
      var showZero = this.$props.showZero;
      var displayCount = this.getDispayCount();
      var isZero = this.isZero();
      var isDot = this.isDot();
      var isEmpty = displayCount === null || displayCount === undefined || displayCount === '';
      return (isEmpty || isZero && !showZero) && !isDot;
    },
    renderStatusText: function renderStatusText(prefixCls) {
      var text = (0, _propsUtil.getComponent)(this, 'text');
      var hidden = this.isHidden();
      return hidden || !text ? null : (0, _vue.createVNode)("span", {
        "class": "".concat(prefixCls, "-status-text")
      }, _isSlot(text) ? text : {
        default: function _default() {
          return [text];
        }
      });
    },
    renderDispayComponent: function renderDispayComponent() {
      var count = this.badgeCount;
      var customNode = count;

      if (!customNode || _typeof(customNode) !== 'object') {
        return undefined;
      }

      return (0, _vnode.cloneElement)(customNode, {
        style: this.getStyleWithOffset()
      }, false);
    },
    renderBadgeNumber: function renderBadgeNumber(prefixCls, scrollNumberPrefixCls) {
      var _scrollNumberCls;

      var _this$$props3 = this.$props,
          status = _this$$props3.status,
          color = _this$$props3.color;
      var count = this.badgeCount;
      var displayCount = this.getDispayCount();
      var isDot = this.isDot();
      var hidden = this.isHidden();
      var scrollNumberCls = (_scrollNumberCls = {}, _defineProperty(_scrollNumberCls, "".concat(prefixCls, "-dot"), isDot), _defineProperty(_scrollNumberCls, "".concat(prefixCls, "-count"), !isDot), _defineProperty(_scrollNumberCls, "".concat(prefixCls, "-multiple-words"), !isDot && count && count.toString && count.toString().length > 1), _defineProperty(_scrollNumberCls, "".concat(prefixCls, "-status-").concat(status), !!status), _defineProperty(_scrollNumberCls, "".concat(prefixCls, "-status-").concat(color), isPresetColor(color)), _scrollNumberCls);
      var statusStyle = this.getStyleWithOffset();

      if (color && !isPresetColor(color)) {
        statusStyle = statusStyle || {};
        statusStyle.background = color;
      }

      return hidden ? null : (0, _vue.withDirectives)((0, _vue.createVNode)(_ScrollNumber.default, {
        "prefixCls": scrollNumberPrefixCls,
        "data-show": !hidden,
        "class": scrollNumberCls,
        "count": displayCount,
        "displayComponent": this.renderDispayComponent(),
        "title": this.getScrollNumberTitle(),
        "style": statusStyle,
        "key": "scrollNumber"
      }, null), [[_vue.vShow, !hidden]]);
    }
  },
  render: function render() {
    var _classNames2;

    var customizePrefixCls = this.prefixCls,
        customizeScrollNumberPrefixCls = this.scrollNumberPrefixCls,
        status = this.status,
        color = this.color;
    var text = (0, _propsUtil.getComponent)(this, 'text');
    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('badge', customizePrefixCls);
    var scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
    var children = (0, _propsUtil.getSlot)(this);
    var count = (0, _propsUtil.getComponent)(this, 'count');

    if (Array.isArray(count)) {
      count = count[0];
    }

    this.badgeCount = count;
    var scrollNumber = this.renderBadgeNumber(prefixCls, scrollNumberPrefixCls);
    var statusText = this.renderStatusText(prefixCls);
    var statusCls = (0, _classNames3.default)((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-status-dot"), this.hasStatus()), _defineProperty(_classNames2, "".concat(prefixCls, "-status-").concat(status), !!status), _defineProperty(_classNames2, "".concat(prefixCls, "-status-").concat(color), isPresetColor(color)), _classNames2));
    var statusStyle = {};

    if (color && !isPresetColor(color)) {
      statusStyle.background = color;
    } // <Badge status="success" />


    if (!children.length && this.hasStatus()) {
      var styleWithOffset = this.getStyleWithOffset();
      var statusTextColor = styleWithOffset && styleWithOffset.color;
      return (0, _vue.createVNode)("span", {
        "class": this.getBadgeClassName(prefixCls, children),
        "style": styleWithOffset
      }, [(0, _vue.createVNode)("span", {
        "class": statusCls,
        "style": statusStyle
      }, null), (0, _vue.createVNode)("span", {
        "style": {
          color: statusTextColor
        },
        "class": "".concat(prefixCls, "-status-text")
      }, _isSlot(text) ? text : {
        default: function _default() {
          return [text];
        }
      })]);
    }

    var transitionProps = (0, _transition.getTransitionProps)(children.length ? "".concat(prefixCls, "-zoom") : '');
    return (0, _vue.createVNode)("span", {
      "class": this.getBadgeClassName(prefixCls, children)
    }, [children, (0, _vue.createVNode)(_transition.Transition, transitionProps, _isSlot(scrollNumber) ? scrollNumber : {
      default: function _default() {
        return [scrollNumber];
      }
    }), statusText]);
  }
});

exports.default = _default2;