From bdc95b93c6ebae1ddd394c4359e62a9c5e1caa48 Mon Sep 17 00:00:00 2001 From: hufeixiong <673632758@qq.com> Date: Thu, 19 Aug 2021 16:53:57 +0800 Subject: [PATCH] add preview props --- .../dooringx-example/src/pages/iframeTest.tsx | 2 +- packages/dooringx-example/src/pages/index.tsx | 3 +- .../dooringx-lib/src/components/preview.tsx | 73 ++++- packages/dooringx-lib/src/config/index.tsx | 21 +- packages/dooringx-lib/src/index.less | 302 +++++++++--------- 5 files changed, 229 insertions(+), 172 deletions(-) diff --git a/packages/dooringx-example/src/pages/iframeTest.tsx b/packages/dooringx-example/src/pages/iframeTest.tsx index ddffda8..bcafd8e 100644 --- a/packages/dooringx-example/src/pages/iframeTest.tsx +++ b/packages/dooringx-example/src/pages/iframeTest.tsx @@ -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 */ diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx index 2602601..572b910 100644 --- a/packages/dooringx-example/src/pages/index.tsx +++ b/packages/dooringx-example/src/pages/index.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]); diff --git a/packages/dooringx-lib/src/components/preview.tsx b/packages/dooringx-lib/src/components/preview.tsx index 2dba6c6..5f05070 100644 --- a/packages/dooringx-lib/src/components/preview.tsx +++ b/packages/dooringx-lib/src/components/preview.tsx @@ -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
{props.loadText ? props.loadText : 'loading'}
; + const loadingNode =
{props.loadText ? props.loadText : 'loading'}
; + const container = ( + <> + + + ); + if (props.loadingState === undefined) { + if (loading) { + return loadingNode; + } else { + return container; + } } else { - return ( - <> - - - ); + if (props.loadingState) { + return loadingNode; + } else { + return container; + } } } } diff --git a/packages/dooringx-lib/src/config/index.tsx b/packages/dooringx-lib/src/config/index.tsx index 7490f4f..c15dedf 100644 --- a/packages/dooringx-lib/src/config/index.tsx +++ b/packages/dooringx-lib/src/config/index.tsx @@ -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; diff --git a/packages/dooringx-lib/src/index.less b/packages/dooringx-lib/src/index.less index 84baff2..9fe5c43 100644 --- a/packages/dooringx-lib/src/index.less +++ b/packages/dooringx-lib/src/index.less @@ -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; -} \ No newline at end of file + position: absolute; + top: -35px; + left: calc(50% - 10px); + cursor: grab; + font-size: 20px; +}