style: optimize code of flow

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 "./cascader";
-export * from "./textarea";
-export * from "./slider";
-export * from "./timePicker";
-export * from "./treeSelect";
+export * from './select';
+export * from './cascader';
+export * from './textarea';
+export * from './slider';
+export * from './timePicker';
+export * from './treeSelect';

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

@@ -1,21 +1,23 @@
-import { IFlowNodeParameter } from "@/types/flow";
-import { Select } from "antd";
+import { IFlowNodeParameter } from '@/types/flow';
+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 && (
-    <Select
-      className="w-full nodrag"
-      defaultValue={defaultValue}
-      options={data.options.map((item: any) => ({ label: item.label, value: item.value }))}
-      onChange={onChange}
-    />
-  ) 
-}
+  return (
+    data.options?.length > 0 && (
+      <Select
+        className="w-full nodrag"
+        defaultValue={defaultValue}
+        options={data.options.map((item: any) => ({ label: item.label, value: item.value }))}
+        onChange={onChange}
+      />
+    )
+  );
+};

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

@@ -1,53 +1,38 @@
-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 { data, defaultValue, onChange } = params;
+
+  const [inputValue, setInputValue] = useState(defaultValue);
 
-    const [inputValue, setInputValue] = useState(defaultValue);
+  const onChangeSlider: InputNumberProps['onChange'] = (newValue) => {
+    setInputValue(newValue as number);
+    onChange(newValue as number);
+  };
 
-    const onChangeSlider: InputNumberProps['onChange'] = (newValue) => {
-      setInputValue(newValue as number);
-      onChange(newValue as number)
-    };
   return (
     <>
-    {data?.ui?.show_input ? <Row>
-      <Col span={12}>
-        <Slider
-        {...data.ui.attr} 
-        onChange={onChangeSlider}
-          value={typeof inputValue === 'number' ? inputValue : 0}
-        />
-      </Col>
-     <Col span={4}>
-        <InputNumber
-         {...data.ui.attr} 
-          style={{ margin: '0 16px' }}
-          value={inputValue}
-          onChange={onChangeSlider}
-        />
-      </Col>
-    </Row>:
-     <Slider
-     {...data.ui.attr} 
-       onChange={onChangeSlider}
-       value={typeof inputValue === 'number' ? inputValue : 0}
-     />
-}
+      {data?.ui?.show_input ? (
+        <Row>
+          <Col span={12}>
+            <Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
+          </Col>
+          <Col span={4}>
+            <InputNumber {...data.ui.attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
+          </Col>
+        </Row>
+      ) : (
+        <Slider {...data.ui.attr} 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 { data, defaultValue, onChange } = params;
+  const [inputValue, setInputValue] = useState(defaultValue);
 
-    const onChangeSlider: InputNumberProps['onChange'] = (newValue) => {
-      setInputValue(newValue as number);
-      onChange(newValue as number)
-    };
+  const onChangeSlider: InputNumberProps['onChange'] = (newValue) => {
+    setInputValue(newValue as number);
+    onChange(newValue as number);
+  };
   return (
     <>
-    {data?.ui?.show_input ? <Row>
-      <Col span={12}>
-        <Slider
-        {...data.ui.attr} 
-        onChange={onChangeSlider}
-          value={typeof inputValue === 'number' ? inputValue : 0}
-        />
-      </Col>
-     <Col span={4}>
-        <InputNumber
-         {...data.ui.attr} 
-          style={{ margin: '0 16px' }}
-          value={inputValue}
-          onChange={onChangeSlider}
-        />
-      </Col>
-    </Row>:
-     <Slider
-     {...data.ui.attr} 
-       onChange={onChangeSlider}
-       value={typeof inputValue === 'number' ? inputValue : 0}
-     />
-}
+      {data?.ui?.show_input ? (
+        <Row>
+          <Col span={12}>
+            <Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
+          </Col>
+          <Col span={4}>
+            <InputNumber {...data.ui.attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
+          </Col>
+        </Row>
+      ) : (
+        <Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
+      )}
     </>
-     ) 
-}
+  );
+};

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

@@ -1,22 +1,18 @@
-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;
 
 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.autosize)
-  }
-  return (
-    <TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)}   {...data.ui.autosize}  rows={4} />
-  ) 
-}
+  uiAtrrtUnderlineToHump(data?.ui?.attr?.autosize || {});
+
+  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,34 +1,23 @@
 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;
-  }
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
 export const RenderTimePicker = (params: TextAreaProps) => {
-    const { data, defaultValue, onChange } = params;
-    const [value, setValue] = useState(defaultValue);
-
-    // dayjs.extend(customParseFormat);
+  const { data, defaultValue, onChange } = params;
+  const [value, setValue] = useState(defaultValue);
 
-    const onChangeTime: TimePickerProps['onChange'] = (time, timeString) => {
-    //   console.log(timeString);
-      onChange(timeString)
-      setValue(time)
-    };
+  // dayjs.extend(customParseFormat);
 
-    return (
-        <TimePicker
-         style={{ width: '100%' }}
-        {...data.ui.attr} value={value} 
-        onChange={onChangeTime} />
-        )
-
+  const onChangeTime: TimePickerProps['onChange'] = (time, timeString) => {
+    onChange(timeString);
+    setValue(time);
+  };
 
-    }
-  
+  return <TimePicker style={{ width: '100%' }} {...data.ui.attr} value={value} onChange={onChangeTime} />;
+};