feat: (Calendar) add allowClear prop

ant-design · Mar 16, 2022 · d4513d0 · d4513d0
1 parent 2f6a928
commit d4513d0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/src/components/calendar/calendar.en.md b/src/components/calendar/calendar.en.md
@@ -17,6 +17,7 @@
 | onPageChange  | Trigger when changed year or month.                              | `(year: number, month: number) => void`                                                                                              | -          |
 | weekStartsOn  | Week starts on which day.                                        | `'Monday' \| 'Sunday'`                                                                                                               | `'Sunday'` |
 | renderLabel   | The label render function.                                       | `(date: Date) => string \| null \| undefined`                                                                                        | -          |
+| allowClear    | Whether to allow clearing after another click.                   | `boolean`                                                                                                                            | `true`     |
 
 ### CSS Variables
 

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
@@ -28,9 +28,10 @@ export type CalenderRef = {
 }
 
 export type CalendarProps = {
+  onPageChange?: (year: number, month: number) => void
   weekStartsOn?: 'Monday' | 'Sunday'
   renderLabel?: (date: Date) => string | null | undefined
-  onPageChange?: (year: number, month: number) => void
+  allowClear?: boolean
 } & (
   | {
       selectionMode?: undefined
@@ -56,6 +57,7 @@ export type CalendarProps = {
 const defaultProps = {
   weekStartsOn: 'Sunday',
   defaultValue: null,
+  allowClear: true,
 }
 
 export const Calendar = forwardRef<CalenderRef, CalendarProps>((p, ref) => {
@@ -194,16 +196,28 @@ export const Calendar = forwardRef<CalenderRef, CalendarProps>((p, ref) => {
           onClick={() => {
             if (!props.selectionMode) return
             const date = d.toDate()
+            if (!inThisMonth) {
+              setCurrent(d.clone().date(1))
+            }
+            function shouldClear() {
+              if (!props.allowClear) return false
+              if (!dateRange) return false
+              const [begin, end] = dateRange
+              return d.isSame(begin, 'date') && d.isSame(end, 'day')
+            }
             if (props.selectionMode === 'single') {
+              if (props.allowClear && shouldClear()) {
+                setDateRange(null)
+                return
+              }
               setDateRange([date, date])
             } else if (props.selectionMode === 'range') {
               if (!dateRange) {
                 setDateRange([date, date])
                 setIntermediate(true)
                 return
               }
-              const [begin, end] = dateRange
-              if (d.isSame(begin, 'date') && d.isSame(end, 'day')) {
+              if (shouldClear()) {
                 setDateRange(null)
                 setIntermediate(false)
                 return
@@ -217,9 +231,6 @@ export const Calendar = forwardRef<CalenderRef, CalendarProps>((p, ref) => {
                 setIntermediate(true)
               }
             }
-            if (!inThisMonth) {
-              setCurrent(d.clone().date(1))
-            }
           }}
         >
           <div className={`${classPrefix}-cell-top`}>{d.date()}</div>

diff --git a/src/components/calendar/calendar.zh.md b/src/components/calendar/calendar.zh.md
@@ -15,6 +15,7 @@
 | onPageChange  | 切换月或年时触发                   | `(year: number, month: number) => void`                                                        | -          |
 | weekStartsOn  | 每周以周几作为第一天               | `'Monday' \| 'Sunday'`                                                                         | `'Sunday'` |
 | renderLabel   | 标注信息的渲染函数                 | `(date: Date) => string \| null \| undefined`                                                  | -          |
+| allowClear    | 是否允许再次点击后清除             | `boolean`                                                                                      | `true`     |
 
 ### CSS 变量