feat(calendar): support deleteIcon props (#2644)

Author: Miles-hxy

src/packages/calendar/calendar.taro.tsx

@@ -23,6 +23,7 @@ export interface CalendarProps {
   showSubTitle?: boolean
   scrollAnimation?: boolean
   firstDayOfWeek: number
+  closeIcon?: ReactNode
   disableDate: (date: CalendarDay) => boolean
   renderHeaderButtons?: () => string | JSX.Element
   renderDay?: (date: CalendarDay) => string | JSX.Element
@@ -88,6 +89,7 @@ export const Calendar = React.forwardRef<
     showSubTitle,
     scrollAnimation,
     firstDayOfWeek,
+    closeIcon,
     disableDate,
     renderHeaderButtons,
     renderDay,
@@ -176,6 +178,7 @@ export const Calendar = React.forwardRef<
           onOverlayClick={closePopup}
           onCloseIconClick={closePopup}
           style={{ height: '83%' }}
+          closeIcon={closeIcon}
         >
           {renderItem()}
         </Popup>

src/packages/calendar/calendar.tsx

@@ -23,6 +23,7 @@ export interface CalendarProps {
   showSubTitle?: boolean
   scrollAnimation?: boolean
   firstDayOfWeek: number
+  closeIcon?: ReactNode
   disableDate: (date: CalendarDay) => boolean
   renderHeaderButtons?: () => string | JSX.Element
   renderDay?: (date: CalendarDay) => string | JSX.Element
@@ -88,6 +89,7 @@ export const Calendar = React.forwardRef<
     showSubTitle,
     scrollAnimation,
     firstDayOfWeek,
+    closeIcon,
     disableDate,
     renderHeaderButtons,
     renderDay,
@@ -172,6 +174,7 @@ export const Calendar = React.forwardRef<
           position="bottom"
           round
           closeable
+          closeIcon={closeIcon}
           destroyOnClose
           onOverlayClick={closePopup}
           onCloseIconClick={closePopup}

src/packages/calendar/demos/h5/demo1.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Cell, Calendar } from '@nutui/nutui-react'
+import { Star } from '@nutui/icons-react'
 
 const Demo1 = () => {
   const d = new Date()
@@ -39,6 +40,7 @@ const Demo1 = () => {
         onClose={closeSwitch}
         onConfirm={setChooseValue}
         onDayClick={select}
+        closeIcon={<Star />}
       />
     </>
   )

src/packages/calendar/demos/taro/demo1.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Cell, Calendar } from '@nutui/nutui-react-taro'
+import { Star } from '@nutui/icons-react'
 
 const Demo1 = () => {
   const d = new Date()
@@ -39,6 +40,7 @@ const Demo1 = () => {
         onClose={closeSwitch}
         onConfirm={setChooseValue}
         onDayClick={select}
+        closeIcon={<Star />}
       />
     </>
   )

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

@@ -120,6 +120,7 @@ import { Calendar } from '@nutui/nutui-react'
 | showSubTitle | whether to show sub title for calendar | `boolean` | `true` |
 | scrollAnimation | whether to start scroll animation | `boolean` | `true` |
 | firstDayOfWeek | first day of week | `0-6` | `0` |
+| 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` | `-` |
 | renderDay | day info | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |

src/packages/calendar/doc.md

@@ -120,6 +120,7 @@ import { Calendar } from '@nutui/nutui-react'
 | showSubTitle | 是否展示日期标题 | `boolean` | `true` |
 | scrollAnimation | 是否启动滚动动画 | `boolean` | `true` |
 | firstDayOfWeek | 设置周起始日 | `0-6` | `0` |
+| closeIcon | 自定义 Icon | `ReactNode` | `close` |
 | disableDate | 设置不可选日期 | `(date: CalendarDay) => boolean` | `-` |
 | renderHeaderButtons | 自定义日历标题下部，可用以添加自定义操作 | `() => string` \| `JSX.Element` | `-` |
 | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |

src/packages/calendar/doc.taro.md

@@ -120,6 +120,7 @@ import { Calendar } from '@nutui/nutui-react-taro'
 | showSubTitle | 是否展示日期标题 | `boolean` | `true` |
 | scrollAnimation | 是否启动滚动动画 | `boolean` | `true` |
 | firstDayOfWeek | 设置周起始日 | `0-6` | `0` |
+| closeIcon | 自定义 Icon | `ReactNode` | `close` |
 | disableDate | 设置不可选日期 | `(date: CalendarDay) => boolean` | `-` |
 | renderHeaderButtons | 自定义日历标题下部，可用以添加自定义操作 | `() => string` \| `JSX.Element` | `-` |
 | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |

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

@@ -120,6 +120,7 @@ import { Calendar } from '@nutui/nutui-react'
 | showSubTitle | 是否展示日期標題 | `boolean` | `true` |
 | scrollAnimation | 是否啟動滾動動畫 | `boolean` | `true` |
 | firstDayOfWeek | 設置周起始日 | `0-6` | `0` |
+| closeIcon | 自定義 Icon | `ReactNode` | `close` |
 | disableDate | 設置不可選日期 | `(date: CalendarDay) => boolean` | `-` |
 | renderHeaderButtons | 自定義日歴標題下部，可用以添加自定義操作 | `() => string` \| `JSX.Element` | `-` |
 | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |