feat(generator): restore default when the fieldKey out of focus (#145)

* feat(generator): restore default when the fieldKey out of focus * chore: 更改示例JSON * chore: 更新options定义
jd-opensource · Mar 7, 2022 · f36c099 · f36c099
1 parent 9681f62
commit f36c099
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 95 deletions.
diff --git a/examples/form-generator/src/App/schema.js b/examples/form-generator/src/App/schema.js
@@ -86,15 +86,4 @@ export default {
   type: 'object',
   ui: {},
   theme: 'antd',
-  schema: [
-    {
-      validateTime: 'submit',
-      type: 'array',
-      title: '多选框',
-      ui: {
-        type: 'checkbox',
-      },
-      fieldKey: 'checkbox_1MURwO',
-    },
-  ],
 }
diff --git a/packages/generator/src/App/index.tsx b/packages/generator/src/App/index.tsx
@@ -16,8 +16,7 @@ import {
   schemaAtom,
   DripFormUiComponetsAtom,
   sidebarDataAtom,
-  headerConfigAtom,
-  viewportConfigAtom,
+  optionsAtom,
 } from '@generator/store'
 import '@jdfed/drip-form/dist/index.css'
 import '@jdfed/drip-form-theme-antd/dist/index.css'
@@ -38,47 +37,45 @@ const Generator = forwardRef<GeneratorRef, GeneratorType>(
       headerConfig,
       viewportConfig,
       components,
+      options,
     },
     ref
   ) => {
     const formRef = useRef<DripFormRefType>()
     const unitedSchema = useRecoilValue(schemaAtom)
-    const setHeaderConfig = useSetRecoilState(headerConfigAtom)
-    const setViewportConfig = useSetRecoilState(viewportConfigAtom)
+    const setOptions = useSetRecoilState(optionsAtom)
     const setDripFormUiComonents = useSetRecoilState(DripFormUiComponetsAtom)
     const setSidebarData = useSetRecoilState(sidebarDataAtom)
 
-    // 设置vieport配置
+    // 设置全局配置
     useEffect(() => {
-      if (viewportConfig) {
-        setViewportConfig((oldOption) => {
-          return {
-            ...oldOption,
+      setOptions((oldOption) => {
+        return {
+          ...oldOption,
+          viewportConfig: {
+            ...oldOption.viewportConfig,
             ...viewportConfig,
-          }
-        })
-      }
-    }, [setViewportConfig, viewportConfig])
-
-    // 设置header配置
-    useEffect(() => {
-      if (customExport || exportText || renderLeftHeader || headerConfig) {
-        setHeaderConfig((oldOption) => {
-          return {
-            ...oldOption,
+            ...options?.viewportConfig,
+          },
+          headerConfig: {
+            ...oldOption.headerConfig,
             ...(customExport && { customExport }),
             ...(exportText && { exportText }),
             ...(renderLeftHeader && { renderLeftHeader }),
             ...headerConfig,
-          }
-        })
-      }
+            ...options?.headerConfig,
+          },
+          ...options,
+        }
+      })
     }, [
       customExport,
       exportText,
       headerConfig,
+      options,
       renderLeftHeader,
-      setHeaderConfig,
+      setOptions,
+      viewportConfig,
     ])
 
     // 动态添加图标

diff --git a/packages/generator/src/App/types.ts b/packages/generator/src/App/types.ts
@@ -5,6 +5,7 @@ import type {
   HeaderConfig,
   ComponentsData,
   ViewportConfig,
+  Options,
 } from '@generator/store'
 
 export type GeneratorType = {
@@ -16,17 +17,19 @@ export type GeneratorType = {
   customComponents?: Array<Field>
   // 组件自定义（自定义左侧组件区域、viewport区域、编辑区域（属性配置、校验配置））
   components?: ComponentsData
-  headerConfig?: HeaderConfig
-  viewportConfig?: ViewportConfig
+  options?: Partial<Options>
   /**
-   * 以下API均不推荐 START
-   * 后续版本会合并以下api；推荐使用headerConfig代替
+   * v1 废弃API，请使用options代替
    */
-  // 导出的文案 (推荐使用headerConfig.exportText)
+  // 即将废弃 头部配置 （推荐用options）
+  headerConfig?: HeaderConfig
+  // 即将废弃 可视区配置 （推荐用options）
+  viewportConfig?: ViewportConfig
+  // 即将废弃 导出的文案 (推荐使用options)
   exportText?: string
-  // 是否渲染Header (推荐使用headerConfig.renderLeftHeader)
+  // 即将废弃 是否渲染Header (推荐使用options)
   renderLeftHeader?: () => JSX.Element
-  // 自定义导出JSON事件 (推荐使用headerConfig.customExport)
+  // 即将废弃 自定义导出JSON事件 (推荐使用options)
   customExport?: (innerHandle: () => void) => void
 }
 

diff --git a/packages/generator/src/components/Header/index.tsx b/packages/generator/src/components/Header/index.tsx
@@ -13,8 +13,8 @@ import {
   previewVisibleAtom,
   exportVisibleAtom,
   schemaAtom,
-  headerConfigAtom,
   versionAtom,
+  optionsAtom,
 } from '@generator/store'
 import { useSetRecoilState, useRecoilState, useRecoilValue } from 'recoil'
 import FileSaver from 'file-saver'
@@ -25,15 +25,17 @@ const Header = () => {
   const setPreviewVisible = useSetRecoilState(previewVisibleAtom)
   const setExportVisible = useSetRecoilState(exportVisibleAtom)
   const {
-    customExport,
-    renderLeftHeader,
-    exportText,
-    showLogo,
-    showUploadJSON,
-    showEditJSON,
-    showPreviewForm,
-    showExportJSON,
-  } = useRecoilValue(headerConfigAtom)
+    headerConfig: {
+      customExport,
+      renderLeftHeader,
+      exportText,
+      showLogo,
+      showUploadJSON,
+      showEditJSON,
+      showPreviewForm,
+      showExportJSON,
+    },
+  } = useRecoilValue(optionsAtom)
   const [unitedSchema, setUnitedSchema] = useRecoilState(schemaAtom)
   const setVersion = useSetRecoilState(versionAtom)
 

diff --git a/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx b/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx
@@ -1,7 +1,19 @@
-import React, { Fragment, memo, useCallback, useEffect, useMemo } from 'react'
+import React, {
+  Fragment,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import DripForm from '@jdfed/drip-form'
-import { typeCheck } from '@jdfed/utils'
-import { deepClone, deleteDeepProp, isEmpty, setDeepProp } from '@jdfed/utils'
+import {
+  typeCheck,
+  deepClone,
+  deleteDeepProp,
+  isEmpty,
+  setDeepProp,
+} from '@jdfed/utils'
 import cx from 'classnames'
 import { SettingOutlined } from '@ant-design/icons'
 import {
@@ -17,10 +29,11 @@ import { useGetParentType } from '@generator/hooks'
 import useRightSidebar from '../HeadlessComponents'
 import styles from '../index.module.css'
 import { original, produce } from 'immer'
-import type { SetType } from '@jdfed/hooks'
 import { Select, Input, Button } from 'antd'
 import { CopyOutlined } from '@ant-design/icons'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { usePrevious } from '@jdfed/hooks'
+import type { SetType } from '@jdfed/hooks'
 import type { Map } from '@jdfed/utils'
 
 const PropertyConfig = () => {
@@ -31,10 +44,12 @@ const PropertyConfig = () => {
     uiSchema,
     uiComponents,
   } = useRightSidebar()
-  const parentType = useGetParentType()
   const [curEditFieldKey, setCurEditFieldKey] = useRecoilState(
     curEditFieldKeyAtom(selectedFieldKey)
   )
+  const [prevEditFieldKey, setPrevEditFieldKey] = useState(curEditFieldKey)
+  const prevSelectedFieldkey = usePrevious(selectedFieldKey)
+  const parentType = useGetParentType()
   const setUnitedSchema = useSetRecoilState(schemaAtom)
   const [globalContainerStyle, setGlobalContainerStyle] = useRecoilState(
     globalContainerStyleAtom
@@ -361,6 +376,7 @@ const PropertyConfig = () => {
       )
       // 修改全局unitdSchema
       unitedSchemaPath &&
+        value &&
         setUnitedSchema((unitedSchema) =>
           produce(unitedSchema, (draft) => {
             setDeepProp(
@@ -374,6 +390,22 @@ const PropertyConfig = () => {
     [generatorContext, selectedFieldKey, setCurEditFieldKey, setUnitedSchema]
   )
 
+  useEffect(() => {
+    if (prevSelectedFieldkey !== selectedFieldKey) {
+      setPrevEditFieldKey(curEditFieldKey)
+    }
+  }, [curEditFieldKey, prevSelectedFieldkey, selectedFieldKey])
+
+  // fieldKey必填，所以失焦后自动恢复默认key
+  const onBlur = useCallback(
+    (e) => {
+      if (!e?.target?.value) {
+        setCurEditFieldKey(prevEditFieldKey)
+      }
+    },
+    [prevEditFieldKey, setCurEditFieldKey]
+  )
+
   return (
     <Fragment>
       <div className={styles.panelConfig}>
@@ -406,6 +438,7 @@ const PropertyConfig = () => {
                     className={styles.fieldKey}
                     value={curEditFieldKey}
                     onChange={changeFieldKey}
+                    onBlur={onBlur}
                     placeholder="不可包含字符 ."
                     // 父元素为数组容器无法修改
                     disabled={parentType === 'array'}

diff --git a/packages/generator/src/hooks/useAddField.tsx b/packages/generator/src/hooks/useAddField.tsx
@@ -3,12 +3,16 @@
  * @Author: jiangxiaowei
  * @Date: 2021-10-08 10:20:13
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-01-07 16:52:36
+ * @Last Modified time: 2022-03-04 16:38:05
  */
 import { useCallback, useContext } from 'react'
-import { nanoid } from 'nanoid'
-import { useRecoilState, useSetRecoilState } from 'recoil'
-import { selectedAtom, GeneratorContext, curTypeAtom } from '@generator/store'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import {
+  selectedAtom,
+  GeneratorContext,
+  curTypeAtom,
+  optionsAtom,
+} from '@generator/store'
 import useDeleteField from './useDeleteField'
 import useCanEditJson from './useCanEditJson'
 import { message } from 'antd'
@@ -23,6 +27,7 @@ type AddField = (param: {
 
 const useAddField = (): AddField => {
   const generatorContext = useContext(GeneratorContext)
+  const { fieldKeyFn } = useRecoilValue(optionsAtom)
   const [selectedKey, setSelected] = useRecoilState(selectedAtom)
   const setCurType = useSetRecoilState(curTypeAtom)
   const deleteField = useDeleteField()
@@ -40,7 +45,7 @@ const useAddField = (): AddField => {
         return
       }
       // 生成当前新增表单项的key
-      let newFieldKey = `${unitedSchema.ui.type}_${nanoid(6)}`
+      let newFieldKey = fieldKeyFn(unitedSchema)
 
       // 选中新增的表单项
       let selectKey = newFieldKey