feat(SmartRangePicker): 兼容 RangePicker 组件

TODO.md

@@ -56,27 +56,6 @@ turn [ <ModalForm key={'modal-form-1'} title='修改手机号' trigger={ <Button
 
 ---
 
-              <Action
-                    trigger={
-                        <Button type="primary">
-                            登录
-                        </Button>
-                    }
-                    request={async () => {
-
-                        const formValues = await new Promise((resolve, reject) => {
-                            validateFieldsAndScroll((errors, values) => {
-                                if (errors) {
-                                    reject('表单验证失败，请检查')
-                                    return;
-                                }
-                                resolve(values)
-                            })
-                        })
-
-                        把 form 封装进去
-
----
 
 <Action trigger={ <Button size='large' block style={{
                                         marginLeft: 0,
@@ -117,18 +96,6 @@ turn [ <ModalForm key={'modal-form-1'} title='修改手机号' trigger={ <Button
 
 ---
 
-renderActionGroup={({ toggleModal, form }) => { return [ <Action key="btn1" trigger={<Button type="primary">确认</Button>} request={async () => { const formValues = await new Promise((resolve, reject) => { form.validateFieldsAndScroll((errors, values) => { if (errors) { reject('表单存在错误，请检查') return; } resolve(values) }) }) await delay(1000);
-
-                      console.log(formValues)
-
-                      toggleModal()
-                    }}
-                  />,
-                ];
-              }}
-
----
-
 后端分页下拉框，如果搜索没有数据的话，展示 空状态
 
 ---
@@ -137,26 +104,6 @@ renderActionGroup={({ toggleModal, form }) => { return [ <Action key="btn1" trig
 
 ---
 
-EditableTable 修改 UE，把插入改为复制
-
----
-
-~~GroupsForm 复制支持数据复制~~
-
----
-
-~~searchTable 的 request 支持处理内部异常~~
-
----
-
-~~Action 支持 trigger 为函数注入 loading~~
-
----
-
-~~SearchTable 切换 tab 的时候，分页参数从 1 开始~~
-
----
-
 value 为字符串数组的 DateRange
 
        const { modifyTime, ...rest } = params.search;

src/SmartRangePicker/demos/basic.tsx

@@ -1,30 +1,31 @@
 import { Button, Form } from 'antd';
 import delay from 'delay';
+import moment from 'moment';
 import React from 'react';
 import { BackendFilteredSelect, SmartForm, SmartRangePicker } from 'widgets-v3';
 
 export default () => (
   <SmartForm
     request={async (params) => {
-      console.log(params);
+      console.log(JSON.stringify(params, null, 2));
       await delay(1000);
       return;
     }}
     renderFormItems={({ form: { getFieldDecorator }, submitLoading }) => {
       return (
         <>
-          <Form.Item label="SmartRangePicker">
-            {getFieldDecorator('SmartRangePicker', {
-              rules: [],
-            })(<SmartRangePicker />)}
-          </Form.Item>
-
-          <Form.Item label="SmartRangePicker YYYY-MM-DD HH:mm:ss">
-            {getFieldDecorator('SmartRangePicker YYYY-MM-DD HH:mm:ss', {
+          <Form.Item label="SmartRangePicker String Value">
+            {getFieldDecorator('SmartRangePicker String Value', {
               rules: [],
               initialValue: ['2024-04-15 03:30:07', '2024-05-18 03:30:07'],
             })(<SmartRangePicker valueFormat="YYYY-MM-DD HH:mm:ss" format={'YYYY-MM-DD'} />)}
           </Form.Item>
+          <Form.Item label="SmartRangePicker">
+            {getFieldDecorator('SmartRangePicker', {
+              initialValue: [moment('2024-04-15 03:30:07'), moment('2024-05-18 03:30:07')],
+              rules: [],
+            })(<SmartRangePicker format={'YYYY-MM-DD HH:mm:ss'} />)}
+          </Form.Item>
           <Form.Item>
             <Button loading={submitLoading} type="primary" htmlType="submit">
               Submit

src/SmartRangePicker/index.tsx

@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react';
 import { DatePicker } from 'antd';
-import moment from 'moment';
 import { RangePickerProps, RangePickerValue } from 'antd/es/date-picker/interface'; // 导入 RangePicker 的类型定义
+import moment from 'moment';
+import React, { useState } from 'react';
 import useUpdateEffect from 'src/_utils/useUpdateEffect';
 
 const { RangePicker } = DatePicker;
 
-type SmartRangePickerValue =
+type StringRangePickerValue =
   | undefined[]
   | null[]
   | [string]
@@ -16,6 +16,8 @@ type SmartRangePickerValue =
   | [string, null]
   | [string, string];
 
+type SmartRangePickerValue = StringRangePickerValue | RangePickerProps['value'];
+
 interface SmartRangePickerProps extends Omit<RangePickerProps, 'value' | 'onChange'> {
   value?: SmartRangePickerValue; // 使用新定义的类型
   valueFormat?: string;
@@ -24,7 +26,7 @@ interface SmartRangePickerProps extends Omit<RangePickerProps, 'value' | 'onChan
 
 const SmartRangePicker: React.FC<SmartRangePickerProps> = ({
   value,
-  valueFormat = 'YYYY-MM-DD',
+  valueFormat,
   format = valueFormat,
   onChange,
   ...restProps
@@ -43,22 +45,42 @@ const SmartRangePicker: React.FC<SmartRangePickerProps> = ({
     return date;
   };
 
-  const [dates, setDates] = useState<(moment.Moment | undefined | null)[]>(
-    Array.isArray(value) ? [convertToMoment(value[0]), convertToMoment(value[1])] : [],
-  );
+  const [dates, setDates] = useState<(moment.Moment | undefined | null)[]>(() => {
+    if (valueFormat) {
+      const stringVal = value as StringRangePickerValue;
+      return Array.isArray(stringVal)
+        ? [convertToMoment(stringVal[0]), convertToMoment(stringVal[1])]
+        : [];
+    }
+    return Array.isArray(value) ? (value as (moment.Moment | undefined | null)[]) : [];
+  });
 
   useUpdateEffect(() => {
-    if (Array.isArray(value)) {
-      setDates([convertToMoment(value[0]), convertToMoment(value[1])]);
+    if (valueFormat) {
+      const stringVal = value as StringRangePickerValue;
+      if (Array.isArray(value)) {
+        setDates([convertToMoment(stringVal[0]), convertToMoment(stringVal[1])]);
+      } else {
+        setDates([]);
+      }
     } else {
-      setDates([]);
+      if (Array.isArray(value)) {
+        setDates(value as (moment.Moment | undefined | null)[]);
+      } else {
+        setDates([]);
+      }
     }
   }, [value, valueFormat]);
 
   const handleRangeChange = (dates: RangePickerValue): void => {
-    const formattedDates = [convertToString(dates[0]), convertToString(dates[1])];
-    setDates(dates);
-    onChange?.(formattedDates as SmartRangePickerValue);
+    if (valueFormat) {
+      const formattedDates = [convertToString(dates[0]), convertToString(dates[1])];
+      setDates(dates);
+      onChange?.(formattedDates as SmartRangePickerValue);
+    } else {
+      setDates(dates);
+      onChange?.(dates as SmartRangePickerValue);
+    }
   };
 
   return (