130 lines
3.1 KiB
TypeScript
130 lines
3.1 KiB
TypeScript
/*
|
||
* @Author: yehuozhili
|
||
* @Date: 2021-03-14 05:40:37
|
||
* @LastEditors: yehuozhili
|
||
* @LastEditTime: 2021-09-28 22:26:00
|
||
* @FilePath: \dooringx\packages\dooringx-lib\src\components\preview.tsx
|
||
*/
|
||
import Container from './container';
|
||
import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
|
||
import UserConfig from '../config';
|
||
import { ComponentItemFactory } from '..';
|
||
|
||
export interface PreviewProps {
|
||
config: UserConfig;
|
||
/**
|
||
*
|
||
* loading node
|
||
* @type {ReactNode}
|
||
* @memberof PreviewProps
|
||
*/
|
||
loadText?: ReactNode;
|
||
/**
|
||
*
|
||
* 手动维护状态
|
||
* @type {boolean}
|
||
* @memberof PreviewProps
|
||
*/
|
||
loadingState?: boolean;
|
||
/**
|
||
*
|
||
* 页面链接完后调用
|
||
* @type {Function}
|
||
* @memberof PreviewProps
|
||
*/
|
||
completeFn?: Function;
|
||
}
|
||
|
||
function Preview(props: PreviewProps): ReactElement {
|
||
const isEdit = props.config.getStoreChanger().isEdit();
|
||
/// 这里需要在渲染组件之前必须把所有config加载完成，否则会导致先运行的函数无法运行
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
// 链接数据
|
||
props.config
|
||
.getDataCenter()
|
||
.initAddToDataMap(props.config.getStore().getData(), props.config.getStoreChanger());
|
||
// 链接事件
|
||
props.config
|
||
.getEventCenter()
|
||
.syncEventMap(props.config.getStore().getData(), props.config.getStoreChanger());
|
||
|
||
const finalFn = () => {
|
||
setTimeout(() => {
|
||
// 设置全局
|
||
const bodyColor = props.config.getStore().getData().globalState?.bodyColor;
|
||
if (bodyColor) {
|
||
document.body.style.backgroundColor = bodyColor;
|
||
}
|
||
if (props.completeFn) {
|
||
props.completeFn();
|
||
}
|
||
if (props.loadingState === undefined) {
|
||
setLoading(false);
|
||
}
|
||
});
|
||
};
|
||
// 加载 script
|
||
const scripts = props.config.getStore().getData().globalState['script'];
|
||
if (scripts && Array.isArray(scripts) && scripts.length > 0) {
|
||
const allp = scripts.map((v) => {
|
||
return new Promise((res) => {
|
||
const s = document.createElement('script');
|
||
s.src = v;
|
||
document.body.appendChild(s);
|
||
s.onload = () => {
|
||
const item = window[
|
||
props.config.SCRIPTGLOBALNAME as any
|
||
] as unknown as ComponentItemFactory;
|
||
props.config.registComponent(item);
|
||
res(0);
|
||
};
|
||
});
|
||
});
|
||
Promise.all(allp)
|
||
.then(() => {
|
||
finalFn();
|
||
})
|
||
.catch(() => {
|
||
finalFn();
|
||
});
|
||
}
|
||
}, [props, props.config]);
|
||
|
||
if (isEdit) {
|
||
// 正常情况不会走这
|
||
const state = props.config.getStoreChanger().getOrigin()!.now;
|
||
return (
|
||
<>
|
||
<Container config={props.config} context="preview" state={state}></Container>
|
||
</>
|
||
);
|
||
} else {
|
||
const loadingNode = <div>{props.loadText ? props.loadText : 'loading'}</div>;
|
||
const container = (
|
||
<>
|
||
<Container
|
||
config={props.config}
|
||
context="preview"
|
||
state={props.config.getStore().getData()}
|
||
></Container>
|
||
</>
|
||
);
|
||
if (props.loadingState === undefined) {
|
||
if (loading) {
|
||
return loadingNode;
|
||
} else {
|
||
return container;
|
||
}
|
||
} else {
|
||
if (props.loadingState) {
|
||
return loadingNode;
|
||
} else {
|
||
return container;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
export default Preview;
|