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

* feat(date-picker): onSelect 回调中增加 panelIndex 参数 (#2980) * feat(date-picker): onSelect 回调中增加 panelIndex 参数 (#2980) * chore(date-picker): 完善onSelect panelIndex功能 * feat(date-picker): disabledDate增加panelIndex参数
XiaoMi · Sep 6, 2024 · fab9f11 · fab9f11
1 parent bf7a968
commit fab9f11
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 15 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
@@ -117,8 +117,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/date-range-time-panel.tsx b/packages/ui/date-picker/src/components/date-range-time-panel.tsx
@@ -49,7 +49,7 @@ export const DateRangeTimePanel = (props: DateRangeTimePanelProps) => {
 
   const panelDisabledDate = useCallback(
     (date: Date, disposeView: CalendarViewEnum) => {
-      if (disabledDate(date, disposeView)) {
+      if (disabledDate(date, disposeView, nowIndex)) {
         return true
       } else {
         // 当正在操作开始，并且结束存在时，限制开始范围
@@ -99,6 +99,7 @@ export const DateRangeTimePanel = (props: DateRangeTimePanelProps) => {
         disabledDate={panelDisabledDate}
         outDate={panelData}
         range={range}
+        panelIndex={nowIndex}
       />
       <Footer disabled={isConfirmButtonDisabled} onConfirmButtonClick={onConfirmButtonClick} />
     </React.Fragment>

diff --git a/packages/ui/date-picker/src/components/panel.tsx b/packages/ui/date-picker/src/components/panel.tsx
@@ -19,10 +19,19 @@ interface PanelProps {
   disabledDate: DPContextData['disabledDate']
   range?: CalenderSelectedRange
   needConfirm?: boolean
-  onConfirm?: DPContextData['onConfirm']
+  onConfirm?: (date: Date) => void
+  panelIndex?: number
 }
 const Panel = (props: PanelProps) => {
-  const { onPick: onPickProp, outDate, range, disabledDate, needConfirm, onConfirm } = props
+  const {
+    onPick: onPickProp,
+    outDate,
+    range,
+    disabledDate,
+    needConfirm,
+    onConfirm,
+    panelIndex = 0,
+  } = props
   const {
     // outDate,
     type,
@@ -72,7 +81,7 @@ const Panel = (props: PanelProps) => {
 
   const onCalenderPick = useCallback(
     (date: moment.Moment) => {
-      onSelect(date as any, true)
+      onSelect(date as any, true, panelIndex)
       if (type === 'year' || (type === 'month' && view === 'month')) {
         // year || month picker
         onPick(

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
@@ -104,7 +104,11 @@ export type DatePickerAltCalendarPresetEnum = 'zh-CN' | 'id-ID'
 
 export type DateMarkRender = (currentDate: number, today: number) => React.ReactNode
 
-export type DisabledDate = (currentDate: Date, view: CalendarViewEnum) => boolean
+export type DisabledDate = (
+  currentDate: Date,
+  view: CalendarViewEnum,
+  panelIndex?: number
+) => boolean
 
 export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placeholder'> {
   /**
@@ -141,7 +145,7 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
    * 不可选择的日期(返回true为不可选)
    * @default () => false
    */
-  disabledDate?: (currentDate: Date, view: CalendarViewEnum) => boolean
+  disabledDate?: (currentDate: Date, view: CalendarViewEnum, panelIndex?: number) => boolean
   /**
    * 是否可以清空
    * @default true
@@ -230,9 +234,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>