perf(date-picker): 范围选择交互优化 (#3055)

XiaoMi · Nov 26, 2024 · 671f831 · 671f831
1 parent 96da2d5
commit 671f831
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/packages/ui/date-picker/src/DatePicker.tsx b/packages/ui/date-picker/src/DatePicker.tsx
@@ -95,7 +95,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
     const cacheDate = useRef<(moment.Moment | null)[]>([])
     const [inputFocus, setInputFocus] = useState(false)
     const [type, setType] = useState<DatePickerTypeEnum>(propType)
-    const rangeRef = useRef<CalenderSelectedRange>(null)
+    const rangeRef = useRef<CalenderSelectedRange | null>(null)
 
     const needConfirm = useMemo(() => {
       // 如果是日期时间范围选择，则默认返回 true
@@ -323,8 +323,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
         const start = rangeRef.current?.start
         const end = rangeRef.current?.end
         let newDate
-        // 动态禁用会出问题
-        if (!!start && !!end && disabledDate === DEFAULT_DISABLED_DATE) {
+        if (!!start && !!end) {
           newDate = [start, end]
         } else {
           newDate = outDate
@@ -336,6 +335,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
         callback(_outDate, true)
 
         changeOutDate(_outDate)
+        rangeRef.current = null
       }
       // 日期时间范围选择模式，弹窗关闭，重新刷入缓存，视作取消
       else {

diff --git a/packages/ui/date-picker/src/components/range-panel.tsx b/packages/ui/date-picker/src/components/range-panel.tsx
@@ -71,10 +71,6 @@ const RangePanel = () => {
     setCalRenderDates(parseRenderDates(outDate, type))
   }, [outDate, type])
 
-  useEffect(() => {
-    rangeRef.current = range
-  }, [range, rangeRef])
-
   // 更新视图类型
   useEffect(() => {
     setViews([getView(type), getView(type)])
@@ -193,7 +189,13 @@ const RangePanel = () => {
   }
 
   const onMouseLeave = () => {
-    if (type.includes('range') && outDate[1] && range.selecting) {
+    // todo: 结束的日期如果被禁用，则不设置end，更优方法是获取第一个可用的日期
+    if (
+      type.includes('range') &&
+      outDate?.[1] &&
+      range.selecting &&
+      !disabledDate?.(outDate[1].toDate(), views[0])
+    ) {
       setRange((range) => {
         const newRange = { ...range }
         newRange.end = outDate[1]
@@ -202,6 +204,7 @@ const RangePanel = () => {
           newRange.start = newRange.end
           newRange.end = temp
         }
+        rangeRef.current = newRange
         return newRange
       })
     }