feat: 支持header配置

jd-opensource · Dec 19, 2021 · 2568ee2 · 2568ee2
1 parent 36235e5
commit 2568ee2
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 54 deletions.
diff --git a/packages/generator/src/App/index.tsx b/packages/generator/src/App/index.tsx
@@ -16,6 +16,7 @@ import {
   schemaAtom,
   DripFormUiComponetsAtom,
   sidebarDataAtom,
+  headerConfigAtom,
 } from '@generator/store'
 import '@jdfed/drip-form/dist/index.css'
 import '@jdfed/drip-form-theme-antd/dist/index.css'
@@ -33,14 +34,37 @@ const Generator = forwardRef<GeneratorRef, GeneratorType>(
       renderLeftHeader,
       theme,
       customComponents,
+      headerConfig,
     },
     ref
   ) => {
     const formRef = useRef<DripFormRefType>()
     const unitedSchema = useRecoilValue(schemaAtom)
+    const setHeaderConfig = useSetRecoilState(headerConfigAtom)
     const setDripFormUiComonents = useSetRecoilState(DripFormUiComponetsAtom)
     const setSidebarData = useSetRecoilState(sidebarDataAtom)
 
+    useEffect(() => {
+      // 设置header配置
+      if (customExport || exportText || renderLeftHeader || headerConfig) {
+        setHeaderConfig((oldOption) => {
+          return {
+            ...oldOption,
+            ...(customExport && { customExport }),
+            ...(exportText && { exportText }),
+            ...(renderLeftHeader && { renderLeftHeader }),
+            ...headerConfig,
+          }
+        })
+      }
+    }, [
+      customExport,
+      exportText,
+      headerConfig,
+      renderLeftHeader,
+      setHeaderConfig,
+    ])
+
     useEffect(() => {
       // 动态添加图标
       const headerDomList = document.querySelector('head')
@@ -84,11 +108,7 @@ const Generator = forwardRef<GeneratorRef, GeneratorType>(
     return (
       <GeneratorContext.Provider value={formRef}>
         <div className={styles.drip_form_generator}>
-          <Header
-            customExport={customExport}
-            exportText={exportText}
-            renderLeftHeader={renderLeftHeader}
-          />
+          {(headerConfig?.showHeader ?? true) && <Header />}
           <div className={cx(styles.body)}>
             <DndWrapper>
               <LeftSideBar />

diff --git a/packages/generator/src/App/types.ts b/packages/generator/src/App/types.ts
@@ -1,20 +1,25 @@
 import type { UnitedSchema } from '@jdfed/utils'
 import type { UiComponents } from '@jdfed/drip-form'
 import type { FieldConfigType } from '@generator/fields/types'
+import type { HeaderConfig } from '@generator/store'
 
 export type GeneratorType = {
   // 由外部导入的联合schema，用于初始化
   schema?: UnitedSchema
-  // 自定义导出JSON事件
-  customExport: (innerHandle: () => void) => void
-  // 导出的文案
-  exportText?: string
-  // 是否渲染Header
-  renderLeftHeader?: () => JSX.Element
   //添加的额外主题
   theme?: UiComponents
   // 左侧拖拽区域展示控制
   customComponents?: Array<FieldConfigType>
+  headerConfig?: HeaderConfig
+  /**
+   * 不推荐，后续版本会合并以下api；推荐使用headerConfig代替
+   */
+  // 导出的文案 (推荐使用headerConfig.exportText)
+  exportText?: string
+  // 是否渲染Header (推荐使用headerConfig.renderLeftHeader)
+  renderLeftHeader?: () => JSX.Element
+  // 自定义导出JSON事件 (推荐使用headerConfig.customExport)
+  customExport?: (innerHandle: () => void) => void
 }
 
 export type GeneratorRef = {

diff --git a/packages/generator/src/components/Header/index.tsx b/packages/generator/src/components/Header/index.tsx
@@ -13,23 +13,26 @@ import {
   previewVisibleAtom,
   exportVisibleAtom,
   schemaAtom,
+  headerConfigAtom,
 } from '@generator/store'
-import { useSetRecoilState, useRecoilState } from 'recoil'
+import { useSetRecoilState, useRecoilState, useRecoilValue } from 'recoil'
 import FileSaver from 'file-saver'
 import type { RcFile } from 'rc-upload/lib/interface'
 
-type HeaderType = {
-  customExport: (innerHandle: () => void) => void
-  // 导出的文案
-  exportText?: string
-  // 是否渲染Header
-  renderLeftHeader?: () => JSX.Element
-}
-
-const Header = ({ customExport, exportText, renderLeftHeader }: HeaderType) => {
+const Header = () => {
   const setFold = useSetRecoilState(componentsFoldAtom)
   const setPreviewVisible = useSetRecoilState(previewVisibleAtom)
   const setExportVisible = useSetRecoilState(exportVisibleAtom)
+  const {
+    customExport,
+    renderLeftHeader,
+    exportText,
+    showLogo,
+    showUploadJSON,
+    showEditJSON,
+    showPreviewForm,
+    showExportJSON,
+  } = useRecoilValue(headerConfigAtom)
   const [unitedSchema, setUnitedSchema] = useRecoilState(schemaAtom)
 
   const importJson = (file: RcFile) => {
@@ -85,42 +88,52 @@ const Header = ({ customExport, exportText, renderLeftHeader }: HeaderType) => {
   return (
     <div className={styles.header}>
       <div className={styles.logo}>
-        {renderLeftHeader ? (
-          renderLeftHeader()
-        ) : (
-          <Fragment>
-            <img
-              className={styles.ico}
-              src="http://m.360buyimg.com/babel/jfs/t1/198287/16/2689/8501/61133b1cEbf895566/fd5c679852e69de9.png"
-            />
-            Drip-Form Generator
-          </Fragment>
-        )}
+        {showLogo &&
+          (renderLeftHeader ? (
+            renderLeftHeader()
+          ) : (
+            <Fragment>
+              <img
+                className={styles.ico}
+                src="http://m.360buyimg.com/babel/jfs/t1/198287/16/2689/8501/61133b1cEbf895566/fd5c679852e69de9.png"
+              />
+              Drip-Form Generator
+            </Fragment>
+          ))}
       </div>
+
       <div className={styles.btncontainer}>
-        <Upload
-          accept="json"
-          multiple={false}
-          showUploadList={false}
-          beforeUpload={importJson}
-        >
-          <div className={cx(styles.btn, styles.text)}>
-            <DownloadOutlined />
-            <span className="ml-1">导入JSON</span>
+        {showUploadJSON && (
+          <Upload
+            accept="json"
+            multiple={false}
+            showUploadList={false}
+            beforeUpload={importJson}
+          >
+            <div className={cx(styles.btn, styles.text)}>
+              <DownloadOutlined />
+              <span className="ml-1">导入JSON</span>
+            </div>
+          </Upload>
+        )}
+        {showEditJSON && (
+          <div onClick={editJson} className={cx(styles.btn, styles.text)}>
+            <EditOutlined />
+            <span className="ml-1">JSON编辑</span>
           </div>
-        </Upload>
-        <div onClick={editJson} className={cx(styles.btn, styles.text)}>
-          <EditOutlined />
-          <span className="ml-1">JSON编辑</span>
-        </div>
-        <div onClick={preview} className={cx(styles.btn, styles.text)}>
-          <CompressOutlined />
-          <span className="ml-1">表单预览</span>
-        </div>
-        <div onClick={exportJson} className={cx(styles.btn, styles.primary)}>
-          <UploadOutlined />
-          <span className="ml-1">{exportText || '导出JSON'}</span>
-        </div>
+        )}
+        {showPreviewForm && (
+          <div onClick={preview} className={cx(styles.btn, styles.text)}>
+            <CompressOutlined />
+            <span className="ml-1">表单预览</span>
+          </div>
+        )}
+        {showExportJSON && (
+          <div onClick={exportJson} className={cx(styles.btn, styles.primary)}>
+            <UploadOutlined />
+            <span className="ml-1">{exportText}</span>
+          </div>
+        )}
       </div>
     </div>
   )

diff --git a/packages/generator/src/store/globalOptions/index.ts b/packages/generator/src/store/globalOptions/index.ts
@@ -0,0 +1,44 @@
+/*
+ * 全局配置
+ * @Author: jiangxiaowei
+ * @Date: 2021-12-17 11:22:05
+ * @Last Modified by: jiangxiaowei
+ * @Last Modified time: 2021-12-17 17:29:35
+ */
+import { atom } from 'recoil'
+
+// form-generator支持的配置
+export type HeaderConfig = {
+  // 是否展示header区域
+  showHeader?: boolean
+  // 是否展示logo组件
+  showLogo?: boolean
+  // 是否展示 导入JSON 按钮
+  showUploadJSON?: boolean
+  // 是否展示 JSON编辑 按钮
+  showEditJSON?: boolean
+  // 是否展示 表单预览 按钮
+  showPreviewForm?: boolean
+  // 是否展示 导出JSON 按钮
+  showExportJSON?: boolean
+  // 导出json自定义文案
+  exportText?: string
+  // 自定义exportjson函数
+  customExport?: (exportJsonFn: () => void) => void
+  // 自定义左侧logo组件
+  renderLeftHeader?: () => JSX.Element
+}
+
+// 头部自定义配置
+export const headerConfigAtom = atom<HeaderConfig>({
+  key: 'headerOptions',
+  default: {
+    showHeader: true,
+    showLogo: true,
+    showUploadJSON: true,
+    showEditJSON: true,
+    showPreviewForm: true,
+    showExportJSON: true,
+    exportText: '导出JSON',
+  },
+})
diff --git a/packages/generator/src/store/index.ts b/packages/generator/src/store/index.ts
@@ -2,3 +2,4 @@ export * from './drag'
 export * from './unclassified'
 export * from './rightSidebar'
 export * from './leftSidebar'
+export * from './globalOptions'