feat: improve code
This commit is contained in:
parent
de2b7cab75
commit
44a4893630
@ -1,11 +1,13 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { ArrayTable } from '@formily/antd';
|
||||
import { ISchema } from '@formily/react';
|
||||
import { uid } from '@formily/shared';
|
||||
import { Button, Dropdown, Menu } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { ActionContext, SchemaComponent } from '../../schema-component';
|
||||
import { ActionContext, SchemaComponent, useCompile } from '../../schema-component';
|
||||
import { useCollectionManager } from '../hooks';
|
||||
import { IField } from '../interfaces/types';
|
||||
import { options } from './interfaces';
|
||||
|
||||
const getSchema = (schema: IField): ISchema => {
|
||||
if (!schema) {
|
||||
@ -74,6 +76,7 @@ export const AddFieldAction = () => {
|
||||
const { getInterface } = useCollectionManager();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [schema, setSchema] = useState({});
|
||||
const compile = useCompile();
|
||||
return (
|
||||
<ActionContext.Provider value={{ visible, setVisible }}>
|
||||
<Dropdown
|
||||
@ -85,11 +88,16 @@ export const AddFieldAction = () => {
|
||||
setVisible(true);
|
||||
}}
|
||||
>
|
||||
<Menu.SubMenu title={'基本类型'}>
|
||||
<Menu.Item key={'input'}>input</Menu.Item>
|
||||
<Menu.Item key={'textarea'}>textarea</Menu.Item>
|
||||
<Menu.Item key={'chinaRegion'}>China region</Menu.Item>
|
||||
</Menu.SubMenu>
|
||||
{options.map((option) => {
|
||||
return (
|
||||
<Menu.SubMenu title={compile(option.label)}>
|
||||
{option.children.map((child) => {
|
||||
console.log(child);
|
||||
return <Menu.Item key={child.name}>{compile(child.title)}</Menu.Item>;
|
||||
})}
|
||||
</Menu.SubMenu>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
}
|
||||
>
|
||||
@ -97,7 +105,7 @@ export const AddFieldAction = () => {
|
||||
添加字段
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<SchemaComponent schema={schema} />
|
||||
<SchemaComponent schema={schema} components={{ ArrayTable }} />
|
||||
</ActionContext.Provider>
|
||||
);
|
||||
};
|
||||
|
@ -0,0 +1,45 @@
|
||||
import { ISchema } from '@formily/react';
|
||||
import set from 'lodash/set';
|
||||
import * as types from '../interfaces';
|
||||
|
||||
export const interfaces = new Map<string, ISchema>();
|
||||
|
||||
const fields = {};
|
||||
const groupLabels = {};
|
||||
|
||||
export function registerField(group: string, type: string, schema) {
|
||||
fields[group] = fields[group] || {};
|
||||
set(fields, [group, type], schema);
|
||||
interfaces.set(type, schema);
|
||||
}
|
||||
|
||||
export function registerGroupLabel(key: string, label: string) {
|
||||
groupLabels[key] = label;
|
||||
}
|
||||
|
||||
Object.keys(types).forEach((type) => {
|
||||
const schema = types[type];
|
||||
registerField(schema.group || 'others', type, { order: 0, ...schema });
|
||||
});
|
||||
|
||||
registerGroupLabel('basic', '{{t("Basic")}}');
|
||||
registerGroupLabel('choices', '{{t("Choices")}}');
|
||||
registerGroupLabel('media', '{{t("Media")}}');
|
||||
registerGroupLabel('datetime', '{{t("Date & Time")}}');
|
||||
registerGroupLabel('relation', '{{t("Relation")}}');
|
||||
registerGroupLabel('systemInfo', '{{t("System info")}}');
|
||||
registerGroupLabel('others', '{{t("Others")}}');
|
||||
|
||||
export const options = Object.keys(groupLabels).map((groupName) => {
|
||||
return {
|
||||
label: groupLabels[groupName],
|
||||
children: Object.keys(fields[groupName] || {})
|
||||
.map((type) => {
|
||||
return {
|
||||
name: type,
|
||||
...fields[groupName][type],
|
||||
};
|
||||
})
|
||||
.sort((a, b) => a.order - b.order),
|
||||
};
|
||||
});
|
@ -0,0 +1,22 @@
|
||||
import { IField } from './types';
|
||||
|
||||
export const checkbox: IField = {
|
||||
name: 'checkbox',
|
||||
type: 'object',
|
||||
group: 'choices',
|
||||
order: 1,
|
||||
title: '{{t("Checkbox")}}',
|
||||
default: {
|
||||
type: 'boolean',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'boolean',
|
||||
'x-component': 'Checkbox',
|
||||
},
|
||||
},
|
||||
properties: {},
|
||||
operators: [
|
||||
{ label: '{{t("Yes")}}', value: '$isTruly', selected: true, noValue: true },
|
||||
{ label: '{{t("No")}}', value: '$isFalsy', noValue: true },
|
||||
],
|
||||
};
|
@ -0,0 +1,22 @@
|
||||
import { dataSource } from './properties';
|
||||
import { IField } from './types';
|
||||
|
||||
export const checkboxGroup: IField = {
|
||||
name: 'checkboxGroup',
|
||||
type: 'object',
|
||||
group: 'choices',
|
||||
order: 5,
|
||||
title: '{{t("Checkbox group")}}',
|
||||
default: {
|
||||
interface: 'checkboxGroup',
|
||||
type: 'json',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
'x-component': 'Checkbox.Group',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
'uiSchema.enum': dataSource,
|
||||
},
|
||||
};
|
@ -0,0 +1,26 @@
|
||||
import { dateTimeProps } from './properties';
|
||||
import { IField } from './types';
|
||||
|
||||
export const createdAt: IField = {
|
||||
name: 'createdAt',
|
||||
type: 'object',
|
||||
group: 'systemInfo',
|
||||
order: 1,
|
||||
title: '{{t("Created at")}}',
|
||||
sortable: true,
|
||||
default: {
|
||||
type: 'date',
|
||||
field: 'created_at',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'datetime',
|
||||
title: '{{t("Created at")}}',
|
||||
'x-component': 'DatePicker',
|
||||
'x-component-props': {},
|
||||
'x-read-pretty': true,
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
...dateTimeProps,
|
||||
},
|
||||
};
|
22
packages/client/src/collection-manager/interfaces/email.ts
Normal file
22
packages/client/src/collection-manager/interfaces/email.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { IField } from './types';
|
||||
|
||||
export const email: IField = {
|
||||
name: 'email',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 4,
|
||||
title: '{{t("Email")}}',
|
||||
sortable: true,
|
||||
default: {
|
||||
type: 'string',
|
||||
// name,
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
// title,
|
||||
'x-component': 'Input',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-validator': 'email',
|
||||
'x-designable-bar': 'Input.DesignableBar',
|
||||
},
|
||||
},
|
||||
};
|
@ -1,4 +1,8 @@
|
||||
export * from './checkbox';
|
||||
export * from './checkboxGroup';
|
||||
export * from './chinaRegion';
|
||||
export * from './createdAt';
|
||||
export * from './email';
|
||||
export * from './input';
|
||||
export * from './textarea';
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { IField } from './types';
|
||||
|
||||
export const input: IField = {
|
||||
name: 'string',
|
||||
name: 'input',
|
||||
type: 'object',
|
||||
group: 'basic',
|
||||
order: 1,
|
||||
|
@ -30,87 +30,87 @@ export class UiRoutesStoragePlugin extends Plugin {
|
||||
sideMenuRefScopeKey: 'sideMenuRef',
|
||||
},
|
||||
properties: {
|
||||
item3: {
|
||||
type: 'void',
|
||||
title: 'SubMenu u3',
|
||||
'x-component': 'Menu.SubMenu',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
item6: {
|
||||
type: 'void',
|
||||
title: 'SubMenu u6',
|
||||
'x-component': 'Menu.SubMenu',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
item7: {
|
||||
type: 'void',
|
||||
title: 'Menu Item u7',
|
||||
'x-component': 'Menu.Item',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
page1: {
|
||||
type: 'void',
|
||||
'x-component': 'Page',
|
||||
'x-async': true,
|
||||
properties: {
|
||||
grid1: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-item-initializer': 'BlockInitializer',
|
||||
properties: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
item8: {
|
||||
type: 'void',
|
||||
title: 'Menu Item u8',
|
||||
'x-component': 'Menu.Item',
|
||||
'x-component-props': {},
|
||||
},
|
||||
},
|
||||
},
|
||||
item4: {
|
||||
type: 'void',
|
||||
title: 'Menu Item u4',
|
||||
'x-component': 'Menu.Item',
|
||||
'x-component-props': {},
|
||||
},
|
||||
item5: {
|
||||
type: 'void',
|
||||
title: 'Menu Item u5',
|
||||
'x-component': 'Menu.Item',
|
||||
'x-component-props': {},
|
||||
},
|
||||
},
|
||||
},
|
||||
item1: {
|
||||
type: 'void',
|
||||
title: 'Menu Item u1',
|
||||
'x-component': 'Menu.Item',
|
||||
'x-component-props': {},
|
||||
},
|
||||
item2: {
|
||||
type: 'void',
|
||||
title: 'Menu Item u2',
|
||||
'x-component': 'Menu.Item',
|
||||
'x-component-props': {},
|
||||
},
|
||||
item9: {
|
||||
type: 'void',
|
||||
title: 'SubMenu u9',
|
||||
'x-component': 'Menu.SubMenu',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
item10: {
|
||||
type: 'void',
|
||||
title: 'Menu Item u10',
|
||||
'x-component': 'Menu.Item',
|
||||
'x-component-props': {},
|
||||
},
|
||||
},
|
||||
},
|
||||
// item3: {
|
||||
// type: 'void',
|
||||
// title: 'SubMenu u3',
|
||||
// 'x-component': 'Menu.SubMenu',
|
||||
// 'x-component-props': {},
|
||||
// properties: {
|
||||
// item6: {
|
||||
// type: 'void',
|
||||
// title: 'SubMenu u6',
|
||||
// 'x-component': 'Menu.SubMenu',
|
||||
// 'x-component-props': {},
|
||||
// properties: {
|
||||
// item7: {
|
||||
// type: 'void',
|
||||
// title: 'Menu Item u7',
|
||||
// 'x-component': 'Menu.Item',
|
||||
// 'x-component-props': {},
|
||||
// properties: {
|
||||
// page1: {
|
||||
// type: 'void',
|
||||
// 'x-component': 'Page',
|
||||
// 'x-async': true,
|
||||
// properties: {
|
||||
// grid1: {
|
||||
// type: 'void',
|
||||
// 'x-component': 'Grid',
|
||||
// 'x-item-initializer': 'BlockInitializer',
|
||||
// properties: {},
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// item8: {
|
||||
// type: 'void',
|
||||
// title: 'Menu Item u8',
|
||||
// 'x-component': 'Menu.Item',
|
||||
// 'x-component-props': {},
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// item4: {
|
||||
// type: 'void',
|
||||
// title: 'Menu Item u4',
|
||||
// 'x-component': 'Menu.Item',
|
||||
// 'x-component-props': {},
|
||||
// },
|
||||
// item5: {
|
||||
// type: 'void',
|
||||
// title: 'Menu Item u5',
|
||||
// 'x-component': 'Menu.Item',
|
||||
// 'x-component-props': {},
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// item1: {
|
||||
// type: 'void',
|
||||
// title: 'Menu Item u1',
|
||||
// 'x-component': 'Menu.Item',
|
||||
// 'x-component-props': {},
|
||||
// },
|
||||
// item2: {
|
||||
// type: 'void',
|
||||
// title: 'Menu Item u2',
|
||||
// 'x-component': 'Menu.Item',
|
||||
// 'x-component-props': {},
|
||||
// },
|
||||
// item9: {
|
||||
// type: 'void',
|
||||
// title: 'SubMenu u9',
|
||||
// 'x-component': 'Menu.SubMenu',
|
||||
// 'x-component-props': {},
|
||||
// properties: {
|
||||
// item10: {
|
||||
// type: 'void',
|
||||
// title: 'Menu Item u10',
|
||||
// 'x-component': 'Menu.Item',
|
||||
// 'x-component-props': {},
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
},
|
||||
},
|
||||
path: '/admin/:name(.+)?',
|
||||
|
Loading…
Reference in New Issue
Block a user