fix(generator): compatibility with old data (#215)

* Revert "fix(generator): compatibility with old data (#214)" This reverts commit 8aec201. * fix(generator): compatibility with old data
jd-opensource · Jun 8, 2022 · 3ac1ab9 · 3ac1ab9
1 parent 8aec201
commit 3ac1ab9
Show file tree

Hide file tree

Showing 18 changed files with 53 additions and 14 deletions.
diff --git a/packages/drip-form-theme-antd/src/CascaderField/config.ts b/packages/drip-form-theme-antd/src/CascaderField/config.ts
@@ -9,6 +9,7 @@ const config = {
     title: '级联选择',
     ui: {
       type: 'cascader',
+      theme: 'antd',
     },
   },
   propertyConfig: {

diff --git a/packages/drip-form-theme-antd/src/CheckboxField/config.ts b/packages/drip-form-theme-antd/src/CheckboxField/config.ts
@@ -9,6 +9,7 @@ const config = {
     title: '多选框',
     ui: {
       type: 'checkbox',
+      theme: 'antd',
     },
   },
   propertyConfig: {

diff --git a/packages/drip-form-theme-antd/src/ColorPickerField/config.ts b/packages/drip-form-theme-antd/src/ColorPickerField/config.ts
@@ -10,6 +10,7 @@ const config = {
     format: 'color',
     ui: {
       type: 'colorPicker',
+      theme: 'antd',
     },
   },
   propertyConfig: {

diff --git a/packages/drip-form-theme-antd/src/DatePickerField/config.ts b/packages/drip-form-theme-antd/src/DatePickerField/config.ts
@@ -97,6 +97,7 @@ const config = {
     ui: {
       type: 'datePicker',
       showTime: true,
+      theme: 'antd',
     },
   },
   propertyConfig: {

diff --git a/packages/drip-form-theme-antd/src/NullField/config.ts b/packages/drip-form-theme-antd/src/NullField/config.ts
@@ -9,6 +9,7 @@ const config = {
     title: '文本',
     ui: {
       type: 'null',
+      theme: 'antd',
       text: '这是一个不会绑定数据的空表单。只用作特殊场景下展示文字使用',
     },
   },

diff --git a/packages/drip-form-theme-antd/src/NumberField/config.ts b/packages/drip-form-theme-antd/src/NumberField/config.ts
@@ -9,6 +9,7 @@ const config = {
     title: '数字输入框',
     ui: {
       type: 'number',
+      theme: 'antd',
     },
   },
   propertyConfig: {

diff --git a/packages/drip-form-theme-antd/src/RadioField/config.ts b/packages/drip-form-theme-antd/src/RadioField/config.ts
@@ -10,6 +10,7 @@ const config = {
     default: '1',
     ui: {
       type: 'radio',
+      theme: 'antd',
       options: [
         { label: '是', value: '1' },
         { label: '否', value: '0' },

diff --git a/packages/drip-form-theme-antd/src/SelectField/config.ts b/packages/drip-form-theme-antd/src/SelectField/config.ts
@@ -9,6 +9,7 @@ const config = {
     title: '选择器',
     ui: {
       type: 'select',
+      theme: 'antd',
       style: { width: 120 },
       options: [],
     },

diff --git a/packages/drip-form-theme-antd/src/SliderField/config.ts b/packages/drip-form-theme-antd/src/SliderField/config.ts
@@ -9,6 +9,7 @@ const config = {
     title: '滑动输入条',
     ui: {
       type: 'slider',
+      theme: 'antd',
     },
   },
   propertyConfig: {

diff --git a/packages/drip-form-theme-antd/src/SwitchField/config.ts b/packages/drip-form-theme-antd/src/SwitchField/config.ts
@@ -9,6 +9,7 @@ const config = {
     title: '开关',
     ui: {
       type: 'switch',
+      theme: 'antd',
     },
   },
   propertyConfig: {

diff --git a/packages/drip-form-theme-antd/src/TextField/config.ts b/packages/drip-form-theme-antd/src/TextField/config.ts
@@ -10,6 +10,7 @@ const config = {
     ui: {
       type: 'text',
       style: { width: '100%' },
+      theme: 'antd',
     },
   },
   propertyConfig: {

diff --git a/packages/drip-form-theme-antd/src/TimePickerField/config.ts b/packages/drip-form-theme-antd/src/TimePickerField/config.ts
@@ -51,6 +51,7 @@ const config = {
     title: '时间选择框',
     ui: {
       type: 'timePicker',
+      theme: 'antd',
     },
   },
   propertyConfig: {

diff --git a/packages/drip-form-theme-antd/src/TreeSelectField/config.ts b/packages/drip-form-theme-antd/src/TreeSelectField/config.ts
@@ -10,6 +10,7 @@ const config = {
     ui: {
       type: 'treeSelect',
       style: { width: 120 },
+      theme: 'antd',
     },
   },
   propertyConfig: {

diff --git a/packages/drip-form-theme-antd/src/UploaderField/config.ts b/packages/drip-form-theme-antd/src/UploaderField/config.ts
@@ -9,6 +9,7 @@ const config = {
     title: '上传组件',
     ui: {
       type: 'uploader',
+      theme: 'antd',
       listType: 'picture',
       canDrag: false,
       exportToString: true,

diff --git a/packages/generator/src/components/GeneratorFormTheme/UiTypeChangeField/index.tsx b/packages/generator/src/components/GeneratorFormTheme/UiTypeChangeField/index.tsx
@@ -5,7 +5,7 @@
  * @Last Modified by: jiangxiaowei
  * @Last Modified time: 2022-05-26 14:22:40
  */
-import React, { memo, FC, useCallback, useContext } from 'react'
+import React, { memo, FC, useCallback, useContext, useMemo } from 'react'
 import { Select } from 'antd'
 import { CommonProps } from '../global'
 import { useSetRecoilState, useRecoilValue } from 'recoil'
@@ -14,6 +14,8 @@ import {
   GeneratorContext,
   selectedAtom,
   SelectOption,
+  globalThemeAtom,
+  curTypeAtom,
 } from '@generator/store'
 import { deepClone, deleteDeepProp, setDeepProp } from '@jdfed/utils'
 import { original } from 'immer'
@@ -28,6 +30,8 @@ const UiTypeChangeField: FC<CommonProps> = ({
   const setThemeAndType = useSetRecoilState(curThemeAndTypeAtom)
   const generatorContext = useContext(GeneratorContext)
   const selectedFieldKey = useRecoilValue(selectedAtom)
+  const globalTheme = useRecoilValue(globalThemeAtom)
+  const curType = useRecoilValue(curTypeAtom)
 
   /**
    * 切换属性配置
@@ -104,11 +108,22 @@ const UiTypeChangeField: FC<CommonProps> = ({
     [generatorContext, onReplace, options, selectedFieldKey, setThemeAndType]
   )
 
+  // 兼容未设置theme的数据（未设置的默认使用全局主题）
+  const newFieldData = useMemo(() => {
+    if (
+      options.findIndex((item: SelectOption) => item.value === fieldData) != -1
+    ) {
+      return fieldData
+    } else {
+      return `${globalTheme}::${curType}`
+    }
+  }, [curType, fieldData, globalTheme, options])
+
   return (
     <Select
       style={style}
       options={options}
-      value={fieldData}
+      value={newFieldData}
       onChange={change}
       allowClear={false}
       disabled={disabled}

diff --git a/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx b/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx
@@ -38,18 +38,10 @@ const PropertyConfig = () => {
   const propertyConfigOptions = useRecoilValue(propertyConfigSelector)
 
   useEffect(() => {
-    const globalTheme = generatorContext.current?.get('').uiSchema.theme
     setThemeAndType(
-      uiSchema.type
-        ? getThemeAndType({
-            ...(!['object', 'array'].includes(uiSchema.type as string) && {
-              theme: globalTheme,
-            }),
-            ...uiSchema,
-          } as UiSchema)
-        : 'root'
+      uiSchema.type ? getThemeAndType(uiSchema as UiSchema) : 'root'
     )
-  }, [generatorContext, setThemeAndType, uiSchema, uiSchema.type])
+  }, [setThemeAndType, uiSchema, uiSchema.type])
 
   /**
    * 初始化配置数据

diff --git a/packages/generator/src/store/rightSidebar/index.ts b/packages/generator/src/store/rightSidebar/index.ts
@@ -1,7 +1,11 @@
 import { selector } from 'recoil'
 import { getThemeAndType } from '@jdfed/utils'
 import { sidebarDataAtom, uiTypeOptionsAtom } from '../leftSidebar'
-import { curThemeAndTypeAtom } from '../unclassified'
+import {
+  curThemeAndTypeAtom,
+  curTypeAtom,
+  globalThemeAtom,
+} from '../unclassified'
 import { baseMap } from '@generator/fields'
 import rootConfig from '@generator/fields/container/root.field'
 import type { UnitedSchema } from '@jdfed/utils'
@@ -98,6 +102,12 @@ export const curTypePropertyConfigSelector = selector<UnitedSchema['schema']>({
   key: 'curTypePropertyConfig',
   get: ({ get }) => {
     const curThemeAndType = get(curThemeAndTypeAtom)
-    return get(allPropertyConfigSchemaSelector)[curThemeAndType]
+    const curType = get(curTypeAtom)
+    const globalTheme = get(globalThemeAtom)
+    // 优先获取当前主题，未获取到则获取全局主题
+    return (
+      get(allPropertyConfigSchemaSelector)[curThemeAndType] ||
+      get(allPropertyConfigSchemaSelector)[`${globalTheme}::${curType}`]
+    )
   },
 })
diff --git a/packages/generator/src/store/unclassified/index.ts b/packages/generator/src/store/unclassified/index.ts
@@ -86,6 +86,14 @@ export const versionAtom = atom<number>({
   default: 0,
 })
 
+// 全局主题
+export const globalThemeAtom = selector<string | undefined>({
+  key: 'globalTheme',
+  get: ({ get }) => {
+    return get(schemaAtom).theme
+  },
+})
+
 /**
  * 当前选中的表单主题::控件类型
  * 未选中任何表单 为 root