fix(generator): compatibility with old data

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-05-26 17:09:39
+ * @Last Modified time: 2022-06-15 14:08:29
  */
 import { useCallback, useContext } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
@@ -171,7 +171,12 @@ const useAddField = (): AddField => {
           // 设置选中的表单
           setSelected(selectKey)
           // 设置选中的表单类型
-          setThemeAndType(getThemeAndType(unitedSchema.ui))
+          setThemeAndType(
+            getThemeAndType({
+              ...(unitedSchema?.theme && { theme: unitedSchema.theme }),
+              ...unitedSchema.ui,
+            })
+          )
         },
       })
       // // viewport区域拖拽且非排序模式，需要删除原来位置的表单

packages/generator/src/store/rightSidebar/index.ts

@@ -104,10 +104,11 @@ export const curTypePropertyConfigSelector = selector<UnitedSchema['schema']>({
     const curThemeAndType = get(curThemeAndTypeAtom)
     const curType = get(curTypeAtom)
     const globalTheme = get(globalThemeAtom)
-    // 优先获取当前主题，未获取到则获取全局主题
-    return (
-      get(allPropertyConfigSchemaSelector)[curThemeAndType] ||
-      get(allPropertyConfigSchemaSelector)[`${globalTheme}::${curType}`]
-    )
+    // 优先获取当前主题，只有当前没有设置theme的时候，才未获取到则获取全局主题
+    // 目前v0版本没有区分容器和组件，都是使用type进行区分。所有不推荐自定义组件的type为root、object、array
+    return ['root', 'array', 'object'].includes(curType) ||
+      curThemeAndType.split('::').length > 1
+      ? get(allPropertyConfigSchemaSelector)[curThemeAndType]
+      : get(allPropertyConfigSchemaSelector)[`${globalTheme}::${curType}`]
   },
 })

packages/generator/src/store/unclassified/index.ts

@@ -1,5 +1,5 @@
 import React, { MutableRefObject } from 'react'
-import { atom, selector } from 'recoil'
+import { atom, selector, DefaultValue } from 'recoil'
 import { UnitedSchema } from '@jdfed/utils'
 import antd from '@jdfed/drip-form-theme-antd'
 import type { DripFormRefType, UiComponents } from '@jdfed/drip-form'
@@ -94,14 +94,42 @@ export const globalThemeAtom = selector<string | undefined>({
   },
 })
 
+/**
+ * 当前的主题和组件类型
+ * root：未选中任何一个表单
+ * object：选中的是对象容器
+ * array：选中的是数组容器
+ * theme::type  选中的theme主题下的type组件
+ * 注意：由于v0未区分容器和组件概念，所以使用curThemeAndTypeAtom处理容器
+ */
+const themeAndTypeAtom = atom<string>({
+  key: 'themeAndType',
+  default: 'root',
+})
+
 /**
  * 当前选中的表单主题::控件类型
  * 未选中任何表单 为 root
  * 选中表单 为 theme::type
  */
-export const curThemeAndTypeAtom = atom<string>({
+export const curThemeAndTypeAtom = selector<string>({
   key: 'curThemeAndType',
-  default: 'root',
+  get: ({ get }) => {
+    return get(themeAndTypeAtom)
+  },
+  set: ({ set }, newValue) => {
+    if (newValue instanceof DefaultValue) {
+      set(themeAndTypeAtom, newValue)
+    } else {
+      // 如果用户输入的theme::type中type是root、object、array。则默认设置为root、object、array。v0不建议用户使用object、array、root的类型。文档体现
+      const [, type] = newValue.split('::')
+      if (type && ['root', 'array', 'object'].includes(type)) {
+        set(themeAndTypeAtom, type)
+      } else {
+        set(themeAndTypeAtom, newValue)
+      }
+    }
+  },
 })
 
 //当前选中的表单控件类型

packages/utils/src/common/index.ts

@@ -3,7 +3,7 @@ import { CSSProperties } from 'react'
  * @Author: jiangxiaowei
  * @Date: 2020-05-30 15:05:13
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-05-26 17:01:05
+ * @Last Modified time: 2022-06-15 13:44:02
  */
 import type { TreeItems, TreeItem } from '../tree/types'
 import type { Map } from './type'
@@ -436,5 +436,10 @@ export const getThemeAndType = (
 ): string => {
   const { type, theme } = uiSchema
   const [, newType] = type.split('::')
-  return newType ? type : `${theme}::${type}`
+  // v0未区分容器和组件概念，需要做判断
+  if (['root', 'object', 'array'].includes(newType || type)) {
+    return newType || type
+  } else {
+    return newType ? type : `${theme}::${type}`
+  }
 }