From 58e4ec5a5c7a918c228546e75d291e252ea45025 Mon Sep 17 00:00:00 2001 From: Avan Date: Fri, 30 Aug 2024 10:55:04 +0800 Subject: [PATCH 1/3] feat(CalendarPickerView): add renderTop and renderBottom hide logic --- .../calendar-picker-view.en.md | 4 +-- .../calendar-picker-view.tsx | 31 ++++++++++++++----- .../calendar-picker-view.zh.md | 4 +-- 3 files changed, 27 insertions(+), 12 deletions(-) diff --git a/src/components/calendar-picker-view/calendar-picker-view.en.md b/src/components/calendar-picker-view/calendar-picker-view.en.md index 101399cd95..314f9bb0aa 100644 --- a/src/components/calendar-picker-view/calendar-picker-view.en.md +++ b/src/components/calendar-picker-view/calendar-picker-view.en.md @@ -21,8 +21,8 @@ Only the simplest content area is shown here, and other more usages can be consu | max | Maximum value of a selectable range. | `Date` | - | | min | Minimum value of a selectable range. | `Date` | - | - | | onChange | Trigger when selected date changes. | `(val: Date \| null) => void` when selection mode is "single". `(val: [Date, Date] \| null) => void` when selection mode is "range". | - | -| renderTop | The top information of date render function. | `(date: Date) => ReactNode \| null \| undefined` | - | -| renderBottom | The bottom information of date render function. | `(date: Date) => ReactNode \| null \| undefined` | - | +| renderTop | The top information of date render function. | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | +| renderBottom | The bottom information of date render function. | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | | selectionMode | The selection mode. Disable selection when this prop is not set. | `'single' \| 'range'` | - | | shouldDisableDate | Set whether the date is disable selection. The min and max Settings are ignored | `(date: Date) => boolean` | - | | title | The title of calendar | `React.ReactNode` | `Date selection` | diff --git a/src/components/calendar-picker-view/calendar-picker-view.tsx b/src/components/calendar-picker-view/calendar-picker-view.tsx index 58a300842a..eb7f5d0b9d 100644 --- a/src/components/calendar-picker-view/calendar-picker-view.tsx +++ b/src/components/calendar-picker-view/calendar-picker-view.tsx @@ -44,9 +44,9 @@ export type CalendarPickerViewProps = { title?: React.ReactNode | false confirmText?: string weekStartsOn?: 'Monday' | 'Sunday' - renderTop?: (date: Date) => React.ReactNode + renderTop?: ((date: Date) => React.ReactNode) | false renderDate?: (date: Date) => React.ReactNode - renderBottom?: (date: Date) => React.ReactNode + renderBottom?: ((date: Date) => React.ReactNode) | false allowClear?: boolean max?: Date min?: Date @@ -118,6 +118,8 @@ export const CalendarPickerView = forwardRef< ) const showHeader = props.title !== false + const showTop = props.renderTop !== false + const showBottom = props.renderBottom !== false // =============================== Scroll =============================== const context = useContext(Context) @@ -243,6 +245,8 @@ export const CalendarPickerView = forwardRef< (minDay && d.isBefore(minDay, 'day')) const renderTop = () => { + if (props.renderTop === false) return + const top = props.renderTop?.(d.toDate()) if (top) { @@ -263,6 +267,13 @@ export const CalendarPickerView = forwardRef< return locale.Calendar.today } } + + const renderBottom = () => { + if (props.renderBottom === false) return + + return props.renderBottom?.(d.toDate()) + } + return (
-
- {renderTop()} -
+ {showTop && ( +
+ {renderTop()} +
+ )}
{props.renderDate ? props.renderDate(d.toDate()) : d.date()}
-
- {props.renderBottom?.(d.toDate())} -
+ {showBottom && ( +
+ {renderBottom()} +
+ )}
) })} diff --git a/src/components/calendar-picker-view/calendar-picker-view.zh.md b/src/components/calendar-picker-view/calendar-picker-view.zh.md index 69a5d06446..0b0bd255f8 100644 --- a/src/components/calendar-picker-view/calendar-picker-view.zh.md +++ b/src/components/calendar-picker-view/calendar-picker-view.zh.md @@ -21,8 +21,8 @@ CalendarPickerView 是 [CalendarPicker](/zh/components/calendar-picker) 的内 | max | 可选择范围的最大值 | `Date` | - | | min | 可选择范围的最小值 | `Date` | - | | onChange | 选择日期变化时触发 | 单选模式下为 `(val: Date \| null) => void`，多选模式下为 `(val: [Date, Date] \| null) => void` | - | -| renderTop | 日期顶部信息的渲染函数 | `(date: Date) => ReactNode \| null \| undefined` | - | -| renderBottom | 日期底部信息的渲染函数 | `(date: Date) => ReactNode \| null \| undefined` | - | +| renderTop | 日期顶部信息的渲染函数 | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | +| renderBottom | 日期底部信息的渲染函数 | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | | selectionMode | 选择模式，不设置的话表示不支持选择 | `'single' \| 'range'` | - | | shouldDisableDate | 判断日期是否可选，使用后会忽略 min 和 max 设置 | `(date: Date) => boolean` | - | | title | 日期选择器的标题 | `React.ReactNode` | `日期选择` | From 230a8315f48a790675b12d6c7a5be84a01900e5b Mon Sep 17 00:00:00 2001 From: Avan Date: Fri, 30 Aug 2024 11:07:52 +0800 Subject: [PATCH 2/3] test: add unit test --- .../tests/calendar-picker-view.test.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx b/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx index 4d3f825561..87a6e53590 100644 --- a/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx +++ b/src/components/calendar-picker-view/tests/calendar-picker-view.test.tsx @@ -167,6 +167,18 @@ describe('Calendar', () => { expect(document.querySelector(`.${classPrefix}-header`)).toBeNull() }) + test('renderTop hidden', () => { + render() + + expect(document.querySelector(`.${classPrefix}-cell-top`)).toBeNull() + }) + + test('renderBottom hidden', () => { + render() + + expect(document.querySelector(`.${classPrefix}-cell-bottom`)).toBeNull() + }) + test('not fill empty cells if unnecessary', () => { const { container } = render( Date: Fri, 30 Aug 2024 11:11:16 +0800 Subject: [PATCH 3/3] docs: add version description --- .../calendar-picker-view/calendar-picker-view.en.md | 4 ++-- .../calendar-picker-view/calendar-picker-view.zh.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/calendar-picker-view/calendar-picker-view.en.md b/src/components/calendar-picker-view/calendar-picker-view.en.md index 314f9bb0aa..606192c3e5 100644 --- a/src/components/calendar-picker-view/calendar-picker-view.en.md +++ b/src/components/calendar-picker-view/calendar-picker-view.en.md @@ -21,8 +21,8 @@ Only the simplest content area is shown here, and other more usages can be consu | max | Maximum value of a selectable range. | `Date` | - | | min | Minimum value of a selectable range. | `Date` | - | - | | onChange | Trigger when selected date changes. | `(val: Date \| null) => void` when selection mode is "single". `(val: [Date, Date] \| null) => void` when selection mode is "range". | - | -| renderTop | The top information of date render function. | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | -| renderBottom | The bottom information of date render function. | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | +| renderTop | The top information of date render function. | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | `false`: 5.38.0 | +| renderBottom | The bottom information of date render function. | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | `false`: 5.38.0 | | selectionMode | The selection mode. Disable selection when this prop is not set. | `'single' \| 'range'` | - | | shouldDisableDate | Set whether the date is disable selection. The min and max Settings are ignored | `(date: Date) => boolean` | - | | title | The title of calendar | `React.ReactNode` | `Date selection` | diff --git a/src/components/calendar-picker-view/calendar-picker-view.zh.md b/src/components/calendar-picker-view/calendar-picker-view.zh.md index 0b0bd255f8..b9bd925d51 100644 --- a/src/components/calendar-picker-view/calendar-picker-view.zh.md +++ b/src/components/calendar-picker-view/calendar-picker-view.zh.md @@ -21,8 +21,8 @@ CalendarPickerView 是 [CalendarPicker](/zh/components/calendar-picker) 的内 | max | 可选择范围的最大值 | `Date` | - | | min | 可选择范围的最小值 | `Date` | - | | onChange | 选择日期变化时触发 | 单选模式下为 `(val: Date \| null) => void`，多选模式下为 `(val: [Date, Date] \| null) => void` | - | -| renderTop | 日期顶部信息的渲染函数 | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | -| renderBottom | 日期底部信息的渲染函数 | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | +| renderTop | 日期顶部信息的渲染函数 | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | `false`: 5.38.0 | +| renderBottom | 日期底部信息的渲染函数 | `((date: Date) => ReactNode \| null \| undefined) \| false` | - | `false`: 5.38.0 | | selectionMode | 选择模式，不设置的话表示不支持选择 | `'single' \| 'range'` | - | | shouldDisableDate | 判断日期是否可选，使用后会忽略 min 和 max 设置 | `(date: Date) => boolean` | - | | title | 日期选择器的标题 | `React.ReactNode` | `日期选择` |