feat(generator): options add propertyConfig configuration (#209)

jd-opensource · May 23, 2022 · 0c29221 · 0c29221
1 parent 6512c02
commit 0c29221
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 4 deletions.
diff --git a/packages/drip-form/src/index.ts b/packages/drip-form/src/index.ts
@@ -6,6 +6,7 @@ import type {
   DripFormRefType,
   Dispatch,
   UiComponents,
+  ControlFuc,
 } from './DripForm/type'
 import type { RenderFnProps, ContainerHoc } from './render/type'
 import type { ContainerStyle } from '@jdfed/utils'
@@ -20,4 +21,5 @@ export type {
   ContainerStyle,
   UiComponents,
   ContainerHoc,
+  ControlFuc,
 }
diff --git a/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx b/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx
@@ -1,7 +1,11 @@
 import React, { memo, useCallback, useEffect, useMemo } from 'react'
 import DripForm from '@jdfed/drip-form'
 import { typeCheck, deepClone, isEmpty, setDeepProp } from '@jdfed/utils'
-import { curTypePropertyConfigSelector, curTypeAtom } from '@generator/store'
+import {
+  curTypePropertyConfigSelector,
+  curTypeAtom,
+  propertyConfigSelector,
+} from '@generator/store'
 import useRightSidebar from '../HeadlessComponents'
 import styles from '../index.module.css'
 import { produce } from 'immer'
@@ -23,6 +27,7 @@ const PropertyConfig = () => {
   const [type, setType] = useRecoilState(curTypeAtom)
   //当前类型的样式配置schema
   const curTypePropertyConfig = useRecoilValue(curTypePropertyConfigSelector)
+  const propertyConfigOptions = useRecoilValue(propertyConfigSelector)
 
   useEffect(() => {
     setType((uiSchema.type as string) || 'root')
@@ -271,9 +276,14 @@ const PropertyConfig = () => {
     return {
       validateTime: 'change',
       theme: 'antd',
+      ui: {
+        ...(propertyConfigOptions.control && {
+          change: propertyConfigOptions.control,
+        }),
+      },
       schema: curTypePropertyConfig,
     }
-  }, [curTypePropertyConfig])
+  }, [curTypePropertyConfig, propertyConfigOptions.control])
 
   const newUiComponents = useMemo(() => {
     return {

diff --git a/packages/generator/src/store/globalOptions/index.ts b/packages/generator/src/store/globalOptions/index.ts
@@ -3,13 +3,13 @@
  * @Author: jiangxiaowei
  * @Date: 2021-12-17 11:22:05
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-03-07 16:44:48
+ * @Last Modified time: 2022-05-23 11:12:03
  */
 import { atom, selector } from 'recoil'
 import { curTypeAtom, selectedAtom } from '../unclassified'
 import { nanoid } from 'nanoid'
 import type { UnitedSchemaAtom } from '@generator/fields/types'
-
+import type { ControlFuc } from '@jdfed/drip-form'
 // form-generator支持的配置
 export type HeaderConfig = Partial<{
   // 是否展示header区域
@@ -53,6 +53,11 @@ export type Options = {
   fieldKeyFn: (unitedSchema: UnitedSchemaAtom) => string
   // 未选中表单时，点击左侧组件，新增表单的位置
   addFieldLocation: 'top' | 'bottom'
+  // 属性配置
+  propertyConfig: Partial<{
+    // 属性配置联动
+    control: ControlFuc
+  }>
 }
 
 export const optionsAtom = atom<Options>({
@@ -72,6 +77,7 @@ export const optionsAtom = atom<Options>({
       showDeleteIcon: true,
       pointerEvents: 'none',
     },
+    propertyConfig: {},
     fieldKeyFn: (unitedSchema) => `${unitedSchema.ui.type}_${nanoid(6)}`,
     addFieldLocation: 'bottom',
   },
@@ -101,3 +107,12 @@ export const viewportConfigSelector = selector<
     return viewportConfigValue
   },
 })
+
+// propertyConfig配置
+export const propertyConfigSelector = selector({
+  key: 'propertyConfigSelector',
+  get: ({ get }) => {
+    const propertyConfig = get(optionsAtom).propertyConfig
+    return propertyConfig
+  },
+})
diff --git a/website/docs/generator/props/options.mdx b/website/docs/generator/props/options.mdx
@@ -162,6 +162,44 @@ export default App
 
 是否展示删除按钮
 
+## 编辑区属性配置
+可自定义属性配置的展示
+
+除了在[components中配置属性配置](./components)之外，支持用户不修改components的基础上直接修改属性配置
+### control
+由于属性配置区域也是一个drip-form表单。所以，用户可以配置全局联动来配置属性配置
+
+<Tabs>
+  <TabItem value="preview" label="禁用切换组件类型和编辑fieldKey">
+
+```tsx
+<DripFormGenerator
+	options={{
+		propertyConfig: {
+			control: ({ merge, formData }) => {
+				// 当组件的fieldKey是abc时
+				if (formData?.$fieldKey === 'abc') {
+					//禁止修改fieldKey
+					merge('$fieldKey', 'uiSchema', { disabled: true })
+					//禁止切换组件类型
+					merge('type', 'uiSchema', { disabled: true })
+				}
+				// 当组件是输入框时
+				if (formData?.type === 'text') {
+					//禁止修改fieldKey
+					merge('$fieldKey', 'uiSchema', { disabled: true })
+					//禁止切换组件类型
+					merge('type', 'uiSchema', { disabled: true })
+				}
+			},
+		},
+	}}
+/>
+```
+
+  </TabItem>
+</Tabs>
+
 ## 其它
 
 ### fieldKeyFn