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


'use strict';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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 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, ["width", "height", "arrange", "title", "titleBorder", "operation", "className", "style", "titleStyle", "contentStyle", "fullContent", "isMobile", "catchError", "onError"]);
    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 = Wcontainer;
exports["default"] = _default;

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;
}