From 35c3d47ba1d56515170a6d68aa0db743c1d903f7 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Wed, 9 Mar 2022 17:20:39 +0800
Subject: [PATCH] feat: move to for menu schema settings

---
 .../antd/menu/Menu.Designer.tsx               | 106 +++++++++++++++++-
 .../src/schema-settings/SchemaSettings.tsx    |   5 +-
 2 files changed, 107 insertions(+), 4 deletions(-)

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 (
     <GeneralSchemaDesigner>
       <SchemaSettings.ModalItem
@@ -189,6 +245,52 @@ export const MenuDesigner = () => {
           });
         }}
       />
+      <SchemaSettings.ModalItem
+        title={t('Move to')}
+        components={{ TreeSelect }}
+        effects={effects}
+        schema={
+          {
+            type: 'object',
+            title: t('Move to'),
+            properties: {
+              target: {
+                title: t('Target'),
+                enum: items,
+                required: true,
+                'x-decorator': 'FormItem',
+                'x-component': 'TreeSelect',
+                'x-component-props': {},
+              },
+              position: {
+                title: t('Position'),
+                required: true,
+                enum: [
+                  { label: t('Before'), value: 'beforeBegin' },
+                  { label: t('After'), value: 'afterEnd' },
+                ],
+                default: 'afterEnd',
+                'x-component': 'Radio.Group',
+                'x-decorator': 'FormItem',
+              },
+            },
+          } as ISchema
+        }
+        onSubmit={({ target, position }) => {
+          const [uid] = target?.split?.('||') || [];
+          if (!uid) {
+            return;
+          }
+          const current = findByUid(menuSchema, uid);
+          const dn = createDesignable({
+            api,
+            refresh,
+            current,
+          });
+          dn.loadAPIClientEvents();
+          dn.insertAdjacent(position, fieldSchema);
+        }}
+      />
       <SchemaSettings.Divider />
       <InsertMenuItems eventKey={'insertbeforeBegin'} title={t('Insert before')} insertPosition={'beforeBegin'} />
       <InsertMenuItems eventKey={'insertafterEnd'} title={t('Insert after')} insertPosition={'afterEnd'} />
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 (
     <SchemaSettings.Item
@@ -208,13 +208,14 @@ SchemaSettings.ModalItem = (props) => {
           return (
             <SchemaComponentOptions scope={options.scope} components={options.components}>
               <FormLayout layout={'vertical'}>
-                <SchemaComponent schema={schema} />
+                <SchemaComponent components={components} scope={scope} schema={schema} />
               </FormLayout>
             </SchemaComponentOptions>
           );
         })
           .open({
             initialValues,
+            effects,
           })
           .then((values) => {
             onSubmit(values);