feat(generator): viewport区域操作栏支持配置显隐 (#141)

jd-opensource · Feb 24, 2022 · fcf53cd · fcf53cd
1 parent 239f7e0
commit fcf53cd
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 10 deletions.
diff --git a/packages/generator/src/App/index.tsx b/packages/generator/src/App/index.tsx
@@ -17,6 +17,7 @@ import {
   DripFormUiComponetsAtom,
   sidebarDataAtom,
   headerConfigAtom,
+  viewportConfigAtom,
 } from '@generator/store'
 import '@jdfed/drip-form/dist/index.css'
 import '@jdfed/drip-form-theme-antd/dist/index.css'
@@ -35,16 +36,30 @@ const Generator = forwardRef<GeneratorRef, GeneratorType>(
       theme,
       customComponents,
       headerConfig,
+      viewportConfig,
       components,
     },
     ref
   ) => {
     const formRef = useRef<DripFormRefType>()
     const unitedSchema = useRecoilValue(schemaAtom)
     const setHeaderConfig = useSetRecoilState(headerConfigAtom)
+    const setViewportConfig = useSetRecoilState(viewportConfigAtom)
     const setDripFormUiComonents = useSetRecoilState(DripFormUiComponetsAtom)
     const setSidebarData = useSetRecoilState(sidebarDataAtom)
 
+    // 设置vieport配置
+    useEffect(() => {
+      if (viewportConfig) {
+        setViewportConfig((oldOption) => {
+          return {
+            ...oldOption,
+            ...viewportConfig,
+          }
+        })
+      }
+    }, [setViewportConfig, viewportConfig])
+
     // 设置header配置
     useEffect(() => {
       if (customExport || exportText || renderLeftHeader || headerConfig) {

diff --git a/packages/generator/src/App/types.ts b/packages/generator/src/App/types.ts
@@ -1,7 +1,11 @@
 import type { UnitedSchema } from '@jdfed/utils'
 import type { UiComponents } from '@jdfed/drip-form'
 import type { Field } from '@generator/fields/types'
-import type { HeaderConfig, ComponentsData } from '@generator/store'
+import type {
+  HeaderConfig,
+  ComponentsData,
+  ViewportConfig,
+} from '@generator/store'
 
 export type GeneratorType = {
   // 由外部导入的联合schema，用于初始化
@@ -10,11 +14,13 @@ export type GeneratorType = {
   theme?: UiComponents
   // 左侧拖拽区域展示控制（若配置了components,该选项无效）
   customComponents?: Array<Field>
-  // 组件自定义（自定义左侧组件区域、viewport区域、属性配置、校验配置）
+  // 组件自定义（自定义左侧组件区域、viewport区域、编辑区域（属性配置、校验配置））
   components?: ComponentsData
   headerConfig?: HeaderConfig
+  viewportConfig?: ViewportConfig
   /**
-   * 不推荐，后续版本会合并以下api；推荐使用headerConfig代替
+   * 以下API均不推荐 START
+   * 后续版本会合并以下api；推荐使用headerConfig代替
    */
   // 导出的文案 (推荐使用headerConfig.exportText)
   exportText?: string

diff --git a/packages/generator/src/components/Viewport/ActiveTools/index.tsx b/packages/generator/src/components/Viewport/ActiveTools/index.tsx
@@ -1,5 +1,7 @@
 import React, { memo } from 'react'
+import { useRecoilValue } from 'recoil'
 import { useDeleteField } from '@generator/hooks'
+import { viewportConfigAtom } from '@generator/store'
 import Item from './Item'
 import cx from 'classnames'
 import style from './index.module.css'
@@ -9,13 +11,16 @@ const ActiveTools = memo<{
   isFirst: boolean
 }>(({ isFirst = false }) => {
   const deleteField = useDeleteField()
+  const { showDeleteIcon } = useRecoilValue(viewportConfigAtom)
 
   return (
     <div className={cx(isFirst ? style.firstActiveTools : style.activeTools)}>
-      {/* <Item icon='xiangshang'/>
-    <Item icon='xiangxia'/> */}
-      {/* <Item icon="fuzhi1" /> */}
-      <Item icon="shanchu" onClick={deleteField.bind(this, undefined)} />
+      {/* <Item icon="xiangshang" />
+      <Item icon="xiangxia" />
+      <Item icon="fuzhi1" /> */}
+      {showDeleteIcon && (
+        <Item icon="shanchu" onClick={deleteField.bind(this, undefined)} />
+      )}
     </div>
   )
 })

diff --git a/packages/generator/src/components/Viewport/DripFormDragHoc/index.tsx b/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: 2021-11-24 22:43:26
+ * @Last Modified time: 2022-02-24 14:35:23
  */
 import React, { memo, useCallback, useMemo, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -16,6 +16,7 @@ import {
   closestEdgeAtom,
   allFieldAtom,
   curTypeAtom,
+  viewportConfigAtom,
 } from '@generator/store'
 // import Placeholder from '../CustomComponents/Placeholder'
 import { useCanDrop } from '@generator/hooks'
@@ -123,6 +124,9 @@ const DripFormDragHoc: FC<Props> = memo(
       },
       [setDropRef]
     )
+
+    const viewportConfig = useRecoilValue(viewportConfigAtom)
+
     return (
       <>
         <div
@@ -143,7 +147,9 @@ const DripFormDragHoc: FC<Props> = memo(
             width: containerStyle?.width || '100%',
           }}
         >
-          {selectedFieldKey === fieldKey && <ActiveTools isFirst={isFirst} />}
+          {selectedFieldKey === fieldKey && viewportConfig.showActionBar && (
+            <ActiveTools isFirst={isFirst} />
+          )}
           <div
             className="draggable"
             {...listeners}

diff --git a/packages/generator/src/store/globalOptions/index.ts b/packages/generator/src/store/globalOptions/index.ts
@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-12-17 11:22:05
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2021-12-17 17:29:35
+ * @Last Modified time: 2022-02-24 14:39:07
  */
 import { atom } from 'recoil'
 
@@ -29,6 +29,13 @@ export type HeaderConfig = {
   renderLeftHeader?: () => JSX.Element
 }
 
+export type ViewportConfig = {
+  // 是否展示操作栏 默认true
+  showActionBar?: boolean
+  // 是否展示删除 默认true
+  showDeleteIcon?: boolean
+}
+
 // 头部自定义配置
 export const headerConfigAtom = atom<HeaderConfig>({
   key: 'headerOptions',
@@ -42,3 +49,12 @@ export const headerConfigAtom = atom<HeaderConfig>({
     exportText: '导出JSON',
   },
 })
+
+// vieport区域配置
+export const viewportConfigAtom = atom<ViewportConfig>({
+  key: 'viewportOptions',
+  default: {
+    showActionBar: true,
+    showDeleteIcon: true,
+  },
+})
diff --git a/website/docs/generator/api/viewportConfig.md b/website/docs/generator/api/viewportConfig.md
@@ -0,0 +1,43 @@
+---
+id: viewportConfig
+name: viewportConfig
+---
+
+`viewportConfig`用来配置 **viewport 区域操作栏**（图片红色区域）
+
+<img src="https://img11.360buyimg.com/imagetools/jfs/t1/134505/27/23809/10562/62172e31E7e74b668/3b10505918437cd1.png" alt="操作栏"/>
+
+```tsx
+type ViewportConfig = {
+	// 是否展示操作栏 默认true
+	showActionBar?: boolean
+	// 是否展示删除 默认true
+	showDeleteIcon?: boolean
+}
+```
+
+## 例子
+
+```tsx
+import React, { memo } from 'react'
+import DripFormGenerator from '@jdfed/form-generator'
+import '@jdfed/form-generator/dist/index.css'
+
+const App = memo(() => {
+	return (
+		<DripFormGenerator
+			viewportConfig={{
+				showActionBar: false,
+			}}
+		/>
+	)
+})
+
+App.displayName = 'GeneratorApp'
+
+export default App
+```
+
+## 配置预览图
+
+<img src="https://img10.360buyimg.com/imagetools/jfs/t1/110155/24/24411/12251/62172eeaEb6e3bfdc/8ea5da6e962195c0.jpg" alt="showActionBar配置预览"/>
diff --git a/website/sidebars.js b/website/sidebars.js
@@ -82,6 +82,7 @@ module.exports = {
         'generator/api/theme',
         'generator/api/customComponents',
         'generator/api/renderLeftHeader',
+        'generator/api/viewportConfig',
       ],
     },
     {