Skip to content

Commit

Permalink
fix: update setters and use tabOptions to filter props (#129)
Browse files Browse the repository at this point in the history
* docs: update

* fix: update actionSelect

* fix: update ToggleButton text shape style

* fix: update InputCode minHeight and placeholder

* fix: show value in renderSetter

* docs: update

* fix: update groupOptions

* fix: update types

* chore: update
  • Loading branch information
wwsun authored Apr 2, 2024
1 parent 41a61cc commit 93608d1
Show file tree
Hide file tree
Showing 24 changed files with 958 additions and 441 deletions.
6 changes: 1 addition & 5 deletions apps/playground/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,9 @@
},
"dependencies": {
"@ant-design/icons": "^4.8.0",
"@music163/antd": "^0.2.4",
"antd": "^4.24.2",
"coral-system": "^1.0.5",
"umi": "^4.0.89"
},
"devDependencies": {
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"typescript": "^5.0.3"
}
}
109 changes: 1 addition & 108 deletions apps/playground/src/helpers/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Box, Group } from 'coral-system';
import { Avatar, Space, Switch } from 'antd';
import { BranchesOutlined, MenuOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { registerSetter } from '@music163/tango-designer';
import type { ComponentPrototypeType, IVariableTreeNode } from '@music163/tango-helpers';
import type { IVariableTreeNode } from '@music163/tango-helpers';
import { FooSetter } from '../components';

export * from './mock-files';
Expand Down Expand Up @@ -37,113 +37,6 @@ export const bootHelperVariables: IVariableTreeNode[] = [
},
];

// folder-name
// 物料列表定义
const bizToggleButtonPrototype: ComponentPrototypeType = {
name: 'CtPcToggleButton',
exportType: 'defaultExport',
title: '示例业务组件',
icon: 'icon-tupian',
type: 'element',
docs: 'https://redstone.fn.netease.com/mt/fe-comp/w8bq8px7n5/toggle-button',
hasChildren: false,
props: [
{
name: 'checked',
title: '是否选中',
setter: 'boolSetter',
defaultValue: false,
},
{
name: 'children',
title: '文本',
setter: 'textSetter',
initValue: '按钮',
},
],
package: '@music/ct-pc-toggle-button',
};

const sampleBlockCode = `
<Section>
<Result
status="success"
title="Successfully Purchased Cloud Server ECS!"
subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
extra={[
<Button type="primary" key="console">
Go Console
</Button>,
<Button key="buy">Buy Again</Button>,
]}
/>
</Section>
`;

const SnippetSuccessResult: ComponentPrototypeType = {
name: 'SnippetSuccessResult',
title: '成功结果',
icon: 'icon-tupian',
type: 'snippet',
package: '@music163/antd',
initChildren: sampleBlockCode,
relatedImports: ['Section', 'Result', 'Button'],
};

const Snippet2ColumnLayout: ComponentPrototypeType = {
name: 'Snippet2ColumnLayout',
title: '两列布局',
icon: 'icon-columns',
type: 'snippet',
package: '@music163/antd',
initChildren: `
<Columns columns={12}>
<Column colSpan={6}></Column>
<Column colSpan={6}></Column>
</Columns>
`,
relatedImports: ['Columns', 'Column'],
};

const Snippet3ColumnLayout: ComponentPrototypeType = {
name: 'Snippet3ColumnLayout',
title: '三列布局',
icon: 'icon-column3',
type: 'snippet',
package: '@music163/antd',
initChildren: `
<Columns columns={12}>
<Column colSpan={4}></Column>
<Column colSpan={4}></Column>
<Column colSpan={4}></Column>
</Columns>
`,
relatedImports: ['Columns', 'Column'],
};

const SnippetButtonGroup: ComponentPrototypeType = {
name: 'SnippetButtonGroup',
title: '按钮组',
icon: 'icon-anniuzu',
type: 'snippet',
package: '@music163/antd',
initChildren: `
<Space>
<Button type="primary">按钮1</Button>
<Button>按钮2</Button>
</Space>
`,
relatedImports: ['Space', 'Button'],
};

export const extendPrototypes = {
CtPcToggleButton: bizToggleButtonPrototype,
SnippetSuccessResult,
Snippet2ColumnLayout,
Snippet3ColumnLayout,
SnippetButtonGroup,
};

// 注册自定义 setter
registerSetter({
name: 'fooSetter',
Expand Down
141 changes: 141 additions & 0 deletions apps/playground/src/helpers/prototypes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import * as basePrototypes from '@music163/antd/prototypes';
import type { IComponentPrototype, Dict } from '@music163/tango-helpers';

const sampleBlockCode = `
<Section>
<Result
status="success"
title="Successfully Purchased Cloud Server ECS!"
subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
extra={[
<Button type="primary" key="console">
Go Console
</Button>,
<Button key="buy">Buy Again</Button>,
]}
/>
</Section>
`;

const SnippetSuccessResult: IComponentPrototype = {
name: 'SnippetSuccessResult',
title: '成功结果',
icon: 'icon-tupian',
type: 'snippet',
package: '@music163/antd',
initChildren: sampleBlockCode,
relatedImports: ['Section', 'Result', 'Button'],
};

const Snippet2ColumnLayout: IComponentPrototype = {
name: 'Snippet2ColumnLayout',
title: '两列布局',
icon: 'icon-columns',
type: 'snippet',
package: '@music163/antd',
initChildren: `
<Columns columns={12}>
<Column colSpan={6}></Column>
<Column colSpan={6}></Column>
</Columns>
`,
relatedImports: ['Columns', 'Column'],
};

const Snippet3ColumnLayout: IComponentPrototype = {
name: 'Snippet3ColumnLayout',
title: '三列布局',
icon: 'icon-column3',
type: 'snippet',
package: '@music163/antd',
initChildren: `
<Columns columns={12}>
<Column colSpan={4}></Column>
<Column colSpan={4}></Column>
<Column colSpan={4}></Column>
</Columns>
`,
relatedImports: ['Columns', 'Column'],
};

const SnippetButtonGroup: IComponentPrototype = {
name: 'SnippetButtonGroup',
title: '按钮组',
icon: 'icon-anniuzu',
type: 'snippet',
package: '@music163/antd',
initChildren: `
<Space>
<Button type="primary">按钮1</Button>
<Button>按钮2</Button>
</Space>
`,
relatedImports: ['Space', 'Button'],
};

// hack some prototypes
basePrototypes['Section'].siblingNames = [
'SnippetButtonGroup',
'Section',
'Section',
'Section',
'Section',
'Section',
'Section',
'Section',
];

// iconfont: https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2891794
const prototypes: Dict<IComponentPrototype> = {
...(basePrototypes as any),
SnippetSuccessResult,
Snippet2ColumnLayout,
Snippet3ColumnLayout,
SnippetButtonGroup,
Box: {
name: 'Box',
title: '盒子',
icon: 'icon-mianban',
type: 'container',
package: '@music163/antd',
hasChildren: true,
siblingNames: ['Box'],
},
Columns: {
name: 'Columns',
type: 'container',
icon: 'icon-column-4',
package: '@music163/antd',
hasChildren: true,
childrenNames: ['Column'],
},
Column: {
name: 'Column',
type: 'container',
icon: 'icon-juxing',
package: '@music163/antd',
hasChildren: true,
siblingNames: ['Column'],
},
Text: {
name: 'Text',
type: 'element',
icon: 'icon-wenzi',
package: '@music163/antd',
initChildren: '文本内容',
},
Placeholder: {
name: 'Placeholder',
type: 'element',
package: '@music163/antd',
},
ButtonGroup: {
name: 'ButtonGroup',
type: 'element',
package: '@music163/antd',
hasChildren: true,
childrenNames: ['Button'],
},
};

export default prototypes;
54 changes: 18 additions & 36 deletions apps/playground/src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import React, { useState } from 'react';
import { Box } from 'coral-system';
import { Button, Space } from 'antd';
import {
Expand All @@ -15,13 +14,8 @@ import {
themeLight,
} from '@music163/tango-designer';
import { createEngine, Workspace } from '@music163/tango-core';
import {
Logo,
ProjectDetail,
bootHelperVariables,
extendPrototypes,
sampleFiles,
} from '../helpers';
import prototypes from '../helpers/prototypes';
import { Logo, ProjectDetail, bootHelperVariables, sampleFiles } from '../helpers';
import {
ApiOutlined,
AppstoreAddOutlined,
Expand All @@ -35,9 +29,12 @@ import {
const workspace = new Workspace({
entry: '/src/index.js',
files: sampleFiles,
prototypes: extendPrototypes,
prototypes,
});

// inject workspace to window for debug
(window as any).__workspace__ = workspace;

// 2. 引擎初始化
const engine = createEngine({
workspace,
Expand All @@ -53,13 +50,13 @@ const sandboxQuery = new DndQuery({

// 4. 图标库初始化(物料面板和组件树使用了 iconfont 里的图标)
createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
scriptUrl: '//at.alicdn.com/t/c/font_2891794_6d4hj5u0bjx.js',
});

const menuData = {
common: [
{
title: '基本',
title: '常用',
items: [
'Button',
'Section',
Expand All @@ -70,6 +67,8 @@ const menuData = {
'Typography',
'Title',
'Paragraph',
'Table',
'Each',
],
},
{
Expand All @@ -87,8 +86,6 @@ const menuData = {
* 5. 平台初始化,访问 https://local.netease.com:6006/
*/
export default function App() {
const [menuLoading, setMenuLoading] = useState(true);
// const [menuData, setMenuData] = useState(false);
return (
<Designer
theme={themeLight}
Expand Down Expand Up @@ -127,7 +124,6 @@ export default function App() {
icon={<AppstoreAddOutlined />}
widgetProps={{
menuData,
loading: menuLoading,
}}
/>
<Sidebar.Item key="outline" label="结构" icon={<BuildOutlined />} />
Expand All @@ -153,31 +149,17 @@ export default function App() {
onMessage={(e) => {
if (e.type === 'done') {
const sandboxWindow: any = sandboxQuery.window;
if (sandboxWindow.TangoAntd) {
// 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);
}
}
// if (sandboxWindow.TangoAntd) {
// if (sandboxWindow.TangoAntd.menuData) {
// setMenuData(sandboxWindow.TangoAntd.menuData);
// }
// if (sandboxWindow.TangoAntd.prototypes) {
// workspace.setComponentPrototypes(sandboxWindow.TangoAntd.prototypes);
// }
// }
if (sandboxWindow.localTangoComponentPrototypes) {
workspace.setComponentPrototypes(sandboxWindow.localTangoComponentPrototypes);
}
setMenuLoading(false);
}
}}
navigatorExtra={<Button size="small">hello world</Button>}
Expand Down
Loading

0 comments on commit 93608d1

Please sign in to comment.