Skip to content

Commit 16fab25

Browse files
authored
feat(calendar): support renderBottomButton props (#2645)
* feat(calendar): support renderBottomButton props * feat(calendar): support renderBottomButton props * fix: test
1 parent 9dd46da commit 16fab25

File tree

8 files changed

+30
-4
lines changed

8 files changed

+30
-4
lines changed

src/packages/calendar/calendar.taro.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export interface CalendarProps {
2626
closeIcon?: ReactNode
2727
disableDate: (date: CalendarDay) => boolean
2828
renderHeaderButtons?: () => string | JSX.Element
29+
renderBottomButton?: () => string | JSX.Element
2930
renderDay?: (date: CalendarDay) => string | JSX.Element
3031
renderDayTop?: (date: CalendarDay) => string | JSX.Element
3132
renderDayBottom?: (date: CalendarDay) => string | JSX.Element
@@ -92,6 +93,7 @@ export const Calendar = React.forwardRef<
9293
closeIcon,
9394
disableDate,
9495
renderHeaderButtons,
96+
renderBottomButton,
9597
renderDay,
9698
renderDayTop,
9799
renderDayBottom,
@@ -155,6 +157,7 @@ export const Calendar = React.forwardRef<
155157
firstDayOfWeek={firstDayOfWeek}
156158
disableDate={disableDate}
157159
renderHeaderButtons={renderHeaderButtons}
160+
renderBottomButton={renderBottomButton}
158161
renderDay={renderDay}
159162
renderDayTop={renderDayTop}
160163
renderDayBottom={renderDayBottom}

src/packages/calendar/calendar.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export interface CalendarProps {
2626
closeIcon?: ReactNode
2727
disableDate: (date: CalendarDay) => boolean
2828
renderHeaderButtons?: () => string | JSX.Element
29+
renderBottomButton?: () => string | JSX.Element
2930
renderDay?: (date: CalendarDay) => string | JSX.Element
3031
renderDayTop?: (date: CalendarDay) => string | JSX.Element
3132
renderDayBottom?: (date: CalendarDay) => string | JSX.Element
@@ -92,6 +93,7 @@ export const Calendar = React.forwardRef<
9293
closeIcon,
9394
disableDate,
9495
renderHeaderButtons,
96+
renderBottomButton,
9597
renderDay,
9698
renderDayTop,
9799
renderDayBottom,
@@ -140,6 +142,7 @@ export const Calendar = React.forwardRef<
140142
children={children}
141143
type={type}
142144
autoBackfill={autoBackfill}
145+
renderBottomButton={renderBottomButton}
143146
popup={popup}
144147
title={title || locale.calendaritem.title}
145148
defaultValue={defaultValue}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ import { Calendar } from '@nutui/nutui-react'
123123
| closeIcon | Custom Icon | `ReactNode` | `close` |
124124
| disableDate | set disable date | `(date: CalendarDay) => boolean` | `-` |
125125
| renderHeaderButtons | custom buttons, under the title but above the subtitle | `() => string` \| `JSX.Element` | `-` |
126+
| renderBottomButton | Custom calendar bottom button | `() => string` \| `JSX.Element` | `-` |
126127
| renderDay | day info | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
127128
| renderDayTop | something above day | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
128129
| renderDayBottom | something under day | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |

src/packages/calendar/doc.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ import { Calendar } from '@nutui/nutui-react'
123123
| closeIcon | 自定义 Icon | `ReactNode` | `close` |
124124
| disableDate | 设置不可选日期 | `(date: CalendarDay) => boolean` | `-` |
125125
| renderHeaderButtons | 自定义日历标题下部,可用以添加自定义操作 | `() => string` \| `JSX.Element` | `-` |
126+
| renderBottomButton | 自定义日历底部按钮 | `() => string` \| `JSX.Element` | `-` |
126127
| renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
127128
| renderDayTop | 日期顶部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
128129
| renderDayBottom | 日期底部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |

src/packages/calendar/doc.taro.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ import { Calendar } from '@nutui/nutui-react-taro'
123123
| closeIcon | 自定义 Icon | `ReactNode` | `close` |
124124
| disableDate | 设置不可选日期 | `(date: CalendarDay) => boolean` | `-` |
125125
| renderHeaderButtons | 自定义日历标题下部,可用以添加自定义操作 | `() => string` \| `JSX.Element` | `-` |
126+
| renderBottomButton | 自定义日历底部按钮 | `() => string` \| `JSX.Element` | `-` |
126127
| renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
127128
| renderDayTop | 日期顶部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
128129
| renderDayBottom | 日期底部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ import { Calendar } from '@nutui/nutui-react'
123123
| closeIcon | 自定義 Icon | `ReactNode` | `close` |
124124
| disableDate | 設置不可選日期 | `(date: CalendarDay) => boolean` | `-` |
125125
| renderHeaderButtons | 自定義日歴標題下部,可用以添加自定義操作 | `() => string` \| `JSX.Element` | `-` |
126+
| renderBottomButton | 自定義日歴底部按鈕 | `() => string` \| `JSX.Element` | `-` |
126127
| renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
127128
| renderDayTop | 日期頂部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
128129
| renderDayBottom | 日期底部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |

src/packages/calendaritem/calendaritem.taro.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export interface CalendarItemProps extends PopupProps {
5656
firstDayOfWeek: number
5757
disableDate: (date: CalendarDay) => boolean
5858
renderHeaderButtons: () => string | JSX.Element
59+
renderBottomButton: () => string | JSX.Element
5960
renderDay: (date: CalendarDay) => string | JSX.Element
6061
renderDayTop: (date: CalendarDay) => string | JSX.Element
6162
renderDayBottom: (date: CalendarDay) => string | JSX.Element
@@ -121,6 +122,7 @@ export const CalendarItem = React.forwardRef<
121122
renderDay,
122123
renderDayTop,
123124
renderDayBottom,
125+
renderBottomButton,
124126
value,
125127
onConfirm,
126128
onUpdate,
@@ -876,8 +878,14 @@ export const CalendarItem = React.forwardRef<
876878
return (
877879
<div className="nut-calendar-footer">
878880
{children}
879-
<div className="calendar-confirm-btn" onClick={confirm}>
880-
{confirmText || locale.confirm}
881+
<div onClick={confirm}>
882+
{renderBottomButton ? (
883+
renderBottomButton()
884+
) : (
885+
<div className="calendar-confirm-btn">
886+
{confirmText || locale.confirm}
887+
</div>
888+
)}
881889
</div>
882890
</div>
883891
)

src/packages/calendaritem/calendaritem.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export interface CalendarItemProps extends PopupProps {
5555
firstDayOfWeek: number
5656
disableDate: (date: CalendarDay) => boolean
5757
renderHeaderButtons: () => string | JSX.Element
58+
renderBottomButton: () => string | JSX.Element
5859
renderDay: (date: CalendarDay) => string | JSX.Element
5960
renderDayTop: (date: CalendarDay) => string | JSX.Element
6061
renderDayBottom: (date: CalendarDay) => string | JSX.Element
@@ -116,6 +117,7 @@ export const CalendarItem = React.forwardRef<
116117
firstDayOfWeek,
117118
disableDate,
118119
renderHeaderButtons,
120+
renderBottomButton,
119121
renderDay,
120122
renderDayTop,
121123
renderDayBottom,
@@ -875,8 +877,14 @@ export const CalendarItem = React.forwardRef<
875877
return (
876878
<div className="nut-calendar-footer">
877879
{children}
878-
<div className="calendar-confirm-btn" onClick={confirm}>
879-
{confirmText || locale.confirm}
880+
<div onClick={confirm}>
881+
{renderBottomButton ? (
882+
renderBottomButton()
883+
) : (
884+
<div className="calendar-confirm-btn">
885+
{confirmText || locale.confirm}
886+
</div>
887+
)}
880888
</div>
881889
</div>
882890
)

0 commit comments

Comments
 (0)