@alicloud/cloud-charts
Version:
145 lines (142 loc) • 5.71 kB
JavaScript
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["forwardedRef"];
import * as React from 'react';
// import { FullCrossName } from '../constants';
// import Wplaceholder from '../Wplaceholder';
import { getText } from '../ChartProvider';
import themes from '../themes';
/**
* errorWrap 错误捕获HOC
*
* */
/*#__PURE__*/
function errorWrap(Component) {
var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(ErrorBoundary, _React$Component);
function ErrorBoundary() {
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.state = {
errorStack: null
};
_this.chart = void 0;
_this.chartDom = void 0;
_this.chartId = void 0;
_this.size = void 0;
// 低版本React中，复制可能用到的属性。
_this.oldReactRef = function (chartInstance) {
if (chartInstance) {
// 复制旧版本可能用到的属性
_this.chart = chartInstance.chart;
_this.chartId = chartInstance.chartId;
_this.chartDom = chartInstance.chartDom;
_this.size = chartInstance.size;
}
};
return _this;
}
var _proto = ErrorBoundary.prototype;
_proto.shouldComponentUpdate = function shouldComponentUpdate() {
if (this.state.errorStack) {
// 在update前重置error标记
// 为顾及React16.3之前的用户，因此没有将该逻辑放在getDerivedStateFromProps里
this.setState({
errorStack: null
});
}
return true;
};
_proto.componentDidCatch = function componentDidCatch(error) {
// Display fallback UI
this.setState({
errorStack: error.stack
});
};
_proto.render = function render() {
if (this.state.errorStack) {
var _this$props;
// const { className = '', style, height } = this.props;
// @ts-ignore
var _Component$contextTyp = Component.contextType._currentValue,
language = _Component$contextTyp.language,
locale = _Component$contextTyp.locale;
// You can render any custom fallback UI
// return <pre className={`${FullCrossName} widgets-error-info ${className}`} style={style}>{this.state.errorStack}</pre>;
// return (
// <Wplaceholder
// error
// // locale={{
// // // todo: 国际化
// // error: '图表异常',
// // }}
// style={{
// height: height ? Number(height) : undefined,
// }}
// />
// );
var errorInfo = /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}
}, /*#__PURE__*/React.createElement("svg", {
width: "13.990234375px",
height: "13.990234375px",
viewBox: "0 0 13.990234375 13.990234375"
}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
d: "M13.2992,4.0833C12.1972,1.5882,9.71352,0.00200162,6.99922,0C5.33879,-0.00111527,3.72987,0.576434,2.44922,1.6333L12.3659,11.55C14.1045,9.4635,14.497,6.5439,13.2992,4.0833ZM11.55,12.3667L1.6333,2.44995C0.576382,3.73057,-0.00117366,5.33951,0,6.99995C0.00200179,9.71425,1.5883,12.198,4.0833,13.3C6.544,14.4978,9.4635,14.1053,11.55,12.3667Z",
fillRule: "evenodd",
fill: themes['widgets-error-svg-color']
}))), /*#__PURE__*/React.createElement("div", {
style: {
fontSize: 12,
color: themes['widgets-color-text-3'],
marginLeft: 5
}
}, getText('error', ((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.language) || language, locale)));
// @ts-ignore
return /*#__PURE__*/React.createElement(Component, _extends({}, this.props, {
errorInfo: errorInfo
}));
}
var _this$props2 = this.props,
_this$props2$forwarde = _this$props2.forwardedRef,
forwardedRef = _this$props2$forwarde === void 0 ? this.oldReactRef : _this$props2$forwarde,
rest = _objectWithoutPropertiesLoose(_this$props2, _excluded);
// @ts-ignore 将自定义的 prop 属性 “forwardedRef” 定义为 ref
return /*#__PURE__*/React.createElement(Component, _extends({
ref: forwardedRef
}, rest));
};
return ErrorBoundary;
}(React.Component);
ErrorBoundary.isG2Chart = true;
ErrorBoundary.displayName = Component.displayName;
// static propTypes = Component.propTypes;
ErrorBoundary.defaultProps = Component.defaultProps;
ErrorBoundary.RawChart = Component;
if (React.forwardRef) {
var forwardRefFunc = function forwardRefFunc(props, ref) {
return /*#__PURE__*/React.createElement(ErrorBoundary, _extends({}, props, {
forwardedRef: ref
}));
};
var result = /*#__PURE__*/React.forwardRef(forwardRefFunc);
// @ts-ignore
result.isG2Chart = true;
// @ts-ignore
result.RawChart = Component;
result.displayName = Component.displayName;
// result.propTypes = Component.propTypes;
result.defaultProps = Component.defaultProps;
return result;
}
return ErrorBoundary;
}
export default errorWrap;