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

add example

Browse Source
This commit is contained in:
hufeixiong
2021-07-10 19:35:06 +08:00
parent b1133c8773
commit c27b4eb8e0
50 changed files with 5786 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/dooringx-lib/README.md
View File

@@ -2,15 +2,16 @@
* @Author: yehuozhili
* @Date: 2021-01-31 20:44:16
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-08 20:44:20
* @FilePath: \DooringV2\packages\dooringx-lib\README.md
* @LastEditTime: 2021-07-10 18:07:00
* @FilePath: \dooringx\packages\dooringx-lib\README.md
-->
## DooringX 核心包
## Dooringx-lib
## changelog
- 0.1.7 修改预览特殊条件显示，删除 console
- 0.1.9 增加全局body设置
- 0.1.8 增加弹窗设置，移除modalContainer
- 0.1.7 修改预览特殊条件显示，删除console
- 0.1.6 调整初始缩放，画布初始比例，增加回正画布功能。
- 0.1.5 删除未作按钮，增加 fixed 配置
- 0.1.4 基础功能
- 0.1.5 删除未作按钮，增加fixed配置
- 0.1.4 基础功能

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

@@ -1,9 +1,7 @@
{
"version": "0.1.7",
"version": "0.1.9",
"license": "MIT",
"main": "dist/index.js",
"module": "dist/dooringx-lib.esm.js",
"browser": "dist/dooringx-lib.esm.js",
"typings": "dist/index.d.ts",
"files": [
"dist"
@@ -20,7 +18,8 @@
},
"peerDependencies": {
"react": ">=16.8",
"antd": ">=4"
"antd": ">=4",
"animate.css": ">=4"
},
"name": "dooringx-lib",
"author": "yehuozhili",
@@ -46,7 +45,6 @@
"deepcopy": "^2.1.0",
"react-color": "^2.19.3",
"react-sortable-hoc": "^2.0.0",
"uuid": "^8.3.2",
"animate.css": "^4.1.1"
"uuid": "^8.3.2"
}
}

1
packages/dooringx-lib/src/components/container.tsx
View File

@@ -39,7 +39,6 @@ function Container(props: PropsWithChildren<ContainerProps>) {
return props.state.globalState.containerColor;
}
};
return (
<>
{props.context === 'edit' && (

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

@@ -2,8 +2,8 @@
* @Author: yehuozhili
* @Date: 2021-02-04 10:32:45
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-06 23:55:37
* @FilePath: \dooringv2\packages\dooring-v2-lib\src\components\leftConfig.tsx
* @LastEditTime: 2021-07-10 15:47:34
* @FilePath: \DooringV2\packages\dooringx-lib\src\components\leftConfig.tsx
*/
import React, { ReactNode, useEffect, useMemo, useState } from 'react';
import { Input, Menu } from 'antd';
@@ -42,7 +42,7 @@ function LeftConfig(props: LeftConfigProps) {
cache = config.leftAllRegistMap.filter((k) => k.type === type);
cache.forEach((v) => props.config.asyncRegistComponent(v.component));
setLeftRender(
<div className={styles.leftco}>
<div className={`${styles.leftco} yh-leftcomp`}>
<div
style={{
display: 'flex',
@@ -53,7 +53,7 @@ function LeftConfig(props: LeftConfigProps) {
>
<div
style={{
width: 100,
width: 120,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',

6
packages/dooringx-lib/src/components/modalRender.tsx
View File

@@ -29,6 +29,8 @@ export function ModalRender(props: ModalRenderProps) {
}, [props.data.modalMap, props.name]);
const { parentDom, rootDom } = props;
const modalConfig = props.data.modalConfig[props.name];
//这里还要添加个关闭函数，
const unmount = useMemo(() => {
return () => {
@@ -58,7 +60,9 @@ export function ModalRender(props: ModalRenderProps) {
})}
<div
onClick={() => {
unmount();
if (!modalConfig) {
unmount();
}
}}
style={{
backgroundColor: '#716f6f9e',

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 05:40:37
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-08 20:44:45
* @LastEditTime: 2021-07-10 16:09:19
* @FilePath: \DooringV2\packages\dooringx-lib\src\components\preview.tsx
*/
import Container from './container';
@@ -24,6 +24,12 @@ function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElem
.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;
}
setLoading(false);
});
}, [props.config]);

108
packages/dooringx-lib/src/components/rightConfig.tsx
View File

@@ -2,15 +2,15 @@
* @Author: yehuozhili
* @Date: 2021-03-14 05:42:13
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-05 23:35:05
* @FilePath: \DooringV2\packages\dooring-v2-lib\src\components\rightConfig.tsx
* @LastEditTime: 2021-07-10 16:06:33
* @FilePath: \DooringV2\packages\dooringx-lib\src\components\rightConfig.tsx
*/
import { CreateOptionsRes } from '../core/components/formTypes';
import { IBlockType, IStoreData } from '../core/store/storetype';
import { store } from '../runtime/store';
import { PropsWithChildren, useEffect, useMemo, useState } from 'react';
import React from 'react';
import { Tabs, Input, Row, Col } from 'antd';
import { Tabs, Input, Row, Col, Checkbox } from 'antd';
import UserConfig from '../config';
import { RGBColor, SketchPicker } from 'react-color';
import { rgba2Obj } from '../core/utils';
@@ -89,8 +89,15 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
? rgba2Obj(props.config.getStoreChanger().getOrigin()?.now.globalState.containerColor)
: rgba2Obj(props.config.getStore().getData().globalState.containerColor);
}, [props.config]);
const initColor2 = useMemo(() => {
return props.config.getStoreChanger().isEdit()
? rgba2Obj(props.config.getStoreChanger().getOrigin()?.now.globalState.bodyColor)
: rgba2Obj(props.config.getStore().getData().globalState.bodyColor);
}, [props.config]);
const [color, setColor] = useState<RGBColor>(initColor);
const [color2, setColor2] = useState<RGBColor>(initColor2);
const [colorPickerVisible, setColorPickerVisible] = useState(false);
const [colorPickerVisible2, setColorPickerVisible2] = useState(false);
const initTitle = useMemo(() => {
const title = props.config.getStoreChanger().isEdit()
? props.config.getStoreChanger().getOrigin()?.now.globalState.title
@@ -100,6 +107,9 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
const [title, setTitle] = useState(initTitle);
const customGlobal = props.config.getConfig().rightGlobalCustom;
const isEdit = props.config.getStoreChanger().isEdit();
const modalName = props.config.getStoreChanger().getState().modalEditName;
const originData = props.config.getStoreChanger().getOrigin()?.now;
return (
<div
className="ant-menu"
@@ -137,7 +147,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
})}
</Tabs>
)}
{!current && !customGlobal && (
{!current && !isEdit && !customGlobal && (
<div style={{ padding: '20px' }}>
<Row style={{ padding: '10 0 20px 0', fontWeight: 'bold' }}>全局设置</Row>
<Row style={{ padding: '10px 0' }}>
@@ -230,9 +240,97 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
}
</Col>
</Row>
<Row style={{ padding: '10px 0' }}>
<Col span={6}>body底色</Col>
<Col span={18}>
{
<div style={{ position: 'relative' }}>
<div
onClick={() => {
setColorPickerVisible2((pre) => !pre);
}}
style={{
background: '#fff',
borderRadius: '1px',
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
cursor: 'pointer',
display: 'inline-block',
}}
>
<div
style={{
width: '20px',
height: '20px',
borderRadius: '2px',
background: `rgba(${color2.r}, ${color2.g}, ${color2.b}, ${color2.a})`,
}}
/>
</div>
{colorPickerVisible2 && (
<>
<div style={{ position: 'absolute', zIndex: 2000 }}>
<SketchPicker
color={color2}
onChange={(c) => {
const newcolor = c.rgb;
setColor2(newcolor);
const isEdit = props.config.getStoreChanger().isEdit();
if (isEdit) {
const originData: IStoreData = deepcopy(
props.config.getStoreChanger().getOrigin()!.now
);
originData.globalState.bodyColor = `rgba(${newcolor.r}, ${newcolor.g}, ${newcolor.b}, ${newcolor.a})`;
props.config.getStoreChanger().updateOrigin(originData);
} else {
const originData = deepcopy(props.config.getStore().getData());
originData.globalState.bodyColor = `rgba(${newcolor.r}, ${newcolor.g}, ${newcolor.b}, ${newcolor.a})`;
props.config.getStore().setData(originData);
}
}}
></SketchPicker>
</div>
<div
style={{
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
zIndex: 1000,
}}
onClick={() => setColorPickerVisible2(false)}
/>
</>
)}
</div>
}
</Col>
</Row>
</div>
)}
{!current && !isEdit && customGlobal && customGlobal}
{!current && isEdit && (
<div style={{ padding: '20px' }} className="yh-tcsz">
<Row style={{ padding: '10 0 20px 0', fontWeight: 'bold' }}>弹窗设置</Row>
<Row style={{ padding: '10px 0' }}>
<Col span={8}>取消点击删除弹窗</Col>
<Col span={16} style={{ textAlign: 'right' }}>
<Checkbox
checked={originData ? originData.modalConfig[modalName] : false}
onChange={(e) => {
const val = e.target.checked;
const cloneData = deepcopy(originData);
if (cloneData) {
cloneData.modalConfig[modalName] = val;
props.config.getStoreChanger().updateOrigin(cloneData);
props.config.getStore().forceUpdate();
}
}}
></Checkbox>
</Col>
</Row>
</div>
)}
{!current && customGlobal && customGlobal}
</div>
);
}

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

@@ -2,8 +2,8 @@
* @Author: yehuozhili
* @Date: 2021-02-25 21:16:58
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-08 20:42:22
* @FilePath: \DooringV2\packages\dooringx-lib\src\config\index.tsx
* @LastEditTime: 2021-07-10 18:29:07
* @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
*/
import { IBlockType, IStoreData } from '../core/store/storetype';
import { store } from '../runtime/store';
@@ -23,7 +23,6 @@ import { createModal, unmountMap } from '../components/modalRender';
import { scaleState } from '../core/scale/state';
import { CommanderItemFactory } from '../core/command/abstract';
import MmodalMask from '../core/components/defaultFormComponents/modalMask';
import MmodalContainer from '../core/components/defaultFormComponents/modalContainer';
// 组件部分
@@ -156,7 +155,9 @@ export const defaultStore: IStoreData = {
globalState: {
containerColor: 'rgba(255,255,255,1)',
title: 'dooring',
bodyColor: 'rgba(255,255,255,1)',
},
modalConfig: {},
};
export const defaultConfig: InitConfig = {
@@ -166,8 +167,7 @@ export const defaultConfig: InitConfig = {
rightGlobalCustom: null,
rightRenderListCategory: [],
initComponentCache: {
modalMask: { component: MmodalMask }, // 这2个组件不配置显示
modalContainer: { component: MmodalContainer },
modalMask: { component: MmodalMask }, // 这个组件不配置显示
},
initFunctionMap: {
打开弹窗函数: {
@@ -192,7 +192,9 @@ export const defaultConfig: InitConfig = {
fn: (_ctx, next, _config, args) => {
const modalName = args['_modal'];
const fn = unmountMap.get(modalName);
fn ? fn() : '';
if (fn) {
fn();
}
next();
},
config: [

34
packages/dooringx-lib/src/core/components/defaultFormComponents/modalContainer.tsx
View File

@@ -1,34 +0,0 @@
/*
* @Author: yehuozhili
* @Date: 2021-04-05 19:21:36
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-05 23:56:07
* @FilePath: \DooringV2\packages\dooring-v2-lib\src\core\components\defaultFormComponents\modalContainer.tsx
*/
import React from 'react';
import { ComponentItemFactory } from '../abstract';
const MmodalContainer = new ComponentItemFactory(
'modalContainer',
'模态框容器',
{},
{
props: {},
width: 300,
height: 300,
},
(data) => {
return (
<div
style={{
zIndex: data.zIndex,
width: data.width,
height: data.height,
backgroundColor: 'white',
}}
></div>
);
}
);
export default MmodalContainer;

4
packages/dooringx-lib/src/core/components/index.ts
View File

@@ -2,8 +2,8 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-03-14 04:43:53
* @FilePath: \dooring-v2\src\core\components\index.ts
* @LastEditTime: 2021-07-10 18:34:34
* @FilePath: \dooringx\packages\dooringx-lib\src\core\components\index.ts
*/
import { ComponentItem } from './componentItem';

4
packages/dooringx-lib/src/core/crossDrag/index.ts
View File

@@ -2,8 +2,8 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-04 15:21:54
* @FilePath: \DooringV2\packages\dooring-v2-lib\src\core\crossDrag\index.ts
* @LastEditTime: 2021-07-10 18:34:40
* @FilePath: \dooringx\packages\dooringx-lib\src\core\crossDrag\index.ts
*/
import { store } from '../../runtime/store';
import { componentRegister } from '../../runtime';

4
packages/dooringx-lib/src/core/eventCenter/index.ts
View File

@@ -2,8 +2,8 @@
* @Author: yehuozhili
* @Date: 2021-04-06 19:33:17
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-04 14:41:48
* @FilePath: \DooringV2\packages\dooring-v2-lib\src\core\eventCenter\index.ts
* @LastEditTime: 2021-07-09 16:33:22
* @FilePath: \DooringV2\packages\dooringx-lib\src\core\eventCenter\index.ts
*/
import UserConfig from '../../config';
import { FunctionCenter, FunctionCenterType } from '../functionCenter';

15
packages/dooringx-lib/src/core/functionCenter/index.ts
View File

@@ -2,8 +2,8 @@
* @Author: yehuozhili
* @Date: 2021-04-08 19:59:01
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-07 01:46:17
* @FilePath: \dooringv2\packages\dooringx-lib\src\core\functionCenter\index.ts
* @LastEditTime: 2021-07-09 16:23:02
* @FilePath: \DooringV2\packages\dooringx-lib\src\core\functionCenter\index.ts
*/
import UserConfig from '../../config';
@@ -83,6 +83,17 @@ export class FunctionCenter {
return this.configMap;
}
/**
*
* 删除的组件需要删除动态注册的函数
* @param {string} name
* @memberof FunctionCenter
*/
deleteFunc(name: string) {
delete this.funcitonMap[name];
delete this.configMap[name];
}
/**
*
* 注册函数，同名覆盖，返回删除函数

8
packages/dooringx-lib/src/core/store/index.ts
View File

@@ -1,9 +1,9 @@
/*
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-19 17:07:10
* @FilePath: \dooringv2\packages\dooring-v2-lib\src\core\store\index.ts
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-10 18:17:56
* @FilePath: \dooringx\packages\dooringx-lib\src\core\store\index.ts
*/
import { IStoreData } from './storetype';
import { storeChangerState } from '../storeChanger/state';
@@ -17,9 +17,11 @@ export const initialData: IStoreData = {
modalMap: {},
dataSource: {},
globalState: {},
modalConfig: {},
};
class Store {
static instance: Store;
constructor(
public storeDataList: IStoreData[] = [initialData],
public listeners: Array<Function> = [],

5
packages/dooringx-lib/src/core/store/storetype.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-07 17:00:07
* @LastEditTime: 2021-07-09 17:22:14
* @FilePath: \DooringV2\packages\dooringx-lib\src\core\store\storetype.ts
*/
@@ -17,6 +17,7 @@ export interface IStoreData {
modalMap: Record<string, IStoreData>;
dataSource: Record<string, any>;
globalState: Record<string, any>;
modalConfig: Record<string, any>;
}
export interface IBlockType {
@@ -38,7 +39,7 @@ export interface IBlockType {
functionList: Array<string>; //抛出的函数名
animate: {
animate?: string; //动画名
animationIterationCount?: any;
animationIterationCount?: number | string;
speed?: //动画速度
'animate__slow' | 'animate__slower' | 'animate__fast' | 'animate__faster' | '';
delay?: //首次延迟

23
packages/dooringx-lib/src/core/storeChanger/index.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-04-05 14:55:31
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-07 16:59:54
* @LastEditTime: 2021-07-09 18:31:24
* @FilePath: \DooringV2\packages\dooringx-lib\src\core\storeChanger\index.ts
*/
@@ -43,26 +43,6 @@ function createDefaultModalBlock(): IStoreData['block'] {
animate: {},
fixed: false,
},
{
id: createUid('modal-container'),
name: 'modalContainer',
top: 100,
left: 35,
zIndex: 0,
props: {},
resize: true,
focus: true,
position: 'absolute',
display: 'block',
width: 300,
height: 300,
syncList: [],
canDrag: true,
eventMap: {},
functionList: [],
animate: {},
fixed: false,
},
];
}
@@ -80,6 +60,7 @@ const defaultModalStore: () => IStoreData = () => {
modalMap: {},
dataSource: {},
globalState: {},
modalConfig: {},
};
};

9
packages/dooringx-lib/src/core/utils/icon.ts
View File

@@ -1,7 +1,14 @@
/*
* @Author: yehuozhili
* @Date: 2021-07-10 16:52:41
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-10 18:28:18
* @FilePath: \dooringx\packages\dooringx-lib\src\core\utils\icon.ts
*/
import { createFromIconfontCN } from '@ant-design/icons';
export const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2607370_myr2zkz3ku.js', // 在 iconfont.cn 上生成
scriptUrl: '//at.alicdn.com/t/font_2607370_zx7pglxj1m.js', // 在 iconfont.cn 上生成
extraCommonProps: {
fill: 'currentColor',
stroke: 'currentColor',

4
packages/dooringx-lib/src/core/utils/index.ts
View File

@@ -156,7 +156,7 @@ export const changeLayer = (store: Store, id: string, action: 'up' | 'down' | 'd
* @param {*} from
* @param {*} to
*/
export const arrayMove = (array: any, from: number, to: number) => {
export const arrayMove = (array: Array<any>, from: number, to: number) => {
array = [...array];
arrayMoveMutate(array, from, to);
return array;
@@ -179,7 +179,7 @@ const indexSub = (arrLength: number, toIndex: number) => {
* @param {Number} to Index of where to move the item. If negative, it will begin that many elements from the end / 0 / -1 / 2
* returns A new array with the item moved to the new position [1,2,3] -> [1,3,2]
*/
const arrayMoveMutate = (array: [], from: number, to: number) => {
const arrayMoveMutate = (array: Array<any>, from: number, to: number) => {
const arrLength = array.length;
const startIndex = indexSub(arrLength, from);
if (startIndex >= 0 && startIndex < arrLength) {

11
packages/dooringx-lib/src/hooks/index.ts
View File

@@ -2,10 +2,9 @@
* @Author: yehuozhili
* @Date: 2021-03-14 05:35:15
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-04 17:52:02
* @FilePath: \DooringV2\packages\dooring-v2-lib\src\hooks\index.ts
* @LastEditTime: 2021-07-10 17:46:26
* @FilePath: \dooringx\packages\dooringx-lib\src\hooks\index.ts
*/
import { store } from '../runtime/store';
import { useEffect, useMemo, useState } from 'react';
import UserConfig from '../config';
import { ComponentRenderConfigProps } from '../core/components/componentItem';
@@ -16,11 +15,13 @@ export function useStoreState(
extraFn: Function = () => {},
everyFn: Function = () => {}
) {
const store = config.getStore();
const [state, setState] = useState(store.getData());
const forceUpdate = useState(0)[1];
useEffect(() => {
const unRegister = store.subscribe(() => {
setState(store.getData());
const data = store.getData();
setState(data);
config.getEventCenter().syncEventMap(store.getData(), config.getStoreChanger());
extraFn();
});
@@ -32,7 +33,7 @@ export function useStoreState(
unRegister();
unRegistCommandFn(commandModules, commander);
};
}, [config, extraFn]);
}, [config, extraFn, forceUpdate, store]);
useEffect(() => {
everyFn();
}, [everyFn]);

5
packages/dooringx-lib/src/runtime/index.ts
View File

@@ -2,15 +2,14 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:33:52
* @LastEditors: yehuozhili
* @LastEditTime: 2021-05-30 15:51:50
* @FilePath: \dooringv2\packages\dooring-v2-lib\src\runtime\index.ts
* @LastEditTime: 2021-07-10 18:18:15
* @FilePath: \dooringx\packages\dooringx-lib\src\runtime\index.ts
*/
import CommanderWrapper from '../core/command';
import ComponentRegister from '../core/components';
import { FormComponentRegister } from '../core/components/formComponentRegister';
import { StoreChanger } from '../core/storeChanger';
import { store } from './store';
export const commander = new CommanderWrapper(store);
export const componentRegister = new ComponentRegister();
export const formRegister = new FormComponentRegister();