feat: calendar新增onYearMonthChange属性 (#807)

jdf2e · Mar 14, 2023 · 988e22d · 988e22d
1 parent d703299
commit 988e22d
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 4 deletions.
diff --git a/src/packages/calendar/calendar.taro.tsx b/src/packages/calendar/calendar.taro.tsx
@@ -35,6 +35,7 @@ export interface CalendarProps {
   onClose?: () => void
   onChoose?: (param: string) => void
   onSelected?: (data: string) => void
+  onYearMonthChange?: (param: string) => void
 }
 
 const defaultProps = {
@@ -60,6 +61,7 @@ const defaultProps = {
   onClose: () => {},
   onChoose: (param: string) => {},
   onSelected: (data: string) => {},
+  onYearMonthChange: (param: string) => {},
 } as CalendarProps
 
 export const Calendar = React.forwardRef<
@@ -91,6 +93,7 @@ export const Calendar = React.forwardRef<
     onClose,
     onChoose,
     onSelected,
+    onYearMonthChange,
   } = { ...defaultProps, ...props }
 
   const calendarRef = useRef<any>(null)
@@ -116,6 +119,10 @@ export const Calendar = React.forwardRef<
     calendarRef.current?.scrollToDate(date)
   }
 
+  const yearMonthChange = (param: string) => {
+    onYearMonthChange && onYearMonthChange(param)
+  }
+
   React.useImperativeHandle(ref, () => ({
     scrollToDate,
   }))
@@ -144,6 +151,7 @@ export const Calendar = React.forwardRef<
         onBottomInfo={onBottomInfo}
         onChoose={choose}
         onSelected={select}
+        onYearMonthChange={yearMonthChange}
       />
     )
   }

diff --git a/src/packages/calendar/calendar.tsx b/src/packages/calendar/calendar.tsx
@@ -36,6 +36,7 @@ export interface CalendarProps {
   onClose?: () => void
   onChoose?: (param: string) => void
   onSelected?: (data: string) => void
+  onYearMonthChange?: (param: string) => void
 }
 
 const defaultProps = {
@@ -61,6 +62,7 @@ const defaultProps = {
   onClose: () => {},
   onChoose: (param: string) => {},
   onSelected: (data: string) => {},
+  onYearMonthChange: (param: string) => {},
 } as CalendarProps
 
 export const Calendar = React.forwardRef<
@@ -91,6 +93,7 @@ export const Calendar = React.forwardRef<
     onClose,
     onChoose,
     onSelected,
+    onYearMonthChange,
   } = { ...defaultProps, ...props }
 
   const calendarRef = useRef<any>(null)
@@ -115,6 +118,10 @@ export const Calendar = React.forwardRef<
     calendarRef.current?.scrollToDate(date)
   }
 
+  const yearMonthChange = (param: string) => {
+    onYearMonthChange && onYearMonthChange(param)
+  }
+
   React.useImperativeHandle(ref, () => ({
     scrollToDate,
   }))
@@ -143,6 +150,7 @@ export const Calendar = React.forwardRef<
         onBottomInfo={onBottomInfo}
         onChoose={choose}
         onSelected={select}
+        onYearMonthChange={yearMonthChange}
       />
     )
   }

diff --git a/src/packages/calendar/demo.taro.tsx b/src/packages/calendar/demo.taro.tsx
@@ -202,6 +202,10 @@ const CalendarDemo = () => {
     console.log(param)
   }
 
+  const yearMonthChange = (param: string) => {
+    console.log(param)
+  }
+
   const goDate = () => {
     if (calendarRef.current) {
       calendarRef.current.scrollToDate('2023-04-01')
@@ -423,6 +427,7 @@ const CalendarDemo = () => {
             defaultValue={date2}
             isAutoBackFill
             onChoose={setChooseValue2}
+            onYearMonthChange={yearMonthChange}
           />
         </div>
       </div>

diff --git a/src/packages/calendar/demo.tsx b/src/packages/calendar/demo.tsx
@@ -205,6 +205,10 @@ const CalendarDemo = () => {
     console.log(param)
   }
 
+  const yearMonthChange = (param: string) => {
+    console.log(param)
+  }
+
   const goDate = () => {
     if (calendarRef.current) {
       calendarRef.current.scrollToDate('2023-04-01')
@@ -429,6 +433,7 @@ const CalendarDemo = () => {
             defaultValue={date2}
             isAutoBackFill
             onChoose={setChooseValue2}
+            onYearMonthChange={yearMonthChange}
           />
         </div>
       </div>

diff --git a/src/packages/calendar/doc.en-US.md b/src/packages/calendar/doc.en-US.md
@@ -468,6 +468,7 @@ Through ref, you can get the Calendar instance and call the instance method.
 | onChoose | Triggered after selection or by clicking the confirm button | Array of dates (including year, month, day and week) |
 | onClose  | Triggered when closed                   | -                            |
 | onSelected  | Triggered after click/select              |  `Day: Day`                          |
+| onYearMonthChange`v1.5.0`  | Triggered when reached top for sub title of year and month             |  Array of dates (including year, month)                         
 
 ### Day
 | Params| Description            |

diff --git a/src/packages/calendar/doc.md b/src/packages/calendar/doc.md
@@ -466,6 +466,7 @@ export default App;
 | onChoose | 选择之后或是点击确认按钮触发 | 日期数组（包含年月日和星期） |
 | onClose  | 关闭时触发                   | -                            |
 | onSelected  | 点击/选择后触发              |  `Day: Day`                          |
+| onYearMonthChange`v1.5.0`  | 年月子标题到达顶部时触发              |  日期数组（包含年月）                          |
 
 ### Day
 | 字段              | 类型            |

diff --git a/src/packages/calendar/doc.taro.md b/src/packages/calendar/doc.taro.md
@@ -467,6 +467,7 @@ export default App;
 | onChoose | 选择之后或是点击确认按钮触发 | 日期数组（包含年月日和星期） |
 | onClose  | 关闭时触发                   | -                            |
 | onSelected  | 点击/选择后触发              |  `Day: Day`                          |
+| onYearMonthChange`v1.5.0`  | 年月子标题到达顶部时触发              |  日期数组（包含年月）                          |
 
 ### Day
 | 字段              | 类型            |

diff --git a/src/packages/calendaritem/calendaritem.taro.tsx b/src/packages/calendaritem/calendaritem.taro.tsx
@@ -69,6 +69,7 @@ export interface CalendarItemProps {
   onChoose?: (data: any) => void
   onUpdate?: () => void
   onSelected?: (data: string) => void
+  onYearMonthChange?: (data: any) => void
 }
 const defaultProps = {
   type: 'one',
@@ -93,6 +94,7 @@ const defaultProps = {
   onChoose: (data: any) => {},
   onUpdate: () => {},
   onSelected: (data: string) => {},
+  onYearMonthChange: (data: any) => {},
 } as CalendarItemProps
 
 export const CalendarItem = React.forwardRef<
@@ -120,6 +122,7 @@ export const CalendarItem = React.forwardRef<
     onChoose,
     onUpdate,
     onSelected,
+    onYearMonthChange,
   } = { ...defaultProps, ...props }
 
   const weeks = locale.calendaritem.weekdays
@@ -483,6 +486,14 @@ export const CalendarItem = React.forwardRef<
     setMonthsData(state.monthsData)
   }
 
+  const setReachedYearMonthInfo = () => {
+    const currentMonthsData = state.monthsData[state.currentIndex]
+    const [year, month] = currentMonthsData.curData
+    if (currentMonthsData.title === yearMonthTitle) return
+    onYearMonthChange && onYearMonthChange([year, month, `${year}-${month}`])
+    setYearMonthTitle(currentMonthsData.title)
+  }
+
   const setDefaultRange = (monthsNum: number, current: number) => {
     let start = 0
     let end = 0
@@ -554,7 +565,7 @@ export const CalendarItem = React.forwardRef<
       setDefaultRange(state.monthsNum, current)
     }
 
-    setYearMonthTitle(state.monthsData[current].title)
+    setReachedYearMonthInfo()
   }
 
   const initData = () => {
@@ -687,7 +698,7 @@ export const CalendarItem = React.forwardRef<
 
     setDefaultRange(monthsNum, current)
     state.currentIndex = current
-    setYearMonthTitle(state.monthsData[state.currentIndex].title)
+    setReachedYearMonthInfo()
 
     if (state.defaultData.length > 0) {
       // 设置当前选中日期

diff --git a/src/packages/calendaritem/calendaritem.tsx b/src/packages/calendaritem/calendaritem.tsx
@@ -67,6 +67,7 @@ export interface CalendarItemProps {
   onChoose?: (data: any) => void
   onUpdate?: () => void
   onSelected?: (data: string) => void
+  onYearMonthChange?: (data: any) => void
 }
 const defaultProps = {
   type: 'one',
@@ -91,6 +92,7 @@ const defaultProps = {
   onChoose: (data: any) => {},
   onUpdate: () => {},
   onSelected: (data: string) => {},
+  onYearMonthChange: (data: any) => {},
 } as CalendarItemProps
 
 export const CalendarItem = React.forwardRef<
@@ -118,6 +120,7 @@ export const CalendarItem = React.forwardRef<
     onChoose,
     onUpdate,
     onSelected,
+    onYearMonthChange,
   } = { ...defaultProps, ...props }
 
   const weeks = locale.calendaritem.weekdays
@@ -482,6 +485,14 @@ export const CalendarItem = React.forwardRef<
     setMonthsData(state.monthsData)
   }
 
+  const setReachedYearMonthInfo = () => {
+    const currentMonthsData = state.monthsData[state.currentIndex]
+    const [year, month] = currentMonthsData.curData
+    if (currentMonthsData.title === yearMonthTitle) return
+    onYearMonthChange && onYearMonthChange([year, month, `${year}-${month}`])
+    setYearMonthTitle(currentMonthsData.title)
+  }
+
   const setDefaultRange = (monthsNum: number, current: number) => {
     let start = 0
     let end = 0
@@ -553,7 +564,7 @@ export const CalendarItem = React.forwardRef<
       setDefaultRange(state.monthsNum, current)
     }
 
-    setYearMonthTitle(state.monthsData[current].title)
+    setReachedYearMonthInfo()
   }
 
   const initData = () => {
@@ -686,7 +697,7 @@ export const CalendarItem = React.forwardRef<
 
     setDefaultRange(monthsNum, current)
     state.currentIndex = current
-    setYearMonthTitle(state.monthsData[state.currentIndex].title)
+    setReachedYearMonthInfo()
 
     if (state.defaultData.length > 0) {
       // 设置当前选中日期