fix(generator): add components,typePath missing unitedSchemaPath

jd-opensource · May 9, 2022 · d2f0058 · d2f0058
1 parent 14257d0
commit d2f0058
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 86 deletions.
diff --git a/packages/drip-form/src/reducers/addField.ts b/packages/drip-form/src/reducers/addField.ts
@@ -3,10 +3,10 @@
  * @Author: jiangxiaowei
  * @Date: 2021-10-26 15:29:06
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-03-09 17:06:58
+ * @Last Modified time: 2022-04-27 17:17:08
  */
-import { produce } from 'immer'
-import { setDeepProp, parseUnitedSchema } from '@jdfed/utils'
+import { produce, current } from 'immer'
+import { setDeepProp, parseUnitedSchema, combine } from '@jdfed/utils'
 import type { State } from '@jdfed/utils'
 
 const addField = ({
@@ -134,13 +134,6 @@ const addField = ({
       if (isSortMode) {
         break
       }
-      // 设置typePath
-      state.typePath[
-        addParenTypePath ? `${addParenTypePath}.${fieldKey}` : fieldKey
-      ] = {
-        type: dataSchema.type,
-        parentKey: addParenTypePath,
-      }
       // 设置uiSchema
       setDeepProp(
         addParentSchemaPath.ui.concat(['properties', fieldKey]),
@@ -173,12 +166,7 @@ const addField = ({
           }
         })
         container = produce(container, (draft) => {
-          state.typePath[`${addParenTypePath}.$container.${oldFieldKey}`] = {
-            type: draft.type,
-            parentKey: `${addParenTypePath}.$container`,
-          }
           // 嵌套数组+嵌套数组 特殊逻辑
-          delete state.typePath[`${addParenTypePath}.$container.$container`]
           return {
             type: 'object',
             order: ['left', 'top'].includes(closestEdge)
@@ -190,21 +178,6 @@ const addField = ({
             },
           }
         })
-        state.typePath[`${addParenTypePath}.$container`] = {
-          type: 'object',
-          parentKey: addParenTypePath,
-        }
-        state.typePath[`${addParenTypePath}.$container.${fieldKey}`] = {
-          type: dataSchema.type,
-          parentKey: `${addParenTypePath}.$container`,
-        }
-      } else {
-        state.typePath[
-          `${addParenTypePath ? addParenTypePath : overFieldKey}.$container`
-        ] = {
-          type: dataSchema.type,
-          parentKey: addParenTypePath,
-        }
       }
       // 设置order
       setDeepProp(addParentSchemaPath.ui.concat(['order']), state.uiSchema, [
@@ -239,7 +212,8 @@ const addField = ({
           : produce(items, (draft) => {
               draft.splice(index, 0, dataSchema)
             })
-      const newOrder = closestEdge === 'over' ? ['0'] : [...order, String(order.length)]
+      const newOrder =
+        closestEdge === 'over' ? ['0'] : [...order, String(order.length)]
       const properties: Record<string, any> = addParentUiSchema.properties || {}
       const newProperties =
         closestEdge === 'over'
@@ -251,22 +225,11 @@ const addField = ({
               arr.map((key) => {
                 if (+key === index) {
                   draft[key] = uiSchema
-                }else{
+                } else {
                   draft[key] = draft[+key - 1]
                 }
-                  state.typePath[`${addParenTypePath}.${key}`] = {
-                    type: dataSchema.type,
-                    parentKey: addParenTypePath,
-                  }
-                }
               })
             })
-      if (closestEdge === 'over') {
-        state.typePath[`${addParenTypePath}.0`] = {
-          type: dataSchema.type,
-          parentKey: addParenTypePath,
-        }
-      }
       // 设置order
       setDeepProp(
         addParentSchemaPath.ui.concat(['order']),
@@ -291,6 +254,9 @@ const addField = ({
     default:
       break
   }
+  state.typePath = parseUnitedSchema(
+    combine(current(state.dataSchema), current(state.uiSchema))
+  ).typePath
 }
 
 export default addField
diff --git a/packages/drip-form/src/reducers/deleteField.ts b/packages/drip-form/src/reducers/deleteField.ts
@@ -4,10 +4,15 @@
  * @Author: jiangxiaowei
  * @Date: 2021-10-26 19:25:56
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-04-24 18:33:29
+ * @Last Modified time: 2022-04-27 17:17:48
  */
-import { produce, original } from 'immer'
-import { deleteDeepProp, setDeepProp } from '@jdfed/utils'
+import { produce, current } from 'immer'
+import {
+  deleteDeepProp,
+  setDeepProp,
+  parseUnitedSchema,
+  combine,
+} from '@jdfed/utils'
 import type { State } from '@jdfed/utils'
 
 const deleteField = ({
@@ -58,12 +63,6 @@ const deleteField = ({
       deleteDeepProp(deleteUiSchemaPath, state.uiSchema)
       // 删除dataSchema
       deleteDeepProp(deleteDataSchemaPath, state.dataSchema)
-      // 删除typePath
-      Object.keys(state.typePath).map((item) => {
-        if (item.startsWith(getTypeKey(fieldKey))) {
-          delete state.typePath[item]
-        }
-      })
       // TODO 删除formData
       // TODO 删除dataSchema的其它等字段
       break
@@ -79,12 +78,6 @@ const deleteField = ({
       deleteDeepProp(deleteUiSchemaPath, state.uiSchema)
       // 删除dataSchema
       deleteDeepProp(deleteDataSchemaPath, state.dataSchema)
-      // 删除typePath
-      Object.keys(state.typePath).map((item) => {
-        if (item.startsWith(getTypeKey(fieldKey))) {
-          delete state.typePath[item]
-        }
-      })
       // TODO 删除formData
       // TODO 删除dataSchema的其它等字段
       break
@@ -94,12 +87,6 @@ const deleteField = ({
       const newOrder = order.slice(0, order.length - 1)
       // 设置order
       setDeepProp(orderPath, state.uiSchema, newOrder)
-      // 删除typePath
-      Object.keys(state.typePath).map((item) => {
-        if (item.startsWith(getTypeKey(fieldKey))) {
-          delete state.typePath[item]
-        }
-      })
       // 删除dataSchema
       if (order.length === 1) {
         // 元祖中删除最后一个元素时，需要同步删除父级的items，否则jsonSchema会报错
@@ -127,11 +114,6 @@ const deleteField = ({
           const parentTypePath = parentTypePathArr
             .slice(0, parentTypePathArr.length - 1)
             .join('.')
-          state.typePath[`${parentTypePath}.${+key - 1}`] =
-            state.typePath[`${parentTypePath}.${+key}`]
-          if (index === arr.length - 1) {
-            delete state.typePath[`${parentTypePath}.${+key}`]
-          }
         })
       })
       // 设置uiSchema
@@ -147,6 +129,9 @@ const deleteField = ({
     default:
       break
   }
+  state.typePath = parseUnitedSchema(
+    combine(current(state.dataSchema), current(state.uiSchema))
+  ).typePath
 }
 
 export default deleteField
diff --git a/packages/generator/src/hooks/useAddField.tsx b/packages/generator/src/hooks/useAddField.tsx
@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-10-08 10:20:13
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-04-21 14:06:29
+ * @Last Modified time: 2022-04-27 18:02:10
  */
 import { useCallback, useContext } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
@@ -31,7 +31,7 @@ const useAddField = (): AddField => {
   const { fieldKeyFn, addFieldLocation } = useRecoilValue(optionsAtom)
   const [selectedKey, setSelected] = useRecoilState(selectedAtom)
   const setCurType = useSetRecoilState(curTypeAtom)
-  const deleteField = useDeleteField()
+  const deleteField = useDeleteField(false)
   const canEdit = useCanEditJson()
   // unitedSchema最外层的order
   const rootOrder = generatorContext.current?.get().uiSchema?.order || []
@@ -71,6 +71,7 @@ const useAddField = (): AddField => {
       }
       switch (type) {
         case 'object':
+          // vieport区域拖拽
           if (oldFieldKey) {
             const lastFieldKey = oldFieldKey.split('.').pop() as string
             if (closestEdge != 'over') {
@@ -98,6 +99,12 @@ const useAddField = (): AddField => {
           selectKey = `${parentKey ? `${parentKey}.` : ''}${newFieldKey}`
           break
         case 'array':
+          if (closestEdge != 'over') {
+            // viewport区域拖拽
+            if (oldFieldKey) {
+              newFieldKey = oldFieldKey.split('.').pop() as string
+            }
+          }
           selectKey = `${parentKey}${
             closestEdge != 'over' ? `.0.${newFieldKey}` : '.0'
           }`
@@ -111,7 +118,7 @@ const useAddField = (): AddField => {
               : ['left', 'top'].includes(closestEdge)
               ? +curKey
               : +curKey + 1
-
+          newFieldKey = `${index}`
           selectKey = `${parentKey}.${index}`
           break
         }
@@ -123,7 +130,7 @@ const useAddField = (): AddField => {
         closestEdge,
         unitedSchema,
         overFieldKey:
-          !selectedKey && addFieldLocation === 'bottom'
+          !selectedKey && addFieldLocation === 'bottom' && closestEdge != 'over'
             ? lastFieldKey
             : fieldKey,
         shouldDelete,

diff --git a/packages/generator/src/hooks/useDeleteField.tsx b/packages/generator/src/hooks/useDeleteField.tsx
@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-10-27 14:32:51
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-04-24 10:20:18
+ * @Last Modified time: 2022-04-27 15:42:31
  */
 
 import { useContext } from 'react'
@@ -14,10 +14,14 @@ import useCanEditJson from './useCanEditJson'
 
 type DeleteField = (fieldKey?: string) => void
 
-const useDeleteField = (): DeleteField => {
+/**
+ *
+ * @param setSelected 删除后是否设置选中项。默认选中
+ * @returns
+ */
+const useDeleteField = (setSelected = true): DeleteField => {
   const generatorContext = useContext(GeneratorContext)
   const canEdit = useCanEditJson()
-
   const deleteField = useRecoilCallback<[string | undefined], void>(
     ({ snapshot, set }) =>
       async (fieldKey) => {
@@ -50,20 +54,23 @@ const useDeleteField = (): DeleteField => {
             const index = order.findIndex(
               (item) => String(item) === keyPath.slice(-1).join()
             )
-            // 存在上一个相邻元素
-            if (index > 0) {
-              set(
-                selectedAtom,
-                `${parentKey ? parentKey + '.' : ''}${order[index - 1]}`
-              )
-            } else {
-              //不存在上一个相邻元素，自动选中父级
-              set(selectedAtom, parentKey)
+            // 删除后，自动选中
+            if (setSelected) {
+              if (index > 0) {
+                // 存在上一个相邻元素
+                set(
+                  selectedAtom,
+                  `${parentKey ? parentKey + '.' : ''}${order[index - 1]}`
+                )
+              } else {
+                //不存在上一个相邻元素，自动选中父级
+                set(selectedAtom, parentKey)
+              }
             }
           }
         )
       },
-    [canEdit, generatorContext]
+    [canEdit, generatorContext, setSelected]
   )
   return deleteField
 }