add preview props
This commit is contained in:
hufeixiong
@@ -2,7 +2,7 @@
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-07-17 10:12:11
|
||||
* @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
|
||||
*/
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-05-15 12:49:28
|
||||
* @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
|
||||
*/
|
||||
import {
|
||||
@@ -37,6 +37,7 @@ export default function IndexPage() {
|
||||
const everyFn = () => {};
|
||||
|
||||
const subscribeFn = useCallback(() => {
|
||||
//需要去预览前判断下弹窗。
|
||||
localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
|
||||
}, [config]);
|
||||
|
||||
|
||||
@@ -2,14 +2,39 @@
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-03-14 05:40:37
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-10 16:09:19
|
||||
* @FilePath: \DooringV2\packages\dooringx-lib\src\components\preview.tsx
|
||||
* @LastEditTime: 2021-08-19 16:46:56
|
||||
* @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';
|
||||
|
||||
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();
|
||||
/// 这里需要在渲染组件之前必须把所有config加载完成，否则会导致先运行的函数无法运行
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -29,10 +54,14 @@ function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElem
|
||||
if (bodyColor) {
|
||||
document.body.style.backgroundColor = bodyColor;
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
if (props.completeFn) {
|
||||
props.completeFn();
|
||||
}
|
||||
if (props.loadingState === undefined) {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
}, [props.config]);
|
||||
}, [props, props.config]);
|
||||
|
||||
if (isEdit) {
|
||||
// 正常情况不会走这
|
||||
@@ -43,18 +72,28 @@ function Preview(props: { config: UserConfig; loadText?: ReactNode }): ReactElem
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
if (loading) {
|
||||
return <div>{props.loadText ? props.loadText : 'loading'}</div>;
|
||||
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 {
|
||||
return (
|
||||
<>
|
||||
<Container
|
||||
config={props.config}
|
||||
context="preview"
|
||||
state={props.config.getStore().getData()}
|
||||
></Container>
|
||||
</>
|
||||
);
|
||||
if (props.loadingState) {
|
||||
return loadingNode;
|
||||
} else {
|
||||
return container;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-02-25 21:16:58
|
||||
* @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
|
||||
*/
|
||||
import React from 'react';
|
||||
@@ -576,6 +576,25 @@ export class UserConfig {
|
||||
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;
|
||||
|
||||
@@ -1,208 +1,206 @@
|
||||
.yhLeftrender {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
|
||||
.leftco {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.leftco {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.coitem {
|
||||
margin: 5px;
|
||||
.coitem {
|
||||
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 {
|
||||
height: 68px;
|
||||
width: 68px;
|
||||
// background: var(--redbox-color);
|
||||
background-color: #F7F8FA;
|
||||
// line-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
#icon-checkbox,
|
||||
#icon-tabs,
|
||||
#icon-jiantou path {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
#icon-checkbox,
|
||||
#icon-tabs,
|
||||
#icon-jiantou path {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yh_container {
|
||||
// ::selection {
|
||||
// color: inherit;
|
||||
// background-color: inherit;
|
||||
// }
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
// ::selection {
|
||||
// color: inherit;
|
||||
// background-color: inherit;
|
||||
// }
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
||||
:global(.am-list-item) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
:global(.am-list-item) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
:global(.am-list-body) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
:global(.am-list-body) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
:global(.ant-input) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
:global(.ant-input) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.yh_container_preview {
|
||||
:global(.am-list-item) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
:global(.am-list-item) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
:global(.am-list-body) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
:global(.am-list-body) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
:global(.ant-input) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
:global(.ant-input) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.yh_block_focus {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
content: '';
|
||||
border: 2px dashed #2196f3;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
content: '';
|
||||
border: 2px dashed #2196f3;
|
||||
}
|
||||
}
|
||||
|
||||
.yhTempDiv {
|
||||
background-color: #7165fa2b;
|
||||
background-color: #7165fa2b;
|
||||
}
|
||||
|
||||
.resizepoint {
|
||||
position: absolute;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
background-color: #2196f3;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
background-color: #2196f3;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
|
||||
&.l {
|
||||
left: -6px;
|
||||
top: calc(50% - 3px);
|
||||
&.l {
|
||||
left: -6px;
|
||||
top: calc(50% - 3px);
|
||||
|
||||
&:hover {
|
||||
cursor: e-resize;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: e-resize;
|
||||
}
|
||||
}
|
||||
|
||||
&.r {
|
||||
right: -6px;
|
||||
top: calc(50% - 3px);
|
||||
&.r {
|
||||
right: -6px;
|
||||
top: calc(50% - 3px);
|
||||
|
||||
&:hover {
|
||||
cursor: e-resize;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: e-resize;
|
||||
}
|
||||
}
|
||||
|
||||
&.t {
|
||||
top: -6px;
|
||||
left: calc(50% - 3px);
|
||||
&.t {
|
||||
top: -6px;
|
||||
left: calc(50% - 3px);
|
||||
|
||||
&:hover {
|
||||
cursor: s-resize;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: s-resize;
|
||||
}
|
||||
}
|
||||
|
||||
&.b {
|
||||
bottom: -6px;
|
||||
left: calc(50% - 3px);
|
||||
&.b {
|
||||
bottom: -6px;
|
||||
left: calc(50% - 3px);
|
||||
|
||||
&:hover {
|
||||
cursor: s-resize;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: s-resize;
|
||||
}
|
||||
}
|
||||
|
||||
&.lt {
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
&.lt {
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
|
||||
&:hover {
|
||||
cursor: nw-resize;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: nw-resize;
|
||||
}
|
||||
}
|
||||
|
||||
&.lb {
|
||||
bottom: -6px;
|
||||
left: -6px;
|
||||
&.lb {
|
||||
bottom: -6px;
|
||||
left: -6px;
|
||||
|
||||
&:hover {
|
||||
cursor: ne-resize;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: ne-resize;
|
||||
}
|
||||
}
|
||||
|
||||
&.rb {
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
&.rb {
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
|
||||
&:hover {
|
||||
cursor: nw-resize;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: nw-resize;
|
||||
}
|
||||
}
|
||||
|
||||
&.rt {
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
&.rt {
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
|
||||
&:hover {
|
||||
cursor: ne-resize;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: ne-resize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuWidth.menus {
|
||||
width: initial;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.menuStyle.menus {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
height: auto;
|
||||
|
||||
span:nth-child(1) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
margin-left: 0;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu_footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
left: calc(50% - 10px);
|
||||
cursor: grab;
|
||||
font-size: 20px;
|
||||
}
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
left: calc(50% - 10px);
|
||||
cursor: grab;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user