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

add preview props

Browse Source
This commit is contained in:
hufeixiong
2021-08-19 16:53:57 +08:00
parent eb541a6f5d
commit bdc95b93c6
5 changed files with 229 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dooringx-example/src/pages/iframeTest.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-07-17 10:12:11 * @Date: 2021-07-17 10:12:11
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-03 14:06:12 * @LastEditTime: 2021-08-19 16:52:27
* @FilePath: \dooringx\packages\dooringx-example\src\pages\iframeTest.tsx * @FilePath: \dooringx\packages\dooringx-example\src\pages\iframeTest.tsx
*/ */

3
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-12 15:57:35 * @LastEditTime: 2021-08-19 16:52:35
* @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx * @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx
*/ */
import { import {
@@ -37,6 +37,7 @@ export default function IndexPage() {
const everyFn = () => {}; const everyFn = () => {};
const subscribeFn = useCallback(() => { const subscribeFn = useCallback(() => {
//需要去预览前判断下弹窗。
localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData())); localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
}, [config]); }, [config]);

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

@@ -2,14 +2,39 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-03-14 05:40:37 * @Date: 2021-03-14 05:40:37
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-07-10 16:09:19 * @LastEditTime: 2021-08-19 16:46:56
* @FilePath: \DooringV2\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';
function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElement { 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(); const isEdit = props.config.getStoreChanger().isEdit();
/// 这里需要在渲染组件之前必须把所有config加载完成，否则会导致先运行的函数无法运行 /// 这里需要在渲染组件之前必须把所有config加载完成，否则会导致先运行的函数无法运行
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -29,10 +54,14 @@ function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElem
if (bodyColor) { if (bodyColor) {
document.body.style.backgroundColor = bodyColor; document.body.style.backgroundColor = bodyColor;
} }
if (props.completeFn) {
setLoading(false); props.completeFn();
}
if (props.loadingState === undefined) {
setLoading(false);
}
}); });
}, [props.config]); }, [props, props.config]);
if (isEdit) { if (isEdit) {
// 正常情况不会走这 // 正常情况不会走这
@@ -43,18 +72,28 @@ function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElem
</> </>
); );
} else { } else {
if (loading) { const loadingNode = <div>{props.loadText ? props.loadText : 'loading'}</div>;
return <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 { } else {
return ( if (props.loadingState) {
<> return loadingNode;
<Container } else {
config={props.config} return container;
context="preview" }
state={props.config.getStore().getData()}
></Container>
</>
);
} }
} }
} }

21
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-08-16 10:17:55 * @LastEditTime: 2021-08-19 16:17:39
* @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';
@@ -576,6 +576,25 @@ export class UserConfig {
this.componentRegister.emitEvent(name); this.componentRegister.emitEvent(name);
} }
} }
scriptRegistComponentSingle(item: ComponentItemFactory, leftProps: LeftRegistComponentMapItem) {
this.registComponent(item);
this.addCoRegistMap(leftProps);
}
scriptRegistComponentMulti(
items: ComponentItemFactory[],
leftProps: LeftRegistComponentMapItem[]
) {
items.forEach((item) => {
this.registComponent(item);
});
const obj = {} as InitConfig;
obj.leftAllRegistMap = leftProps;
this.initConfig = userConfigMerge(this.initConfig, obj);
this.init();
this.store.forceUpdate();
}
} }
export default UserConfig; export default UserConfig;

300
packages/dooringx-lib/src/index.less
View File

@@ -1,208 +1,206 @@
.yhLeftrender { .yhLeftrender {
overflow: auto; overflow: auto;
.leftco { .leftco {
padding: 10px; padding: 10px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
.coitem { .coitem {
margin: 5px; margin: 5px;
.redbox {
height: 68px;
width: 68px;
// background: var(--redbox-color);
background-color: #f7f8fa;
// line-height: 20px;
display: flex;
align-items: center;
justify-content: center;
.redbox { #icon-checkbox,
height: 68px; #icon-tabs,
width: 68px; #icon-jiantou path {
// background: var(--redbox-color); fill: currentColor;
background-color: #F7F8FA; }
// line-height: 20px;
display: flex;
align-items: center;
justify-content: center;
#icon-checkbox, &:hover {
#icon-tabs, cursor: pointer;
#icon-jiantou path { }
fill: currentColor; }
} }
}
&:hover {
cursor: pointer;
}
}
}
}
} }
.yh_container { .yh_container {
// ::selection { // ::selection {
// color: inherit; // color: inherit;
// background-color: inherit; // background-color: inherit;
// } // }
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
:global(.am-list-item) { :global(.am-list-item) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
:global(.am-list-body) { :global(.am-list-body) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
:global(.ant-input) { :global(.ant-input) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
} }
.yh_container_preview { .yh_container_preview {
:global(.am-list-item) { :global(.am-list-item) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
:global(.am-list-body) { :global(.am-list-body) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
:global(.ant-input) { :global(.ant-input) {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
} }
.yh_block_focus { .yh_block_focus {
&::before { &::before {
position: absolute; position: absolute;
top: -3px; top: -3px;
left: -3px; left: -3px;
right: -3px; right: -3px;
bottom: -3px; bottom: -3px;
content: ''; content: '';
border: 2px dashed #2196f3; border: 2px dashed #2196f3;
} }
} }
.yhTempDiv { .yhTempDiv {
background-color: #7165fa2b; background-color: #7165fa2b;
} }
.resizepoint { .resizepoint {
position: absolute; position: absolute;
height: 6px; height: 6px;
width: 6px; width: 6px;
background-color: #2196f3; background-color: #2196f3;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
&.l { &.l {
left: -6px; left: -6px;
top: calc(50% - 3px); top: calc(50% - 3px);
&:hover { &:hover {
cursor: e-resize; cursor: e-resize;
} }
} }
&.r { &.r {
right: -6px; right: -6px;
top: calc(50% - 3px); top: calc(50% - 3px);
&:hover { &:hover {
cursor: e-resize; cursor: e-resize;
} }
} }
&.t { &.t {
top: -6px; top: -6px;
left: calc(50% - 3px); left: calc(50% - 3px);
&:hover { &:hover {
cursor: s-resize; cursor: s-resize;
} }
} }
&.b { &.b {
bottom: -6px; bottom: -6px;
left: calc(50% - 3px); left: calc(50% - 3px);
&:hover { &:hover {
cursor: s-resize; cursor: s-resize;
} }
} }
&.lt { &.lt {
top: -6px; top: -6px;
left: -6px; left: -6px;
&:hover { &:hover {
cursor: nw-resize; cursor: nw-resize;
} }
} }
&.lb { &.lb {
bottom: -6px; bottom: -6px;
left: -6px; left: -6px;
&:hover { &:hover {
cursor: ne-resize; cursor: ne-resize;
} }
} }
&.rb { &.rb {
bottom: -6px; bottom: -6px;
right: -6px; right: -6px;
&:hover { &:hover {
cursor: nw-resize; cursor: nw-resize;
} }
} }
&.rt { &.rt {
top: -6px; top: -6px;
right: -6px; right: -6px;
&:hover { &:hover {
cursor: ne-resize; cursor: ne-resize;
} }
} }
} }
.menuWidth.menus { .menuWidth.menus {
width: initial; width: initial;
} }
.menuStyle.menus { .menuStyle.menus {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
height: auto; height: auto;
span:nth-child(1) { span:nth-child(1) {
margin-top: 10px; margin-top: 10px;
} }
span:nth-child(2) { span:nth-child(2) {
margin-left: 0; margin-left: 0;
} }
} }
.menu_footer { .menu_footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
bottom: 0; bottom: 0;
} }
.rotate { .rotate {
position: absolute; position: absolute;
top: -35px; top: -35px;
left: calc(50% - 10px); left: calc(50% - 10px);
cursor: grab; cursor: grab;
font-size: 20px; font-size: 20px;
} }