ps-frame-father/es/components/Badge/index.js

An enterprise-class UI design language and React components implementation

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React from "react";
import classnames from 'classnames';
import PropTypes from 'prop-types';
import "./index.css";
var colorArr = {
  'success': '#52c41a',
  'warning': '#faad14',
  'error': '#f5222d',
  'default': '#d9d9d9',
  'processing': '#1890ff'
};
/**
 * 徽标数组件
 * @param {style} 更改badge样式
 * @param {color} 自定义小圆点的颜色
 * @param {count} 展示的数字
 * @param {dot} 不展示数字,只展示一个小圆点
 * @param {offset} 设置状态点的偏移
 * @param {overflowCount} 展示封顶的数字
 * @param {showZero} 当数值为0时是否展示Badge
 * @param {status} 设置badge为状态点, 类型有success|warning|error|default|processing
 * @param {text} 当设置status时状态点的文本
 */

function Badge(props) {
  var color = props.color,
      _props$count = props.count,
      count = _props$count === void 0 ? 0 : _props$count,
      dot = props.dot,
      offset = props.offset,
      overflowCount = props.overflowCount,
      showZero = props.showZero,
      status = props.status,
      text = props.text,
      style = props.style,
      children = props.children;
  return /*#__PURE__*/React.createElement("div", {
    className: "xBadgeWrap"
  }, status || color ? /*#__PURE__*/React.createElement("div", {
    className: "statusDotWrap"
  }, /*#__PURE__*/React.createElement("span", {
    className: "dot",
    style: {
      backgroundColor: color || colorArr[status] || colorArr.default
    }
  }), text) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: classnames('badge', dot ? 'badgeDot' : ''),
    style: _objectSpread({
      right: offset ? offset[0] + 'px' : '',
      top: offset ? offset[1] + 'px' : '',
      display: !showZero && !count ? 'none' : 'inline-block'
    }, style)
  }, !dot && (overflowCount && overflowCount < count ? "".concat(overflowCount, "+") : count)), children));
}

Badge.propTypes = {
  style: PropTypes.object,
  color: PropTypes.string,
  count: PropTypes.number,
  dot: PropTypes.bool,
  offset: PropTypes.array,
  overflowCount: PropTypes.number,
  showZero: PropTypes.bool,
  status: PropTypes.string,
  zIndex: PropTypes.number,
  text: PropTypes.string
};
export default Badge;