mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-04 23:06:31 +08:00
feat: 将ui-react中的组件独立成包
This commit is contained in:
roymondchen
roymondchen
parent
60d2b64aa5
commit
cab36b49a3
@ -33,6 +33,7 @@ module.exports = {
|
||||
'vue/no-mutating-props': 'off',
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'no-param-reassign': 'off',
|
||||
'@typescript-eslint/naming-convention': 'off',
|
||||
'@typescript-eslint/no-require-imports': 'off',
|
||||
"@typescript-eslint/no-misused-promises": [
|
||||
"error",
|
||||
|
||||
1
packages/ui-react/README.md
Normal file
1
packages/ui-react/README.md
Normal file
@ -0,0 +1 @@
|
||||
# [文档](https://tencent.github.io/tmagic-editor/docs/)
|
||||
@ -2,7 +2,8 @@
|
||||
"name": "@tmagic/ui-react",
|
||||
"version": "1.4.19",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"main": "dist/tmagic-ui-react.js",
|
||||
"types": "types/index.d.ts",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
@ -14,26 +15,30 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"scripts": {
|
||||
"react:build": "tsc && vite build"
|
||||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"qrcode": "^1.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0"
|
||||
"@tmagic/react-button": "workspace:*",
|
||||
"@tmagic/react-container": "workspace:*",
|
||||
"@tmagic/react-img": "workspace:*",
|
||||
"@tmagic/react-iterator-container": "workspace:*",
|
||||
"@tmagic/react-overlay": "workspace:*",
|
||||
"@tmagic/react-page": "workspace:*",
|
||||
"@tmagic/react-page-fragment": "workspace:*",
|
||||
"@tmagic/react-page-fragment-container": "workspace:*",
|
||||
"@tmagic/react-qrcode": "workspace:*",
|
||||
"@tmagic/react-text": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:*",
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/utils": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"react-dom": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"rimraf": "^3.0.2",
|
||||
"vite": "^5.3.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,67 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import type { MComponent, MContainer } from '@tmagic/schema';
|
||||
|
||||
import useApp from '../useApp';
|
||||
|
||||
interface ContainerProps {
|
||||
config: MContainer;
|
||||
className: string;
|
||||
style: Record<string, any>;
|
||||
id: string;
|
||||
}
|
||||
|
||||
const Container: React.FC<ContainerProps> = ({ config, id }) => {
|
||||
const { app } = useApp({ config });
|
||||
|
||||
if (!app) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tmagic-id={`${id || config.id || ''}`}
|
||||
className={`magic-ui-container magic-layout-${config.layout}${config.className ? ` ${config.className}` : ''}`}
|
||||
style={app.transformStyle(config.style || {})}
|
||||
>
|
||||
{config.items?.map((item: MComponent | MContainer) => {
|
||||
const MagicUiComp = app.resolveComponent(item.type || 'container');
|
||||
|
||||
if (!MagicUiComp) return null;
|
||||
|
||||
if (item.visible === false) return null;
|
||||
if (item.condResult === false) return null;
|
||||
|
||||
return (
|
||||
<MagicUiComp
|
||||
data-tmagic-id={`${item.id || ''}`}
|
||||
key={item.id}
|
||||
config={item}
|
||||
className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
|
||||
style={app.transformStyle(item.style || {})}
|
||||
></MagicUiComp>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Container.displayName = 'magic-ui-container';
|
||||
|
||||
export default Container;
|
||||
@ -16,31 +16,38 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Button from './button';
|
||||
import Container from './container';
|
||||
import Img from './img';
|
||||
import IteratorContainer from './iterator-container';
|
||||
import Overlay from './overlay';
|
||||
import Page from './page';
|
||||
import pageFragment from './page-fragment';
|
||||
import pageFragmentContainer from './page-fragment-container';
|
||||
import Qrcode from './qrcode';
|
||||
import Text from './text';
|
||||
export { default as AppContent } from './AppContent';
|
||||
export { default as useApp } from './useApp';
|
||||
import Button from '@tmagic/react-button';
|
||||
import Container from '@tmagic/react-container';
|
||||
import Img from '@tmagic/react-img';
|
||||
import IteratorContainer from '@tmagic/react-iterator-container';
|
||||
import Overlay from '@tmagic/react-overlay';
|
||||
import Page from '@tmagic/react-page';
|
||||
import PageFragment from '@tmagic/react-page-fragment';
|
||||
import PageFragmentContainer from '@tmagic/react-page-fragment-container';
|
||||
import QRcode from '@tmagic/react-qrcode';
|
||||
import Text from '@tmagic/react-text';
|
||||
|
||||
export const MagicUiPage = Page;
|
||||
export { default as TMagicUiButton } from '@tmagic/react-button';
|
||||
export { default as TMagicUiContainer } from '@tmagic/react-container';
|
||||
export { default as TMagicUiImg } from '@tmagic/react-img';
|
||||
export { default as TMagicUiIteratorContainer } from '@tmagic/react-iterator-container';
|
||||
export { default as TMagicUiOverlay } from '@tmagic/react-overlay';
|
||||
export { default as TMagicUiPage } from '@tmagic/react-page';
|
||||
export { default as TMagicUiPageFragment } from '@tmagic/react-page-fragment';
|
||||
export { default as TMagicUiPageFragmentContainer } from '@tmagic/react-page-fragment-container';
|
||||
export { default as TMagicUiQRcode } from '@tmagic/react-qrcode';
|
||||
export { default as TMagicUiText } from '@tmagic/react-text';
|
||||
|
||||
const ui: Record<string, any> = {
|
||||
page: Page,
|
||||
container: Container,
|
||||
button: Button,
|
||||
img: Img,
|
||||
text: Text,
|
||||
qrcode: Qrcode,
|
||||
img: Img,
|
||||
qrcode: QRcode,
|
||||
overlay: Overlay,
|
||||
'page-fragment': pageFragment,
|
||||
'page-fragment-container': pageFragmentContainer,
|
||||
'page-fragment-container': PageFragmentContainer,
|
||||
'page-fragment': PageFragment,
|
||||
'iterator-container': IteratorContainer,
|
||||
};
|
||||
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import IteratorContainer from './src/IteratorContainer';
|
||||
|
||||
export { default as config } from './src/formConfig';
|
||||
export { default as value } from './src/initValue';
|
||||
|
||||
export default IteratorContainer;
|
||||
@ -1,62 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import type { MContainer } from '@tmagic/schema';
|
||||
|
||||
import useApp from '../../useApp';
|
||||
|
||||
interface IteratorContainerProps extends MContainer {
|
||||
config: MContainer & {
|
||||
type: 'iterator-container';
|
||||
iteratorData: any[];
|
||||
dsField: string[];
|
||||
itemConfig: {
|
||||
layout: string;
|
||||
style: Record<string, string | number>;
|
||||
};
|
||||
};
|
||||
className: string;
|
||||
style: Record<string, any>;
|
||||
id: string;
|
||||
}
|
||||
|
||||
const IteratorContainer: React.FC<IteratorContainerProps> = ({ config, id }) => {
|
||||
const { app } = useApp({ config });
|
||||
|
||||
let { iteratorData = [] } = config;
|
||||
|
||||
if (!Array.isArray(iteratorData)) {
|
||||
iteratorData = [];
|
||||
}
|
||||
|
||||
if (app?.platform === 'editor' && !iteratorData.length) {
|
||||
iteratorData.push({});
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
const MagicUiComp = app?.resolveComponent('container');
|
||||
return (
|
||||
<div
|
||||
data-tmagic-id={`${id || config.id || ''}`}
|
||||
className="magic-ui-iterator-container"
|
||||
style={app?.transformStyle(config.style || {})}
|
||||
>
|
||||
{iteratorData.map((itemData, index) => {
|
||||
const itemConfig = {
|
||||
items: app?.dataSourceManager?.compliedIteratorItems(itemData, config.items, config.dsField) ?? config.items,
|
||||
id: '',
|
||||
style: {
|
||||
...config.itemConfig.style,
|
||||
position: 'relative',
|
||||
left: 0,
|
||||
top: 0,
|
||||
},
|
||||
};
|
||||
return <MagicUiComp config={itemConfig} key={index}></MagicUiComp>;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
IteratorContainer.displayName = 'magic-ui-iterator-container';
|
||||
|
||||
export default IteratorContainer;
|
||||
@ -1,84 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useContext, useState } from 'react';
|
||||
|
||||
import Core from '@tmagic/core';
|
||||
import type { MComponent, MNode } from '@tmagic/schema';
|
||||
|
||||
import AppContent from '../AppContent';
|
||||
import useApp from '../useApp';
|
||||
|
||||
interface OverlayProps {
|
||||
config: MComponent;
|
||||
}
|
||||
|
||||
const Overlay: React.FC<OverlayProps> = ({ config }) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
const app: Core | undefined = useContext(AppContent);
|
||||
const node = app?.page?.getNode(config.id);
|
||||
|
||||
if (!app) return null;
|
||||
|
||||
const openOverlay = () => {
|
||||
setVisible(true);
|
||||
if (app) {
|
||||
app.emit('overlay:open', node);
|
||||
}
|
||||
};
|
||||
|
||||
const closeOverlay = () => {
|
||||
setVisible(false);
|
||||
if (app) {
|
||||
app.emit('overlay:close', node);
|
||||
}
|
||||
};
|
||||
|
||||
useApp({
|
||||
config,
|
||||
methods: {
|
||||
openOverlay,
|
||||
closeOverlay,
|
||||
},
|
||||
});
|
||||
|
||||
app?.page?.on('editor:select', (info: any, path: MNode[]) => {
|
||||
if (path.find((node: MNode) => node.id === config.id)) {
|
||||
openOverlay();
|
||||
} else {
|
||||
closeOverlay();
|
||||
}
|
||||
});
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
const MagicUiComp = app.resolveComponent('container');
|
||||
|
||||
return (
|
||||
<MagicUiComp
|
||||
data-tmagic-id={config.id}
|
||||
className="magic-ui-overlay"
|
||||
config={{ style: config.style, items: config.items }}
|
||||
></MagicUiComp>
|
||||
);
|
||||
};
|
||||
|
||||
Overlay.displayName = 'magic-ui-overlay';
|
||||
|
||||
export default Overlay;
|
||||
@ -1,24 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import PageFragmentContainer from './src/PageFragmentContainer';
|
||||
|
||||
export { default as config } from './src/formConfig';
|
||||
export { default as value } from './src/initValue';
|
||||
|
||||
export default PageFragmentContainer;
|
||||
@ -1,24 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import PageFragment from './src/PageFragment';
|
||||
|
||||
export { default as config } from './src/formConfig';
|
||||
export { default as value } from './src/initValue';
|
||||
|
||||
export default PageFragment;
|
||||
@ -1,50 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import type { MComponent, MContainer, MPageFragment } from '@tmagic/schema';
|
||||
|
||||
import useApp from '../../useApp';
|
||||
interface PageFragmentProps {
|
||||
config: MPageFragment;
|
||||
}
|
||||
|
||||
const PageFragment: React.FC<PageFragmentProps> = ({ config }) => {
|
||||
const { app } = useApp({
|
||||
config,
|
||||
methods: {},
|
||||
});
|
||||
|
||||
if (!app) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tmagic-id={`${config.id || ''}`}
|
||||
className={`magic-ui-page-fragment magic-ui-container magic-layout-${config.layout}${
|
||||
config.className ? ` ${config.className}` : ''
|
||||
}`}
|
||||
style={app.transformStyle(config.style || {})}
|
||||
>
|
||||
{config.items?.map((item: MComponent | MContainer) => {
|
||||
const MagicUiComp = app.resolveComponent(item.type || 'container');
|
||||
|
||||
if (!MagicUiComp) return null;
|
||||
|
||||
if (item.visible === false) return null;
|
||||
if (item.condResult === false) return null;
|
||||
|
||||
return (
|
||||
<MagicUiComp
|
||||
data-tmagic-id={`${item.id || ''}`}
|
||||
key={item.id}
|
||||
config={item}
|
||||
className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
|
||||
style={app.transformStyle(item.style || {})}
|
||||
></MagicUiComp>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
PageFragment.displayName = 'magic-ui-page-fragment';
|
||||
|
||||
export default PageFragment;
|
||||
@ -1,71 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import type { MComponent, MContainer, MPage } from '@tmagic/schema';
|
||||
|
||||
import useApp from '../useApp';
|
||||
|
||||
interface PageProps {
|
||||
config: MPage;
|
||||
}
|
||||
|
||||
const Page: React.FC<PageProps> = ({ config }) => {
|
||||
const { app } = useApp({
|
||||
config,
|
||||
methods: {
|
||||
refresh: () => window.location.reload(),
|
||||
},
|
||||
});
|
||||
|
||||
if (!app) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
id={`${config.id || ''}`}
|
||||
className={`magic-ui-page magic-ui-container magic-layout-${config.layout}${
|
||||
config.className ? ` ${config.className}` : ''
|
||||
}`}
|
||||
style={app.transformStyle(config.style || {})}
|
||||
>
|
||||
{config.items?.map((item: MComponent | MContainer) => {
|
||||
const MagicUiComp = app.resolveComponent(item.type || 'container');
|
||||
|
||||
if (!MagicUiComp) return null;
|
||||
|
||||
if (item.visible === false) return null;
|
||||
if (item.condResult === false) return null;
|
||||
|
||||
return (
|
||||
<MagicUiComp
|
||||
data-tmagic-id={`${item.id || ''}`}
|
||||
key={item.id}
|
||||
config={item}
|
||||
className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
|
||||
style={app.transformStyle(item.style || {})}
|
||||
></MagicUiComp>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Page.displayName = 'magic-ui-page';
|
||||
|
||||
export default Page;
|
||||
@ -1,58 +0,0 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
|
||||
import Core from '@tmagic/core';
|
||||
import type { MComponent } from '@tmagic/schema';
|
||||
|
||||
import AppContent from './AppContent';
|
||||
|
||||
interface UseAppOptions {
|
||||
config: MComponent;
|
||||
methods?: {
|
||||
[key: string]: Function;
|
||||
};
|
||||
}
|
||||
|
||||
export default ({ config, methods }: UseAppOptions) => {
|
||||
const app: Core | undefined = useContext(AppContent);
|
||||
const node = app?.page?.getNode(config.id);
|
||||
const [created, setCreated] = useState(false);
|
||||
|
||||
const emitData = {
|
||||
config,
|
||||
...methods,
|
||||
};
|
||||
|
||||
if (!created) {
|
||||
// 只需要触发一次 created
|
||||
setCreated(true);
|
||||
node?.emit('created', emitData);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
node?.emit('mounted', emitData);
|
||||
|
||||
return () => {
|
||||
node?.emit('destroy', emitData);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { app };
|
||||
};
|
||||
@ -16,11 +16,31 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default (ref: any) => ({
|
||||
show: () => {
|
||||
ref.style.display = 'initial';
|
||||
},
|
||||
hide: () => {
|
||||
ref.style.display = 'none';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
import pkg from './package.json';
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
cssCodeSplit: false,
|
||||
sourcemap: false,
|
||||
minify: false,
|
||||
target: 'esnext',
|
||||
|
||||
lib: {
|
||||
entry: 'src/index.ts',
|
||||
name: 'TMagicUiReact',
|
||||
fileName: 'tmagic-ui-react',
|
||||
},
|
||||
|
||||
rollupOptions: {
|
||||
// 确保外部化处理那些你不想打包进库的依赖
|
||||
external(id: string) {
|
||||
return Object.keys({
|
||||
...pkg.dependencies,
|
||||
...pkg.peerDependencies,
|
||||
}).some((k) => new RegExp(`^${k}`).test(id));
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
383
pnpm-lock.yaml
generated
383
pnpm-lock.yaml
generated
@ -678,34 +678,46 @@ importers:
|
||||
|
||||
packages/ui-react:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
'@tmagic/react-button':
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
'@tmagic/schema':
|
||||
version: link:../../react-components/button
|
||||
'@tmagic/react-container':
|
||||
specifier: workspace:*
|
||||
version: link:../schema
|
||||
'@tmagic/utils':
|
||||
version: link:../../react-components/container
|
||||
'@tmagic/react-img':
|
||||
specifier: workspace:*
|
||||
version: link:../utils
|
||||
qrcode:
|
||||
specifier: ^1.5.0
|
||||
version: 1.5.3
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
version: link:../../react-components/img
|
||||
'@tmagic/react-iterator-container':
|
||||
specifier: workspace:*
|
||||
version: link:../../react-components/iterator-container
|
||||
'@tmagic/react-overlay':
|
||||
specifier: workspace:*
|
||||
version: link:../../react-components/overlay
|
||||
'@tmagic/react-page':
|
||||
specifier: workspace:*
|
||||
version: link:../../react-components/page
|
||||
'@tmagic/react-page-fragment':
|
||||
specifier: workspace:*
|
||||
version: link:../../react-components/page-fragment
|
||||
'@tmagic/react-page-fragment-container':
|
||||
specifier: workspace:*
|
||||
version: link:../../react-components/page-fragment-container
|
||||
'@tmagic/react-qrcode':
|
||||
specifier: workspace:*
|
||||
version: link:../../react-components/qrcode
|
||||
'@tmagic/react-text':
|
||||
specifier: workspace:*
|
||||
version: link:../../react-components/text
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.0
|
||||
rimraf:
|
||||
specifier: ^3.0.2
|
||||
version: 3.0.2
|
||||
vite:
|
||||
specifier: ^5.3.5
|
||||
version: 5.3.5(@types/node@18.19.42)(sass@1.77.8)(terser@5.31.3)
|
||||
|
||||
packages/utils:
|
||||
dependencies:
|
||||
@ -826,6 +838,274 @@ importers:
|
||||
specifier: ^5.3.5
|
||||
version: 5.3.5(@types/node@18.19.42)(sass@1.77.8)(terser@5.31.3)
|
||||
|
||||
react-components/button:
|
||||
dependencies:
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/react-runtime-help
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.0
|
||||
|
||||
react-components/container:
|
||||
dependencies:
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/react-runtime-help
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
'@tmagic/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.0
|
||||
|
||||
react-components/img:
|
||||
dependencies:
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/react-runtime-help
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.0
|
||||
|
||||
react-components/iterator-container:
|
||||
dependencies:
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/react-runtime-help
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
'@tmagic/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.0
|
||||
|
||||
react-components/overlay:
|
||||
dependencies:
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/react-runtime-help
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.0
|
||||
|
||||
react-components/page:
|
||||
dependencies:
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/react-runtime-help
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
'@tmagic/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.0
|
||||
|
||||
react-components/page-fragment:
|
||||
dependencies:
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/react-runtime-help
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
'@tmagic/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.0
|
||||
|
||||
react-components/page-fragment-container:
|
||||
dependencies:
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/react-runtime-help
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.0
|
||||
|
||||
react-components/qrcode:
|
||||
dependencies:
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/react-runtime-help
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
qrcode:
|
||||
specifier: ^1.5.0
|
||||
version: 1.5.3
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/qrcode':
|
||||
specifier: ^1.4.2
|
||||
version: 1.5.5
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.0
|
||||
|
||||
react-components/text:
|
||||
dependencies:
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/react-runtime-help
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1(react@18.3.1)
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
'@types/react-dom':
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.0
|
||||
|
||||
runtime/react:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
@ -849,9 +1129,6 @@ importers:
|
||||
axios:
|
||||
specifier: ^0.25.0
|
||||
version: 0.25.0
|
||||
lodash-es:
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
react:
|
||||
specifier: ^18.3.1
|
||||
version: 18.3.1
|
||||
@ -865,9 +1142,6 @@ importers:
|
||||
'@tmagic/cli':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/cli
|
||||
'@types/lodash-es':
|
||||
specifier: ^4.17.4
|
||||
version: 4.17.12
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
@ -887,6 +1161,46 @@ importers:
|
||||
specifier: ^5.2.11
|
||||
version: 5.3.5(@types/node@18.19.42)(sass@1.77.8)(terser@5.31.3)
|
||||
|
||||
runtime/react-runtime-help:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/core
|
||||
'@tmagic/data-source':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/data-source
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
'@tmagic/stage':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/stage
|
||||
'@tmagic/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
lodash-es:
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
react:
|
||||
specifier: '>=18.3.1'
|
||||
version: 18.3.1
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
devDependencies:
|
||||
'@types/lodash-es':
|
||||
specifier: ^4.17.4
|
||||
version: 4.17.12
|
||||
'@types/node':
|
||||
specifier: ^18.19.0
|
||||
version: 18.19.42
|
||||
'@types/react':
|
||||
specifier: ^18.3.3
|
||||
version: 18.3.3
|
||||
rimraf:
|
||||
specifier: ^3.0.2
|
||||
version: 3.0.2
|
||||
|
||||
runtime/tmagic-form:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
@ -1181,9 +1495,6 @@ importers:
|
||||
'@tmagic/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
'@tmagic/vue-container':
|
||||
specifier: workspace:*
|
||||
version: link:../container
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1205,9 +1516,6 @@ importers:
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
'@tmagic/vue-container':
|
||||
specifier: workspace:*
|
||||
version: link:../container
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1226,9 +1534,6 @@ importers:
|
||||
'@tmagic/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
'@tmagic/vue-container':
|
||||
specifier: workspace:*
|
||||
version: link:../container
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1247,9 +1552,6 @@ importers:
|
||||
'@tmagic/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
'@tmagic/vue-container':
|
||||
specifier: workspace:*
|
||||
version: link:../container
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1265,9 +1567,6 @@ importers:
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/schema
|
||||
'@tmagic/vue-container':
|
||||
specifier: workspace:*
|
||||
version: link:../container
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
|
||||
@ -3,3 +3,4 @@ packages:
|
||||
- 'playground'
|
||||
- 'runtime/*'
|
||||
- 'vue-components/*'
|
||||
- 'react-components/*'
|
||||
35
react-components/button/package.json
Normal file
35
react-components/button/package.json
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/react-button",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/react-runtime-help": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"react-dom": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tmagic/schema": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0"
|
||||
}
|
||||
}
|
||||
69
react-components/button/src/Button.tsx
Normal file
69
react-components/button/src/Button.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { useApp } from '@tmagic/react-runtime-help';
|
||||
import type { Id, MComponent } from '@tmagic/schema';
|
||||
|
||||
interface ButtonSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
type?: 'button';
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface ButtonProps {
|
||||
config: ButtonSchema;
|
||||
className: string;
|
||||
id: string;
|
||||
style: Record<string, any>;
|
||||
containerIndex: number;
|
||||
iteratorIndex?: number[];
|
||||
iteratorContainerId?: Id[];
|
||||
}
|
||||
|
||||
const Page: React.FC<ButtonProps> = ({
|
||||
id,
|
||||
config,
|
||||
className,
|
||||
style,
|
||||
containerIndex,
|
||||
iteratorIndex,
|
||||
iteratorContainerId,
|
||||
}) => {
|
||||
const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
|
||||
|
||||
if (!app) return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
className={className}
|
||||
style={style}
|
||||
data-tmagic-id={`${id || config.id || ''}`}
|
||||
data-tmagic-container-index={containerIndex}
|
||||
data-tmagic-iterator-index={iteratorIndex}
|
||||
data-tmagic-iterator-container-id={iteratorContainerId}
|
||||
>
|
||||
{config.text || ''}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
Page.displayName = 'magic-ui-button';
|
||||
|
||||
export default Page;
|
||||
4
react-components/button/src/event.ts
Normal file
4
react-components/button/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
};
|
||||
@ -18,13 +18,8 @@
|
||||
|
||||
export default [
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
name: 'text',
|
||||
type: 'data-source-input',
|
||||
},
|
||||
{
|
||||
name: 'multiple',
|
||||
text: '多行文本',
|
||||
type: 'switch',
|
||||
},
|
||||
];
|
||||
@ -20,5 +20,6 @@ import Button from './Button';
|
||||
|
||||
export { default as config } from './formConfig';
|
||||
export { default as value } from './initValue';
|
||||
export { default as event } from './event';
|
||||
|
||||
export default Button;
|
||||
36
react-components/container/package.json
Normal file
36
react-components/container/package.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/react-container",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/utils": "workspace:*",
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/react-runtime-help": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"react-dom": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tmagic/schema": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0"
|
||||
}
|
||||
}
|
||||
102
react-components/container/src/Container.tsx
Normal file
102
react-components/container/src/Container.tsx
Normal file
@ -0,0 +1,102 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { useApp } from '@tmagic/react-runtime-help';
|
||||
import type { Id, MContainer, MNode } from '@tmagic/schema';
|
||||
import { IS_DSL_NODE_KEY } from '@tmagic/utils';
|
||||
|
||||
interface ContainerSchema extends Omit<MContainer, 'id'> {
|
||||
id?: Id;
|
||||
type?: 'container';
|
||||
}
|
||||
|
||||
interface ContainerProps {
|
||||
config: ContainerSchema;
|
||||
className: string;
|
||||
style: Record<string, any>;
|
||||
id: string;
|
||||
containerIndex: number;
|
||||
iteratorIndex: number[];
|
||||
iteratorContainerId: Id[];
|
||||
}
|
||||
|
||||
const Container: React.FC<ContainerProps> = ({
|
||||
config,
|
||||
id,
|
||||
style,
|
||||
className,
|
||||
containerIndex,
|
||||
iteratorIndex,
|
||||
iteratorContainerId,
|
||||
}) => {
|
||||
const { app, display } = useApp({ config });
|
||||
|
||||
if (!app) return null;
|
||||
|
||||
const classNames = config[IS_DSL_NODE_KEY] ? [] : ['magic-ui-container'];
|
||||
if (config.layout) {
|
||||
classNames.push(`magic-layout-${config.layout}`);
|
||||
}
|
||||
if (className) {
|
||||
classNames.push(className);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tmagic-id={`${id || ''}`}
|
||||
data-container-index={containerIndex}
|
||||
data-tmagic-iterator-index={iteratorIndex}
|
||||
data-tmagic-iterator-container-id={iteratorContainerId}
|
||||
className={classNames.join(' ')}
|
||||
style={config[IS_DSL_NODE_KEY] ? style : app.transformStyle(config.style || {})}
|
||||
>
|
||||
{config.items?.map((item: MNode, index: number) => {
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
const MagicUiComp = app.resolveComponent(item.type || 'container');
|
||||
|
||||
if (!MagicUiComp) return null;
|
||||
|
||||
if (!display(item)) return null;
|
||||
|
||||
const itemClassName = [`magic-ui-${item.type}`];
|
||||
if (item.className) {
|
||||
itemClassName.push(item.className);
|
||||
}
|
||||
|
||||
return (
|
||||
<MagicUiComp
|
||||
id={`${item.id || ''}`}
|
||||
containerIndex={index}
|
||||
iteratorIndex={iteratorIndex}
|
||||
iteratorContainerId={iteratorContainerId}
|
||||
key={item.id ?? index}
|
||||
config={{ ...item, [IS_DSL_NODE_KEY]: true }}
|
||||
className={itemClassName.join(' ')}
|
||||
style={app.transformStyle(item.style || {})}
|
||||
></MagicUiComp>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Container.displayName = 'magic-ui-container';
|
||||
|
||||
export default Container;
|
||||
4
react-components/container/src/event.ts
Normal file
4
react-components/container/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
};
|
||||
@ -33,7 +33,7 @@ export default [
|
||||
if (v === 'relative') {
|
||||
model.style.height = 'auto';
|
||||
} else {
|
||||
const el = getElById(model.id);
|
||||
const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
|
||||
if (el) {
|
||||
model.style.height = el.getBoundingClientRect().height;
|
||||
}
|
||||
@ -20,5 +20,6 @@ import Container from './Container';
|
||||
|
||||
export { default as config } from './formConfig';
|
||||
export { default as value } from './initValue';
|
||||
export { default as event } from './event';
|
||||
|
||||
export default Container;
|
||||
35
react-components/img/package.json
Normal file
35
react-components/img/package.json
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/react-img",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/react-runtime-help": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"react-dom": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tmagic/schema": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0"
|
||||
}
|
||||
}
|
||||
@ -18,19 +18,36 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import type { MComponent } from '@tmagic/schema';
|
||||
import { useApp } from '@tmagic/react-runtime-help';
|
||||
import type { Id, MComponent } from '@tmagic/schema';
|
||||
|
||||
import useApp from '../useApp';
|
||||
|
||||
interface ImgProps {
|
||||
config: {
|
||||
url: string;
|
||||
src: string;
|
||||
} & MComponent;
|
||||
interface ImgSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
type?: 'img';
|
||||
src: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
const Img: React.FC<ImgProps> = ({ config }) => {
|
||||
const { app } = useApp({ config });
|
||||
interface ImgProps {
|
||||
config: ImgSchema;
|
||||
className: string;
|
||||
id: string;
|
||||
style: Record<string, any>;
|
||||
containerIndex: number;
|
||||
iteratorIndex?: number[];
|
||||
iteratorContainerId?: Id[];
|
||||
}
|
||||
|
||||
const Img: React.FC<ImgProps> = ({
|
||||
id,
|
||||
config,
|
||||
className,
|
||||
style,
|
||||
containerIndex,
|
||||
iteratorIndex,
|
||||
iteratorContainerId,
|
||||
}) => {
|
||||
const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
|
||||
|
||||
if (!app) return null;
|
||||
|
||||
@ -40,9 +57,12 @@ const Img: React.FC<ImgProps> = ({ config }) => {
|
||||
|
||||
return (
|
||||
<img
|
||||
className="magic-ui-img"
|
||||
style={app.transformStyle(config.style || {})}
|
||||
data-tmagic-id={`${config.id}`}
|
||||
className={className}
|
||||
style={style}
|
||||
data-tmagic-id={`${id || config.id || ''}`}
|
||||
data-tmagic-container-index={containerIndex}
|
||||
data-tmagic-iterator-index={iteratorIndex}
|
||||
data-tmagic-iterator-container-id={iteratorContainerId}
|
||||
src={config.src}
|
||||
onClick={clickHandler}
|
||||
/>
|
||||
4
react-components/img/src/event.ts
Normal file
4
react-components/img/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
};
|
||||
@ -20,6 +20,7 @@ export default [
|
||||
{
|
||||
text: '图片',
|
||||
name: 'src',
|
||||
type: 'data-source-input',
|
||||
},
|
||||
{
|
||||
text: '链接',
|
||||
@ -20,5 +20,6 @@ import Img from './Img';
|
||||
|
||||
export { default as config } from './formConfig';
|
||||
export { default as value } from './initValue';
|
||||
export { default as event } from './event';
|
||||
|
||||
export default Img;
|
||||
36
react-components/iterator-container/package.json
Normal file
36
react-components/iterator-container/package.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/react-iterator-container",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/utils": "workspace:*",
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/react-runtime-help": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"react-dom": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tmagic/schema": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0"
|
||||
}
|
||||
}
|
||||
108
react-components/iterator-container/src/IteratorContainer.tsx
Normal file
108
react-components/iterator-container/src/IteratorContainer.tsx
Normal file
@ -0,0 +1,108 @@
|
||||
import React from 'react';
|
||||
|
||||
import type { IteratorContainer as TMagicIteratorContainer } from '@tmagic/core';
|
||||
import { useApp } from '@tmagic/react-runtime-help';
|
||||
import type { Id, MIteratorContainer, MNode } from '@tmagic/schema';
|
||||
|
||||
interface IteratorContainerSchema extends Omit<MIteratorContainer, 'id'> {
|
||||
id?: Id;
|
||||
type?: 'iterator-container';
|
||||
}
|
||||
|
||||
interface IteratorContainerProps {
|
||||
config: IteratorContainerSchema;
|
||||
className: string;
|
||||
style: Record<string, any>;
|
||||
id: string;
|
||||
containerIndex: number;
|
||||
iteratorIndex: number[];
|
||||
iteratorContainerId: Id[];
|
||||
}
|
||||
|
||||
interface IteratorItemSchema {
|
||||
items: MNode[];
|
||||
condResult: boolean;
|
||||
style: {
|
||||
[key: string]: any;
|
||||
};
|
||||
}
|
||||
|
||||
const IteratorContainer: React.FC<IteratorContainerProps> = ({
|
||||
config,
|
||||
id,
|
||||
style,
|
||||
className,
|
||||
containerIndex,
|
||||
iteratorIndex,
|
||||
iteratorContainerId,
|
||||
}) => {
|
||||
const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
|
||||
|
||||
let { iteratorData = [] } = config;
|
||||
const { itemConfig, dsField, items } = config;
|
||||
|
||||
if (!Array.isArray(iteratorData)) {
|
||||
iteratorData = [];
|
||||
}
|
||||
|
||||
if (app?.platform === 'editor' && !iteratorData.length) {
|
||||
iteratorData.push({});
|
||||
}
|
||||
|
||||
const MagicUiComp = app?.resolveComponent('container');
|
||||
|
||||
const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(
|
||||
id || config.id || '',
|
||||
iteratorContainerId,
|
||||
iteratorIndex,
|
||||
);
|
||||
|
||||
iteratorContainerNode?.resetNodes();
|
||||
|
||||
const configs: IteratorItemSchema[] = iteratorData.map((itemData: any, index: number) => {
|
||||
const condResult =
|
||||
app?.platform !== 'editor'
|
||||
? app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true
|
||||
: true;
|
||||
|
||||
const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
|
||||
|
||||
iteratorContainerNode?.setNodes(config.items, index);
|
||||
|
||||
return {
|
||||
items: newItems,
|
||||
condResult,
|
||||
style: {
|
||||
position: 'relative',
|
||||
left: 0,
|
||||
top: 0,
|
||||
...itemConfig.style,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
style={style}
|
||||
data-tmagic-id={`${id || config.id || ''}`}
|
||||
data-container-index={containerIndex}
|
||||
data-iterator-index={iteratorIndex}
|
||||
data-iterator-container-id={iteratorContainerId}
|
||||
>
|
||||
{configs.map((config: any, index: number) => (
|
||||
<MagicUiComp
|
||||
config={config}
|
||||
key={index}
|
||||
style={app?.transformStyle(config.style)}
|
||||
iteratorIndex={[...(iteratorIndex || []), index]}
|
||||
iteratorContainerId={[...(iteratorContainerId || []), config.id]}
|
||||
></MagicUiComp>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
IteratorContainer.displayName = 'magic-ui-iterator-container';
|
||||
|
||||
export default IteratorContainer;
|
||||
4
react-components/iterator-container/src/event.ts
Normal file
4
react-components/iterator-container/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
};
|
||||
@ -15,6 +15,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { NODE_CONDS_KEY } from '@tmagic/schema';
|
||||
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
|
||||
|
||||
export default [
|
||||
@ -43,6 +44,12 @@ export default [
|
||||
title: '子项配置',
|
||||
name: 'itemConfig',
|
||||
items: [
|
||||
{
|
||||
type: 'display-conds',
|
||||
name: NODE_CONDS_KEY,
|
||||
titlePrefix: '条件组',
|
||||
defaultValue: [],
|
||||
},
|
||||
{
|
||||
name: 'layout',
|
||||
text: '容器布局',
|
||||
25
react-components/iterator-container/src/index.ts
Normal file
25
react-components/iterator-container/src/index.ts
Normal file
@ -0,0 +1,25 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import IteratorContainer from './IteratorContainer';
|
||||
|
||||
export { default as config } from './formConfig';
|
||||
export { default as value } from './initValue';
|
||||
export { default as event } from './event';
|
||||
|
||||
export default IteratorContainer;
|
||||
35
react-components/overlay/package.json
Normal file
35
react-components/overlay/package.json
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/react-overlay",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/react-runtime-help": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"react-dom": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tmagic/schema": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0"
|
||||
}
|
||||
}
|
||||
109
react-components/overlay/src/Overlay.tsx
Normal file
109
react-components/overlay/src/Overlay.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { useApp } from '@tmagic/react-runtime-help';
|
||||
import type { Id, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
|
||||
|
||||
interface OverlayProps {
|
||||
config: MComponent;
|
||||
className: string;
|
||||
style: Record<string, any>;
|
||||
id: string;
|
||||
containerIndex: number;
|
||||
iteratorIndex: number[];
|
||||
iteratorContainerId: Id[];
|
||||
}
|
||||
|
||||
const Overlay: React.FC<OverlayProps> = ({
|
||||
config,
|
||||
id,
|
||||
style,
|
||||
className,
|
||||
containerIndex,
|
||||
iteratorIndex,
|
||||
iteratorContainerId,
|
||||
}) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
const { app, node } = useApp({
|
||||
config,
|
||||
methods: {
|
||||
openOverlay() {
|
||||
setVisible(true);
|
||||
if (app) {
|
||||
app.emit('overlay:open', node);
|
||||
}
|
||||
},
|
||||
closeOverlay() {
|
||||
setVisible(false);
|
||||
if (app) {
|
||||
app.emit('overlay:close', node);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!app) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const editorSelectHandler = (
|
||||
info: {
|
||||
node: MNode;
|
||||
page: MPage;
|
||||
parent: MContainer;
|
||||
},
|
||||
path: MNode[],
|
||||
) => {
|
||||
if (path.find((node: MNode) => node.id === config.id)) {
|
||||
node?.instance.openOverlay();
|
||||
} else {
|
||||
node?.instance.closeOverlay();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
app.page?.on('editor:select', editorSelectHandler);
|
||||
|
||||
return () => {
|
||||
app.page?.off('editor:select', editorSelectHandler);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
const MagicUiComp = app?.resolveComponent('container');
|
||||
|
||||
return (
|
||||
<MagicUiComp
|
||||
id={id}
|
||||
containerIndex={containerIndex}
|
||||
iteratorIndex={iteratorIndex}
|
||||
iteratorContainerId={iteratorContainerId}
|
||||
config={config}
|
||||
className={className}
|
||||
style={style}
|
||||
></MagicUiComp>
|
||||
);
|
||||
};
|
||||
|
||||
Overlay.displayName = 'magic-ui-overlay';
|
||||
|
||||
export default Overlay;
|
||||
35
react-components/page-fragment-container/package.json
Normal file
35
react-components/page-fragment-container/package.json
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/react-page-fragment-container",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/react-runtime-help": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"react-dom": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tmagic/schema": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0"
|
||||
}
|
||||
}
|
||||
@ -1,20 +1,32 @@
|
||||
import React, { constructor, useEffect, useMemo, useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import type { MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
|
||||
import { useApp } from '@tmagic/react-runtime-help';
|
||||
import type { Id, MComponent, MNode } from '@tmagic/schema';
|
||||
|
||||
import useApp from '../../useApp';
|
||||
interface PageFragmentContainerProps {
|
||||
config: MComponent;
|
||||
className: string;
|
||||
style: Record<string, any>;
|
||||
id: string;
|
||||
containerIndex: number;
|
||||
iteratorIndex: number[];
|
||||
iteratorContainerId: Id[];
|
||||
}
|
||||
|
||||
const PageFragmentContainer: React.FC<PageFragmentContainerProps> = ({ config }) => {
|
||||
const PageFragmentContainer: React.FC<PageFragmentContainerProps> = ({ config,
|
||||
id,
|
||||
style,
|
||||
className,
|
||||
containerIndex,
|
||||
iteratorIndex,
|
||||
iteratorContainerId, }) => {
|
||||
const { app } = useApp({
|
||||
config,
|
||||
methods: {},
|
||||
});
|
||||
|
||||
if (!app) return null;
|
||||
const MagicUiContainer = app.resolveComponent('container');
|
||||
|
||||
let containerConfig = {};
|
||||
const fragment = app?.dsl?.items?.find((page) => page.id === config.pageFragmentId);
|
||||
if (fragment) {
|
||||
@ -36,11 +48,21 @@ const PageFragmentContainer: React.FC<PageFragmentContainerProps> = ({ config })
|
||||
}
|
||||
}
|
||||
|
||||
const MagicUiContainer = app.resolveComponent('container');
|
||||
|
||||
const classNames = ['magic-ui-page-fragment-container'];
|
||||
if (className) {
|
||||
classNames.push(className);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tmagic-id={`${config.id || ''}`}
|
||||
className="magic-ui-page-fragment-container"
|
||||
style={app.transformStyle(config.style || {})}
|
||||
data-tmagic-id={`${id || ''}`}
|
||||
data-container-index={containerIndex}
|
||||
data-tmagic-iterator-index={iteratorIndex}
|
||||
data-tmagic-iterator-container-id={iteratorContainerId}
|
||||
className={classNames.join(' ')}
|
||||
style={style}
|
||||
>
|
||||
<MagicUiContainer config={containerConfig}></MagicUiContainer>
|
||||
</div>
|
||||
4
react-components/page-fragment-container/src/event.ts
Normal file
4
react-components/page-fragment-container/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
};
|
||||
25
react-components/page-fragment-container/src/index.ts
Normal file
25
react-components/page-fragment-container/src/index.ts
Normal file
@ -0,0 +1,25 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import PageFragmentContainer from './PageFragmentContainer';
|
||||
|
||||
export { default as config } from './formConfig';
|
||||
export { default as value } from './initValue';
|
||||
export { default as event } from './event';
|
||||
|
||||
export default PageFragmentContainer;
|
||||
36
react-components/page-fragment/package.json
Normal file
36
react-components/page-fragment/package.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/react-page-fragment",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/utils": "workspace:*",
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/react-runtime-help": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"react-dom": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tmagic/schema": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0"
|
||||
}
|
||||
}
|
||||
29
react-components/page-fragment/src/PageFragment.tsx
Normal file
29
react-components/page-fragment/src/PageFragment.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
|
||||
import { useApp } from '@tmagic/react-runtime-help';
|
||||
import type { MPageFragment } from '@tmagic/schema';
|
||||
|
||||
interface PageFragmentProps {
|
||||
config: MPageFragment;
|
||||
}
|
||||
|
||||
const PageFragment: React.FC<PageFragmentProps> = ({ config }) => {
|
||||
const { app } = useApp({
|
||||
config,
|
||||
methods: {},
|
||||
});
|
||||
|
||||
if (!app) return null;
|
||||
|
||||
const MagicUiComp = app.resolveComponent('container');
|
||||
const classNames = ['magic-ui-page-fragment'];
|
||||
if (config.className) {
|
||||
classNames.push(config.className);
|
||||
}
|
||||
|
||||
return <MagicUiComp config={config} id={config.id} className={classNames.join(' ')}></MagicUiComp>;
|
||||
};
|
||||
|
||||
PageFragment.displayName = 'magic-ui-page-fragment';
|
||||
|
||||
export default PageFragment;
|
||||
4
react-components/page-fragment/src/event.ts
Normal file
4
react-components/page-fragment/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
};
|
||||
@ -42,7 +42,7 @@ export default [
|
||||
if (v === 'relative') {
|
||||
model.style.height = 'auto';
|
||||
} else {
|
||||
const el = getElById(model.id);
|
||||
const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
|
||||
if (el) {
|
||||
model.style.height = el.getBoundingClientRect().height;
|
||||
}
|
||||
25
react-components/page-fragment/src/index.ts
Normal file
25
react-components/page-fragment/src/index.ts
Normal file
@ -0,0 +1,25 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import PageFragment from './PageFragment';
|
||||
|
||||
export { default as config } from './formConfig';
|
||||
export { default as value } from './initValue';
|
||||
export { default as event } from './event';
|
||||
|
||||
export default PageFragment;
|
||||
36
react-components/page/package.json
Normal file
36
react-components/page/package.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/react-page",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/utils": "workspace:*",
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/react-runtime-help": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"react-dom": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tmagic/schema": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0"
|
||||
}
|
||||
}
|
||||
@ -18,36 +18,33 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import type { MComponent } from '@tmagic/schema';
|
||||
import { useApp } from '@tmagic/react-runtime-help';
|
||||
import type { MPage } from '@tmagic/schema';
|
||||
|
||||
import useApp from '../useApp';
|
||||
|
||||
interface ButtonProps {
|
||||
config: MComponent;
|
||||
interface PageProps {
|
||||
config: MPage;
|
||||
}
|
||||
|
||||
const Page: React.FC<ButtonProps> = ({ config }) => {
|
||||
const { app } = useApp({ config });
|
||||
const Page: React.FC<PageProps> = ({ config }) => {
|
||||
const { app } = useApp({
|
||||
config,
|
||||
methods: {
|
||||
refresh: () => window.location.reload(),
|
||||
},
|
||||
});
|
||||
|
||||
if (!app) return null;
|
||||
|
||||
const MagicUiText = app.resolveComponent('text');
|
||||
const MagicUiComp = app.resolveComponent('container');
|
||||
|
||||
return (
|
||||
<button
|
||||
className="magic-ui-button"
|
||||
style={app.transformStyle(config.style || {})}
|
||||
data-tmagic-id={`${config.id || ''}`}
|
||||
>
|
||||
<MagicUiText
|
||||
config={{
|
||||
text: config.text,
|
||||
}}
|
||||
></MagicUiText>
|
||||
</button>
|
||||
);
|
||||
const classNames = ['magic-ui-page'];
|
||||
if (config.className) {
|
||||
classNames.push(config.className);
|
||||
}
|
||||
|
||||
return <MagicUiComp config={config} id={config.id} className={classNames.join(' ')}></MagicUiComp>;
|
||||
};
|
||||
|
||||
Page.displayName = 'magic-ui-button';
|
||||
Page.displayName = 'magic-ui-page';
|
||||
|
||||
export default Page;
|
||||
@ -44,7 +44,7 @@ export default [
|
||||
if (v === 'relative') {
|
||||
model.style.height = 'auto';
|
||||
} else {
|
||||
const el = getElById(model.id);
|
||||
const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
|
||||
if (el) {
|
||||
model.style.height = el.getBoundingClientRect().height;
|
||||
}
|
||||
39
react-components/qrcode/package.json
Normal file
39
react-components/qrcode/package.json
Normal file
@ -0,0 +1,39 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/react-qrcode",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"qrcode": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/react-runtime-help": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"react-dom": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tmagic/schema": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/qrcode": "^1.4.2",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0"
|
||||
}
|
||||
}
|
||||
@ -19,17 +19,34 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
import type { MComponent } from '@tmagic/schema';
|
||||
import { useApp } from '@tmagic/react-runtime-help';
|
||||
import type { Id, MComponent } from '@tmagic/schema';
|
||||
|
||||
import useApp from '../useApp';
|
||||
|
||||
interface QrcodeProps {
|
||||
config: {
|
||||
url: string;
|
||||
} & MComponent;
|
||||
interface QrCodeSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
type?: 'qrcode';
|
||||
url: string;
|
||||
}
|
||||
|
||||
const Qrcode: React.FC<QrcodeProps> = ({ config }) => {
|
||||
interface QrCodeProps {
|
||||
config: QrCodeSchema;
|
||||
className: string;
|
||||
id: string;
|
||||
style: Record<string, any>;
|
||||
containerIndex: number;
|
||||
iteratorIndex?: number[];
|
||||
iteratorContainerId?: Id[];
|
||||
}
|
||||
|
||||
const QrCode: React.FC<QrCodeProps> = ({
|
||||
id,
|
||||
config,
|
||||
className,
|
||||
style,
|
||||
containerIndex,
|
||||
iteratorIndex,
|
||||
iteratorContainerId,
|
||||
}) => {
|
||||
const { app } = useApp({ config });
|
||||
|
||||
if (!app) return null;
|
||||
@ -45,14 +62,17 @@ const Qrcode: React.FC<QrcodeProps> = ({ config }) => {
|
||||
|
||||
return (
|
||||
<img
|
||||
className="magic-ui-qrcode"
|
||||
style={app.transformStyle(config.style || {})}
|
||||
data-tmagic-id={`${config.id}`}
|
||||
className={className}
|
||||
style={style}
|
||||
data-tmagic-id={`${id || config.id || ''}`}
|
||||
data-tmagic-container-index={containerIndex}
|
||||
data-tmagic-iterator-index={iteratorIndex}
|
||||
data-tmagic-iterator-container-id={iteratorContainerId}
|
||||
src={imgSrc}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Qrcode.displayName = 'magic-ui-qrcode';
|
||||
QrCode.displayName = 'magic-ui-qrcode';
|
||||
|
||||
export default Qrcode;
|
||||
export default QrCode;
|
||||
4
react-components/qrcode/src/event.ts
Normal file
4
react-components/qrcode/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
};
|
||||
@ -16,9 +16,10 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Qrcode from './Qrcode';
|
||||
import QrCode from './QrCode';
|
||||
|
||||
export { default as config } from './formConfig';
|
||||
export { default as value } from './initValue';
|
||||
export { default as event } from './event';
|
||||
|
||||
export default Qrcode;
|
||||
export default QrCode;
|
||||
35
react-components/text/package.json
Normal file
35
react-components/text/package.json
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/react-text",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"files": [
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/react-runtime-help": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"react-dom": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tmagic/schema": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0"
|
||||
}
|
||||
}
|
||||
@ -18,26 +18,52 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import type { MComponent } from '@tmagic/schema';
|
||||
import { useApp } from '@tmagic/react-runtime-help';
|
||||
import type { Id, MComponent } from '@tmagic/schema';
|
||||
|
||||
import useApp from '../useApp';
|
||||
|
||||
interface TextProps {
|
||||
config: MComponent;
|
||||
interface TextSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
type?: 'text';
|
||||
text: string;
|
||||
}
|
||||
|
||||
const Text: React.FC<TextProps> = ({ config }) => {
|
||||
const { app } = useApp({ config });
|
||||
interface TextProps {
|
||||
id: Id;
|
||||
config: TextSchema;
|
||||
className: string;
|
||||
style: Record<string, any>;
|
||||
containerIndex: number;
|
||||
iteratorIndex?: number[];
|
||||
iteratorContainerId?: Id[];
|
||||
}
|
||||
|
||||
const Text: React.FC<TextProps> = ({
|
||||
id,
|
||||
config,
|
||||
className,
|
||||
style,
|
||||
containerIndex,
|
||||
iteratorIndex,
|
||||
iteratorContainerId,
|
||||
}) => {
|
||||
const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
|
||||
|
||||
if (!app) return null;
|
||||
|
||||
return (
|
||||
<p className="magic-ui-text" style={app.transformStyle(config.style || {})} data-tmagic-id={`${config.id || ''}`}>
|
||||
<p
|
||||
className={className}
|
||||
style={style}
|
||||
data-tmagic-id={id}
|
||||
data-tmagic-container-index={containerIndex}
|
||||
data-tmagic-iterator-index={iteratorIndex}
|
||||
data-tmagic-iterator-container-id={iteratorContainerId}
|
||||
>
|
||||
{config.text}
|
||||
</p>
|
||||
);
|
||||
};
|
||||
|
||||
Text.displayName = 'maigc-ui-text';
|
||||
Text.displayName = 'magic-ui-text';
|
||||
|
||||
export default Text;
|
||||
4
react-components/text/src/event.ts
Normal file
4
react-components/text/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
};
|
||||
@ -20,5 +20,6 @@ import Text from './Text';
|
||||
|
||||
export { default as config } from './formConfig';
|
||||
export { default as value } from './initValue';
|
||||
export { default as event } from './event';
|
||||
|
||||
export default Text;
|
||||
61
runtime/react-runtime-help/package.json
Normal file
61
runtime/react-runtime-help/package.json
Normal file
@ -0,0 +1,61 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/react-runtime-help",
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.js"
|
||||
},
|
||||
"./*": "./*"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"build": "pnpm clean && tsc -b tsconfig.build.json",
|
||||
"clean": "rimraf dist *.tsbuildinfo",
|
||||
"check:type": "tsc --noEmit --project tsconfig.build.json"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash-es": "^4.17.21"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"lodash-es": "^4.17.21",
|
||||
"@tmagic/core": "workspace:*",
|
||||
"@tmagic/data-source": "workspace:*",
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/stage": "workspace:*",
|
||||
"@tmagic/utils": "workspace:*",
|
||||
"react": ">=18.3.1",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@tmagic/schema": {
|
||||
"optional": true
|
||||
},
|
||||
"@tmagic/stage": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash-es": "^4.17.4",
|
||||
"@types/node": "^18.19.0",
|
||||
"@types/react": "^18.3.3",
|
||||
"rimraf": "^3.0.2"
|
||||
}
|
||||
}
|
||||
@ -18,6 +18,6 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import Core from '@tmagic/core';
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
|
||||
export default React.createContext<Core | undefined>(undefined);
|
||||
export default React.createContext<TMagicApp | undefined>(undefined);
|
||||
77
runtime/react-runtime-help/src/hooks/use-app.ts
Normal file
77
runtime/react-runtime-help/src/hooks/use-app.ts
Normal file
@ -0,0 +1,77 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import type { Id, MNodeInstance } from '@tmagic/schema';
|
||||
import { isDslNode } from '@tmagic/utils';
|
||||
|
||||
import AppContent from '../AppContent';
|
||||
|
||||
interface UseAppOptions<T extends MNodeInstance = MNodeInstance> {
|
||||
config: T;
|
||||
iteratorContainerId?: Id[];
|
||||
iteratorIndex?: number[];
|
||||
methods?: {
|
||||
[key: string]: Function;
|
||||
};
|
||||
}
|
||||
|
||||
export const useApp = ({ methods = {}, config, iteratorContainerId, iteratorIndex }: UseAppOptions) => {
|
||||
const app: TMagicApp | undefined = useContext(AppContent);
|
||||
|
||||
const emitData = {
|
||||
config,
|
||||
...methods,
|
||||
};
|
||||
|
||||
const display = <T extends MNodeInstance>(config: T) => {
|
||||
if (config.visible === false) return false;
|
||||
if (config.condResult === false) return false;
|
||||
|
||||
const displayCfg = config.display;
|
||||
|
||||
if (typeof displayCfg === 'function') {
|
||||
return displayCfg(app);
|
||||
}
|
||||
|
||||
return displayCfg !== false;
|
||||
};
|
||||
|
||||
const node = isDslNode(config) && config.id ? app?.getNode(config.id, iteratorContainerId, iteratorIndex) : undefined;
|
||||
const [created, setCreated] = useState(false);
|
||||
|
||||
if (node) {
|
||||
if (!created) {
|
||||
// 只需要触发一次 created
|
||||
setCreated(true);
|
||||
node?.emit('created', emitData);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
node?.emit('mounted', emitData);
|
||||
|
||||
return () => {
|
||||
node?.emit('destroy', emitData);
|
||||
};
|
||||
}, []);
|
||||
}
|
||||
|
||||
return { app, node, display };
|
||||
};
|
||||
44
runtime/react-runtime-help/src/hooks/use-dsl.ts
Normal file
44
runtime/react-runtime-help/src/hooks/use-dsl.ts
Normal file
@ -0,0 +1,44 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
import TMagicApp from '@tmagic/core';
|
||||
import type { ChangeEvent } from '@tmagic/data-source';
|
||||
import type { MNode } from '@tmagic/schema';
|
||||
import { isPage, replaceChildNode } from '@tmagic/utils';
|
||||
|
||||
export const useDsl = (app: TMagicApp | undefined) => {
|
||||
if (!app?.page) return null;
|
||||
|
||||
const [pageConfig, setPageConfig] = useState(app.page.data);
|
||||
|
||||
const updateDataHandler = (nodes: MNode[], sourceId: string, event: ChangeEvent) => {
|
||||
let config = pageConfig;
|
||||
nodes.forEach((node) => {
|
||||
if (isPage(node)) {
|
||||
config = node;
|
||||
} else {
|
||||
replaceChildNode(node, [config]);
|
||||
}
|
||||
});
|
||||
|
||||
setPageConfig(cloneDeep(config));
|
||||
|
||||
setTimeout(() => {
|
||||
app.emit('replaced-node', {
|
||||
...event,
|
||||
nodes,
|
||||
sourceId,
|
||||
});
|
||||
}, 0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
app.dataSourceManager?.on('update-data', updateDataHandler);
|
||||
|
||||
return () => {
|
||||
app.dataSourceManager?.off('update-data', updateDataHandler);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { pageConfig };
|
||||
};
|
||||
66
runtime/react-runtime-help/src/hooks/use-editor-dsl.ts
Normal file
66
runtime/react-runtime-help/src/hooks/use-editor-dsl.ts
Normal file
@ -0,0 +1,66 @@
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
import Core from '@tmagic/core';
|
||||
import type { Id, MApp } from '@tmagic/schema';
|
||||
import type { Magic, RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
|
||||
import { getElById, replaceChildNode } from '@tmagic/utils';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
magic?: Magic;
|
||||
}
|
||||
}
|
||||
|
||||
export const useEditorDsl = (app: Core | undefined, renderDom: () => void) => {
|
||||
let curPageId: Id = '';
|
||||
|
||||
const updateConfig = (root: MApp) => {
|
||||
app?.setConfig(root, curPageId);
|
||||
renderDom();
|
||||
};
|
||||
|
||||
window.magic?.onRuntimeReady({
|
||||
getApp() {
|
||||
return app;
|
||||
},
|
||||
|
||||
updateRootConfig(root: MApp) {
|
||||
app?.setConfig(root);
|
||||
},
|
||||
|
||||
updatePageId(id: Id) {
|
||||
curPageId = id;
|
||||
app?.setPage(curPageId);
|
||||
renderDom();
|
||||
},
|
||||
|
||||
select(id: Id) {
|
||||
const el = getElById()(document, id);
|
||||
if (el) return el;
|
||||
// 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(getElById()(document, id));
|
||||
}, 0);
|
||||
});
|
||||
},
|
||||
|
||||
add({ root }: UpdateData) {
|
||||
updateConfig(root);
|
||||
},
|
||||
|
||||
update({ config, root, parentId }: UpdateData) {
|
||||
const newNode = app?.dataSourceManager?.compiledNode(config, undefined, true) || config;
|
||||
replaceChildNode(newNode, [root], parentId);
|
||||
updateConfig(cloneDeep(root));
|
||||
},
|
||||
|
||||
sortNode({ root }: SortEventData) {
|
||||
root && updateConfig(root);
|
||||
},
|
||||
|
||||
remove({ root }: RemoveData) {
|
||||
updateConfig(root);
|
||||
},
|
||||
});
|
||||
};
|
||||
21
runtime/react-runtime-help/src/index.ts
Normal file
21
runtime/react-runtime-help/src/index.ts
Normal file
@ -0,0 +1,21 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export { default as AppContent } from './AppContent';
|
||||
export * from './hooks/use-editor-dsl';
|
||||
export * from './hooks/use-dsl';
|
||||
export * from './hooks/use-app';
|
||||
11
runtime/react-runtime-help/tsconfig.build.json
Normal file
11
runtime/react-runtime-help/tsconfig.build.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist",
|
||||
"declaration": true,
|
||||
"sourceMap": false,
|
||||
"types": ["node"],
|
||||
},
|
||||
"include": ["./src"],
|
||||
}
|
||||
9
runtime/react-runtime-help/tsconfig.json
Normal file
9
runtime/react-runtime-help/tsconfig.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"jsx": "react",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"types": ["node"],
|
||||
},
|
||||
}
|
||||
@ -26,14 +26,12 @@
|
||||
"@tmagic/stage": "1.4.19",
|
||||
"@tmagic/utils": "1.4.19",
|
||||
"axios": "^0.25.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"terser": "^5.31.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tmagic/cli": "workspace:*",
|
||||
"@types/lodash-es": "^4.17.4",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-legacy": "^5.4.0",
|
||||
|
||||
@ -16,46 +16,19 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useContext, useState } from 'react';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import React, { useContext } from 'react';
|
||||
|
||||
import type Core from '@tmagic/core';
|
||||
import type { ChangeEvent } from '@tmagic/data-source';
|
||||
import type { MNode } from '@tmagic/schema';
|
||||
import { AppContent } from '@tmagic/ui-react';
|
||||
import { isPage, replaceChildNode } from '@tmagic/utils';
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { AppContent, useDsl } from '@tmagic/react-runtime-help';
|
||||
|
||||
function App() {
|
||||
const app = useContext<Core | undefined>(AppContent);
|
||||
const app = useContext<TMagicApp | undefined>(AppContent);
|
||||
|
||||
if (!app?.page) return null;
|
||||
const { pageConfig } = useDsl(app);
|
||||
|
||||
const [config, setConfig] = useState(app.page.data);
|
||||
const MagicUiPage = app?.resolveComponent('page');
|
||||
|
||||
app.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, event: ChangeEvent) => {
|
||||
let pageConfig = config;
|
||||
nodes.forEach((node) => {
|
||||
if (isPage(node)) {
|
||||
pageConfig = node;
|
||||
} else {
|
||||
replaceChildNode(node, [pageConfig]);
|
||||
}
|
||||
});
|
||||
|
||||
setConfig(cloneDeep(pageConfig));
|
||||
|
||||
setTimeout(() => {
|
||||
app.emit('replaced-node', {
|
||||
...event,
|
||||
nodes,
|
||||
sourceId,
|
||||
});
|
||||
}, 0);
|
||||
});
|
||||
|
||||
const MagicUiPage = app.resolveComponent('page');
|
||||
|
||||
return <MagicUiPage config={config}></MagicUiPage>;
|
||||
return <MagicUiPage config={pageConfig}></MagicUiPage>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -20,8 +20,8 @@ import { createRoot } from 'react-dom/client';
|
||||
|
||||
import Core from '@tmagic/core';
|
||||
import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
|
||||
import { AppContent } from '@tmagic/react-runtime-help';
|
||||
import type { MApp } from '@tmagic/schema';
|
||||
import { AppContent } from '@tmagic/ui-react';
|
||||
import { getUrlParam } from '@tmagic/utils';
|
||||
|
||||
import components from '../.tmagic/comp-entry';
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
import React, { useContext } from 'react';
|
||||
|
||||
import type Core from '@tmagic/core';
|
||||
import { AppContent } from '@tmagic/react-runtime-help';
|
||||
import type { MPage } from '@tmagic/schema';
|
||||
import { AppContent } from '@tmagic/ui-react';
|
||||
|
||||
function App() {
|
||||
const app = useContext<Core | undefined>(AppContent);
|
||||
|
||||
@ -18,14 +18,10 @@
|
||||
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
import Core from '@tmagic/core';
|
||||
import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
|
||||
import type { MApp } from '@tmagic/schema';
|
||||
import type { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
|
||||
import { AppContent } from '@tmagic/ui-react';
|
||||
import { getElById, replaceChildNode } from '@tmagic/utils';
|
||||
import { AppContent, useEditorDsl } from '@tmagic/react-runtime-help';
|
||||
|
||||
import components from '../.tmagic/comp-entry';
|
||||
import dataSources from '../.tmagic/datasource-entry';
|
||||
@ -58,15 +54,9 @@ if (app.env.isWeb) {
|
||||
|
||||
window.appInstance = app;
|
||||
|
||||
let curPageId = '';
|
||||
|
||||
const updateConfig = (root: MApp) => {
|
||||
app?.setConfig(root, curPageId);
|
||||
renderDom();
|
||||
};
|
||||
const root = createRoot(document.getElementById('root')!);
|
||||
|
||||
const renderDom = () => {
|
||||
const root = createRoot(document.getElementById('root')!);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<AppContent.Provider value={app}>
|
||||
@ -81,60 +71,10 @@ const renderDom = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const operations = {
|
||||
getApp() {
|
||||
return app;
|
||||
},
|
||||
|
||||
updateRootConfig(root: MApp) {
|
||||
app?.setConfig(root);
|
||||
},
|
||||
|
||||
updatePageId(id: string) {
|
||||
curPageId = id;
|
||||
app?.setPage(curPageId);
|
||||
renderDom();
|
||||
},
|
||||
|
||||
getSnapElementQuerySelector() {
|
||||
return '[class*=magic-ui][id]';
|
||||
},
|
||||
|
||||
select(id: string) {
|
||||
const el = getElById()(id);
|
||||
if (el) return el;
|
||||
// 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(getElById()(document, id));
|
||||
}, 0);
|
||||
});
|
||||
},
|
||||
|
||||
add({ root }: UpdateData) {
|
||||
updateConfig(root);
|
||||
},
|
||||
|
||||
update({ config, root, parentId }: UpdateData) {
|
||||
const newNode = app.dataSourceManager?.compiledNode(config, undefined, true) || config;
|
||||
replaceChildNode(newNode, [root], parentId);
|
||||
updateConfig(cloneDeep(root));
|
||||
},
|
||||
|
||||
sortNode({ root }: SortEventData) {
|
||||
root && updateConfig(root);
|
||||
},
|
||||
|
||||
remove({ root }: RemoveData) {
|
||||
updateConfig(root);
|
||||
},
|
||||
};
|
||||
|
||||
Object.keys(components).forEach((type: string) => app.registerComponent(type, components[type]));
|
||||
|
||||
Object.values(plugins).forEach((plugin: any) => {
|
||||
plugin.install({ app });
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
window.magic?.onRuntimeReady(operations);
|
||||
useEditorDsl(app, renderDom);
|
||||
|
||||
@ -1,24 +1,9 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": false,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"baseUrl": "./",
|
||||
"jsx": "react",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
// 内部模块都指向 src/index.ts, 会有更好的代码跳转体验.
|
||||
"@tmagic/*": ["../packages/*"],
|
||||
},
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"types": ["node"],
|
||||
},
|
||||
"include": ["./page", "./playground"]
|
||||
}
|
||||
|
||||
@ -14,5 +14,6 @@
|
||||
"packages/utils/src",
|
||||
"packages/element-plus-adapter/src",
|
||||
"packages/ui/src",
|
||||
"packages/ui-react/src",
|
||||
]
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
"@tmagic/*": ["packages/*/src"],
|
||||
"@tmagic/tmagic-form-runtime": ["runtime/tmagic-form/src"],
|
||||
"@tmagic/vue-runtime-help": ["runtime/vue-runtime-help/src"],
|
||||
"@tmagic/react-runtime-help": ["runtime/react-runtime-help/src"],
|
||||
"@editor/*": ["packages/editor/src/*"],
|
||||
"@form/*": ["packages/form/src/*"],
|
||||
"@data-source/*": ["packages/data-source/src/*"],
|
||||
|
||||
@ -21,7 +21,6 @@ export default defineConfig({
|
||||
'./packages/*/tests/**',
|
||||
'./packages/cli/lib/**',
|
||||
'./packages/ui/**',
|
||||
'./packages/ui-vue2/**',
|
||||
'./packages/ui-react/**',
|
||||
'./packages/design/**',
|
||||
'./packages/element-plus-adapter/**',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user