重构

Author: codebdy

src/example/WorkflowEditor/README.md

@@ -0,0 +1 @@
+自定义编辑器参考这个

src/example/materialUis.tsx

@@ -1,4 +1,4 @@
-import { IMaterialUIs, IWorkFlowNode, NodeType } from "../workflow-editor";
+import { ContentPlaceholder, IMaterialUIs, IWorkFlowNode, NodeType } from "../workflow-editor";
 import { ApproverPanel, IApproverSettings } from "./setterss/ApproverPanel";
 import { AuditPanel, IAuditSettings } from "./setterss/AuditPanel";
 import { ConditionPanel, IConditionSettings } from "./setterss/ConditionPanel";
@@ -7,32 +7,32 @@ import { IStartSettings, StartPanel } from "./setterss/StartPanel";
 
 export const materialUis: IMaterialUIs = {
   [NodeType.approver]: {
-    viewContent: (node: IWorkFlowNode<IApproverSettings>)=>{
-      return <></>
+    viewContent: (node: IWorkFlowNode<IApproverSettings>, { t }) => {
+      return <ContentPlaceholder secondary text={t("pleaseChooseApprover")} />
     },
     settingsPanel: ApproverPanel,
   },
   [NodeType.audit]: {
-    viewContent: (node: IWorkFlowNode<IAuditSettings>)=>{
-      return <></>
+    viewContent: (node: IWorkFlowNode<IAuditSettings>, { t }) => {
+      return <ContentPlaceholder secondary text={t("pleaseChooseDealer")} />
     },
     settingsPanel: AuditPanel,
   },
   [NodeType.condition]: {
-    viewContent: (node: IWorkFlowNode<IConditionSettings>)=>{
-      return <></>
+    viewContent: (node: IWorkFlowNode<IConditionSettings>, { t }) => {
+      return <ContentPlaceholder text={t("pleaseSetCondition")} />
     },
     settingsPanel: ConditionPanel,
   },
   [NodeType.notifier]: {
-    viewContent: (node: IWorkFlowNode<INotifierSettings>)=>{
-      return <></>
+    viewContent: (node: IWorkFlowNode<INotifierSettings>, { t }) => {
+      return <ContentPlaceholder text={t("pleaseChooseNotifier")} />
     },
     settingsPanel: NotifierPanel,
   },
   [NodeType.start]: {
-    viewContent: (node: IWorkFlowNode<IStartSettings>)=>{
-      return <></>
+    viewContent: (node: IWorkFlowNode<IStartSettings>, { t }) => {
+      return <ContentPlaceholder text={t("allMember")} />
     },
     settingsPanel: StartPanel,
   },

src/example/setterss/README.md

@@ -0,0 +1 @@
+本目录定义属性面板表单，会跟业务结合

src/workflow-editor/README.md

@@ -0,0 +1 @@
+本目录会作为NPM包发布

src/workflow-editor/WorkflowDiagram/defaultMaterials.ts

@@ -17,8 +17,6 @@ export const defaultMaterials: INodeMaterial[] = [
     color: "#ff943e",
     label: "approver",
     icon: sealIcon,
-    placeholder: "pleaseChooseApprover",
-    placeholderSecondary: true,
     defaultConfig: {
       nodeType: NodeType.approver,
     },
@@ -27,7 +25,6 @@ export const defaultMaterials: INodeMaterial[] = [
     color: "#4ca3fb",
     label: "notifier",
     icon: notifierIcon,
-    placeholder: "pleaseChooseNotifier",
     defaultConfig: {
       nodeType: NodeType.notifier,
     },
@@ -36,18 +33,15 @@ export const defaultMaterials: INodeMaterial[] = [
     color: "#fb602d",
     label: "dealer",
     icon: dealIcon,
-    placeholder: "pleaseChooseDealer",
-    placeholderSecondary: true,
     defaultConfig: {
       nodeType: NodeType.audit,
     },
   },
   {
     color: "#15bc83",
-    label: "conditionNode",
+    label: "routeNode",
     icon: conditionIcon,
-    createDefault: (context) => {
-      const { t } = context
+    createDefault: ({t}) => {
       return {
         id: createUuid(),
         nodeType: NodeType.route,

src/workflow-editor/components/ContentPlaceholder.tsx

@@ -0,0 +1,17 @@
+import { memo } from "react"
+import className from "classnames"
+
+export const ContentPlaceholder = memo((
+  props: {
+    text?: string,
+    secondary?: boolean,
+  }
+) => {
+  const { text, secondary } = props
+  return (
+    <span
+      className={className("text", secondary ? " secondary" : "")}>
+      {text}
+    </span>
+  )
+})

src/workflow-editor/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./MemberSelect"
 export * from "./ButtonSelect"
+export * from "./ContentPlaceholder"
 export * from "./NavTabs"
 export * from "./Toolbar"

src/workflow-editor/interfaces/material.ts

@@ -1,23 +1,25 @@
 import { IWorkFlowNode } from "./workflow"
 
-export interface INodeMaterial<Context = any> {
+export interface IContext {
+  //翻译
+  t: (msg: string) => string | undefined
+}
+
+export interface INodeMaterial<Context extends IContext = IContext> {
   color: string
   label: string
   icon?: React.ReactElement
-  placeholder?: string
-  //浅色显示placeholder
-  placeholderSecondary?: boolean,
   //默认配置
   defaultConfig?: IWorkFlowNode
   //创建一个默认节点，跟defaultCofig只选一个
-  createDefault?: (context?: Context) => IWorkFlowNode
+  createDefault?: (context: Context) => IWorkFlowNode
   //从物料面板隐藏，比如发起人节点
   hidden?: boolean
 }
 
 
 export interface IMaterialUI<FlowNode extends IWorkFlowNode, Settings = any, Context = any> {
-  viewContent?: (node: FlowNode, context?: Context) => React.ReactNode
+  viewContent?: (node: FlowNode, context: Context) => React.ReactNode
   //属性面板设置组件
   settingsPanel?: React.FC<{ value: Settings, onChange: (value: Settings) => void }>
 }

src/workflow-editor/locales.ts

@@ -15,7 +15,7 @@ export const defalutLocales: ILocales = {
     approver: "审批人",
     notifier: "抄送人",
     dealer: "办理人",
-    conditionNode: "条件分支",
+    routeNode: "条件分支",
     condition: "条件",
     promoter: "发起人",
     allMember: "所有人",
@@ -59,7 +59,7 @@ export const defalutLocales: ILocales = {
     approver: "Approver",
     notifier: "Notifier",
     dealer: "Dealer",
-    conditionNode: "Condition Branch",
+    routeNode: "Condition Branch",
     condition: "Condition",
     promoter: "Promoter",
     allMember: "All",

src/workflow-editor/nodes/NormalNode.tsx

@@ -11,6 +11,7 @@ import { useTranslate } from "../react-locales"
 import { useEditorStore } from "../hooks"
 import { NodeTitle } from "./NodeTitle"
 import { useNodeMaterial } from "../hooks/useNodeMaterial"
+import { useMaterialUI } from "../hooks/useMaterialUI"
 
 export const NodeWrap = styled.div`
   display: flex;
@@ -118,6 +119,7 @@ export const NormalNode = memo((
   const { node } = props
   const t = useTranslate()
   const material = useNodeMaterial(node)
+  const materialUi = useMaterialUI(node)
   const store = useEditorStore();
 
   const handleClick = useCallback(() => {
@@ -129,10 +131,7 @@ export const NormalNode = memo((
       <NodeWrapBox className="node-wrap-box" onClick={handleClick}>
         <NodeTitle node={node} material={material} />
         <NodeContent className="content">
-          <span
-            className={"text" + ((material?.placeholderSecondary && !node.desc) ? " secondary" : "")}>
-            {node.desc || t(material?.placeholder || "")}
-          </span>
+          {materialUi?.viewContent && materialUi?.viewContent(node, { t })}
           <RightOutlined className="arrow" />
         </NodeContent>
       </NodeWrapBox>