feat(calendar): support renderBottomButton props (#2645)

* feat(calendar): support renderBottomButton props

* feat(calendar): support renderBottomButton props

* fix: test

Author: Miles-hxy

src/packages/calendar/calendar.taro.tsx

@@ -26,6 +26,7 @@ export interface CalendarProps {
   closeIcon?: ReactNode
   disableDate: (date: CalendarDay) => boolean
   renderHeaderButtons?: () => string | JSX.Element
+  renderBottomButton?: () => string | JSX.Element
   renderDay?: (date: CalendarDay) => string | JSX.Element
   renderDayTop?: (date: CalendarDay) => string | JSX.Element
   renderDayBottom?: (date: CalendarDay) => string | JSX.Element
@@ -92,6 +93,7 @@ export const Calendar = React.forwardRef<
     closeIcon,
     disableDate,
     renderHeaderButtons,
+    renderBottomButton,
     renderDay,
     renderDayTop,
     renderDayBottom,
@@ -155,6 +157,7 @@ export const Calendar = React.forwardRef<
         firstDayOfWeek={firstDayOfWeek}
         disableDate={disableDate}
         renderHeaderButtons={renderHeaderButtons}
+        renderBottomButton={renderBottomButton}
         renderDay={renderDay}
         renderDayTop={renderDayTop}
         renderDayBottom={renderDayBottom}

src/packages/calendar/calendar.tsx

@@ -26,6 +26,7 @@ export interface CalendarProps {
   closeIcon?: ReactNode
   disableDate: (date: CalendarDay) => boolean
   renderHeaderButtons?: () => string | JSX.Element
+  renderBottomButton?: () => string | JSX.Element
   renderDay?: (date: CalendarDay) => string | JSX.Element
   renderDayTop?: (date: CalendarDay) => string | JSX.Element
   renderDayBottom?: (date: CalendarDay) => string | JSX.Element
@@ -92,6 +93,7 @@ export const Calendar = React.forwardRef<
     closeIcon,
     disableDate,
     renderHeaderButtons,
+    renderBottomButton,
     renderDay,
     renderDayTop,
     renderDayBottom,
@@ -140,6 +142,7 @@ export const Calendar = React.forwardRef<
         children={children}
         type={type}
         autoBackfill={autoBackfill}
+        renderBottomButton={renderBottomButton}
         popup={popup}
         title={title || locale.calendaritem.title}
         defaultValue={defaultValue}

src/packages/calendar/doc.en-US.md

@@ -123,6 +123,7 @@ import { Calendar } from '@nutui/nutui-react'
 | closeIcon | Custom Icon | `ReactNode` | `close` |
 | disableDate | set disable date | `(date: CalendarDay) => boolean` | `-` |
 | renderHeaderButtons | custom buttons, under the title but above the subtitle | `() => string` \| `JSX.Element` | `-` |
+| renderBottomButton | Custom calendar bottom button | `() => string` \| `JSX.Element` | `-` |
 | renderDay | day info | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
 | renderDayTop | something above day | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
 | renderDayBottom | something under day | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |

src/packages/calendar/doc.md

@@ -123,6 +123,7 @@ import { Calendar } from '@nutui/nutui-react'
 | closeIcon | 自定义 Icon | `ReactNode` | `close` |
 | disableDate | 设置不可选日期 | `(date: CalendarDay) => boolean` | `-` |
 | renderHeaderButtons | 自定义日历标题下部，可用以添加自定义操作 | `() => string` \| `JSX.Element` | `-` |
+| renderBottomButton | 自定义日历底部按钮 | `() => string` \| `JSX.Element` | `-` |
 | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
 | renderDayTop | 日期顶部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
 | renderDayBottom | 日期底部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |

src/packages/calendar/doc.taro.md

@@ -123,6 +123,7 @@ import { Calendar } from '@nutui/nutui-react-taro'
 | closeIcon | 自定义 Icon | `ReactNode` | `close` |
 | disableDate | 设置不可选日期 | `(date: CalendarDay) => boolean` | `-` |
 | renderHeaderButtons | 自定义日历标题下部，可用以添加自定义操作 | `() => string` \| `JSX.Element` | `-` |
+| renderBottomButton | 自定义日历底部按钮 | `() => string` \| `JSX.Element` | `-` |
 | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
 | renderDayTop | 日期顶部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
 | renderDayBottom | 日期底部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |

src/packages/calendar/doc.zh-TW.md

@@ -123,6 +123,7 @@ import { Calendar } from '@nutui/nutui-react'
 | closeIcon | 自定義 Icon | `ReactNode` | `close` |
 | disableDate | 設置不可選日期 | `(date: CalendarDay) => boolean` | `-` |
 | renderHeaderButtons | 自定義日歴標題下部，可用以添加自定義操作 | `() => string` \| `JSX.Element` | `-` |
+| renderBottomButton | 自定義日歴底部按鈕 | `() => string` \| `JSX.Element` | `-` |
 | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
 | renderDayTop | 日期頂部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
 | renderDayBottom | 日期底部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |

src/packages/calendaritem/calendaritem.taro.tsx

@@ -56,6 +56,7 @@ export interface CalendarItemProps extends PopupProps {
   firstDayOfWeek: number
   disableDate: (date: CalendarDay) => boolean
   renderHeaderButtons: () => string | JSX.Element
+  renderBottomButton: () => string | JSX.Element
   renderDay: (date: CalendarDay) => string | JSX.Element
   renderDayTop: (date: CalendarDay) => string | JSX.Element
   renderDayBottom: (date: CalendarDay) => string | JSX.Element
@@ -121,6 +122,7 @@ export const CalendarItem = React.forwardRef<
     renderDay,
     renderDayTop,
     renderDayBottom,
+    renderBottomButton,
     value,
     onConfirm,
     onUpdate,
@@ -876,8 +878,14 @@ export const CalendarItem = React.forwardRef<
     return (
       <div className="nut-calendar-footer">
         {children}
-        <div className="calendar-confirm-btn" onClick={confirm}>
-          {confirmText || locale.confirm}
+        <div onClick={confirm}>
+          {renderBottomButton ? (
+            renderBottomButton()
+          ) : (
+            <div className="calendar-confirm-btn">
+              {confirmText || locale.confirm}
+            </div>
+          )}
         </div>
       </div>
     )

src/packages/calendaritem/calendaritem.tsx

@@ -55,6 +55,7 @@ export interface CalendarItemProps extends PopupProps {
   firstDayOfWeek: number
   disableDate: (date: CalendarDay) => boolean
   renderHeaderButtons: () => string | JSX.Element
+  renderBottomButton: () => string | JSX.Element
   renderDay: (date: CalendarDay) => string | JSX.Element
   renderDayTop: (date: CalendarDay) => string | JSX.Element
   renderDayBottom: (date: CalendarDay) => string | JSX.Element
@@ -116,6 +117,7 @@ export const CalendarItem = React.forwardRef<
     firstDayOfWeek,
     disableDate,
     renderHeaderButtons,
+    renderBottomButton,
     renderDay,
     renderDayTop,
     renderDayBottom,
@@ -875,8 +877,14 @@ export const CalendarItem = React.forwardRef<
     return (
       <div className="nut-calendar-footer">
         {children}
-        <div className="calendar-confirm-btn" onClick={confirm}>
-          {confirmText || locale.confirm}
+        <div onClick={confirm}>
+          {renderBottomButton ? (
+            renderBottomButton()
+          ) : (
+            <div className="calendar-confirm-btn">
+              {confirmText || locale.confirm}
+            </div>
+          )}
         </div>
       </div>
     )