feat: improve tab schema designer

This commit is contained in:
chenos 2022-03-06 20:38:02 +08:00
parent e76eb1edac
commit b1aee77d10
2 changed files with 41 additions and 17 deletions

View File

@ -1,23 +1,47 @@
import { useField } from '@formily/react'; import { ISchema, useField, useFieldSchema } from '@formily/react';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next';
import { useDesignable } from '../..';
import { GeneralSchemaDesigner, SchemaSettings } from '../../../'; import { GeneralSchemaDesigner, SchemaSettings } from '../../../';
export const TabsDesigner = () => { export const TabsDesigner = () => {
const field = useField(); const field = useField();
const fieldSchema = useFieldSchema();
const { dn } = useDesignable();
const { t } = useTranslation();
return ( return (
<GeneralSchemaDesigner> <GeneralSchemaDesigner>
<SchemaSettings.Popup <SchemaSettings.ModalItem
schema={{ title={t('Edit')}
type: 'void', schema={
'x-component': 'Action.Modal', {
'x-decorator': 'Form', type: 'object',
'x-component-props': { title: t('Edit tab'),
title: '标题', properties: {
}, title: {
title: t('Tab name'),
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {},
},
},
} as ISchema
}
initialValues={{ title: field.title }}
onSubmit={({ title }) => {
if (title) {
fieldSchema.title = title;
field.title = title;
dn.emit('patch', {
schema: {
['x-uid']: fieldSchema['x-uid'],
title,
},
});
dn.refresh();
}
}} }}
> />
</SchemaSettings.Popup>
<SchemaSettings.Divider /> <SchemaSettings.Divider />
<SchemaSettings.Remove /> <SchemaSettings.Remove />
</GeneralSchemaDesigner> </GeneralSchemaDesigner>

View File

@ -49,16 +49,16 @@ export const TabPaneInitializers = () => {
}, },
type: 'dashed', type: 'dashed',
}, },
title: '添加标签页', title: '{{t("Add tab")}}',
properties: { properties: {
drawer1: { drawer1: {
'x-decorator': 'Form', 'x-decorator': 'Form',
'x-component': 'Action.Modal', 'x-component': 'Action.Modal',
type: 'void', type: 'void',
title: 'Drawer Title', title: '{{t("Add tab")}}',
properties: { properties: {
title: { title: {
title: '标题', title: '{{t("Tab name")}}',
required: true, required: true,
'x-component': 'Input', 'x-component': 'Input',
'x-decorator': 'FormItem', 'x-decorator': 'FormItem',
@ -68,7 +68,7 @@ export const TabPaneInitializers = () => {
type: 'void', type: 'void',
properties: { properties: {
cancel: { cancel: {
title: 'Cancel', title: '{{t("Cancel")}}',
'x-component': 'Action', 'x-component': 'Action',
'x-component-props': { 'x-component-props': {
useAction: () => { useAction: () => {
@ -82,7 +82,7 @@ export const TabPaneInitializers = () => {
}, },
}, },
submit: { submit: {
title: 'Submit', title: '{{t("Submit")}}',
'x-component': 'Action', 'x-component': 'Action',
'x-component-props': { 'x-component-props': {
type: 'primary', type: 'primary',