重构

codebdy · codebdy · commit 4f9f76f523e2 · 2023-08-05T09:35:36.000+08:00
diff --git a/src/example/WorkflowEditor/WorkFlowEditorInner.tsx b/src/example/WorkflowEditor/WorkFlowEditorInner.tsx
@@ -2,11 +2,9 @@ import { EllipsisOutlined, ExportOutlined, ImportOutlined, LeftOutlined, MobileO
 import { Avatar, Button, Dropdown, MenuProps, Space } from "antd"
 import { memo, useCallback, useMemo, useState } from "react"
 import { styled } from "styled-components"
-import { WorkflowDiagram } from "../WorkflowDiagram"
-import { useTranslate } from "../react-locales"
-import { NavTabs } from "./NavTabs"
-import { Toolbar } from "./Toolbar"
 import classNames from "classnames"
+import { NavTabs, Toolbar, WorkflowDiagram } from "../../workflow-editor"
+import { useTranslate } from "../../workflow-editor/react-locales"
 
 const Container = styled.div`
   flex:1;
diff --git a/src/example/WorkflowEditor/index.tsx b/src/example/WorkflowEditor/index.tsx
@@ -0,0 +1,28 @@
+import { memo } from "react"
+import { WorkFlowEditorInner } from "./WorkFlowEditorInner"
+import { ILocales } from "@rxdrag/locales"
+import { IThemeToken } from "../../workflow-editor"
+import { IMaterialUIs, WorkFlowScope } from "../../workflow-editor/"
+
+export type WorkflowEditorProps = {
+  themeMode?: 'dark' | 'light',
+  themeToken?: IThemeToken,
+  lang?: string,
+  locales?: ILocales,
+  materialUis?: IMaterialUIs,
+}
+
+export const WorkflowEditor = memo((props: WorkflowEditorProps) => {
+  const { themeMode, themeToken, lang, locales, materialUis, ...other } = props;
+  return (
+    <WorkFlowScope
+      mode={themeMode}
+      themeToken={themeToken}
+      lang={lang}
+      locales={locales}
+      materialUis = {materialUis}
+    >
+      <WorkFlowEditorInner {...other} />
+    </WorkFlowScope>
+  )
+})
diff --git a/src/example/index.tsx b/src/example/index.tsx
@@ -1,8 +1,9 @@
 import { Button, Space } from "antd"
 import { memo, useCallback, useState } from "react"
-import { WorkflowEditor } from "../workflow-editor/WorkflowEditor"
 import { ShellContainer } from "./ShellContainer"
 import { styled } from "styled-components"
+import { WorkflowEditor } from "./WorkflowEditor"
+import { materialUis } from "./materialUis"
 
 const Toolbar = styled.div`
   height: 56px;
@@ -42,7 +43,11 @@ export const Example = memo(() => {
           <Button onClick={handleSwitchLang}>{lang === Lang.cn ? "English" : "中文"}</Button>
         </Space>
       </Toolbar>
-      <WorkflowEditor themeMode={themeMode} lang={lang} />
+      <WorkflowEditor
+        themeMode={themeMode}
+        lang={lang}
+        materialUis = {materialUis}
+      />
     </ShellContainer>
   )
 })
diff --git a/src/example/materialUis.tsx b/src/example/materialUis.tsx
@@ -0,0 +1,39 @@
+import { IMaterialUIs, IWorkFlowNode, NodeType } from "../workflow-editor";
+import { ApproverPanel, IApproverSettings } from "./setterss/ApproverPanel";
+import { AuditPanel, IAuditSettings } from "./setterss/AuditPanel";
+import { ConditionPanel, IConditionSettings } from "./setterss/ConditionPanel";
+import { INotifierSettings, NotifierPanel } from "./setterss/NotifierPanel";
+import { IStartSettings, StartPanel } from "./setterss/StartPanel";
+
+export const materialUis: IMaterialUIs = {
+  [NodeType.approver]: {
+    viewContent: (node: IWorkFlowNode<IApproverSettings>)=>{
+      return <></>
+    },
+    settingsPanel: ApproverPanel,
+  },
+  [NodeType.audit]: {
+    viewContent: (node: IWorkFlowNode<IAuditSettings>)=>{
+      return <></>
+    },
+    settingsPanel: AuditPanel,
+  },
+  [NodeType.condition]: {
+    viewContent: (node: IWorkFlowNode<IConditionSettings>)=>{
+      return <></>
+    },
+    settingsPanel: ConditionPanel,
+  },
+  [NodeType.notifier]: {
+    viewContent: (node: IWorkFlowNode<INotifierSettings>)=>{
+      return <></>
+    },
+    settingsPanel: NotifierPanel,
+  },
+  [NodeType.start]: {
+    viewContent: (node: IWorkFlowNode<IStartSettings>)=>{
+      return <></>
+    },
+    settingsPanel: StartPanel,
+  },
+}
diff --git a/src/example/setterss/ApproverPanel.tsx b/src/example/setterss/ApproverPanel.tsx
@@ -1,8 +1,8 @@
 import { memo, useState } from "react"
-import { ButtonSelect } from "../SettingsPanel/ButtonSelect"
+import { ButtonSelect } from "../../workflow-editor/components/ButtonSelect"
 import { QuestionCircleOutlined } from "@ant-design/icons"
 import { FormAuth } from "./FormAuth"
-import { useTranslate } from "../../react-locales"
+import { useTranslate } from "../../workflow-editor/react-locales"
 import { Form, Radio } from "antd"
 import FormItem from "antd/es/form/FormItem"
 
diff --git a/src/example/setterss/AuditPanel.tsx b/src/example/setterss/AuditPanel.tsx
@@ -1,9 +1,9 @@
 import { memo, useState } from "react"
-import { ButtonSelect } from "../SettingsPanel/ButtonSelect"
 import { QuestionCircleOutlined } from "@ant-design/icons"
 import { FormAuth } from "./FormAuth"
-import { useTranslate } from "../../react-locales"
 import { Form } from "antd"
+import { useTranslate } from "../../workflow-editor/react-locales"
+import { ButtonSelect } from "../../workflow-editor"
 
 export interface IAuditSettings {
 
diff --git a/src/example/setterss/ConditionPanel.tsx b/src/example/setterss/ConditionPanel.tsx
@@ -1,6 +1,6 @@
 import { memo, useState } from "react"
-import { useTranslate } from "../../react-locales"
 import { Form } from "antd"
+import { useTranslate } from "../../workflow-editor/react-locales"
 
 export interface IConditionSettings {
 
diff --git a/src/example/setterss/FormAuth.tsx b/src/example/setterss/FormAuth.tsx
diff --git a/src/example/setterss/NotifierPanel.tsx b/src/example/setterss/NotifierPanel.tsx
@@ -1,8 +1,8 @@
 import { memo, useState } from "react"
-import { ButtonSelect } from "../SettingsPanel/ButtonSelect"
+import { ButtonSelect } from "../../workflow-editor/components/ButtonSelect"
 import { QuestionCircleOutlined } from "@ant-design/icons"
 import { FormAuth } from "./FormAuth"
-import { useTranslate } from "../../react-locales"
+import { useTranslate } from "../../workflow-editor/react-locales"
 import { Form } from "antd"
 
 export interface INotifierSettings {
diff --git a/src/example/setterss/StartPanel.tsx b/src/example/setterss/StartPanel.tsx
@@ -1,10 +1,9 @@
 import { memo, useState } from "react"
-import { ButtonSelect } from "../SettingsPanel/ButtonSelect"
 import { QuestionCircleOutlined } from "@ant-design/icons"
 import { FormAuth } from "./FormAuth"
-import { useTranslate } from "../../react-locales"
 import { Form } from "antd"
-import { MemberSelect } from "../SettingsPanel/MemberSelect"
+import { ButtonSelect, MemberSelect } from "../../workflow-editor"
+import { useTranslate } from "../../workflow-editor/react-locales"
 
 export interface IStartSettings {
 
diff --git a/src/workflow-editor/WorkflowDiagram/SettingsPanel/index.tsx b/src/workflow-editor/WorkflowDiagram/SettingsPanel/index.tsx
@@ -6,16 +6,15 @@ import { Footer } from "./Footer"
 import { useSelectedNode } from "../../hooks/useSelectedNode"
 import { useEditorStore } from "../../hooks"
 import { styled } from "styled-components"
-import { useNodeMaterial } from "../../hooks/useNodeMaterial"
+import { useMaterialUI } from "../../hooks/useMaterialUI"
 
 const Content = styled.div`
   display: flex;
   flex-flow: column;
 `
 export const SettingsPanel = memo(() => {
-
   const selectedNode = useSelectedNode()
-  const material = useNodeMaterial(selectedNode)
+  const materialUi = useMaterialUI(selectedNode)
   const store = useEditorStore()
   const handelClose = useCallback(() => {
     store?.selectNode(undefined)
@@ -61,7 +60,7 @@ export const SettingsPanel = memo(() => {
       open={!!selectedNode}
     >
       <Content className="settings-panel-content">
-        {material?.settingsPanel && <material.settingsPanel value={""} onChange={handleSettingsChange} />}
+        {materialUi?.settingsPanel && <materialUi.settingsPanel value={""} onChange={handleSettingsChange} />}
       </Content>
     </Drawer>
   )
diff --git a/src/workflow-editor/WorkflowDiagram/WorkFlowScope.tsx b/src/workflow-editor/WorkflowDiagram/WorkFlowScope.tsx
@@ -8,16 +8,17 @@ import { ConfigRoot } from "./ConfigRoot"
 import { ILocales, LocalesManager } from "@rxdrag/locales"
 import { LocalesContext, useTranslate } from "../react-locales"
 import { defalutLocales } from "../locales"
-import { INodeMaterial } from "../interfaces/material"
+import { IMaterialUIs, INodeMaterial } from "../interfaces/material"
 import { defaultMaterials } from "./defaultMaterials"
 
 const WorkFlowScopeInner = memo((props: {
   mode?: 'dark' | 'light',
   themeToken?: IThemeToken,
   children?: React.ReactNode,
   materials?: INodeMaterial[],
+  materialUis?: IMaterialUIs,
 }) => {
-  const { mode, children, themeToken, materials } = props;
+  const { mode, children, themeToken, materials, materialUis } = props;
   const [, token] = useToken();
   const t = useTranslate()
 
@@ -36,8 +37,15 @@ const WorkFlowScopeInner = memo((props: {
   }, [store, t])
 
   useEffect(() => {
-    store.materials = [...defaultMaterials, ...materials || []]
-  }, [materials, store])
+    const oldMaterials = store.materials
+    const oldMaterialUis = store.materialUis
+    store.materials = [...oldMaterials, ...defaultMaterials, ...materials || []]
+    store.materialUis = { ...oldMaterialUis, ...materialUis }
+    return () => {
+      store.materials = oldMaterials;
+      store.materialUis = oldMaterialUis;
+    }
+  }, [materialUis, materials, store])
 
   return (
     <WorkflowEditorStoreContext.Provider value={store}>
@@ -57,10 +65,11 @@ export const WorkFlowScope = memo((props: {
   lang?: string,
   locales?: ILocales,
   materials?: INodeMaterial[],
+  materialUis?: IMaterialUIs,
 }) => {
   const { children, lang, locales, ...other } = props
   const [localesManager, setLocalesManager] = useState(new LocalesManager(lang, defalutLocales))
-  
+
   useEffect(() => {
     locales && localesManager.registerLocales(locales)
   }, [localesManager, locales])
diff --git a/src/workflow-editor/WorkflowDiagram/WorkflowDiagram.tsx b/src/workflow-editor/WorkflowDiagram/WorkflowDiagram.tsx
diff --git a/src/workflow-editor/WorkflowDiagram/defaultMaterials.ts b/src/workflow-editor/WorkflowDiagram/defaultMaterials.ts
@@ -1,12 +1,7 @@
-import { conditionIcon, dealIcon, notifierIcon, sealIcon } from "../../icons";
-import { NodeType } from "../../interfaces";
-import { INodeMaterial } from "../../interfaces/material";
-import { createUuid } from "../../utils/create-uuid";
-import { ApproverPanel } from "./ApproverPanel";
-import { AuditPanel } from "./AuditPanel";
-import { ConditionPanel } from "./ConditionPanel";
-import { NotifierPanel } from "./NotifierPanel";
-import { StartPanel } from "./StartPanel";
+import { conditionIcon, dealIcon, notifierIcon, sealIcon } from "../icons";
+import { NodeType } from "../interfaces";
+import { INodeMaterial } from "../interfaces/material";
+import { createUuid } from "../utils/create-uuid";
 
 export const defaultMaterials: INodeMaterial[] = [
   {
@@ -17,7 +12,6 @@ export const defaultMaterials: INodeMaterial[] = [
     },
     //不在物料板显示
     hidden: true,
-    settingsPanel: StartPanel,
   },
   {
     color: "#ff943e",
@@ -28,7 +22,6 @@ export const defaultMaterials: INodeMaterial[] = [
     defaultConfig: {
       nodeType: NodeType.approver,
     },
-    settingsPanel: ApproverPanel,
   },
   {
     color: "#4ca3fb",
@@ -38,7 +31,6 @@ export const defaultMaterials: INodeMaterial[] = [
     defaultConfig: {
       nodeType: NodeType.notifier,
     },
-    settingsPanel: NotifierPanel,
   },
   {
     color: "#fb602d",
@@ -49,7 +41,6 @@ export const defaultMaterials: INodeMaterial[] = [
     defaultConfig: {
       nodeType: NodeType.audit,
     },
-    settingsPanel: AuditPanel,
   },
   {
     color: "#15bc83",
@@ -84,6 +75,5 @@ export const defaultMaterials: INodeMaterial[] = [
     },
     //不在物料板显示
     hidden: true,
-    settingsPanel: ConditionPanel,
   },
 ]
diff --git a/src/workflow-editor/WorkflowDiagram/index.ts b/src/workflow-editor/WorkflowDiagram/index.ts
@@ -0,0 +1,3 @@
+export * from "./defaultMaterials"
+export * from "./WorkflowDiagram"
+export * from "./WorkFlowScope"
diff --git a/src/workflow-editor/WorkflowEditor/index.tsx b/src/workflow-editor/WorkflowEditor/index.tsx
diff --git a/src/workflow-editor/classes/EditorStore.ts b/src/workflow-editor/classes/EditorStore.ts
@@ -5,7 +5,7 @@ import { mainReducer } from "../reducers"
 import { RedoListChangeListener, SelectedListener, StartNodeListener, UndoListChangeListener } from "../interfaces/listeners"
 import { IConditionNode, IRouteNode, IWorkFlowNode, NodeType } from "../interfaces"
 import { Action, ActionType, AddNodeAction, ChangeNodeAction, DeleteNodeAction, SelectNodeAction, SetStartNodeAction, UnRedoListAction } from "../actions"
-import { INodeMaterial } from "../interfaces/material"
+import { IMaterialUIs, INodeMaterial } from "../interfaces/material"
 import { createUuid } from "../utils/create-uuid"
 
 export type Translate = (msg: string) => string | undefined
@@ -14,6 +14,7 @@ export class EditorStore {
   store: Store<IState>
   t?: Translate
   materials: INodeMaterial[] = []
+  materialUis: IMaterialUIs = {}
   constructor(debugMode?: boolean,) {
     this.store = makeStoreInstance(debugMode || false)
   }
@@ -102,7 +103,7 @@ export class EditorStore {
       }
     }
     this.dispatch(setUndoListAction)
-    
+
     const setStartNodeAction: SetStartNodeAction = {
       type: ActionType.SET_START_NODE,
       payload: {
diff --git a/src/workflow-editor/components/ButtonSelect.tsx b/src/workflow-editor/components/ButtonSelect.tsx
diff --git a/src/workflow-editor/components/MemberSelect/AddDialog.tsx b/src/workflow-editor/components/MemberSelect/AddDialog.tsx
@@ -1,8 +1,8 @@
 import { memo, useCallback, useState } from "react"
-import { useTranslate } from "../../../react-locales"
 import { PlusOutlined, SearchOutlined } from "@ant-design/icons"
 import { Button, Input, Modal, Space, Typography } from "antd"
 import styled from "styled-components"
+import { useTranslate } from "../../react-locales";
 
 const { Text } = Typography;
 
diff --git a/src/workflow-editor/components/MemberSelect/index.tsx b/src/workflow-editor/components/MemberSelect/index.tsx
diff --git a/src/workflow-editor/components/NavTabs.tsx b/src/workflow-editor/components/NavTabs.tsx
diff --git a/src/workflow-editor/components/Toolbar.tsx b/src/workflow-editor/components/Toolbar.tsx
diff --git a/src/workflow-editor/components/index.ts b/src/workflow-editor/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./MemberSelect"
+export * from "./ButtonSelect"
+export * from "./NavTabs"
+export * from "./Toolbar"
diff --git a/src/workflow-editor/hooks/useMaterialUI.ts b/src/workflow-editor/hooks/useMaterialUI.ts
@@ -0,0 +1,8 @@
+import { IWorkFlowNode } from "../interfaces";
+import { useEditorStore } from "./useEditorStore";
+
+export function useMaterialUI(node?: IWorkFlowNode) {
+  const store = useEditorStore()
+
+  return store?.materialUis?.[node?.nodeType || ""]
+}
diff --git a/src/workflow-editor/index.ts b/src/workflow-editor/index.ts
@@ -1,2 +1,6 @@
-export * from "./interfaces/workflow"
-export * from "./theme"
+export * from "./classes"
+export * from "./components"
+export * from "./hooks"
+export * from "./interfaces"
+export * from "./theme"
+export * from "./WorkflowDiagram"
diff --git a/src/workflow-editor/interfaces/index.ts b/src/workflow-editor/interfaces/index.ts
@@ -1 +1,2 @@
+export * from "./material"
 export * from "./workflow"
diff --git a/src/workflow-editor/interfaces/material.ts b/src/workflow-editor/interfaces/material.ts
diff --git a/src/workflow-editor/interfaces/workflow.ts b/src/workflow-editor/interfaces/workflow.ts
