@alicloud/cloud-charts/lib/Wnumber/index.js


'use strict';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _common = require("../common/common");
var _Tooltip = _interopRequireDefault(require("../common/Tooltip"));
var _arrow = _interopRequireDefault(require("../common/arrow"));
var _log = _interopRequireDefault(require("../common/log"));
var _constants = require("../constants");
require("./index.css");
var _excluded = ["className", "style", "status", "unit", "numberTrend", "rightRatioTrend", "rightTitle", "rightRatio", "rightRatioStatus", "trend", "children", "bottomTitle"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var prefix = _constants.PrefixName + "-wnumber";
function getTrendIcon(trend) {
  if (trend === 'raise') {
    return /*#__PURE__*/React.createElement(_arrow["default"], {
      type: "up"
    });
  } else if (trend === 'drop') {
    return /*#__PURE__*/React.createElement(_arrow["default"], {
      type: "down"
    });
  } else {
    return null;
  }
}
var Wnumber = exports["default"] = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(Wnumber, _React$Component);
  function Wnumber(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;

    // 图表初始化时记录日志
    _this.labelRef = /*#__PURE__*/React.createRef();
    _this.numberRef = /*#__PURE__*/React.createRef();
    (0, _log["default"])('Wnumber', 'init');
    return _this;
  }
  var _proto = Wnumber.prototype;
  _proto.renderBottom = function renderBottom(bottomTitle) {
    if (!!bottomTitle) {
      return /*#__PURE__*/React.createElement("div", {
        className: prefix + "-bottomTitle",
        ref: this.labelRef
      }, /*#__PURE__*/React.createElement(_Tooltip["default"], {
        ref: this.labelRef,
        content: bottomTitle || '',
        position: "bottom"
      }), bottomTitle);
    } else {
      return null;
    }
  };
  _proto.renderMain = function renderMain(status, unit, numberTrend, rightRatioTrend, rightTitle, rightRatio, rightRatioStatus, trend, children) {
    var numberTrendIcon = getTrendIcon(numberTrend);
    var numberClasses = prefix + "-number";
    var rightRatioTrendIcon = getTrendIcon(rightRatioTrend);
    var rightRatioTrendClasses = prefix + "-rightRatio " + rightRatioTrend + " " + (rightRatioStatus ? (0, _common.getStatusColorName)(rightRatioStatus) : '');
    return /*#__PURE__*/React.createElement("div", {
      className: prefix + "-main " + numberTrend + " " + (status ? (0, _common.getStatusColorName)(status) : '')
    }, numberTrend && /*#__PURE__*/React.createElement("span", {
      className: prefix + "-leftIcon"
    }, numberTrendIcon), /*#__PURE__*/React.createElement("span", {
      className: numberClasses
    }, (0, _common.beautifyNumber)(children)), unit && /*#__PURE__*/React.createElement("span", {
      className: prefix + "-unit"
    }, unit), rightTitle && /*#__PURE__*/React.createElement("span", {
      className: prefix + "-rightTitle"
    }, rightTitle), rightRatio && /*#__PURE__*/React.createElement("span", {
      className: rightRatioTrendClasses
    }, rightRatioTrend && /*#__PURE__*/React.createElement("span", {
      className: prefix + "-rightRatioIcon"
    }, rightRatioTrendIcon), rightRatio), trend && /*#__PURE__*/React.createElement("span", {
      className: prefix + "-trend"
    }, trend()));
  };
  _proto.render = function render() {
    var _classNames;
    var _this$props = this.props,
      className = _this$props.className,
      style = _this$props.style,
      status = _this$props.status,
      unit = _this$props.unit,
      numberTrend = _this$props.numberTrend,
      rightRatioTrend = _this$props.rightRatioTrend,
      rightTitle = _this$props.rightTitle,
      rightRatio = _this$props.rightRatio,
      rightRatioStatus = _this$props.rightRatioStatus,
      trend = _this$props.trend,
      children = _this$props.children,
      bottomTitle = _this$props.bottomTitle,
      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, _excluded);
    var mainClasses = (0, _classnames["default"])((_classNames = {}, _classNames[_constants.FullCrossName] = true, _classNames["" + prefix] = true, _classNames[className] = !!className, _classNames));
    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
      className: mainClasses,
      style: style
    }, otherProps), this.renderMain(status, unit, numberTrend, rightRatioTrend, rightTitle, rightRatio, rightRatioStatus, trend, children), this.renderBottom(bottomTitle));
  };
  return Wnumber;
}(React.Component);
Wnumber.displayName = 'Wnumber';
Wnumber.defaultProps = {
  numberTrend: '',
  rightRatioTrend: '',
  status: ''
};