Merge pull request #54 from codingapi/dev

Dev

Author: xlorne

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/hooks/use-node-render-context.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { NodeRenderContext } from '../context';
+
+export function useNodeRenderContext() {
+  return useContext(NodeRenderContext);
+}

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/action/table.tsx

@@ -1,16 +1,16 @@
-import React, {useContext} from "react";
+import React from "react";
 import {Space, Switch} from "antd";
 import {Table} from "@flow-engine/flow-pc-ui";
-import {NodeRenderContext} from "@/components/design-editor/context";
 import {ActionManager} from "@/components/design-editor/node-components/action/index";
+import {useNodeRenderContext} from "@/components/design-editor/hooks/use-node-render-context";
 
 interface ActionTableProps {
     value: any[];
     onChange: (data: any[]) => void;
 }
 
 export const ActionTable: React.FC<ActionTableProps> = (props) => {
-    const {node} = useContext(NodeRenderContext);
+    const {node} = useNodeRenderContext();
     const actions = node.getNodeRegistry()?.meta.actions || [];
     const actionManager = new ActionManager(props.value,props.onChange);
     const datasource = actionManager.getDatasource(actions);

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/current-operator/index.tsx

@@ -1,30 +1,30 @@
-import React, {useCallback, useContext, useMemo, useState} from "react";
+import React, {useCallback, useMemo, useState} from "react";
 import {useIsSidebar} from "@/components/design-editor/hooks";
 import {Button, Flex, Input, Space, theme} from "antd";
 import {nodeFormPanelFactory} from "@/components/design-editor/components/sidebar";
 import {usePanelManager} from "@flowgram.ai/panel-manager-plugin";
-import {NodeRenderContext} from "@/components/design-editor/context";
 import {Field, FieldRenderProps} from "@flowgram.ai/fixed-layout-editor";
 import {CloseOutlined, EditOutlined} from "@ant-design/icons";
 import {NodeIcon} from "@/components/design-editor/components/node-icon";
 import {NodeType} from "@/components/design-editor/typings/node-type";
 import {FlowNodeRegistry} from "@/components/design-editor/typings";
+import {useNodeRenderContext} from "@/components/design-editor/hooks/use-node-render-context";
 
 interface HeaderTitleProps {
     title: string;
     onChange: (value: string) => void;
     readonly?: boolean;
 }
 
-const HeaderTitle: React.FC<HeaderTitleProps> = ({ title, onChange, readonly }) => {
-    const { token } = theme.useToken();
+const HeaderTitle: React.FC<HeaderTitleProps> = ({title, onChange, readonly}) => {
+    const {token} = theme.useToken();
     const [editTitle, setEditTitle] = useState(false);
     const isSidebar = useIsSidebar();
-    const { node } = useContext(NodeRenderContext);
+    const {node} = useNodeRenderContext();
 
     const registry = node.getNodeRegistry<FlowNodeRegistry>();
     const editTitleDisabled = useMemo(() => {
-        const { meta } = registry;
+        const {meta} = registry;
         return meta?.editTitleDisable ?? false;
     }, [registry, node]);
 
@@ -44,9 +44,9 @@ const HeaderTitle: React.FC<HeaderTitleProps> = ({ title, onChange, readonly })
             <Input
                 autoFocus
                 size="small"
-                style={{ width: 200 }}
+                style={{width: 200}}
                 defaultValue={title}
-                onChange={(e)=>{
+                onChange={(e) => {
                     handleChange(e.target.value);
                 }}
                 onBlur={() => setEditTitle(false)}
@@ -62,23 +62,23 @@ const HeaderTitle: React.FC<HeaderTitleProps> = ({ title, onChange, readonly })
         <Space>
             <span>{title}</span>
             <EditOutlined
-                style={{ color: token.colorPrimary, cursor: "pointer" }}
+                style={{color: token.colorPrimary, cursor: "pointer"}}
                 onClick={() => setEditTitle(true)}
             />
         </Space>
     );
 };
 
-interface NodeHeaderProps{
+interface NodeHeaderProps {
     style?: React.CSSProperties;
     iconEnable?: boolean;
 }
 
 export const NodeHeader: React.FC<NodeHeaderProps> = (props) => {
-    const { node } = useContext(NodeRenderContext);
+    const {node} = useNodeRenderContext();
     const isSidebar = useIsSidebar();
     const panelManager = usePanelManager();
-    const { token } = theme.useToken();
+    const {token} = theme.useToken();
     const iconEnable = props.iconEnable ?? true;
 
     const nodeType = node.getNodeRegistry<FlowNodeRegistry>().type as NodeType;
@@ -103,9 +103,9 @@ export const NodeHeader: React.FC<NodeHeaderProps> = (props) => {
             align="center"
         >
             <Space>
-                {iconEnable && <NodeIcon type={nodeType} />}
+                {iconEnable && <NodeIcon type={nodeType}/>}
                 <Field name="title">
-                    {({ field: { value, onChange } }: FieldRenderProps<string>) => (
+                    {({field: {value, onChange}}: FieldRenderProps<string>) => (
                         <HeaderTitle
                             title={value}
                             onChange={onChange}
@@ -117,7 +117,7 @@ export const NodeHeader: React.FC<NodeHeaderProps> = (props) => {
             {isSidebar && (
                 <Button
                     type="text"
-                    icon={<CloseOutlined style={{ color: token.colorPrimary }} />}
+                    icon={<CloseOutlined style={{color: token.colorPrimary}}/>}
                     onClick={handleClose}
                 />
             )}

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/header/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import {GroovyScriptConvertorUtil} from "@/components/script/utils/convertor";
+import {Field, FieldRenderProps} from "@flowgram.ai/fixed-layout-editor";
+
+interface NodeHintProps{
+    fieldName:string;
+}
+
+export const NodeHint:React.FC<NodeHintProps> = (props) => {
+    return (
+        <span>
+            <Field
+                name={props.fieldName}
+                render={({ field: { value, onChange } }: FieldRenderProps<any>) => (
+                    <>
+                        {GroovyScriptConvertorUtil.getScriptTitle(value)}
+                    </>
+                )}
+            />
+        </span>
+    )
+}

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/node-hint/index.tsx

@@ -1,10 +1,11 @@
-import React, {useCallback, useContext, useMemo, useState} from "react";
+import React, {useCallback, useMemo, useState} from "react";
 import {Flex, theme} from "antd";
 import {CloseCircleOutlined} from "@ant-design/icons";
-import {NodeFormContext, NodeRenderContext} from "@/components/design-editor/context";
+import {NodeFormContext} from "@/components/design-editor/context";
 import {FlowNodeJSON, FlowNodeRegistry} from "@/components/design-editor/typings";
 import {FormRenderProps, useClientContext} from "@flowgram.ai/fixed-layout-editor";
 import {useIsSidebar} from "@/components/design-editor/hooks";
+import {useNodeRenderContext} from "@/components/design-editor/hooks/use-node-render-context";
 
 interface NodePanelProps {
     children?: React.ReactNode;
@@ -24,7 +25,7 @@ export const NodePanel: React.FC<NodePanelProps> = (props) => {
 
 export const $NodePanel: React.FC<NodePanelProps> = (props) => {
     const [isHovered, setIsHovered] = useState(false);
-    const {node, deleteNode} = useContext(NodeRenderContext);
+    const {node, deleteNode} = useNodeRenderContext();
     const clientContext = useClientContext();
     const registry = node.getNodeRegistry<FlowNodeRegistry>();
     const isSidebar = useIsSidebar();

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/node-components/panel/index.tsx

@@ -18,7 +18,7 @@ import {TimeoutStrategy} from "@/components/design-editor/node-components/strate
 import {RecordMergeStrategy} from "@/components/design-editor/node-components/strategy/record-merge";
 import {RevokeStrategy} from "@/components/design-editor/node-components/strategy/revoke";
 import {View} from "@/components/design-editor/node-components/view";
-import {CurrentNodeOperator} from "@/components/design-editor/node-components/current-operator";
+import {NodeHint} from "@/components/design-editor/node-components/node-hint";
 
 
 export const renderForm = (data: FormRenderProps<FlowNodeJSON['data']>) => {
@@ -46,7 +46,7 @@ export const renderForm = (data: FormRenderProps<FlowNodeJSON['data']>) => {
   return (
     <NodePanel data={data}>
         <NodeHeader/>
-        <CurrentNodeOperator/>
+        <NodeHint fieldName={"OperatorLoadStrategy.script"}/>
     </NodePanel>
   );
 };

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/nodes/approval/form-meta.tsx

@@ -6,35 +6,35 @@ import {useIsSidebar} from '../../hooks';
 import {NodeHeader} from "@/components/design-editor/node-components/header";
 import {NodePanel} from "@/components/design-editor/node-components/panel";
 import {ConditionScript} from "@/components/design-editor/node-components/condition";
-import {GroovyScriptConvertorUtil} from "@/components/script/utils/convertor";
+import React from "react";
+import {NodeHint} from "@/components/design-editor/node-components/node-hint";
 
 export const renderForm = (data: FormRenderProps<FlowNodeJSON['data']>) => {
-  const isSidebar = useIsSidebar();
-  const script = data.form.getValueIn('script');
-  if (isSidebar) {
+    const isSidebar = useIsSidebar();
+    if (isSidebar) {
+        return (
+            <NodePanel data={data}>
+                <NodeHeader/>
+                <ConditionScript/>
+            </NodePanel>
+        );
+    }
     return (
-      <NodePanel data={data}>
-          <NodeHeader/>
-          <ConditionScript/>
-      </NodePanel>
+        <NodePanel data={data}>
+            <NodeHeader/>
+            <NodeHint fieldName={"script"}/>
+        </NodePanel>
     );
-  }
-  return (
-    <NodePanel data={data}>
-        <NodeHeader/>
-        {GroovyScriptConvertorUtil.getScriptTitle(script)}
-    </NodePanel>
-  );
 };
 
 export const formMeta: FormMeta<FlowNodeJSON['data']> = {
-  render: renderForm,
-  validateTrigger: ValidateTrigger.onChange,
-  validate: {
-    title: ({ value }: { value: string }) => (value ? undefined : 'Title is required'),
-  },
-  effect: {
-    title: syncVariableTitle,
-    outputs: provideJsonSchemaOutputs,
-  },
+    render: renderForm,
+    validateTrigger: ValidateTrigger.onChange,
+    validate: {
+        title: ({value}: { value: string }) => (value ? undefined : 'Title is required'),
+    },
+    effect: {
+        title: syncVariableTitle,
+        outputs: provideJsonSchemaOutputs,
+    },
 };

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/nodes/condition-branch/form-meta.tsx

@@ -16,8 +16,8 @@ import {RecordMergeStrategy} from "@/components/design-editor/node-components/st
 import {ResubmitStrategy} from "@/components/design-editor/node-components/strategy/resubmit";
 import {AdviceStrategy} from "@/components/design-editor/node-components/strategy/advice";
 import {View} from "@/components/design-editor/node-components/view";
-import {CurrentNodeOperator} from "@/components/design-editor/node-components/current-operator";
 import React from "react";
+import {NodeHint} from "@/components/design-editor/node-components/node-hint";
 
 export const renderForm = (data: FormRenderProps<FlowNodeJSON['data']>) => {
   const isSidebar = useIsSidebar();
@@ -43,7 +43,7 @@ export const renderForm = (data: FormRenderProps<FlowNodeJSON['data']>) => {
   return (
     <NodePanel data={data}>
         <NodeHeader/>
-        <CurrentNodeOperator/>
+        <NodeHint fieldName={"OperatorLoadStrategy.script"}/>
     </NodePanel>
   );
 };

frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/nodes/handle/form-meta.tsx

@@ -6,11 +6,11 @@ import {useIsSidebar} from '../../hooks';
 import {NodeHeader} from "@/components/design-editor/node-components/header";
 import {NodePanel} from "@/components/design-editor/node-components/panel";
 import {ConditionScript} from "@/components/design-editor/node-components/condition";
-import {GroovyScriptConvertorUtil} from "@/components/script/utils/convertor";
+import React from "react";
+import {NodeHint} from "@/components/design-editor/node-components/node-hint";
 
 export const renderForm = (data: FormRenderProps<FlowNodeJSON['data']>) => {
     const isSidebar = useIsSidebar();
-    const script = data.form.getValueIn('script');
     if (isSidebar) {
         return (
             <NodePanel data={data}>
@@ -22,7 +22,7 @@ export const renderForm = (data: FormRenderProps<FlowNodeJSON['data']>) => {
     return (
         <NodePanel data={data}>
             <NodeHeader/>
-            {GroovyScriptConvertorUtil.getScriptTitle(script)}
+            <NodeHint fieldName={"script"}/>
         </NodePanel>
     );
 };