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

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

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

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-02-04 10:32:45
* @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
*/
import React, { ReactNode, useEffect, useMemo, useState } from 'react';
@@ -31,9 +31,18 @@ interface LeftConfigProps {
function LeftConfig(props: LeftConfigProps) {
const [menuSelect, setMenuSelect] = useState('0');
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(() => {
return props.config.getConfig().leftRenderListCategory;
}, [props.config]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.config, force]);
const [search, setSearch] = useState('');
@@ -103,7 +112,15 @@ function LeftConfig(props: LeftConfigProps) {
{...dragEventResolve(v)}
>
<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
@@ -126,7 +143,15 @@ function LeftConfig(props: LeftConfigProps) {
{...dragEventResolve(v)}
>
<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
style={{

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

@@ -2,12 +2,13 @@
* @Author: yehuozhili
* @Date: 2021-03-14 05:40:37
* @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
*/
import Container from './container';
import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
import UserConfig from '../config';
import { ComponentItemFactory } from '..';
export interface PreviewProps {
config: UserConfig;
@@ -48,19 +49,47 @@ function Preview(props: PreviewProps): ReactElement {
props.config
.getEventCenter()
.syncEventMap(props.config.getStore().getData(), props.config.getStoreChanger());
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);
}
});
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) {

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-02-25 21:16:58
* @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
*/
import React from 'react';
@@ -171,6 +171,7 @@ export const defaultStore: IStoreData = {
containerColor: 'rgba(255,255,255,1)',
title: 'dooring',
bodyColor: 'rgba(255,255,255,1)',
script: [],
},
modalConfig: {},
};
@@ -355,6 +356,9 @@ export class UserConfig {
public iframeOrigin = '';
public iframeId = 'yh-container-iframe';
public i18n = true;
public SCRIPTGLOBALNAME = 'DOORINGXPLUGIN';
public scriptLoading = false;
public leftForceUpdate = () => {};
constructor(initConfig?: Partial<InitConfig>) {
const mergeConfig = userConfigMerge(defaultConfig, initConfig);
this.initConfig = mergeConfig;
@@ -472,6 +476,7 @@ export class UserConfig {
const mergeConfig = userConfigMerge(defaultConfig, v);
this.initConfig = mergeConfig;
this.init();
this.leftForceUpdate();
this.store.forceUpdate();
}
/**
@@ -484,6 +489,7 @@ export class UserConfig {
obj.leftRenderListCategory = v;
this.initConfig = userConfigMerge(this.initConfig, obj);
this.init();
this.leftForceUpdate();
this.store.forceUpdate();
}
@@ -497,6 +503,7 @@ export class UserConfig {
obj.rightRenderListCategory = v;
this.initConfig = userConfigMerge(this.initConfig, obj);
this.init();
this.leftForceUpdate();
this.store.forceUpdate();
}
@@ -510,6 +517,7 @@ export class UserConfig {
obj.leftAllRegistMap = [v];
this.initConfig = userConfigMerge(this.initConfig, obj);
this.init();
this.leftForceUpdate();
this.store.forceUpdate();
}
@@ -521,6 +529,7 @@ export class UserConfig {
setConfig(v: Partial<InitConfig>) {
this.initConfig = userConfigMerge(this.initConfig, v);
this.init();
this.leftForceUpdate();
this.store.forceUpdate();
}
@@ -596,6 +605,54 @@ export class UserConfig {
this.init();
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;

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

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

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @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
*/
import { innerDragState } from '../innerDrag/state';

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 12:09:11
* @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
*/
import { RefObject } from 'react';