重构

Author: codebdy

src/example/materialUis.tsx

@@ -6,52 +6,66 @@ import { INotifierSettings, NotifierPanel } from "./setterss/NotifierPanel";
 import { IStartSettings, StartPanel } from "./setterss/StartPanel";
 
 export const materialUis: IMaterialUIs = {
+  //发起人物料UI
   [NodeType.approver]: {
+    //节点内容区，只实现了空逻辑，具体过几天实现
     viewContent: (node: IWorkFlowNode<IApproverSettings>, { t }) => {
       return <ContentPlaceholder secondary text={t("pleaseChooseApprover")} />
     },
-    settingsPanel: ApproverPanel,
+    //属性面板
+    settersPanel: ApproverPanel,
+    //校验，目前仅实现了空校验，其它校验过几天实现
     validate: (node: IWorkFlowNode<IApproverSettings>, { t }) => {
       if (!node.config) {
         return (t("noSelectedApprover"))
       }
       return true
     }
   },
+  //办理人节点
   [NodeType.audit]: {
+    //节点内容区
     viewContent: (node: IWorkFlowNode<IAuditSettings>, { t }) => {
       return <ContentPlaceholder secondary text={t("pleaseChooseDealer")} />
     },
-    settingsPanel: AuditPanel,
+    //属性面板
+    settersPanel: AuditPanel,
+    //校验函数
     validate: (node: IWorkFlowNode<IApproverSettings>, { t }) => {
       if (!node.config) {
         return t("noSelectedDealer")
       }
       return true
     }
   },
+  //条件分支节点的分支子节点
   [NodeType.branch]: {
+    //节点内容区
     viewContent: (node: IWorkFlowNode<IConditionSettings>, { t }) => {
       return <ContentPlaceholder text={t("pleaseSetCondition")} />
     },
-    settingsPanel: ConditionPanel,
+    //属性面板
+    settersPanel: ConditionPanel,
+    //校验函数
     validate: (node: IWorkFlowNode<IApproverSettings>, { t }) => {
       if (!node.config) {
         return t("noSetCondition")
       }
       return true
     }
   },
+  //通知人节点
   [NodeType.notifier]: {
     viewContent: (node: IWorkFlowNode<INotifierSettings>, { t }) => {
       return <ContentPlaceholder text={t("pleaseChooseNotifier")} />
     },
-    settingsPanel: NotifierPanel,
+    settersPanel: NotifierPanel,
   },
+  //发起人节点
   [NodeType.start]: {
     viewContent: (node: IWorkFlowNode<IStartSettings>, { t }) => {
       return <ContentPlaceholder text={t("allMember")} />
     },
-    settingsPanel: StartPanel,
+    settersPanel: StartPanel,
   },
 }

src/workflow-editor/WorkflowDiagram/SettingsPanel/index.tsx

@@ -60,7 +60,7 @@ export const SettingsPanel = memo(() => {
       open={!!selectedNode}
     >
       <Content className="settings-panel-content">
-        {materialUi?.settingsPanel && <materialUi.settingsPanel value={""} onChange={handleSettingsChange} />}
+        {materialUi?.settersPanel && <materialUi.settersPanel value={""} onChange={handleSettingsChange} />}
       </Content>
     </Drawer>
   )

src/workflow-editor/interfaces/material.ts

@@ -26,15 +26,16 @@ export interface INodeMaterial<Context extends IContext = IContext> {
 }
 
 //物料UI配置
-export interface IMaterialUI<FlowNode extends IWorkFlowNode, Settings = any, Context extends IContext = IContext> {
+export interface IMaterialUI<FlowNode extends IWorkFlowNode, Config = any, Context extends IContext = IContext> {
   //节点内容区
   viewContent?: (node: FlowNode, context: Context) => React.ReactNode
   //属性面板设置组件
-  settingsPanel?: React.FC<{ value: Settings, onChange: (value: Settings) => void }>
+  settersPanel?: React.FC<{ value: Config, onChange: (value: Config) => void }>
   //校验失败返回错误消息，成功返回ture
   validate?: (node: FlowNode, context: Context) => string | true | undefined
 }
 
+//物料UI的一个map，用于组件间通过props传递物料UI，key是节点类型
 export interface IMaterialUIs {
   [nodeType: string]: IMaterialUI<any> | undefined
 }