@aliretail/react-materials-components/lib/Dashboard/dashboard.js

B 端物料组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _loading = _interopRequireDefault(require("@alifd/next/lib/loading"));

var _button = _interopRequireDefault(require("@alifd/next/lib/button"));

var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));

var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));

var React = _interopRequireWildcard(require("react"));

var PropTypes = _interopRequireWildcard(require("prop-types"));

var _lodash = _interopRequireDefault(require("lodash"));

var _StatusTag = require("../StatusTag");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var Row = _grid["default"].Row,
    Col = _grid["default"].Col;
var colMax = 6;
var typeToColor = {
  warning: 'orange',
  middle: 'blue',
  success: 'green',
  cancel: 'gray',
  error: 'red'
};

var ShowWrapper = function ShowWrapper(props) {
  var isShow = props.isShow,
      children = props.children;

  if (isShow) {
    return children;
  } else {
    return null;
  }
};

var Dashboard = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(Dashboard, _React$Component);

  function Dashboard() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.getSpan = function (len) {
      // 一行最多放6个，多了显示在下一行
      var span = '0';

      if (len === 5) {
        span = '1p5';
      } else if (len <= colMax) {
        span = "" + 24 / len;
      } else {
        span = '4';
      }

      return span;
    };

    return _this;
  }

  var _proto = Dashboard.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        dataSource = _this$props.dataSource,
        isLoading = _this$props.isLoading;
    var span = this.getSpan(dataSource.length);
    return /*#__PURE__*/React.createElement(_loading["default"], {
      visible: isLoading,
      style: {
        width: '100%'
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "aliretail-dashboard-wrapper"
    }, _lodash["default"].chunk(dataSource, colMax).map(function (row, index) {
      return /*#__PURE__*/React.createElement(Row, {
        key: index,
        className: "row",
        gutter: 5
      }, row.map(function (col, colIndex) {
        return /*#__PURE__*/React.createElement(Col, {
          key: colIndex,
          span: span
        }, /*#__PURE__*/React.createElement("div", {
          className: "aliretail-dashboard-item"
        }, /*#__PURE__*/React.createElement("div", {
          className: "aliretail-dashboard-item-label"
        }, /*#__PURE__*/React.createElement("span", {
          className: "label"
        }, col.label), /*#__PURE__*/React.createElement(ShowWrapper, {
          isShow: !!col.labelStatus
        }, /*#__PURE__*/React.createElement("div", {
          className: "aliretail-dashboard-item-labelStatus"
        }, /*#__PURE__*/React.createElement(_StatusTag.StatusTag, {
          color: typeToColor[col.labelStatusType],
          text: col.labelStatus
        }))), /*#__PURE__*/React.createElement(ShowWrapper, {
          isShow: !!col.labelTooltipContent
        }, /*#__PURE__*/React.createElement(_balloon["default"], {
          closable: false,
          trigger: /*#__PURE__*/React.createElement(_icon["default"], {
            type: "prompt",
            size: "medium",
            className: "tooltip-icon",
            style: {
              color: '#ACADB6',
              marginLeft: '4px'
            }
          }),
          triggerType: "click"
        }, col.labelTooltipContent))), /*#__PURE__*/React.createElement("div", {
          className: "aliretail-dashboard-item-value"
        }, /*#__PURE__*/React.createElement("span", {
          className: "value"
        }, col.value), /*#__PURE__*/React.createElement(ShowWrapper, {
          isShow: !!col.valueTooltipTitle
        }, /*#__PURE__*/React.createElement(_balloon["default"], {
          closable: false,
          trigger: /*#__PURE__*/React.createElement(_button["default"], {
            type: "primary",
            text: true,
            style: {
              marginLeft: '12px',
              fontSize: '14px'
            }
          }, col.valueTooltipTitle),
          triggerType: "click"
        }, col.valueTooltipContent)))));
      }));
    })));
  };

  return Dashboard;
}(React.Component);

Dashboard.propTypes = {
  dataSource: PropTypes.arrayOf(PropTypes.object).isRequired
};
Dashboard.defaultProps = {
  data: []
};
var _default = Dashboard;
exports["default"] = _default;