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

@@ -40,13 +40,15 @@
   getDateRange: () => DateRange
 }
 
+export type CalendarPickerViewColumRender = (date: Date) => ReactNode
+
 export type CalendarPickerViewProps = {
   title?: React.ReactNode | false
   confirmText?: string
   weekStartsOn?: 'Monday' | 'Sunday'
-  renderTop?: (date: Date) => React.ReactNode
-  renderDate?: (date: Date) => React.ReactNode
-  renderBottom?: (date: Date) => React.ReactNode
+  renderTop?: CalendarPickerViewColumRender | false
+  renderDate?: CalendarPickerViewColumRender
+  renderBottom?: CalendarPickerViewColumRender | false
   allowClear?: boolean
   max?: Date
   min?: Date
@@ -243,26 +245,45 @@
                     (minDay && d.isBefore(minDay, 'day'))
 
                 const renderTop = () => {
+                  if (props.renderTop === false) return null
+
+                  const contentWrapper = (content: ReactNode) => (
+                    <div className={`${classPrefix}-cell-top`}>{content}</div>
+                  )
+
                   const top = props.renderTop?.(d.toDate())
 
                   if (top) {
-                    return top
+                    return contentWrapper(top)
                   }
 
                   if (props.selectionMode === 'range') {
                     if (isBegin) {
-                      return locale.Calendar.start
+                      return contentWrapper(locale.Calendar.start)
                     }
 
                     if (isEnd) {
-                      return locale.Calendar.end
+                      return contentWrapper(locale.Calendar.end)
                     }
                   }
 
                   if (d.isSame(today, 'day') && !isSelect) {
-                    return locale.Calendar.today
+                    return contentWrapper(locale.Calendar.today)
                   }
+
+                  return contentWrapper(null)
                 }
+
+                const renderBottom = () => {
+                  if (props.renderBottom === false) return null
+
+                  return (
+                    <div className={`${classPrefix}-cell-bottom`}>
+                      {props.renderBottom?.(d.toDate())}
+                    </div>
+                  )
+                }
+
                 return (
                   <div
                     key={d.valueOf()}
@@ -316,17 +337,13 @@
                       }
                     }}
                   >
-                    <div className={`${classPrefix}-cell-top`}>
-                      {renderTop()}
-                    </div>
+                    {renderTop()}
                     <div className={`${classPrefix}-cell-date`}>
                       {props.renderDate
                         ? props.renderDate(d.toDate())
                         : d.date()}
                     </div>
-                    <div className={`${classPrefix}-cell-bottom`}>
-                      {props.renderBottom?.(d.toDate())}
-                    </div>
+                    {renderBottom()}
                   </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