From 6aaa09586b46ee5bb1be080ed270decad8b47bdd Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Wed, 28 Aug 2024 17:22:34 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat(date-picker):=20onSelect=20=E5=9B=9E?= =?UTF-8?q?=E8=B0=83=E4=B8=AD=E5=A2=9E=E5=8A=A0=20panelIndex=20=E5=8F=82?= =?UTF-8?q?=E6=95=B0=20(#2980)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/clean-donuts-attack.md | 5 +++++ .changeset/tall-walls-doubt.md | 5 +++++ packages/ui/date-picker/src/DatePicker.tsx | 4 ++-- packages/ui/date-picker/src/components/range-panel.tsx | 10 +++++----- packages/ui/date-picker/src/types.ts | 4 ++-- packages/ui/date-picker/stories/range.stories.tsx | 5 +++++ 6 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 .changeset/clean-donuts-attack.md create mode 100644 .changeset/tall-walls-doubt.md 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} />

时间段快速选择

From d8c4e6fd8a7c507921cd0db440e6f1a91eb7bc15 Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Wed, 28 Aug 2024 17:22:34 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat(date-picker):=20onSelect=20=E5=9B=9E?= =?UTF-8?q?=E8=B0=83=E4=B8=AD=E5=A2=9E=E5=8A=A0=20panelIndex=20=E5=8F=82?= =?UTF-8?q?=E6=95=B0=20(#2980)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/clean-donuts-attack.md | 5 +++++ .changeset/tall-walls-doubt.md | 5 +++++ packages/ui/date-picker/src/DatePicker.tsx | 4 ++-- packages/ui/date-picker/src/components/range-panel.tsx | 10 +++++----- packages/ui/date-picker/src/types.ts | 4 ++-- packages/ui/date-picker/stories/range.stories.tsx | 5 +++++ 6 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 .changeset/clean-donuts-attack.md create mode 100644 .changeset/tall-walls-doubt.md 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 8930de21b..59b103b7c 100644 --- a/packages/ui/date-picker/src/DatePicker.tsx +++ b/packages/ui/date-picker/src/DatePicker.tsx @@ -115,8 +115,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 5c347cb99..7cfff0b47 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 baf728b1b..92734d684 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} />

时间段快速选择

From 0e3bc1f42990563e0cbf00351f16287fbdb5d284 Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Thu, 29 Aug 2024 14:28:26 +0800 Subject: [PATCH 3/4] =?UTF-8?q?chore(date-picker):=20=E5=AE=8C=E5=96=84onS?= =?UTF-8?q?elect=20panelIndex=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/date-range-time-panel.tsx | 1 + packages/ui/date-picker/src/components/panel.tsx | 15 ++++++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) 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 index 4b988259c..9f5c0019c 100644 --- a/packages/ui/date-picker/src/components/date-range-time-panel.tsx +++ b/packages/ui/date-picker/src/components/date-range-time-panel.tsx @@ -99,6 +99,7 @@ export const DateRangeTimePanel = (props: DateRangeTimePanelProps) => { disabledDate={panelDisabledDate} outDate={panelData} range={range} + panelIndex={nowIndex} />