From 70b49376d3d39de3f19eca0e279f170f7909d191 Mon Sep 17 00:00:00 2001
From: linhf123 <wb-lhf780012@antgroup.com>
Date: Tue, 26 Mar 2024 18:16:27 +0800
Subject: [PATCH] fix: Default value

---
 packages/ui/src/DateRanger/PickerPanel.tsx | 13 ++++++-------
 packages/ui/src/DateRanger/Ranger.tsx      | 20 +++++++++++++-------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/DateRanger/PickerPanel.tsx b/packages/ui/src/DateRanger/PickerPanel.tsx
index 88e858dd3..ff38001b7 100644
--- a/packages/ui/src/DateRanger/PickerPanel.tsx
+++ b/packages/ui/src/DateRanger/PickerPanel.tsx
@@ -11,7 +11,7 @@ import { Button, Col, Divider, Form, Input, Row, Space, TimePicker } from '@ocea
 import { noop } from 'lodash';
 import moment from 'moment';
 import dayjs from 'dayjs';
-import { useUpdate, useMount } from 'ahooks';
+import { useUpdate } from 'ahooks';
 
 type RangeValue = [Moment, Moment] | [Dayjs, Dayjs];
 
@@ -36,17 +36,16 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
   const [defaultS, defaultE] = defaultValue;
   const [calendarValue, setCalendarValue] = React.useState(defaultValue);
   const [internalHoverValues, setInternalHoverValues] = React.useState(null);
+  const [activeIndex, setActiveIndex] = React.useState(0);
 
   const hoverValues = React.useMemo(() => {
     return internalHoverValues || calendarValue;
   }, [internalHoverValues, calendarValue]);
 
-  const [activeIndex, setActiveIndex] = React.useState(0);
-
   // ======================== Change ========================
   const fillCalendarValue = (date, index: number) =>
     // Trigger change only when date changed
-    fillIndex(hoverValues, index, date);
+    fillIndex(calendarValue, index, date);
 
   function fillIndex<T extends any[]>(ori: T, index: number, value: T[number]): T {
     const clone = [...ori] as T;
@@ -58,7 +57,7 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
     setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null);
   };
 
-  const formatValues = [...hoverValues]
+  const formatValues = [...calendarValue]
     .sort((a, b) => {
       return a?.valueOf() - b?.valueOf();
     })
@@ -67,13 +66,13 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
     });
 
   const [form] = Form.useForm();
+  const [s, e] = formatValues;
   useEffect(() => {
-    const [s, e] = formatValues;
     form.setFieldsValue({
       startDate: s,
       endDate: e,
     });
-  }, [...formatValues]);
+  }, [s, e]);
 
   const defaultTime = useMemo(() => {
     return isMoment ? moment() : dayjs();
diff --git a/packages/ui/src/DateRanger/Ranger.tsx b/packages/ui/src/DateRanger/Ranger.tsx
index 31a65d104..126752305 100644
--- a/packages/ui/src/DateRanger/Ranger.tsx
+++ b/packages/ui/src/DateRanger/Ranger.tsx
@@ -107,10 +107,16 @@ const Ranger = (props: DateRangerProps) => {
     moment.isMoment(value?.[0]) ||
     moment.isMoment(value?.[1]);
 
-  const [innerValue, setInnerValue] = useState<RangeValue>(value ?? defaultValue);
-
-  const [rangeName, setRangeName] = useState(
-    value || defaultValue ? CUSTOMIZE : defaultQuickValue ?? selects?.[0]?.name
+  const defaultRangeName =
+    value || defaultValue ? CUSTOMIZE : defaultQuickValue ?? selects?.[0]?.name;
+  const [rangeName, setRangeName] = useState(defaultRangeName);
+
+  const [innerValue, setInnerValue] = useState<RangeValue>(
+    value ??
+      defaultValue ??
+      (selects
+        .find(item => item.name === defaultRangeName)
+        ?.range(isMoment ? moment() : dayjs()) as RangeValue)
   );
 
   const isStepMode = mode === 'step';
@@ -152,6 +158,7 @@ const Ranger = (props: DateRangerProps) => {
     setOpen(false);
     setTooltipOpen(false);
   };
+
   const handleNameChange = (name: string) => {
     if (name !== CUSTOMIZE) {
       closeTooltip();
@@ -351,8 +358,6 @@ const Ranger = (props: DateRangerProps) => {
             }}
             menu={{
               onClick: ({ key, domEvent }) => {
-                handleNameChange(key);
-
                 if (key === CUSTOMIZE && isStepMode) {
                   // updateState 的修改会慢于 openChange 的判断，所以修改 refState.current.step 让 Dropdown 不要关闭
                   refState.current.step = STEP_CUSTOMIZE;
@@ -362,6 +367,7 @@ const Ranger = (props: DateRangerProps) => {
                 const selected = NEAR_TIME_LIST.find(_item => _item.name === key);
                 // 存在快捷选项切换为极简模式
                 if (selected?.range) {
+                  handleNameChange(key);
                   setIsPlay(true);
                   rangeChange(selected.range(isMoment ? moment() : dayjs()) as RangeValue);
                 }
@@ -459,6 +465,7 @@ const Ranger = (props: DateRangerProps) => {
                 className={`${prefix}-picker`}
                 style={{
                   pointerEvents: 'none',
+                  border: 0,
                 }}
                 disabledDate={pastOnly ? disabledFuture : disabledDate}
                 format={v => {
@@ -468,7 +475,6 @@ const Ranger = (props: DateRangerProps) => {
                 // @ts-ignore
                 value={innerValue}
                 onChange={datePickerChange}
-                // showTime={true}
                 allowClear={false}
                 size={size}
                 // 透传 props 到 antd Ranger