@nutui/nutui-react/dist/esm/badge2.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import React__default from "react";
import classNames from "classnames";
import { C as ComponentDefaults } from "./typings.js";
import { useRtl } from "./ConfigProvider.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { value: "", dot: false, max: 99, top: "4", right: "8", color: "", fill: "solid" });
const Badge = (props) => {
  var _a;
  const rtl = useRtl();
  const { className, style, value, max, children, dot, top, right, color, fill } = Object.assign(Object.assign({}, defaultProps), props);
  const classPrefix = "nut-badge";
  const classes = classNames(classPrefix, className, {
    [`${classPrefix}-${fill}`]: fill === "outline"
  });
  function content() {
    if (dot || typeof value === "object" || value === 0)
      return null;
    if (typeof value === "number" && typeof max === "number") {
      return max < value ? `${max}+` : `${value}`;
    }
    return value;
  }
  function isIcon() {
    if (typeof value === "object" && value)
      return value;
  }
  function isNumber() {
    if (typeof value === "number" && value)
      return value;
  }
  function isString() {
    if (typeof value === "string" && value)
      return value;
  }
  const contentClasses = classNames({ [`${classPrefix}-dot`]: dot }, `${classPrefix}-content`, { [`${classPrefix}-sup`]: isNumber() || isString() || dot }, {
    [`${classPrefix}-one`]: typeof content() === "string" && ((_a = `${content()}`) === null || _a === void 0 ? void 0 : _a.length) === 1
  });
  const getStyle = () => {
    const style2 = {};
    style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
    const dir = rtl ? "left" : "right";
    style2[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`;
    if (color) {
      if (fill === "outline") {
        style2.color = color;
        style2.background = "#fff";
        if (!(color === null || color === void 0 ? void 0 : color.includes("gradient"))) {
          style2.border = `1px solid ${color}`;
        }
      } else {
        style2.color = "#fff";
        style2.background = color;
      }
    }
    return style2;
  };
  return React__default.createElement(
    "div",
    { className: classes, style },
    isIcon() && React__default.createElement("div", { className: `${classPrefix}-icon` }, value),
    children,
    !isIcon() && React__default.createElement("div", { className: contentClasses, style: getStyle() }, content())
  );
};
Badge.displayName = "NutBadge";
export {
  Badge as B
};