feat: improve code

This commit is contained in:
chenos 2022-02-20 20:00:15 +08:00
parent de2b7cab75
commit 44a4893630
9 changed files with 238 additions and 89 deletions

View File

@ -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>
{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>
);
};

View File

@ -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),
};
});

View File

@ -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 },
],
};

View File

@ -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,
},
};

View File

@ -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,
},
};

View 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',
},
},
};

View File

@ -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';

View File

@ -1,7 +1,7 @@
import { IField } from './types';
export const input: IField = {
name: 'string',
name: 'input',
type: 'object',
group: 'basic',
order: 1,

View File

@ -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(.+)?',