JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-10 03:22:23 +08:00
Code Issues Projects Releases Wiki Activity

style(ui): eslint fix

Browse Source
This commit is contained in:
roymondchen 2022-06-07 16:24:58 +08:00 committed by jia000
parent 4944b27464
commit a418bf14de
6 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/ui-react/src/button/Button.tsx
View File

@ -34,11 +34,7 @@ const Page: React.FC<ButtonProps> = ({ config }) => {
const MagicUiText = app.resolveComponent('text'); const MagicUiText = app.resolveComponent('text');
return ( return (
<button <button className="magic-ui-button" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
className="magic-ui-button"
style={app.transformStyle(config.style || {})}
id={`${config.id || ''}`}
>
<MagicUiText <MagicUiText
config={{ config={{
text: config.text, text: config.text,

10
packages/ui-react/src/img/Img.tsx
View File

@ -36,10 +36,16 @@ const Img: React.FC<ImgProps> = ({ config }) => {
const clickHandler = () => { const clickHandler = () => {
if (config.url) window.location.href = config.url; if (config.url) window.location.href = config.url;
} };
return ( return (
<img className="magic-ui-img" style={app.transformStyle(config.style || {})} id={`${config.id}`} src={config.src} onClick={clickHandler} /> <img
className="magic-ui-img"
style={app.transformStyle(config.style || {})}
id={`${config.id}`}
src={config.src}
onClick={clickHandler}
/>
); );
}; };

13
packages/ui-react/src/overlay/Overlay.tsx
View File

@ -16,13 +16,13 @@
* limitations under the License. * limitations under the License.
*/ */
import React, { useContext, useEffect , useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import Core from '@tmagic/core'; import Core from '@tmagic/core';
import { MComponent, MNode } from '@tmagic/schema'; import { MComponent, MNode } from '@tmagic/schema';
import useApp from '../useApp';
import AppContent from '../AppContent'; import AppContent from '../AppContent';
import useApp from '../useApp';
interface OverlayProps { interface OverlayProps {
config: MComponent; config: MComponent;
@ -55,7 +55,7 @@ const Overlay: React.FC<OverlayProps> = ({ config }) => {
methods: { methods: {
openOverlay, openOverlay,
closeOverlay, closeOverlay,
} },
}); });
app?.on('editor:select', (info: any, path: MNode[]) => { app?.on('editor:select', (info: any, path: MNode[]) => {
@ -66,13 +66,16 @@ const Overlay: React.FC<OverlayProps> = ({ config }) => {
} }
}); });
if (!visible) return null; if (!visible) return null;
const MagicUiComp = app.resolveComponent('container'); const MagicUiComp = app.resolveComponent('container');
return ( return (
<MagicUiComp id={config.id} className="magic-ui-overlay" config={ { style: config.style, items: config.items } }></MagicUiComp> <MagicUiComp
id={config.id}
className="magic-ui-overlay"
config={{ style: config.style, items: config.items }}
></MagicUiComp>
); );
}; };

44
packages/ui-react/src/page/Page.tsx
View File

@ -30,33 +30,35 @@ const Page: React.FC<PageProps> = ({ config }) => {
const { app } = useApp({ const { app } = useApp({
config, config,
methods: { methods: {
refresh: () => window.location.reload() refresh: () => window.location.reload(),
} },
}); });
if (!app) return null; if (!app) return null;
return <div return (
id={`${config.id || ''}`} <div
className={`magic-ui-page${config.className ? ` ${config.className}` : ''}`} id={`${config.id || ''}`}
style={app.transformStyle(config.style || {})} className={`magic-ui-page${config.className ? ` ${config.className}` : ''}`}
> style={app.transformStyle(config.style || {})}
{config.items?.map((item: MComponent | MContainer) => { >
const MagicUiComp = app.resolveComponent(item.type || 'container'); {config.items?.map((item: MComponent | MContainer) => {
const MagicUiComp = app.resolveComponent(item.type || 'container');
if (!MagicUiComp) return null; if (!MagicUiComp) return null;
return ( return (
<MagicUiComp <MagicUiComp
id={`${item.id || ''}`} id={`${item.id || ''}`}
key={item.id} key={item.id}
config={item} config={item}
className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`} className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
style={app.transformStyle(item.style || {})} style={app.transformStyle(item.style || {})}
></MagicUiComp> ></MagicUiComp>
); );
})} })}
</div>; </div>
);
}; };
Page.displayName = 'magic-ui-page'; Page.displayName = 'magic-ui-page';

8
packages/ui-react/src/qrcode/Qrcode.tsx
View File

@ -19,9 +19,10 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import QRCode from 'qrcode'; import QRCode from 'qrcode';
import useApp from '../useApp';
import { MComponent } from '@tmagic/schema'; import { MComponent } from '@tmagic/schema';
import useApp from '../useApp';
interface QrcodeProps { interface QrcodeProps {
config: { config: {
url: string; url: string;
@ -38,10 +39,9 @@ const Qrcode: React.FC<QrcodeProps> = ({ config }) => {
useEffect(() => { useEffect(() => {
QRCode.toDataURL(config.url, (e: any, url: string) => { QRCode.toDataURL(config.url, (e: any, url: string) => {
if (e) console.error(e); if (e) console.error(e);
setImgSrc(url) setImgSrc(url);
}); });
}, [config.url]) }, [config.url]);
return ( return (
<img className="magic-ui-qrcode" style={app.transformStyle(config.style || {})} id={`${config.id}`} src={imgSrc} /> <img className="magic-ui-qrcode" style={app.transformStyle(config.style || {})} id={`${config.id}`} src={imgSrc} />

2
runtime/react/src/page/main.tsx
View File

@ -47,7 +47,7 @@ const getLocalConfig = (): MApp[] => {
} }
}; };
window.magicDSL = [] window.magicDSL = [];
const app = new Core({ const app = new Core({
config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {}, config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},