Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(CalendarPickerView): add renderTop and renderBottom hide logic #6735

Merged
merged 7 commits into from
Oct 29, 2024
Merged

feat(CalendarPickerView): add renderTop and renderBottom hide logic #6735

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
58e4ec5
feat(CalendarPickerView): add renderTop and renderBottom hide logic
Layouwen Aug 30, 2024
230a831
test: add unit test
Layouwen Aug 30, 2024
6f01d6b
docs: add version description
Layouwen Aug 30, 2024
7b5bf48
refactor: add type assertion
Layouwen Oct 23, 2024
5866c28
refactor: optimize code structure
Layouwen Oct 23, 2024
b839f9d
fix: not return
Layouwen Oct 29, 2024
78e56c2
fix: keep the UI consistent
Layouwen Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/calendar-picker-view/calendar-picker-view.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` | - |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

false 这个加一下版本号说明，参考：
截屏2024-08-30 11 02 59

| 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` |
Expand Down
31 changes: 23 additions & 8 deletions src/components/calendar-picker-view/calendar-picker-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

加一下对应的测试用例

renderDate?: (date: Date) => React.ReactNode
renderBottom?: (date: Date) => React.ReactNode
renderBottom?: ((date: Date) => React.ReactNode) | false
allowClear?: boolean
max?: Date
min?: Date
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -243,6 +245,8 @@ export const CalendarPickerView = forwardRef<
(minDay && d.isBefore(minDay, 'day'))

const renderTop = () => {
if (props.renderTop === false) return
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个逻辑看起来没有用？下面的代码里已经写了

if (props.renderXXX === false) return

所有 renderXXX 走到的地方其实已经都判断过了

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

renderXXX 类型为 function | false
这里如果不把 boolean 过滤掉 ts 会报错, 所以才加上的

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

那可以考虑调整一下代码结构，也不需要这个 renderTop 函数了，直接内联写。


const top = props.renderTop?.(d.toDate())

if (top) {
Expand All @@ -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 (
<div
key={d.valueOf()}
Expand Down Expand Up @@ -316,17 +327,21 @@ export const CalendarPickerView = forwardRef<
}
}}
>
<div className={`${classPrefix}-cell-top`}>
{renderTop()}
</div>
{showTop && (
<div className={`${classPrefix}-cell-top`}>
{renderTop()}
</div>
)}
<div className={`${classPrefix}-cell-date`}>
{props.renderDate
? props.renderDate(d.toDate())
: d.date()}
</div>
<div className={`${classPrefix}-cell-bottom`}>
{props.renderBottom?.(d.toDate())}
</div>
{showBottom && (
<div className={`${classPrefix}-cell-bottom`}>
{renderBottom()}
</div>
)}
</div>
)
})}
Expand Down
4 changes: 2 additions & 2 deletions src/components/calendar-picker-view/calendar-picker-view.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` | `日期选择` |
Expand Down
Loading