feat(date-picker): onSelect 回调中增加 panelIndex 参数 (#2980)

XiaoMi · Aug 29, 2024 · d8c4e6f · d8c4e6f
1 parent 6a609a1
commit d8c4e6f
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 9 deletions.
diff --git a/.changeset/clean-donuts-attack.md b/.changeset/clean-donuts-attack.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(date-picker): onSelect 回调中增加 panelIndex 参数
diff --git a/.changeset/tall-walls-doubt.md b/.changeset/tall-walls-doubt.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/date-picker": minor
+---
+
+feat: onSelect 回调中增加 panelIndex 参数
diff --git a/packages/ui/date-picker/src/DatePicker.tsx b/packages/ui/date-picker/src/DatePicker.tsx
@@ -115,8 +115,8 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
     }, [propType])
 
     const propsOnSelect = useCallback(
-      (data: moment.Moment, isCompleted: boolean) => {
-        propsOnSelectOriginal && propsOnSelectOriginal(moment(data).toDate(), isCompleted)
+      (data: moment.Moment, isCompleted: boolean, panelIndex?: number) => {
+        propsOnSelectOriginal?.(moment(data).toDate(), isCompleted, panelIndex)
       },
       [propsOnSelectOriginal]
     )

diff --git a/packages/ui/date-picker/src/components/range-panel.tsx b/packages/ui/date-picker/src/components/range-panel.tsx
@@ -89,7 +89,7 @@ const RangePanel = () => {
     [type]
   )
 
-  const setRanges = (date: moment.Moment) => {
+  const setRanges = (date: moment.Moment, panelIndex: number = 0) => {
     const newRange = { ...range }
 
     if (newRange.start && (range.selecting || !calendarClickIsEnd.current)) {
@@ -101,7 +101,7 @@ const RangePanel = () => {
 
       // 此处是明显的语法错误，故而注释修改
       // onSelect(date, calendarClickIsEnd)
-      onSelect(date as any, !calendarClickIsEnd.current)
+      onSelect(date as any, !calendarClickIsEnd.current, panelIndex)
 
       if (type === 'weekrange') {
         // 固定模式下，即使跨月选择了日期，仍然显示当前月的日期选择面板
@@ -143,7 +143,7 @@ const RangePanel = () => {
       newRange.selecting = true
       newRange.start = date
       newRange.end = null
-      onSelect(date as any, false)
+      onSelect(date as any, false, panelIndex)
     }
     setRange(newRange)
   }
@@ -157,12 +157,12 @@ const RangePanel = () => {
 
     if (type === 'timeperiod' && views[uIndex] === 'date') {
       onPick([date, moment(date).hour(date.hour() + timeInterval / 60)], true)
-      onSelect(date as any, true)
+      onSelect(date as any, true, uIndex)
       return
     }
     // V4修改：type === 'weekrange' -> views[uIndex] === 'date' （修正，周模式下，无法使用年份月份快捷切换面板BUG）
     if (type.includes(views[uIndex]) || (type === 'weekrange' && views[uIndex] === 'date')) {
-      setRanges(date)
+      setRanges(date, uIndex)
     } else {
       const _innerDates = genNewDates(calRenderDates, date, uIndex)
       setCalRenderDates(_innerDates)

diff --git a/packages/ui/date-picker/src/types.ts b/packages/ui/date-picker/src/types.ts
@@ -230,9 +230,9 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
     | ((selectedHour: number, selectedMinute: number, panel: TimePickerPanelType) => number[])
     | number[]
   /**
-   * 选择日期的回调函数，(data: 选中的 moment 日期对象, sCompleted: 是否选择完成，仅在范围选择下有效) => void
+   * 选择日期的回调函数，(data: 选中的 moment 日期对象, isCompleted: 是否选择完成，仅在范围选择下有效，panelIndex: 当前操作面板索引) => void
    */
-  onSelect?: (data: Date, isCompleted: boolean) => void
+  onSelect?: (data: Date, isCompleted: boolean, panelIndex?: number) => void
   /**
    * 选择后的回调，(date: 选中的日期，dateStr: 选中的日期字符串) => void
    */

diff --git a/packages/ui/date-picker/stories/range.stories.tsx b/packages/ui/date-picker/stories/range.stories.tsx
@@ -45,6 +45,7 @@ export const Range = () => {
           onChange={(date, dateStr) => {
             console.log('onChange', date, dateStr)
           }}
+          onSelect={console.log}
         />
 
         <h2>季度</h2>
@@ -55,6 +56,7 @@ export const Range = () => {
           onChange={(date, dateStr) => {
             console.log('onChange', date, dateStr)
           }}
+          onSelect={console.log}
         />
 
         <h2>月份</h2>
@@ -65,6 +67,7 @@ export const Range = () => {
           onChange={(date, dateStr) => {
             console.log('onChange', date, dateStr)
           }}
+          onSelect={console.log}
         />
 
         <h2>周</h2>
@@ -75,6 +78,7 @@ export const Range = () => {
           onChange={(date, dateStr) => {
             console.log('onChange', date, dateStr)
           }}
+          onSelect={console.log}
         />
 
         <h2>日期时间范围</h2>
@@ -85,6 +89,7 @@ export const Range = () => {
           onChange={(date, dateStr) => {
             console.log('onChange', date, dateStr)
           }}
+          onSelect={console.log}
         />
 
         <h2>时间段快速选择</h2>