diff --git a/packages/client/src/schema-component/antd/menu/Menu.Designer.tsx b/packages/client/src/schema-component/antd/menu/Menu.Designer.tsx index b93dab0ce..a7fce0e5d 100644 --- a/packages/client/src/schema-component/antd/menu/Menu.Designer.tsx +++ b/packages/client/src/schema-component/antd/menu/Menu.Designer.tsx @@ -1,7 +1,42 @@ -import { ISchema, useField, useFieldSchema } from '@formily/react'; +import { TreeSelect } from '@formily/antd'; +import { Field, onFieldChange } from '@formily/core'; +import { ISchema, Schema, useField, useFieldSchema } from '@formily/react'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '../../../'; +import { findByUid } from '.'; +import { createDesignable } from '../..'; +import { GeneralSchemaDesigner, SchemaSettings, useAPIClient, useDesignable } from '../../../'; + +const toItems = (properties = {}) => { + const items = []; + for (const key in properties) { + if (Object.prototype.hasOwnProperty.call(properties, key)) { + const element = properties[key]; + const item = { + label: element.title, + value: `${element['x-uid']}||${element['x-component']}`, + }; + if (element.properties) { + const children = toItems(element.properties); + if (children?.length) { + item['children'] = children; + } + } + items.push(item); + } + } + return items; +}; + +const findMenuSchema = (fieldSchema: Schema) => { + let parent = fieldSchema.parent; + while (parent) { + if (parent['x-component'] === 'Menu') { + return parent; + } + parent = parent.parent; + } +}; const InsertMenuItems = (props) => { const { eventKey, title, insertPosition } = props; @@ -141,8 +176,29 @@ const InsertMenuItems = (props) => { export const MenuDesigner = () => { const field = useField(); const fieldSchema = useFieldSchema(); + const api = useAPIClient(); const { dn, refresh } = useDesignable(); const { t } = useTranslation(); + const menuSchema = findMenuSchema(fieldSchema); + const items = toItems(menuSchema?.properties); + const effects = (form) => { + onFieldChange('target', (field: Field) => { + const [, component] = field?.value?.split?.('||') || []; + field.query('position').take((f: Field) => { + f.dataSource = + component === 'Menu.SubMenu' + ? [ + { label: t('Before'), value: 'beforeBegin' }, + { label: t('After'), value: 'afterEnd' }, + { label: t('Inner'), value: 'beforeEnd' }, + ] + : [ + { label: t('Before'), value: 'beforeBegin' }, + { label: t('After'), value: 'afterEnd' }, + ]; + }); + }); + }; return ( { }); }} /> + { + const [uid] = target?.split?.('||') || []; + if (!uid) { + return; + } + const current = findByUid(menuSchema, uid); + const dn = createDesignable({ + api, + refresh, + current, + }); + dn.loadAPIClientEvents(); + dn.insertAdjacent(position, fieldSchema); + }} + /> diff --git a/packages/client/src/schema-settings/SchemaSettings.tsx b/packages/client/src/schema-settings/SchemaSettings.tsx index b91f497bd..caa3b1059 100644 --- a/packages/client/src/schema-settings/SchemaSettings.tsx +++ b/packages/client/src/schema-settings/SchemaSettings.tsx @@ -198,7 +198,7 @@ SchemaSettings.PopupItem = (props) => { }; SchemaSettings.ModalItem = (props) => { - const { title, schema, onSubmit, initialValues, ...others } = props; + const { title, components, scope, effects, schema, onSubmit, initialValues, ...others } = props; const options = useContext(SchemaOptionsContext); return ( { return ( - + ); }) .open({ initialValues, + effects, }) .then((values) => { onSubmit(values);