Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

quick add sibling #127

Merged
merged 5 commits into from
Mar 26, 2024
Merged

quick add sibling #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c7b06c1
docs: add mail example
wwsun Mar 25, 2024
1bf733f
fix: update SettingForm style
wwsun Mar 26, 2024
8015880
fix: add tooltip to quick add action
wwsun Mar 26, 2024
14938d4
feat: quick add sibling nodes
wwsun Mar 26, 2024
26f689b
fix: update view
wwsun Mar 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/playground/.umirc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const resolvePackageIndex = (relativeEntry: string) =>
export default defineConfig({
routes: [
{ path: '/', component: 'index' },
{ path: '/mail', component: 'mail' },
{ path: '/docs', component: 'docs' },
],
npmClient: 'yarn',
Expand Down
2 changes: 1 addition & 1 deletion apps/playground/src/helpers/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ const SnippetButtonGroup: ComponentPrototypeType = {
relatedImports: ['Space', 'Button'],
};

export const prototypes = {
export const extendPrototypes = {
CtPcToggleButton: bizToggleButtonPrototype,
SnippetSuccessResult,
Snippet2ColumnLayout,
Expand Down
180 changes: 180 additions & 0 deletions apps/playground/src/helpers/mail-files.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
const packageJson = {
name: 'demo',
private: true,
dependencies: {
'@music163/tango-mail': '0.1.1',
'@music163/tango-boot': '0.2.5',
react: '17.0.2',
'react-dom': '17.0.2',
'prop-types': '15.7.2',
tslib: '2.5.0',
},
};

const tangoConfigJson = {
designerConfig: {
autoGenerateComponentId: true,
},
packages: {
react: {
version: '17.0.2',
library: 'React',
type: 'dependency',
resources: ['https://unpkg.com/react@{{version}}/umd/react.development.js'],
},
'react-dom': {
version: '17.0.2',
library: 'ReactDOM',
type: 'dependency',
resources: ['https://unpkg.com/react-dom@{{version}}/umd/react-dom.development.js'],
},
'react-is': {
version: '16.13.1',
library: 'ReactIs',
type: 'dependency',
resources: ['https://unpkg.com/react-is@{{version}}/umd/react-is.production.min.js'],
},
'@music163/tango-boot': {
description: '云音乐低代码运行时框架',
version: '0.2.5',
library: 'TangoBoot',
type: 'baseDependency',
resources: ['https://unpkg.com/@music163/tango-boot@{{version}}/dist/boot.js'],
// resources: ['http://localhost:9001/boot.js'],
},
'@music163/tango-mail': {
description: 'TangoMail 基础物料',
version: '0.1.1',
library: 'TangoMail',
type: 'baseDependency',
resources: ['https://unpkg.com/@music163/tango-mail@{{version}}/dist/index.js'],
designerResources: ['https://unpkg.com/@music163/tango-mail@{{version}}/dist/designer.js'],
},
},
};

const routesCode = `
import Mail from "./pages/mail";

const routes = [
{
path: '/',
exact: true,
component: Mail,
},
];

export default routes;
`;

const entryCode = `
import { runApp } from '@music163/tango-boot';
import routes from './routes';

runApp({
boot: {
mountElement: document.querySelector('#root'),
qiankun: false,
},

router: {
type: 'browser',
config: routes,
},
});
`;

const viewHomeCode = `
import React from 'react';
import {
Body,
Button,
Container,
Head,
Hr,
Html,
Preview,
Section,
Text,
} from '@music163/tango-mail';

const WelcomeEmail = () => (
<Html>
<Head />
<Preview>The sales intelligence platform that helps you uncover qualified leads.</Preview>
<Body style={main}>
<Container style={container}>
<Text style={paragraph}>Hi wells,</Text>
<Text style={paragraph}>
Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads
and close deals faster.
</Text>
<Section style={btnContainer}>
<Button style={button} href="https://getkoala.com">
Get started
</Button>
</Section>
<Text style={paragraph}>
Best,
<br />
The Koala team
</Text>
<Hr style={hr} />
<Text style={footer}>470 Noor Ave STE B #1148, South San Francisco, CA 94080</Text>
</Container>
</Body>
</Html>
);

const main = {
backgroundColor: '#ffffff',
fontFamily:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
};

const container = {
margin: '0 auto',
padding: '20px 0 48px',
};

const paragraph = {
fontSize: '16px',
lineHeight: '26px',
};

const btnContainer = {
textAlign: 'center',
};

const button = {
backgroundColor: '#5F51E8',
borderRadius: '3px',
color: '#fff',
fontSize: '16px',
textDecoration: 'none',
textAlign: 'center',
display: 'block',
padding: '12px',
};

const hr = {
borderColor: '#cccccc',
margin: '20px 0',
};

const footer = {
color: '#8898aa',
fontSize: '12px',
};

export default WelcomeEmail;
`;

export const mailFiles = [
{ filename: '/package.json', code: JSON.stringify(packageJson) },
{ filename: '/tango.config.json', code: JSON.stringify(tangoConfigJson) },
{ filename: '/README.md', code: '# readme' },
{ filename: '/src/index.js', code: entryCode },
{ filename: '/src/pages/mail.js', code: viewHomeCode },
{ filename: '/src/routes.js', code: routesCode },
];
29 changes: 17 additions & 12 deletions apps/playground/src/helpers/mock-files.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,29 +149,34 @@ import {
Button,
Input,
FormilyForm,
FormilyFormItem,
} from "@music163/antd";
import { Space } from '@music163/antd';
import { LocalButton } from '../components';

import { Space } from "@music163/antd";
import { LocalButton } from "../components";
class App extends React.Component {
render() {
return (
<Page title={tango.stores.app.title}>
<Section tid="section1" title="Section Title">
your input: <Input tid="input1" defaultValue="hello" />
copy input: <Input value={tango.page.input1?.value} />
</Section>
<Section tid="section2">
<Space tid="space1">
<LocalButton />
<Button tid="button1">button</Button>
<Section tid="section1" title="Section Title">
your input: <Input tid="input1" defaultValue="hello" />
copy input: <Input value={tango.page.input1?.value} />
</Section>
<Section tid="section2">
<Space tid="space1">
<LocalButton />
<Button tid="button1">button</Button>
</Space>
</Section>
<Section title="区块标题" tid="section3">
<FormilyForm tid="formilyForm1">
<FormilyFormItem name="input1" component="Input" label="表单项" />
<FormilyFormItem name="select1" component="Select" label="表单项" />
</FormilyForm>
</Section>
</Page>
);
}
}

export default definePage(App);
`;

Expand Down
59 changes: 53 additions & 6 deletions apps/playground/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,13 @@ import {
themeLight,
} from '@music163/tango-designer';
import { createEngine, Workspace } from '@music163/tango-core';
import { Logo, ProjectDetail, bootHelperVariables, sampleFiles } from '../helpers';
import {
Logo,
ProjectDetail,
bootHelperVariables,
extendPrototypes,
sampleFiles,
} from '../helpers';
import {
ApiOutlined,
AppstoreAddOutlined,
Expand All @@ -29,6 +35,7 @@ import {
const workspace = new Workspace({
entry: '/src/index.js',
files: sampleFiles,
prototypes: extendPrototypes,
});

// 2. 引擎初始化
Expand All @@ -49,12 +56,39 @@ createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
});

const menuData = {
common: [
{
title: '基本',
items: [
'Button',
'Section',
'Columns',
'Column',
'Box',
'Space',
'Typography',
'Title',
'Paragraph',
],
},
{
title: '输入',
items: ['Input', 'InputNumber', 'Select'],
},
{
title: 'Formily表单',
items: ['FormilyForm', 'FormilyFormItem', 'FormilySubmit', 'FormilyReset'],
},
],
};

/**
* 5. 平台初始化，访问 https://local.netease.com:6006/
*/
export default function App() {
const [menuLoading, setMenuLoading] = useState(true);
const [menuData, setMenuData] = useState(false);
// const [menuData, setMenuData] = useState(false);
return (
<Designer
theme={themeLight}
Expand Down Expand Up @@ -92,7 +126,7 @@ export default function App() {
label="组件"
icon={<AppstoreAddOutlined />}
widgetProps={{
menuData: menuData as any,
menuData,
loading: menuLoading,
}}
/>
Expand Down Expand Up @@ -120,10 +154,23 @@ export default function App() {
if (e.type === 'done') {
const sandboxWindow: any = sandboxQuery.window;
if (sandboxWindow.TangoAntd) {
if (sandboxWindow.TangoAntd.menuData) {
setMenuData(sandboxWindow.TangoAntd.menuData);
}
// if (sandboxWindow.TangoAntd.menuData) {
// setMenuData(sandboxWindow.TangoAntd.menuData);
// }
if (sandboxWindow.TangoAntd.prototypes) {
sandboxWindow.TangoAntd.prototypes['Section'].siblingNames = [
'SnippetButtonGroup',
'Section',
'Section',
'Section',
'Section',
'Section',
'Section',
'Section',
];
sandboxWindow.TangoAntd.prototypes['FormilyFormItem'].siblingNames = [
'FormilyFormItem',
];
workspace.setComponentPrototypes(sandboxWindow.TangoAntd.prototypes);
}
}
Expand Down
Loading
Loading