60 lines
2.0 KiB
JavaScript
60 lines
2.0 KiB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
import { Spin } from 'antd';
|
|
import { useContext, useEffect, useState } from 'react';
|
|
import { ProHelpProvide } from "./HelpProvide";
|
|
import { RenderContentPanel } from "./RenderContentPanel";
|
|
|
|
/**
|
|
* 异步加载内容的面板组件
|
|
* @param item 指向当前面板的 ProHelpDataSource
|
|
*/
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
export var AsyncContentPanel = function AsyncContentPanel(_ref) {
|
|
var item = _ref.item,
|
|
_onInit = _ref.onInit;
|
|
var _useContext = useContext(ProHelpProvide),
|
|
onLoadContext = _useContext.onLoadContext; // 获取上下文中的 onLoadContext
|
|
var _useState = useState(false),
|
|
_useState2 = _slicedToArray(_useState, 2),
|
|
loading = _useState2[0],
|
|
setLoading = _useState2[1]; // 加载状态
|
|
var _useState3 = useState(),
|
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
content = _useState4[0],
|
|
setContent = _useState4[1]; // 内容数据
|
|
|
|
useEffect(function () {
|
|
if (!item.key) return; // 如果没有key则返回
|
|
setLoading(true); // 开始加载
|
|
onLoadContext === null || onLoadContext === void 0 || onLoadContext(item.key, item).then(function (res) {
|
|
// 调用加载方法
|
|
setLoading(false); // 加载完成
|
|
setContent(res); // 设置内容数据
|
|
});
|
|
}, [item.key]);
|
|
|
|
// 如果没有key，则返回null
|
|
if (!item.key) return null;
|
|
|
|
// 如果正在加载并且有key，则显示加载中的状态
|
|
if (loading && item.key) {
|
|
return /*#__PURE__*/_jsx("div", {
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
width: '100%',
|
|
boxSizing: 'border-box',
|
|
padding: 24
|
|
},
|
|
children: /*#__PURE__*/_jsx(Spin, {})
|
|
}, item.key);
|
|
}
|
|
|
|
// 加载完成后，渲染内容面板
|
|
return /*#__PURE__*/_jsx(RenderContentPanel, {
|
|
onInit: function onInit(ref) {
|
|
_onInit === null || _onInit === void 0 || _onInit(ref);
|
|
},
|
|
dataSourceChildren: content
|
|
});
|
|
}; |