guoshujing/dooring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 0.9.2

Browse Source
This commit is contained in:
yehuozhili
2021-09-28 22:36:03 +08:00
parent 464fef69c9
commit 02337bae3c
14 changed files with 199 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@@ -1,5 +1,9 @@
## changelog ## changelog
## 0.9.2
增加远程组件调用全流程，component中增加url属性，便于script加载。
## 0.9.1 ## 0.9.1
增加config.i18n配置，不使用国际化则不需要导入intl的context。 增加config.i18n配置，不使用国际化则不需要导入intl的context。

4
packages/dooringx-doc/src/changelog/1.1.md
View File

@@ -4,6 +4,10 @@ order: 1
--- ---
## changelog ## changelog
## 0.9.2
增加远程组件调用全流程，component中增加url属性，便于script加载。
## 0.9.1 ## 0.9.1
增加config.i18n配置，不使用国际化则不需要导入intl的context。 增加config.i18n配置，不使用国际化则不需要导入intl的context。

2
packages/dooringx-example/.umirc.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-07-07 11:11:52 * @Date: 2021-07-07 11:11:52
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-07-17 10:15:46 * @LastEditTime: 2021-09-28 21:15:36
* @FilePath: \dooringx\packages\dooringx-example\.umirc.ts * @FilePath: \dooringx\packages\dooringx-example\.umirc.ts
*/ */
import { defineConfig } from 'umi'; import { defineConfig } from 'umi';

18
packages/dooringx-example/src/layouts/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-07-07 14:51:17 * @Date: 2021-07-07 14:51:17
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-09-27 21:44:56 * @LastEditTime: 2021-09-28 16:33:32
* @FilePath: \dooringx\packages\dooringx-example\src\layouts\index.tsx * @FilePath: \dooringx\packages\dooringx-example\src\layouts\index.tsx
*/ */
import { Button } from 'antd'; import { Button } from 'antd';
@@ -19,7 +19,7 @@ import { locale } from 'dooringx-lib';
import { localeKey } from '../../../dooringx-lib/dist/locale'; import { localeKey } from '../../../dooringx-lib/dist/locale';
export const config = new UserConfig(plugin); export const config = new UserConfig(plugin);
export const configContext = createContext<UserConfig>(config); export const configContext = createContext<UserConfig>(config);
config.i18n = false; //config.i18n = false;
// 自定义右键 // 自定义右键
const contextMenuState = config.getContextMenuState(); const contextMenuState = config.getContextMenuState();
const unmountContextMenu = contextMenuState.unmountContextMenu; const unmountContextMenu = contextMenuState.unmountContextMenu;
@@ -84,12 +84,12 @@ export const LocaleContext = createContext<LocaleContextType>({
export default function Layout({ children }: IRouteComponentProps) { export default function Layout({ children }: IRouteComponentProps) {
const [l, setLocale] = useState<localeKey>('zh-CN'); const [l, setLocale] = useState<localeKey>('zh-CN');
// return ( return (
// <LocaleContext.Provider value={{ change: setLocale, current: l }}> <LocaleContext.Provider value={{ change: setLocale, current: l }}>
// <IntlProvider messages={locale.localeMap[l]} locale={l} defaultLocale={l}> <IntlProvider messages={locale.localeMap[l]} locale={l} defaultLocale={l}>
// <configContext.Provider value={config}>{children}</configContext.Provider> <configContext.Provider value={config}>{children}</configContext.Provider>
// </IntlProvider> </IntlProvider>
// </LocaleContext.Provider> </LocaleContext.Provider>
// ); );
return <configContext.Provider value={config}>{children}</configContext.Provider>; return <configContext.Provider value={config}>{children}</configContext.Provider>;
} }

19
packages/dooringx-example/src/pages/document.ejs Normal file
View File

@@ -0,0 +1,19 @@
<!--
* @Author: yehuozhili
* @Date: 2021-09-28 21:10:15
* @LastEditors: yehuozhili
* @LastEditTime: 2021-09-28 21:11:22
* @FilePath: \dooringx\packages\dooringx-example\src\pages\document.ejs
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dooringx-example</title>
</head>
<script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
<body>
</body>
</html>

26
packages/dooringx-example/src/pages/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-05-15 12:49:28 * @Date: 2021-05-15 12:49:28
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-27 16:24:39 * @LastEditTime: 2021-09-28 21:58:21
* @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx * @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx
*/ */
import { import {
@@ -15,12 +15,13 @@ import {
Control, Control,
} from 'dooringx-lib'; } from 'dooringx-lib';
import { InsertRowBelowOutlined } from '@ant-design/icons'; import { InsertRowBelowOutlined } from '@ant-design/icons';
import { useContext } from 'react'; import { useContext, useState } from 'react';
import { configContext, LocaleContext } from '@/layouts'; import { configContext, LocaleContext } from '@/layouts';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { PREVIEWSTATE } from '@/constant'; import { PREVIEWSTATE } from '@/constant';
import { Button, Popover } from 'antd'; import { Button, Input, Popover } from 'antd';
import { localeKey } from '../../../dooringx-lib/dist/locale'; import { localeKey } from '../../../dooringx-lib/dist/locale';
import { LeftRegistComponentMapItem } from 'dooringx-lib/dist/core/crossDrag';
export const HeaderHeight = '40px'; export const HeaderHeight = '40px';
const footerConfig = function () { const footerConfig = function () {
@@ -45,6 +46,9 @@ export default function IndexPage() {
}, [config]); }, [config]);
const [state] = useStoreState(config, subscribeFn, everyFn); const [state] = useStoreState(config, subscribeFn, everyFn);
const [value, setValue] = useState('');
return ( return (
<div {...innerContainerDragUp(config)}> <div {...innerContainerDragUp(config)}>
<div style={{ height: HeaderHeight }}> <div style={{ height: HeaderHeight }}>
@@ -71,6 +75,22 @@ export default function IndexPage() {
> >
切换语言 切换语言
</Button> </Button>
<Input
style={{ width: 200 }}
value={value}
onChange={(e) => setValue(e.target.value)}
></Input>
<Button
onClick={() => {
const leftprops: Partial<LeftRegistComponentMapItem> = {
type: 'basic',
img: 'https://img.guguzhu.com/d/file/android/ico/2021/09/08/rytzi2w34tm.png',
};
config.scriptSingleLoad(value, leftprops);
}}
>
远程组件
</Button>
</div> </div>
<div <div
style={{ style={{

2
packages/dooringx-lib/package.json
View File

@@ -1,5 +1,5 @@
{ {
"version": "0.9.1", "version": "0.9.2",
"license": "MIT", "license": "MIT",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist/dooringx-lib.esm.js", "module": "dist/dooringx-lib.esm.js",

33
packages/dooringx-lib/src/components/leftConfig.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-02-04 10:32:45 * @Date: 2021-02-04 10:32:45
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-16 20:32:23 * @LastEditTime: 2021-09-28 21:28:41
* @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx * @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx
*/ */
import React, { ReactNode, useEffect, useMemo, useState } from 'react'; import React, { ReactNode, useEffect, useMemo, useState } from 'react';
@@ -31,9 +31,18 @@ interface LeftConfigProps {
function LeftConfig(props: LeftConfigProps) { function LeftConfig(props: LeftConfigProps) {
const [menuSelect, setMenuSelect] = useState('0'); const [menuSelect, setMenuSelect] = useState('0');
const [leftRender, setLeftRender] = useState<ReactNode | null>(null); const [leftRender, setLeftRender] = useState<ReactNode | null>(null);
const [force, setForce] = useState(0);
useMemo(() => {
props.config.leftForceUpdate = () => {
setForce((v) => v + 1);
};
}, [props.config]);
const leftMapRenderListCategory = useMemo(() => { const leftMapRenderListCategory = useMemo(() => {
return props.config.getConfig().leftRenderListCategory; return props.config.getConfig().leftRenderListCategory;
}, [props.config]); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.config, force]);
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
@@ -103,7 +112,15 @@ function LeftConfig(props: LeftConfigProps) {
{...dragEventResolve(v)} {...dragEventResolve(v)}
> >
<div className={`${styles.redbox} yh-left-item-img-wrap`}> <div className={`${styles.redbox} yh-left-item-img-wrap`}>
{v.imgCustom ? v.imgCustom : <img src={v.img} alt="component"></img>} {v.imgCustom ? (
v.imgCustom
) : (
<img
src={v.img}
style={{ width: '100%', height: '100%' }}
alt="component"
></img>
)}
</div> </div>
<div <div
@@ -126,7 +143,15 @@ function LeftConfig(props: LeftConfigProps) {
{...dragEventResolve(v)} {...dragEventResolve(v)}
> >
<div className={`${styles.redbox} yh-left-item-img-wrap`}> <div className={`${styles.redbox} yh-left-item-img-wrap`}>
{v.imgCustom ? v.imgCustom : <img src={v.img} alt="component"></img>} {v.imgCustom ? (
v.imgCustom
) : (
<img
src={v.img}
style={{ width: '100%', height: '100%' }}
alt="component"
></img>
)}
</div> </div>
<div <div
style={{ style={{

57
packages/dooringx-lib/src/components/preview.tsx
View File

@@ -2,12 +2,13 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-03-14 05:40:37 * @Date: 2021-03-14 05:40:37
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-19 16:46:56 * @LastEditTime: 2021-09-28 22:26:00
* @FilePath: \dooringx\packages\dooringx-lib\src\components\preview.tsx * @FilePath: \dooringx\packages\dooringx-lib\src\components\preview.tsx
*/ */
import Container from './container'; import Container from './container';
import React, { ReactElement, ReactNode, useEffect, useState } from 'react'; import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
import UserConfig from '../config'; import UserConfig from '../config';
import { ComponentItemFactory } from '..';
export interface PreviewProps { export interface PreviewProps {
config: UserConfig; config: UserConfig;
@@ -48,19 +49,47 @@ function Preview(props: PreviewProps): ReactElement {
props.config props.config
.getEventCenter() .getEventCenter()
.syncEventMap(props.config.getStore().getData(), props.config.getStoreChanger()); .syncEventMap(props.config.getStore().getData(), props.config.getStoreChanger());
setTimeout(() => {
// 设置全局 const finalFn = () => {
const bodyColor = props.config.getStore().getData().globalState?.bodyColor; setTimeout(() => {
if (bodyColor) { // 设置全局
document.body.style.backgroundColor = bodyColor; const bodyColor = props.config.getStore().getData().globalState?.bodyColor;
} if (bodyColor) {
if (props.completeFn) { document.body.style.backgroundColor = bodyColor;
props.completeFn(); }
} if (props.completeFn) {
if (props.loadingState === undefined) { props.completeFn();
setLoading(false); }
} 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]); }, [props, props.config]);
if (isEdit) { if (isEdit) {

59
packages/dooringx-lib/src/config/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-02-25 21:16:58 * @Date: 2021-02-25 21:16:58
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-09-27 17:34:21 * @LastEditTime: 2021-09-28 22:05:04
* @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
*/ */
import React from 'react'; import React from 'react';
@@ -171,6 +171,7 @@ export const defaultStore: IStoreData = {
containerColor: 'rgba(255,255,255,1)', containerColor: 'rgba(255,255,255,1)',
title: 'dooring', title: 'dooring',
bodyColor: 'rgba(255,255,255,1)', bodyColor: 'rgba(255,255,255,1)',
script: [],
}, },
modalConfig: {}, modalConfig: {},
}; };
@@ -355,6 +356,9 @@ export class UserConfig {
public iframeOrigin = ''; public iframeOrigin = '';
public iframeId = 'yh-container-iframe'; public iframeId = 'yh-container-iframe';
public i18n = true; public i18n = true;
public SCRIPTGLOBALNAME = 'DOORINGXPLUGIN';
public scriptLoading = false;
public leftForceUpdate = () => {};
constructor(initConfig?: Partial<InitConfig>) { constructor(initConfig?: Partial<InitConfig>) {
const mergeConfig = userConfigMerge(defaultConfig, initConfig); const mergeConfig = userConfigMerge(defaultConfig, initConfig);
this.initConfig = mergeConfig; this.initConfig = mergeConfig;
@@ -472,6 +476,7 @@ export class UserConfig {
const mergeConfig = userConfigMerge(defaultConfig, v); const mergeConfig = userConfigMerge(defaultConfig, v);
this.initConfig = mergeConfig; this.initConfig = mergeConfig;
this.init(); this.init();
this.leftForceUpdate();
this.store.forceUpdate(); this.store.forceUpdate();
} }
/** /**
@@ -484,6 +489,7 @@ export class UserConfig {
obj.leftRenderListCategory = v; obj.leftRenderListCategory = v;
this.initConfig = userConfigMerge(this.initConfig, obj); this.initConfig = userConfigMerge(this.initConfig, obj);
this.init(); this.init();
this.leftForceUpdate();
this.store.forceUpdate(); this.store.forceUpdate();
} }
@@ -497,6 +503,7 @@ export class UserConfig {
obj.rightRenderListCategory = v; obj.rightRenderListCategory = v;
this.initConfig = userConfigMerge(this.initConfig, obj); this.initConfig = userConfigMerge(this.initConfig, obj);
this.init(); this.init();
this.leftForceUpdate();
this.store.forceUpdate(); this.store.forceUpdate();
} }
@@ -510,6 +517,7 @@ export class UserConfig {
obj.leftAllRegistMap = [v]; obj.leftAllRegistMap = [v];
this.initConfig = userConfigMerge(this.initConfig, obj); this.initConfig = userConfigMerge(this.initConfig, obj);
this.init(); this.init();
this.leftForceUpdate();
this.store.forceUpdate(); this.store.forceUpdate();
} }
@@ -521,6 +529,7 @@ export class UserConfig {
setConfig(v: Partial<InitConfig>) { setConfig(v: Partial<InitConfig>) {
this.initConfig = userConfigMerge(this.initConfig, v); this.initConfig = userConfigMerge(this.initConfig, v);
this.init(); this.init();
this.leftForceUpdate();
this.store.forceUpdate(); this.store.forceUpdate();
} }
@@ -596,6 +605,54 @@ export class UserConfig {
this.init(); this.init();
this.store.forceUpdate(); this.store.forceUpdate();
} }
scriptSingleLoad(
src: string,
leftProps: Partial<LeftRegistComponentMapItem>,
callback?: Function
) {
let isEdit = this.storeChanger.isEdit();
let globalState = this.store.getData().globalState;
if (isEdit) {
globalState = this.storeChanger.getOrigin()!.now.globalState;
}
if (globalState['script'].includes(src)) {
console.error(src + 'scripts have been loaded');
return;
}
if (!this.scriptLoading) {
this.scriptLoading = true;
const script = document.createElement('script');
script.src = src;
script.onload = () => {
const item = window[this.SCRIPTGLOBALNAME as any] as unknown as ComponentItemFactory;
try {
const left = leftProps;
left.component = item.name;
left.displayName = item.display;
this.scriptRegistComponentSingle(item, left as LeftRegistComponentMapItem);
} catch (e) {
console.error(e);
}
// 前面加载会重置store 新增组件需要事件初始化
setTimeout(() => {
window[this.SCRIPTGLOBALNAME as any] = undefined as any;
isEdit = this.storeChanger.isEdit();
globalState = this.store.getData().globalState;
if (isEdit) {
globalState = this.storeChanger.getOrigin()!.now.globalState;
}
globalState['script'].push(src);
this.store.forceUpdate();
this.scriptLoading = false;
if (callback) {
callback();
}
});
};
document.body.appendChild(script);
}
}
} }
export default UserConfig; export default UserConfig;

5
packages/dooringx-lib/src/core/components/abstract.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-03-14 04:29:09 * @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-07-26 12:06:00 * @LastEditTime: 2021-09-28 20:48:17
* @FilePath: \dooringx\packages\dooringx-lib\src\core\components\abstract.ts * @FilePath: \dooringx\packages\dooringx-lib\src\core\components\abstract.ts
*/ */
import { ComponentItem } from './componentItem'; import { ComponentItem } from './componentItem';
@@ -17,6 +17,7 @@ export class ComponentItemFactory implements ComponentItem {
public resize: ComponentItem['resize'] = true, public resize: ComponentItem['resize'] = true,
public needPosition: ComponentItem['needPosition'] = true, public needPosition: ComponentItem['needPosition'] = true,
public init: ComponentItem['init'] = () => {}, public init: ComponentItem['init'] = () => {},
public destroy: ComponentItem['destroy'] = () => {} public destroy: ComponentItem['destroy'] = () => {},
public url: ComponentItem['url'] = ''
) {} ) {}
} }

5
packages/dooringx-lib/src/core/components/componentItem.ts
View File

@@ -2,8 +2,8 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-03-14 04:29:09 * @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-07-06 23:45:21 * @LastEditTime: 2021-09-28 20:47:36
* @FilePath: \dooringv2\packages\dooring-v2-lib\src\core\components\componentItem.ts * @FilePath: \dooringx\packages\dooringx-lib\src\core\components\componentItem.ts
*/ */
import UserConfig from '../../config'; import UserConfig from '../../config';
import Store from '../store'; import Store from '../store';
@@ -26,6 +26,7 @@ export interface ComponentItem {
props: Record<string, CreateOptionsResAll[]>; // 配置属性 props: Record<string, CreateOptionsResAll[]>; // 配置属性
render: (data: IBlockType, context: any, store: Store, config: UserConfig) => JSX.Element; render: (data: IBlockType, context: any, store: Store, config: UserConfig) => JSX.Element;
destroy: () => void; destroy: () => void;
url: string;
} }
export type ComponentRenderConfigProps = { export type ComponentRenderConfigProps = {
data: IBlockType; data: IBlockType;

2
packages/dooringx-lib/src/core/focusHandler/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-03-14 04:29:09 * @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-07-27 14:36:07 * @LastEditTime: 2021-09-28 17:14:16
* @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx * @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx
*/ */
import { innerDragState } from '../innerDrag/state'; import { innerDragState } from '../innerDrag/state';

2
packages/dooringx-lib/src/core/innerDrag/state.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-03-14 12:09:11 * @Date: 2021-03-14 12:09:11
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-04 11:39:02 * @LastEditTime: 2021-09-28 16:57:05
* @FilePath: \dooringx\packages\dooringx-lib\src\core\innerDrag\state.ts * @FilePath: \dooringx\packages\dooringx-lib\src\core\innerDrag\state.ts
*/ */
import { RefObject } from 'react'; import { RefObject } from 'react';