feat(CalendarPickerView): add renderTop and renderBottom hide logic

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` | - | `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` |

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 (
                   <div
                     key={d.valueOf()}
@@ -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>
                 )
               })}

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` | - | `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` | `日期选择` |

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(<CalendarPickerView renderTop={false} />)
+
+    expect(document.querySelector(`.${classPrefix}-cell-top`)).toBeNull()
+  })
+
+  test('renderBottom hidden', () => {
+    render(<CalendarPickerView renderBottom={false} />)
+
+    expect(document.querySelector(`.${classPrefix}-cell-bottom`)).toBeNull()
+  })
+
   test('not fill empty cells if unnecessary', () => {
     const { container } = render(
       <CalendarPickerView