feat(client): action schema settings
This commit is contained in:
parent
c9957dadab
commit
0c48463e53
@ -0,0 +1,78 @@
|
|||||||
|
import { ISchema, useField, useFieldSchema } from '@formily/react';
|
||||||
|
import React from 'react';
|
||||||
|
import { useDesignable } from '../..';
|
||||||
|
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
|
||||||
|
|
||||||
|
export const ActionDesigner = () => {
|
||||||
|
const initialValue = {};
|
||||||
|
const field = useField();
|
||||||
|
const fieldSchema = useFieldSchema();
|
||||||
|
const { dn } = useDesignable();
|
||||||
|
const isPopupAction = ['create', 'update', 'view'].includes(fieldSchema['x-action'] || '');
|
||||||
|
return (
|
||||||
|
<GeneralSchemaDesigner>
|
||||||
|
<SchemaSettings.ModalItem
|
||||||
|
title={'编辑'}
|
||||||
|
schema={
|
||||||
|
{
|
||||||
|
type: 'object',
|
||||||
|
title: '编辑按钮',
|
||||||
|
properties: {
|
||||||
|
title: {
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'Input',
|
||||||
|
title: '按钮标题',
|
||||||
|
'x-component-props': {},
|
||||||
|
// description: `原字段标题:${collectionField?.uiSchema?.title}`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} 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();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{isPopupAction && (
|
||||||
|
<SchemaSettings.SelectItem
|
||||||
|
title={'打开方式'}
|
||||||
|
options={[
|
||||||
|
{ label: '抽屉', value: 'drawer' },
|
||||||
|
{ label: '对话框', value: 'modal' },
|
||||||
|
]}
|
||||||
|
value={field.componentProps.openMode}
|
||||||
|
onChange={(value) => {
|
||||||
|
field.componentProps.openMode = value;
|
||||||
|
fieldSchema['x-component-props']['openMode'] = value;
|
||||||
|
dn.emit('patch', {
|
||||||
|
schema: {
|
||||||
|
'x-uid': fieldSchema['x-uid'],
|
||||||
|
'x-component-props': {
|
||||||
|
openMode: value,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
dn.refresh();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<SchemaSettings.Divider />
|
||||||
|
<SchemaSettings.Remove
|
||||||
|
removeParentsIfNoChildren
|
||||||
|
breakRemoveOn={(s) => {
|
||||||
|
return s['x-component'] === 'Space' || s['x-component'] === 'ActionBar';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</GeneralSchemaDesigner>
|
||||||
|
);
|
||||||
|
};
|
@ -4,7 +4,5 @@ import Action from './Action';
|
|||||||
import { ComposedAction } from './types';
|
import { ComposedAction } from './types';
|
||||||
|
|
||||||
export const ActionLink: ComposedAction = observer((props: any) => {
|
export const ActionLink: ComposedAction = observer((props: any) => {
|
||||||
return <Action {...props} component={'a'} className={'nb-action-link'}/>;
|
return <Action {...props} component={'a'} className={'nb-action-link'} />;
|
||||||
});
|
});
|
||||||
|
|
||||||
export default ActionLink;
|
|
||||||
|
@ -22,7 +22,7 @@ export const ActionModal: ComposedActionDrawer = observer((props) => {
|
|||||||
{createPortal(
|
{createPortal(
|
||||||
<Modal
|
<Modal
|
||||||
// width={'50%'}
|
// width={'50%'}
|
||||||
title={schema.title}
|
title={field.title}
|
||||||
{...others}
|
{...others}
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
visible={visible}
|
visible={visible}
|
||||||
|
@ -4,11 +4,12 @@ import { Button, Modal, Popover } from 'antd';
|
|||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useActionContext } from '../..';
|
import { useActionContext } from '../..';
|
||||||
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
|
|
||||||
import { SortableItem } from '../../common';
|
import { SortableItem } from '../../common';
|
||||||
import { useDesigner } from '../../hooks';
|
import { useDesigner } from '../../hooks';
|
||||||
import ActionContainer from './Action.Container';
|
import ActionContainer from './Action.Container';
|
||||||
|
import { ActionDesigner } from './Action.Designer';
|
||||||
import { ActionDrawer } from './Action.Drawer';
|
import { ActionDrawer } from './Action.Drawer';
|
||||||
|
import { ActionLink } from './Action.Link';
|
||||||
import { ActionModal } from './Action.Modal';
|
import { ActionModal } from './Action.Modal';
|
||||||
import { ActionPage } from './Action.Page';
|
import { ActionPage } from './Action.Page';
|
||||||
import { ActionContext } from './context';
|
import { ActionContext } from './context';
|
||||||
@ -146,23 +147,8 @@ Action.Popover.Footer = observer((props) => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
Action.Designer = () => {
|
Action.Link = ActionLink;
|
||||||
return (
|
Action.Designer = ActionDesigner;
|
||||||
<GeneralSchemaDesigner>
|
|
||||||
<SchemaSettings.Remove
|
|
||||||
removeParentsIfNoChildren
|
|
||||||
breakRemoveOn={(s) => {
|
|
||||||
return s['x-component'] === 'Space' || s['x-component'] === 'ActionBar';
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</GeneralSchemaDesigner>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
Action.Link = observer((props) => {
|
|
||||||
return <Action {...props} component={'a'} className={'nb-action-link'} />;
|
|
||||||
});
|
|
||||||
|
|
||||||
Action.Drawer = ActionDrawer;
|
Action.Drawer = ActionDrawer;
|
||||||
Action.Modal = ActionModal;
|
Action.Modal = ActionModal;
|
||||||
Action.Container = ActionContainer;
|
Action.Container = ActionContainer;
|
||||||
|
@ -47,11 +47,13 @@ export const TableRecordActionInitializers = (props: any) => {
|
|||||||
'x-action': 'view',
|
'x-action': 'view',
|
||||||
'x-designer': 'Action.Designer',
|
'x-designer': 'Action.Designer',
|
||||||
'x-component': 'Action.Link',
|
'x-component': 'Action.Link',
|
||||||
'x-component-props': {},
|
'x-component-props': {
|
||||||
|
openMode: 'drawer',
|
||||||
|
},
|
||||||
properties: {
|
properties: {
|
||||||
drawer: {
|
drawer: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Action.Drawer',
|
'x-component': 'Action.Container',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
className: 'nb-action-popup',
|
className: 'nb-action-popup',
|
||||||
},
|
},
|
||||||
@ -95,7 +97,9 @@ export const TableRecordActionInitializers = (props: any) => {
|
|||||||
'x-action': 'update',
|
'x-action': 'update',
|
||||||
'x-designer': 'Action.Designer',
|
'x-designer': 'Action.Designer',
|
||||||
'x-component': 'Action.Link',
|
'x-component': 'Action.Link',
|
||||||
'x-component-props': {},
|
'x-component-props': {
|
||||||
|
openMode: 'drawer',
|
||||||
|
},
|
||||||
properties: {
|
properties: {
|
||||||
drawer: {
|
drawer: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
@ -103,7 +107,7 @@ export const TableRecordActionInitializers = (props: any) => {
|
|||||||
'x-decorator-props': {
|
'x-decorator-props': {
|
||||||
useValues: '{{ cm.useValuesFromRecord }}',
|
useValues: '{{ cm.useValuesFromRecord }}',
|
||||||
},
|
},
|
||||||
'x-component': 'Action.Drawer',
|
'x-component': 'Action.Container',
|
||||||
title: '{{ t("Edit record") }}',
|
title: '{{ t("Edit record") }}',
|
||||||
properties: {
|
properties: {
|
||||||
grid: {
|
grid: {
|
||||||
@ -114,7 +118,7 @@ export const TableRecordActionInitializers = (props: any) => {
|
|||||||
},
|
},
|
||||||
footer: {
|
footer: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Action.Drawer.Footer',
|
'x-component': 'Action.Container.Footer',
|
||||||
properties: {
|
properties: {
|
||||||
actions: {
|
actions: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
|
@ -1,10 +1,11 @@
|
|||||||
|
import { FormDialog, FormLayout } from '@formily/antd';
|
||||||
import { GeneralField } from '@formily/core';
|
import { GeneralField } from '@formily/core';
|
||||||
import { ISchema, Schema } from '@formily/react';
|
import { ISchema, Schema, SchemaOptionsContext } from '@formily/react';
|
||||||
import { uid } from '@formily/shared';
|
import { uid } from '@formily/shared';
|
||||||
import { Dropdown, Menu, MenuItemProps, Modal, Select } from 'antd';
|
import { Dropdown, Menu, MenuItemProps, Modal, Select } from 'antd';
|
||||||
import React, { createContext, useContext, useState } from 'react';
|
import React, { createContext, useContext, useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { ActionContext, Designable, SchemaComponent } from '..';
|
import { ActionContext, Designable, SchemaComponent, SchemaComponentOptions, useActionContext } from '..';
|
||||||
|
|
||||||
interface SchemaSettingsProps {
|
interface SchemaSettingsProps {
|
||||||
title?: any;
|
title?: any;
|
||||||
@ -86,7 +87,6 @@ SchemaSettings.Item = (props) => {
|
|||||||
<Menu.Item
|
<Menu.Item
|
||||||
{...props}
|
{...props}
|
||||||
onClick={(info) => {
|
onClick={(info) => {
|
||||||
//
|
|
||||||
info.domEvent.preventDefault();
|
info.domEvent.preventDefault();
|
||||||
info.domEvent.stopPropagation();
|
info.domEvent.stopPropagation();
|
||||||
props?.onClick?.(info);
|
props?.onClick?.(info);
|
||||||
@ -153,11 +153,13 @@ SchemaSettings.PopupItem = (props) => {
|
|||||||
const { schema, ...others } = props;
|
const { schema, ...others } = props;
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const ctx = useContext(SchemaSettingsContext);
|
const ctx = useContext(SchemaSettingsContext);
|
||||||
|
const actx = useActionContext();
|
||||||
return (
|
return (
|
||||||
<ActionContext.Provider value={{ visible, setVisible }}>
|
<ActionContext.Provider value={{ visible, setVisible }}>
|
||||||
<SchemaSettings.Item
|
<SchemaSettings.Item
|
||||||
{...others}
|
{...others}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
// actx.setVisible(false);
|
||||||
ctx.setVisible(false);
|
ctx.setVisible(false);
|
||||||
setVisible(true);
|
setVisible(true);
|
||||||
}}
|
}}
|
||||||
@ -173,3 +175,32 @@ SchemaSettings.PopupItem = (props) => {
|
|||||||
</ActionContext.Provider>
|
</ActionContext.Provider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
SchemaSettings.ModalItem = (props) => {
|
||||||
|
const { title, schema, onSubmit, initialValues, ...others } = props;
|
||||||
|
const options = useContext(SchemaOptionsContext);
|
||||||
|
return (
|
||||||
|
<SchemaSettings.Item
|
||||||
|
{...others}
|
||||||
|
onClick={() => {
|
||||||
|
FormDialog(schema.title || title, () => {
|
||||||
|
return (
|
||||||
|
<SchemaComponentOptions scope={options.scope} components={options.components}>
|
||||||
|
<FormLayout layout={'vertical'}>
|
||||||
|
<SchemaComponent schema={schema} />
|
||||||
|
</FormLayout>
|
||||||
|
</SchemaComponentOptions>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.open({
|
||||||
|
initialValues,
|
||||||
|
})
|
||||||
|
.then((values) => {
|
||||||
|
onSubmit(values);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{props.children || props.title}
|
||||||
|
</SchemaSettings.Item>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user