diff --git a/.changeset/clean-donuts-attack.md b/.changeset/clean-donuts-attack.md new file mode 100644 index 000000000..a0ff6ccc1 --- /dev/null +++ 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 new file mode 100644 index 000000000..ea0727bcd --- /dev/null +++ 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 index cdda14389..31fb684fb 100644 --- a/packages/ui/date-picker/src/DatePicker.tsx +++ b/packages/ui/date-picker/src/DatePicker.tsx @@ -105,8 +105,8 @@ export const DatePicker = forwardRef( }, [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 index 180b6bfa5..b81d8b1e1 100644 --- 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 index b5710e7f4..5c7dfe90e 100644 --- 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, '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 index 460187822..c55b9c180 100644 --- 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} />

季度

@@ -55,6 +56,7 @@ export const Range = () => { onChange={(date, dateStr) => { console.log('onChange', date, dateStr) }} + onSelect={console.log} />

月份

@@ -65,6 +67,7 @@ export const Range = () => { onChange={(date, dateStr) => { console.log('onChange', date, dateStr) }} + onSelect={console.log} />

@@ -75,6 +78,7 @@ export const Range = () => { onChange={(date, dateStr) => { console.log('onChange', date, dateStr) }} + onSelect={console.log} />

日期时间范围

@@ -85,6 +89,7 @@ export const Range = () => { onChange={(date, dateStr) => { console.log('onChange', date, dateStr) }} + onSelect={console.log} />

时间段快速选择