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

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

import { _ as __rest } from "./tslib.es6.js";
import React__default, { useRef } from "react";
import { TriangleUp, TriangleDown } from "@nutui/icons-react";
import { C as ComponentDefaults } from "./typings.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { value: 0, digits: 2, symbol: false, zero: false, left: false, sync: true, color: "", riseColor: "var(--nutui-brand-6)", dropColor: "var(--nutui-secondary-1)", riseIcon: null, dropIcon: null });
const TrendArrow = (props) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { value, digits, symbol, zero, left, sync, color, riseColor, dropColor, riseIcon, dropIcon, className, style, children } = _a, rest = __rest(_a, ["value", "digits", "symbol", "zero", "left", "sync", "color", "riseColor", "dropColor", "riseIcon", "dropIcon", "className", "style", "children"]);
  const classPrefix = "nut-trendarrow";
  const rateTrend = useRef(value > 0);
  const myFixed = (num, digit = 2) => {
    if (Object.is(parseFloat(num), NaN)) {
      return console.warn(`传入的值：${num}不是一个数字`);
    }
    num = parseFloat(num);
    const numPow = Math.pow(10, digit);
    return (Math.round((num + Number.EPSILON) * numPow) / numPow).toFixed(digit);
  };
  const calcStyle = (() => {
    const arrowColor = rateTrend.current ? riseColor : dropColor;
    const textEquArrowColor = sync ? arrowColor : color;
    const style2 = {
      color: value === 0 ? color : textEquArrowColor
    };
    return style2;
  })();
  const calcRate = (() => {
    rateTrend.current = value > 0;
    const absRate = Math.abs(value);
    if (!zero && value === 0) {
      return "--";
    }
    const resultRate = `${// eslint-disable-next-line no-nested-ternary
    symbol && value !== 0 ? rateTrend.current ? "+" : "-" : ""}${myFixed(Number(absRate), digits)}%`;
    return resultRate;
  })();
  const calcIconProps = (() => {
    const iconProps = {
      color: rateTrend.current ? riseColor : dropColor
    };
    return iconProps;
  })();
  const renderContent = (left2) => {
    const classNameSuffix = !left2 ? "icon-after" : "icon-before";
    return React__default.createElement("span", { className: `${classPrefix}-${classNameSuffix} ${classPrefix}-value`, style: calcStyle }, calcRate);
  };
  return React__default.createElement(
    "div",
    Object.assign({ className: `${classPrefix} ${className}`, style }, rest),
    !left && renderContent(!left),
    Number(value) !== 0 && React__default.createElement(React__default.Fragment, null, rateTrend.current ? React__default.createElement(React__default.Fragment, null, riseIcon || React__default.createElement(TriangleUp, { color: calcIconProps.color })) : React__default.createElement(React__default.Fragment, null, dropIcon || React__default.createElement(TriangleDown, { color: calcIconProps.color }))),
    left && renderContent(!left)
  );
};
TrendArrow.displayName = "NutTrendArrow";
export {
  TrendArrow as default
};