style: optimize code of flow (#1817)

web/components/flow/node-param-handler.tsx

@@ -5,7 +5,7 @@ import RequiredIcon from './required-icon';
 import NodeHandler from './node-handler';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { RenderSelect, RenderSlider, RenderTreeSelect, RenderTimePicker, RenderTextArea, RenderCascader } from './node-renderer';
-import { uiAtrrtUnderlineToHump } from '@/utils/flow'
+import { uiAtrrtUnderlineToHump } from '@/utils/flow';
 interface NodeParamHandlerProps {
   node: IFlowNode;
   data: IFlowNodeParameter;
@@ -104,25 +104,20 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
   function renderNodeWithUiParam(data: IFlowNodeParameter) {
     let defaultValue = data.value !== null && data.value !== undefined ? data.value : data.default;
     if (data?.ui?.attr) {
-      uiAtrrtUnderlineToHump(data.ui.attr)
+      uiAtrrtUnderlineToHump(data.ui.attr);
     }
     // TODO: 根据ui_type渲染不同的组件
     switch (data?.ui?.ui_type) {
       case 'select':
         return <RenderSelect data={data} defaultValue={defaultValue} onChange={onChange} />;
-        break
       case 'text_area':
         return <RenderTextArea data={data} defaultValue={defaultValue} onChange={onChange} />;
-        break
       case 'slider':
         return <RenderSlider data={data} defaultValue={defaultValue} onChange={onChange} />;
-        break
       case 'time_picker':
         return <RenderTimePicker data={data} defaultValue={defaultValue} onChange={onChange} />;
-        break
       case 'tree_select':
         return <RenderTreeSelect data={data} defaultValue={defaultValue} onChange={onChange} />;
-        break
     }
   }
 
@@ -134,4 +129,3 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
 };
 
 export default NodeParamHandler;
-

web/components/flow/node-renderer/index.ts

@@ -1,6 +1,6 @@
-export * from "./select";
+export * from './select';
-export * from "./cascader";
+export * from './cascader';
-export * from "./textarea";
+export * from './textarea';
-export * from "./slider";
+export * from './slider';
-export * from "./timePicker";
+export * from './timePicker';
-export * from "./treeSelect";
+export * from './treeSelect';

web/components/flow/node-renderer/select.tsx

@@ -1,16 +1,17 @@
-import { IFlowNodeParameter } from "@/types/flow";
+import { IFlowNodeParameter } from '@/types/flow';
-import { Select } from "antd";
+import { Select } from 'antd';
 
 type SelectProps = {
   data: IFlowNodeParameter;
   defaultValue: any;
   onChange: (value: any) => void;
-}
+};
 
 export const RenderSelect = (params: SelectProps) => {
   const { data, defaultValue, onChange } = params;
 
-  return data.options?.length > 0 && (
+  return (
+    data.options?.length > 0 && (
       <Select
         className="w-full nodrag"
         defaultValue={defaultValue}
@@ -18,4 +19,5 @@ export const RenderSelect = (params: SelectProps) => {
         onChange={onChange}
       />
     )
-}
+  );
+};

web/components/flow/node-renderer/slider.tsx

@@ -1,18 +1,13 @@
-import { IFlowNodeParameter } from "@/types/flow";
+import { IFlowNodeParameter } from '@/types/flow';
 import { Col, InputNumber, Row, Slider, Space } from 'antd';
-import { uiAtrrtUnderlineToHump } from '@/utils/flow'
 import type { InputNumberProps } from 'antd';
 import React, { useState } from 'react';
 
-
 type TextAreaProps = {
   data: IFlowNodeParameter;
   defaultValue: any;
   onChange: (value: any) => void;
-}
+};
-
-
-
 
 export const RenderSlider = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
@@ -21,33 +16,23 @@ export const RenderSlider = (params: TextAreaProps) => {
 
   const onChangeSlider: InputNumberProps['onChange'] = (newValue) => {
     setInputValue(newValue as number);
-      onChange(newValue as number)
+    onChange(newValue as number);
   };
+
   return (
     <>
-    {data?.ui?.show_input ? <Row>
+      {data?.ui?.show_input ? (
+        <Row>
           <Col span={12}>
-        <Slider
+            <Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
-        {...data.ui.attr} 
-        onChange={onChangeSlider}
-          value={typeof inputValue === 'number' ? inputValue : 0}
-        />
           </Col>
           <Col span={4}>
-        <InputNumber
+            <InputNumber {...data.ui.attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
-         {...data.ui.attr} 
-          style={{ margin: '0 16px' }}
-          value={inputValue}
-          onChange={onChangeSlider}
-        />
           </Col>
-    </Row>:
+        </Row>
-     <Slider
+      ) : (
-     {...data.ui.attr} 
+        <Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
-       onChange={onChangeSlider}
+      )}
-       value={typeof inputValue === 'number' ? inputValue : 0}
-     />
-}
     </>
-     ) 
+  );
-}
+};

web/components/flow/node-renderer/sliderList.tsx

@@ -1,53 +1,36 @@
-import { IFlowNodeParameter } from "@/types/flow";
+import { IFlowNodeParameter } from '@/types/flow';
 import { Col, InputNumber, Row, Slider, Space } from 'antd';
-import { uiAtrrtUnderlineToHump } from '@/utils/flow'
 import type { InputNumberProps } from 'antd';
 import React, { useState } from 'react';
 
-
 type TextAreaProps = {
   data: IFlowNodeParameter;
   defaultValue: any;
   onChange: (value: any) => void;
-}
+};
-
-
-
 
 export const RenderSlider = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
-
   const [inputValue, setInputValue] = useState(defaultValue);
 
   const onChangeSlider: InputNumberProps['onChange'] = (newValue) => {
     setInputValue(newValue as number);
-      onChange(newValue as number)
+    onChange(newValue as number);
   };
   return (
     <>
-    {data?.ui?.show_input ? <Row>
+      {data?.ui?.show_input ? (
+        <Row>
           <Col span={12}>
-        <Slider
+            <Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
-        {...data.ui.attr} 
-        onChange={onChangeSlider}
-          value={typeof inputValue === 'number' ? inputValue : 0}
-        />
           </Col>
           <Col span={4}>
-        <InputNumber
+            <InputNumber {...data.ui.attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
-         {...data.ui.attr} 
-          style={{ margin: '0 16px' }}
-          value={inputValue}
-          onChange={onChangeSlider}
-        />
           </Col>
-    </Row>:
+        </Row>
-     <Slider
+      ) : (
-     {...data.ui.attr} 
+        <Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
-       onChange={onChangeSlider}
+      )}
-       value={typeof inputValue === 'number' ? inputValue : 0}
-     />
-}
     </>
-     ) 
+  );
-}
+};

web/components/flow/node-renderer/textarea.tsx

@@ -1,6 +1,6 @@
-import { IFlowNodeParameter } from "@/types/flow";
+import { IFlowNodeParameter } from '@/types/flow';
 import { Input } from 'antd';
-import { uiAtrrtUnderlineToHump } from '@/utils/flow'
+import { uiAtrrtUnderlineToHump } from '@/utils/flow';
 
 const { TextArea } = Input;
 
@@ -8,15 +8,11 @@ type TextAreaProps = {
   data: IFlowNodeParameter;
   defaultValue: any;
   onChange: (value: any) => void;
-}
+};
-
 
 export const RenderTextArea = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
-  if(data?.ui?.autosize){
+  uiAtrrtUnderlineToHump(data?.ui?.attr?.autosize || {});
-    uiAtrrtUnderlineToHump(data.ui.autosize)
+
-  }
+  return <TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.autosize} rows={4} />;
-  return (
+};
-    <TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)}   {...data.ui.autosize}  rows={4} />
-  ) 
-}

web/components/flow/node-renderer/timePicker.tsx

@@ -1,15 +1,13 @@
 import React, { useState } from 'react';
 import type { TimePickerProps } from 'antd';
 import { TimePicker } from 'antd';
-
+import { IFlowNodeParameter } from '@/types/flow';
-
-import { IFlowNodeParameter } from "@/types/flow";
 
 type TextAreaProps = {
   data: IFlowNodeParameter;
   defaultValue: any;
   onChange: (value: any) => void;
-  }
+};
 export const RenderTimePicker = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
   const [value, setValue] = useState(defaultValue);
@@ -17,18 +15,9 @@ export const RenderTimePicker = (params: TextAreaProps) => {
   // dayjs.extend(customParseFormat);
 
   const onChangeTime: TimePickerProps['onChange'] = (time, timeString) => {
-    //   console.log(timeString);
+    onChange(timeString);
-      onChange(timeString)
+    setValue(time);
-      setValue(time)
   };
 
-    return (
+  return <TimePicker style={{ width: '100%' }} {...data.ui.attr} value={value} onChange={onChangeTime} />;
-        <TimePicker
+};
-         style={{ width: '100%' }}
-        {...data.ui.attr} value={value} 
-        onChange={onChangeTime} />
-        )
-    
-
-    }
-  

web/components/flow/node-renderer/treeSelect.tsx

@@ -1,15 +1,15 @@
 import React, { useState } from 'react';
 import { TreeSelect } from 'antd';
 import type { TreeSelectProps } from 'antd';
-import { IFlowNodeParameter } from "@/types/flow";
+import { IFlowNodeParameter } from '@/types/flow';
 import { Label } from '@mui/icons-material';
 
 type TextAreaProps = {
   data: IFlowNodeParameter;
   defaultValue: any;
   onChange: (value: any) => void;
-  }
+};
-  const treeData = [
+const treeData = [
   {
     value: 'parent 1',
     title: 'parent 1',
@@ -29,7 +29,8 @@ type TextAreaProps = {
           {
             value: 'leaf3',
             title: 'leaf3',
-            },      {
+          },
+          {
             value: 'leaf4',
             title: 'leaf4',
           },
@@ -55,8 +56,8 @@ type TextAreaProps = {
       },
     ],
   },
-  ];
+];
-  export const RenderTreeSelect = (params: TextAreaProps) => {
+export const RenderTreeSelect = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
   // console.log(data.options);
   // const [value, setValue] = useState<string>();
@@ -66,15 +67,17 @@ type TextAreaProps = {
   // };
   const [dropdownVisible, setDropdownVisible] = useState(false);
 
-    const handleDropdownVisibleChange = (visible) => {  
+  const handleDropdownVisibleChange = (visible: boolean | ((prevState: boolean) => boolean)) => {
     setDropdownVisible(visible);
+
     // 你可以在这里执行更多的逻辑，比如发送请求、更新状态等
     console.log('Dropdown is now:', visible ? 'visible' : 'hidden');
   };
-    const focuss = ()=>{
-        console.log('focus==========');
 
-    }
+  const focus = () => {
+    // console.log('focus==========');
+  };
+
   return (
     <TreeSelect
       fieldNames={{ label: 'label', value: 'value', children: 'children' }}
@@ -85,9 +88,9 @@ type TextAreaProps = {
       onChange={onChange}
       treeData={data.options}
       onDropdownVisibleChange={handleDropdownVisibleChange}
-
     />
 
+    // TODO: Implement the TreeSelect component
     //   <TreeSelect
     //   showSearch
     //   style={{ width: '100%' }}
@@ -101,4 +104,4 @@ type TextAreaProps = {
     //   getPopupContainer={() => document.body}
     // />
   );
-}
+};

web/types/flow.ts

@@ -58,12 +58,6 @@ export type IFlowNodeParameterUI = {
     disabled: boolean;
     [key: string]: any;
   };
-  autosize: {
-    minRows: number;
-    maxRows: number; 
-    min_rows: number;
-    max_rows: number;
-  };
   show_input: boolean;
 };