fix: fixed the issue where the datePicker component was not effective (#1821)

web/README.md

@@ -48,7 +48,7 @@ yarn install
 
 ### Usage
 ```sh
-cp .env.example .env
+cp .env.template .env
 ```
 edit the `API_BASE_URL` to the real address
 

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

@@ -9,7 +9,7 @@ import {
   RenderCheckbox,
   RenderRadio,
   RenderCascader,
-  RenderDataPicker,
+  RenderDatePicker,
   RenderInput,
   RenderSlider,
   RenderTreeSelect,
@@ -28,7 +28,6 @@ interface NodeParamHandlerProps {
 // render node parameters item
 const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label, index }) => {
   function onChange(value: any) {
-    console.log(value);
     data.value = value;
   }
 
@@ -116,7 +115,7 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
   function renderNodeWithUiParam(data: IFlowNodeParameter) {
     let defaultValue = data.value ?? data.default;
     const props = { data, defaultValue, onChange };
-
+    
     switch (data?.ui?.ui_type) {
       case 'select':
         return <RenderSelect {...props} />;
@@ -134,8 +133,8 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
         return <RenderTextArea {...props} />;
       case 'slider':
         return <RenderSlider {...props} />;
-      case 'data_picker':
+      case 'date_picker':
-        return <RenderDataPicker {...props} />;
+        return <RenderDatePicker {...props} />;
       case 'time_picker':
         return <RenderTimePicker {...props} />;
       case 'tree_select':

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

@@ -13,13 +13,15 @@ export const RenderCascader = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <Cascader 
+    <div className="p-2 text-sm">
-      {...attr}
+      <Cascader
-      options={data.options} 
+        {...attr}
-      defaultValue={defaultValue}
+        options={data.options}
-      placeholder="Please select" 
+        defaultValue={defaultValue}
-      className="w-full nodrag"
+        placeholder="please select"
-      onChange={onChange} 
+        className="w-full nodrag"
-    />
+        onChange={onChange}
+      />
+    </div>
   );
 };

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

@@ -14,13 +14,9 @@ export const RenderCheckbox = (params: Props) => {
 
   return (
     data.options?.length > 0 && (
-      <Checkbox.Group
+      <div className="p-2 text-sm">
-        {...attr}
+        <Checkbox.Group {...attr} options={data.options} defaultValue={defaultValue} onChange={onChange} />
-        options={data.options}
+      </div>
-        disabled
-        defaultValue={defaultValue}
-        onChange={onChange}
-      />
     )
   );
 };

web/components/flow/node-renderer/data-picker.tsx

@@ -1,17 +0,0 @@
-import { IFlowNodeParameter } from '@/types/flow';
-import { convertKeysToCamelCase } from '@/utils/flow';
-import { DatePicker } from 'antd';
-import dayjs from 'dayjs';
-
-type Props = {
-  data: IFlowNodeParameter;
-  defaultValue: any;
-  onChange: (value: any) => void;
-};
-
-export const RenderDataPicker = (params: Props) => {
-  const { data, defaultValue, onChange } = params;
-  const attr = convertKeysToCamelCase(data.ui?.attr || {});
-
-  return <DatePicker {...attr} defaultValue={dayjs(defaultValue)} onChange={onChange} />;
-};

web/components/flow/node-renderer/date-picker.tsx

@@ -0,0 +1,25 @@
+import { IFlowNodeParameter } from '@/types/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
+import { DatePicker, DatePickerProps } from 'antd';
+import dayjs from 'dayjs';
+
+type Props = {
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
+
+export const RenderDatePicker = (params: Props) => {
+  const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
+
+  const onChangeDate: DatePickerProps['onChange'] = (date, dateString) => {
+    onChange(dateString);
+  };
+
+  return (
+    <div className="p-2 text-sm">
+      <DatePicker {...attr} className="w-full" defaultValue={dayjs(defaultValue)} onChange={onChangeDate} />
+    </div>
+  );
+};

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

@@ -1,6 +1,6 @@
 export * from './select';
 export * from './cascader';
-export * from './data-picker';
+export * from './date-picker';
 export * from './input';
 export * from './checkbox';
 export * from './radio';

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

@@ -13,13 +13,16 @@ export const RenderInput = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <Input
+    <div className="p-2 text-sm">
-      {...attr}
+      <Input
-      className="w-full"
+        {...attr}
-      defaultValue={defaultValue}
+        className="w-full"
-      onChange={(e) => {
+        placeholder="please input"
-        onChange(e.target.value);
+        defaultValue={defaultValue}
-      }}
+        onChange={(e) => {
-    />
+          onChange(e.target.value);
+        }}
+      />
+    </div>
   );
 };

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

@@ -13,13 +13,15 @@ export const RenderRadio = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <Radio.Group
+    <div className="p-2 text-sm">
-      {...attr}
+      <Radio.Group
-      options={data.options}
+        {...attr}
-      onChange={(e) => {
+        options={data.options}
-        onChange(e.target.checked);
+        onChange={(e) => {
-      }}
+          onChange(e.target.value);
-      defaultValue={defaultValue}
+        }}
-    />
+        defaultValue={defaultValue}
+      />
+    </div>
   );
 };

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

@@ -13,13 +13,15 @@ export const RenderSelect = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <Select
+    <div className="p-2 text-sm">
-      {...attr}
+      <Select
-      className="w-full nodrag"
+        {...attr}
-      placeholder="Please select" 
+        className="w-full nodrag"
-      defaultValue={defaultValue}
+        placeholder="please select"
-      options={data.options}
+        defaultValue={defaultValue}
-      onChange={onChange}
+        options={data.options}
-    />
+        onChange={onChange}
+      />
+    </div>
   );
 };

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

@@ -19,14 +19,15 @@ export const RenderSlider = (params: TextAreaProps) => {
     setInputValue(newValue as number);
     onChange(newValue as number);
   };
-  
+
   return (
-    <>
+    <div className="p-2 text-sm">
       {data?.ui?.show_input ? (
         <Row>
           <Col span={12}>
             <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
           </Col>
+
           <Col span={4}>
             <InputNumber {...attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
           </Col>
@@ -34,6 +35,6 @@ export const RenderSlider = (params: TextAreaProps) => {
       ) : (
         <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
       )}
-    </>
+    </div>
   );
 };

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

@@ -21,7 +21,7 @@ export const RenderSlider = (params: TextAreaProps) => {
   };
 
   return (
-    <>
+    <div className="p-2 text-sm">
       {data?.ui?.show_input ? (
         <Row>
           <Col span={12}>
@@ -34,6 +34,6 @@ export const RenderSlider = (params: TextAreaProps) => {
       ) : (
         <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
       )}
-    </>
+    </div>
   );
 };

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

@@ -15,12 +15,8 @@ export const RenderTextArea = (params: TextAreaProps) => {
   convertKeysToCamelCase(data?.ui?.attr?.autosize || {});
 
   return (
-    <TextArea 
+    <div className="p-2 text-sm">
-      {...data.ui.attr} 
+      <TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.attr.autosize} rows={4} />
-      defaultValue={defaultValue} 
+    </div>
-      onChange={(e) => onChange(e.target.value)} 
+  );
-      {...data.ui.attr.autosize} 
-      rows={4} 
-    />
-  )
 };

web/components/flow/node-renderer/time-picker.tsx

@@ -11,15 +11,15 @@ type TextAreaProps = {
 };
 export const RenderTimePicker = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
-  const [value, setValue] = useState(defaultValue);
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
-  // dayjs.extend(customParseFormat);
-
   const onChangeTime: TimePickerProps['onChange'] = (time, timeString) => {
     onChange(timeString);
-    setValue(time);
   };
 
-  return <TimePicker {...attr} style={{ width: '100%' }} value={value} onChange={onChangeTime} />;
+  return (
+    <div className="p-2 text-sm">
+      <TimePicker {...attr} className="w-full" defaultValue={defaultValue} onChange={onChangeTime} />
+    </div>
+  );
 };

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

@@ -79,16 +79,18 @@ export const RenderTreeSelect = (params: TextAreaProps) => {
   };
 
   return (
-    <TreeSelect
+    <div className="p-2 text-sm">
-      fieldNames={{ label: 'label', value: 'value', children: 'children' }}
+      <TreeSelect
-      {...data.ui.attr}
+        fieldNames={{ label: 'label', value: 'value', children: 'children' }}
-      style={{ width: '100%' }}
+        {...data.ui.attr}
-      value={defaultValue}
+        style={{ width: '100%' }}
-      treeDefaultExpandAll
+        value={defaultValue}
-      onChange={onChange}
+        treeDefaultExpandAll
-      treeData={data.options}
+        onChange={onChange}
-      onDropdownVisibleChange={handleDropdownVisibleChange}
+        treeData={data.options}
-    />
+        onDropdownVisibleChange={handleDropdownVisibleChange}
+      />
+    </div>
 
     // TODO: Implement the TreeSelect component
     //   <TreeSelect