feat: viewportConfig support function type

packages/generator/src/components/Viewport/ActiveTools/index.tsx

@@ -1,7 +1,13 @@
+/*
+ * @Author: jiangxiaowei
+ * @Date: 2022-03-02 13:04:51
+ * @Last Modified by:   jiangxiaowei
+ * @Last Modified time: 2022-03-02 13:04:51
+ */
 import React, { memo } from 'react'
 import { useRecoilValue } from 'recoil'
 import { useDeleteField } from '@generator/hooks'
-import { viewportConfigAtom } from '@generator/store'
+import { viewportConfigSelector } from '@generator/store'
 import Item from './Item'
 import cx from 'classnames'
 import style from './index.module.css'
@@ -11,7 +17,7 @@ const ActiveTools = memo<{
   isFirst: boolean
 }>(({ isFirst = false }) => {
   const deleteField = useDeleteField()
-  const { showDeleteIcon } = useRecoilValue(viewportConfigAtom)
+  const { showDeleteIcon } = useRecoilValue(viewportConfigSelector)
 
   return (
     <div className={cx(isFirst ? style.firstActiveTools : style.activeTools)}>

packages/generator/src/components/Viewport/DripFormDragHoc/index.tsx

@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-10-09 14:28:24
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-02-24 14:35:23
+ * @Last Modified time: 2022-03-02 13:04:29
  */
 import React, { memo, useCallback, useMemo, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -16,7 +16,7 @@ import {
   closestEdgeAtom,
   allFieldAtom,
   curTypeAtom,
-  viewportConfigAtom,
+  viewportConfigSelector,
 } from '@generator/store'
 // import Placeholder from '../CustomComponents/Placeholder'
 import { useCanDrop } from '@generator/hooks'
@@ -125,7 +125,7 @@ const DripFormDragHoc: FC<Props> = memo(
       [setDropRef]
     )
 
-    const viewportConfig = useRecoilValue(viewportConfigAtom)
+    const viewportConfig = useRecoilValue(viewportConfigSelector)
 
     return (
       <>

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

@@ -3,10 +3,10 @@
  * @Author: jiangxiaowei
  * @Date: 2021-12-17 11:22:05
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-02-24 14:39:07
+ * @Last Modified time: 2022-03-02 13:05:11
  */
-import { atom } from 'recoil'
-
+import { atom, selector } from 'recoil'
+import { curTypeAtom, selectedAtom } from '../unclassified'
 // form-generator支持的配置
 export type HeaderConfig = {
   // 是否展示header区域
@@ -29,12 +29,15 @@ export type HeaderConfig = {
   renderLeftHeader?: () => JSX.Element
 }
 
-export type ViewportConfig = {
-  // 是否展示操作栏 默认true
-  showActionBar?: boolean
-  // 是否展示删除 默认true
-  showDeleteIcon?: boolean
-}
+export type ViewportConfigItem =
+  | boolean
+  | ((param: { type: string; selectedFieldKey: string | null }) => boolean)
+
+type ViewportConfigKey = 'showActionBar' | 'showDeleteIcon'
+
+export type ViewportConfig = Partial<
+  Record<ViewportConfigKey, ViewportConfigItem>
+>
 
 // 头部自定义配置
 export const headerConfigAtom = atom<HeaderConfig>({
@@ -50,11 +53,36 @@ export const headerConfigAtom = atom<HeaderConfig>({
   },
 })
 
-// vieport区域配置
+// vieport区域配置（可能为函数或布尔值）
 export const viewportConfigAtom = atom<ViewportConfig>({
   key: 'viewportOptions',
   default: {
+    // 是否展示操作栏 默认true
     showActionBar: true,
+    // 是否展示删除 默认true
     showDeleteIcon: true,
   },
 })
+
+// vieport区域配置（布尔值）
+export const viewportConfigSelector = selector<
+  Partial<Record<ViewportConfigKey, boolean>>
+>({
+  key: 'viewporConfigValue',
+  get: ({ get }) => {
+    const type = get(curTypeAtom)
+    const selectedFieldKey = get(selectedAtom)
+    const viewportConfig = get(viewportConfigAtom)
+    const viewportConfigValue: Record<string, boolean> = {}
+    const getBoolean = (param: ViewportConfigItem): boolean => {
+      if (typeof param === 'function') {
+        return param({ selectedFieldKey, type })
+      }
+      return param
+    }
+    Object.entries(viewportConfig).map(([key, value]) => {
+      viewportConfigValue[key] = getBoolean(value)
+    })
+    return viewportConfigValue
+  },
+})

website/docs/generator/api/viewportConfig.md

@@ -10,12 +10,23 @@ name: viewportConfig
 ```tsx
 type ViewportConfig = {
 	// 是否展示操作栏 默认true
-	showActionBar?: boolean
+	showActionBar?: ViewportConfigItem
 	// 是否展示删除 默认true
-	showDeleteIcon?: boolean
+	showDeleteIcon?: ViewportConfigItem
 }
 ```
 
+```tsx
+type ViewportConfigItem =
+	| boolean
+	| ((param: {
+			//当前控件类型
+			type: string
+			//当前选中的表单fieldkey
+			selectedFieldKey: string | null
+	  }) => boolean)
+```
+
 ## 例子
 
 ```tsx
@@ -28,6 +39,11 @@ const App = memo(() => {
 		<DripFormGenerator
 			viewportConfig={{
 				showActionBar: false,
+				/* 也可使用函数形式，以下配置会导致 text 类型的不展示操作栏
+				showActionBar: ({ selectedFieldKey, type }) => {
+					return type !== 'text'
+				}, 
+				*/
 			}}
 		/>
 	)

website/docs/generator/start/generator介绍.md

@@ -3,67 +3,66 @@ id: generator
 title: 介绍
 ---
 
-`@jdfed/form-generator`是drip-form的快速生成界面。
+`@jdfed/form-generator`是 drip-form 的快速生成界面。
 
 ## 功能介绍
 
-* 快速搭建表单
-* 生成表单JSON数据
-* 导入JSON数据，预览表单
-* 配置校验
-* 自定义业务组件
+- 快速搭建 drip-form 表单
+- 生成表单 JSON 数据
+- 导入 JSON 数据，预览表单
+- 可扩展（头部配置、组件配置、viewport 配置、属性配置、校验配置）
 
 ## 区域介绍
 
-generator生成器分四个区域：
+generator 生成器分四个区域：
 
-* header
+- header
 
-  header区可以导入json、编辑json、预览表单、导出json
+  header 区可以导入 json、编辑 json、预览表单、导出 json
 
-* 组件区
+- 组件区
 
-  组件区包含generator支持拖拽的表单控件。
+  组件区包含 generator 支持拖拽的表单控件。
 
-  * 表单组件
+  - 表单组件
 
     常见表单控件
 
-  * 辅助组件
+  - 辅助组件
 
     非常见表单控件，用于展示文字等
 
-  * 容器组件
+  - 容器组件
 
     根据数据类型选择对应容器
 
-    * 数组容器
+    - 数组容器
 
       支持自增、元祖
 
-    * 对象容器
+    - 对象容器
 
       支持折叠、分类展示表单
 
-  * 业务组件
+  - 业务组件
 
     业务自定义组件，可根据业务自定义
 
-* 可视区
+- 可视区
 
   实时查看组件区拖拽
 
-* 编辑区
+- 编辑区
 
   编辑区可以编辑表单样式、表单校验
 
-  * 属性配置
+  - 属性配置
 
     分为全局配置和表单配置
 
     点击可视区空白区域为全局配置；点击选中可视区表单为表单配置
 
-  * 校验配置
+  - 校验配置
 
     根据当前表单数据类型，配置数据校验