@alicloud/cloud-charts/lib/Wcontainer/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 _divider = _interopRequireDefault(require("./views/divider"));
var _log = _interopRequireWildcard(require("../common/log"));
var _platform = require("../common/platform");
var _constants = require("../constants");
require("./index.css");
var _excluded = ["width", "height", "arrange", "title", "titleBorder", "operation", "className", "style", "titleStyle", "contentStyle", "fullContent", "isMobile", "catchError", "onError"];
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 + "-wcontainer";
var Wcontainer = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(Wcontainer, _React$Component);
  function Wcontainer(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.container = void 0;
    _this.state = {
      criticalError: null
    };

    // 图表初始化时记录日志
    (0, _log["default"])('Wcontainer', 'init');
    (0, _log.warn)('Wcontainer', 'Wcontainer已经不推荐使用，建议改为ProCard组件');
    if (props.catchError) {
      _this.componentDidCatch = function (error, info) {
        var onError = _this.props.onError;
        var customError = null;
        if (onError) {
          customError = onError(error, info);
        }
        if (customError !== false) {
          _this.setState({
            criticalError: error
          });
        }
      };
    }
    return _this;
  }
  var _proto = Wcontainer.prototype;
  _proto.renderTitle = function renderTitle(title, titleBorder, operation, titleStyle) {
    var titleBorderCls = titleBorder ? prefix + "-title-border" : '';
    return /*#__PURE__*/React.createElement("div", {
      className: prefix + "-title " + titleBorderCls,
      style: titleStyle
    }, title, operation ? /*#__PURE__*/React.createElement("div", {
      className: prefix + "-operation"
    }, operation) : null);
  };
  _proto.renderMainNormal = function renderMainNormal(contentStyle, fullContent) {
    var _this$props = this.props,
      propsChildren = _this$props.children,
      title = _this$props.title;
    var oneChild = React.Children.count(propsChildren) === 1;
    // @ts-ignore
    if (oneChild && propsChildren && propsChildren.type && propsChildren.type.isG2Chart || fullContent) {
      return /*#__PURE__*/React.createElement("div", {
        className: prefix + "-main " + prefix + "-main-one-chart " + (title ? '' : 'no-title'),
        style: contentStyle
      }, propsChildren);
    }
    return /*#__PURE__*/React.createElement("div", {
      className: prefix + "-main " + (title ? '' : 'no-title'),
      style: contentStyle
    }, /*#__PURE__*/React.createElement("div", {
      className: prefix + "-row " + prefix + "-row-no-padding " + prefix + "-row-align-center"
    }, React.Children.map(propsChildren, function (child, i) {
      if (!child) {
        return child;
      }
      if (oneChild) {
        return /*#__PURE__*/React.createElement("div", {
          className: prefix + "-col " + prefix + "-col-24",
          key: i
        }, child);
      }
      // @ts-ignore
      if (child.type.displayName === 'Wicon' || child.type.displayName === 'Wcircle') {
        return /*#__PURE__*/React.createElement("div", {
          className: prefix + "-col " + prefix + "-col-fixed-2",
          key: i
        }, child);
      }
      // @ts-ignore
      if (child.type.isG2Chart) {
        return /*#__PURE__*/React.createElement("div", {
          className: prefix + "-col " + prefix + "-col-fixed-4",
          key: i
        }, child);
      }
      // @ts-ignore
      if (child.type.displayName === 'Divider') {
        return /*#__PURE__*/React.createElement("div", {
          className: prefix + "-col " + prefix + "-col-fixed-1",
          key: i
        }, child);
      }
      return /*#__PURE__*/React.createElement("div", {
        className: prefix + "-col",
        key: i
      }, child);
    })));
  };
  _proto.renderMainCross = function renderMainCross(contentStyle) {
    var maxColPerRow = 0;
    var currentColPerRow = 0;
    // 计算栅格的ColSpan
    React.Children.forEach(this.props.children, function (child) {
      // @ts-ignore
      if (child.type.displayName !== 'Divider') {
        currentColPerRow += 1;
        // @ts-ignore
      } else if (child.type && child.type !== 'combiner') {
        if (currentColPerRow > maxColPerRow) {
          maxColPerRow = currentColPerRow;
        }
        currentColPerRow = 0;
      }
    });
    var ColPerRow = ~~(24 / maxColPerRow);
    return /*#__PURE__*/React.createElement("div", {
      className: prefix + "-main " + prefix + "-cross",
      style: contentStyle
    }, /*#__PURE__*/React.createElement("div", {
      className: prefix + "-multi-row-container"
    }, chunks(this.props.children, ColPerRow)));
  };
  _proto.renderError = function renderError() {
    var title = this.props.title;
    var stack = this.state.criticalError.stack;
    return /*#__PURE__*/React.createElement("div", {
      className: prefix + "-main " + prefix + "-main-critical-error " + (title ? '' : 'no-title')
    }, /*#__PURE__*/React.createElement("pre", null, stack ? stack : this.state.criticalError.toString()));
  };
  _proto.render = function render() {
    var _classNames,
      _this2 = this;
    var _this$props2 = this.props,
      width = _this$props2.width,
      height = _this$props2.height,
      arrange = _this$props2.arrange,
      title = _this$props2.title,
      titleBorder = _this$props2.titleBorder,
      operation = _this$props2.operation,
      className = _this$props2.className,
      style = _this$props2.style,
      titleStyle = _this$props2.titleStyle,
      contentStyle = _this$props2.contentStyle,
      fullContent = _this$props2.fullContent,
      isMobile = _this$props2.isMobile,
      catchError = _this$props2.catchError,
      onError = _this$props2.onError,
      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props2, _excluded);
    var mainClasses = (0, _classnames["default"])((_classNames = {}, _classNames[_constants.FullCrossName] = true, _classNames["" + prefix] = true, _classNames[prefix + "-mobile"] = (0, _platform.isMobileWithProps)(this.props), _classNames[className] = !!className, _classNames));
    var criticalError = catchError && this.state.criticalError;
    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
      className: mainClasses,
      style: (0, _extends2["default"])({
        width: width,
        minHeight: height,
        height: height
      }, style)
    }, otherProps, {
      ref: function ref(o) {
        _this2.container = o;
      }
    }), title && this.renderTitle(title, titleBorder, operation, titleStyle), criticalError && this.renderError(), !criticalError && arrange === 'normal' && this.renderMainNormal(contentStyle, fullContent), !criticalError && arrange === 'cross' && this.renderMainCross(contentStyle));
  };
  return Wcontainer;
}(React.Component);
Wcontainer.displayName = 'Wcontainer';
Wcontainer.defaultProps = {
  arrange: 'normal',
  height: '100%',
  operation: '',
  titleBorder: true,
  catchError: true
};
Wcontainer.divider = _divider["default"];
Wcontainer.combiner = 'combiner';
var _default = exports["default"] = Wcontainer;
function chunks(arr, maxSpan) {
  var rs = [];
  var oneRow = [];
  var len = React.Children.count(arr);
  React.Children.forEach(arr, function (child, i) {
    // @ts-ignore
    if (child.type && child.type.displayName === 'Divider') {
      rs.push( /*#__PURE__*/React.createElement("div", {
        className: prefix + "-row " + prefix + "-row-across " + prefix + "-row-align-center",
        key: i
      }, oneRow));
      oneRow = [];
      // @ts-ignore
    } else if (child.type === 'combiner' && oneRow.length) {
      var lastChild = oneRow[oneRow.length - 1].props.children;
      var lastSpan = oneRow[oneRow.length - 1].props.span;
      oneRow[oneRow.length - 1] = /*#__PURE__*/React.createElement("div", {
        className: prefix + "-col " + prefix + "-col-" + (lastSpan + maxSpan),
        key: i
      }, lastChild);
    } else if (i === len - 1) {
      oneRow.push( /*#__PURE__*/React.createElement("div", {
        className: prefix + "-col " + prefix + "-col-" + maxSpan,
        key: i
      }, child));
      rs.push( /*#__PURE__*/React.createElement("div", {
        className: prefix + "-row " + prefix + "-row-across " + prefix + "-row-align-center",
        key: i
      }, oneRow));
    } else {
      oneRow.push( /*#__PURE__*/React.createElement("div", {
        className: prefix + "-col " + prefix + "-col-" + maxSpan,
        key: i
      }, child));
    }
  });
  return rs;
}