Adding the onMonthChange method

optiosteam · Dec 1, 2023 · 2438a71 · 2438a71
1 parent 129906b
commit 2438a71
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.tsx b/src/DateTimeRangePicker/DatePicker/DatePicker.tsx
@@ -2,7 +2,7 @@ import React, {useState} from 'react'
 import moment, {Moment} from 'moment'
 
 import './DatePicker.scss'
-import IProps from './IProps'
+import IProps from './interfaces/IProps'
 import Month from './Month/Month'
 import Header from './Header/Header'
 import {TCalendarMode} from './TCalendarMode'
@@ -16,7 +16,8 @@ const DatePicker: React.FunctionComponent<IProps> = (
         initialDate,
         months = 1,
         onFromDateChanged,
-        onUntilDateChanged
+        onUntilDateChanged,
+        onMonthChange
     }
 ) => {
     const [calendarMode, setCalendarMode] = useState<TCalendarMode>('normal')
@@ -35,8 +36,28 @@ const DatePicker: React.FunctionComponent<IProps> = (
     return <div className={'date-time-range-picker-dates'} style={{width: `${width}em`}}>
         <Header date={currentDate}
                 months={months}
-                onPrevMonth={() => setCurrentDate(currentDate.clone().subtract(1, 'month'))}
-                onNextMonth={() => setCurrentDate(currentDate.clone().add(1, 'month'))}
+                onPrevMonth={() => {
+                    const newDates = Array.from({length: months}, (_, i) => {
+                        return currentDate.clone().subtract(i + 1, 'month');
+                    })
+                    setCurrentDate(newDates[0])
+                    onMonthChange && onMonthChange(newDates.map(date => ({
+                        month: date.format('MMMM'),
+                        convertedDate: date.format('YYYY-MM-DD'),
+                        momentObject: date
+                    })))
+                }}
+                onNextMonth={() => {
+                    const newDates = Array.from({length: months}, (_, i) => {
+                        return currentDate.clone().add(i + 1, 'month');
+                    });
+                    setCurrentDate(newDates[0]);
+                    onMonthChange && onMonthChange(newDates.map(date => ({
+                        month: date.format('MMMM'),
+                        convertedDate: date.format('YYYY-MM-DD'),
+                        momentObject: date,
+                    })));
+                }}
                 onPrevYear={() => setCurrentDate(currentDate.clone().subtract(1, 'year'))}
                 onNextYear={() => setCurrentDate(currentDate.clone().add(1, 'year'))}
                 calendarMode={calendarMode}

diff --git a/src/DateTimeRangePicker/DatePicker/interfaces/IMonth.ts b/src/DateTimeRangePicker/DatePicker/interfaces/IMonth.ts
@@ -0,0 +1,7 @@
+import {Moment} from 'moment'
+
+export interface IMonth {
+    month: string
+    convertedDate: string
+    momentObject: Moment
+}
diff --git a/src/DateTimeRangePicker/DatePicker/IProps.ts → ...ngePicker/DatePicker/interfaces/IProps.ts b/src/DateTimeRangePicker/DatePicker/IProps.ts → ...ngePicker/DatePicker/interfaces/IProps.ts
@@ -1,4 +1,5 @@
 import {Moment} from 'moment'
+import {IMonth} from './IMonth'
 
 interface IProps {
     range: boolean,
@@ -8,6 +9,7 @@ interface IProps {
     months: number,
     onFromDateChanged: (date: Moment | undefined) => void
     onUntilDateChanged: (date: Moment | undefined) => void
+    onMonthChange?: (month: { month: string; convertedDate: string; momentObject: moment.Moment }[]) => void
 }
 
 export default IProps
diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.stories.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.stories.tsx
@@ -12,9 +12,32 @@ export const basic = () => <DateTimeRangePicker
     calendarLocale={'fr'}
     initialDate={someDate}
     onChange={(date, date2) => console.log(date, date2)}
+    onMonthChange={(newDate) => {
+        console.log('Month changed: ', newDate)
+    }}
 />
-export const dateTime = () => <DateTimeRangePicker time onChange={(date, date2) => console.log(date, date2)}/>
-export const range  = () => <DateTimeRangePicker range={true} onChange={(date, date2) => console.log(date, date2)} />
-export const rangeWithMultipleMonths  = () => {
-    return <DateTimeRangePicker range={true} months={3} onChange={(date, date2) => console.log(date, date2)} />
-}
+export const dateTime = () => (
+    <DateTimeRangePicker
+        time
+        onChange={(date, date2) => console.log(date, date2)}
+        onMonthChange={(newDate) => {
+    console.log('Month changed: ', newDate)
+}}/>
+)
+export const range  = () => (
+    <DateTimeRangePicker
+        range={true}
+        onChange={(date, date2) => console.log(date, date2)}
+        onMonthChange={(newDate) => {
+    console.log('Month changed: ', newDate)
+}} />
+)
+export const rangeWithMultipleMonths  = () => (
+    <DateTimeRangePicker
+        range={true}
+        months={3}
+        onChange={(date, date2) => console.log(date, date2)}
+        onMonthChange={(newDate) => {
+        console.log('Month changed: ', newDate)
+    }} />
+    )
diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -21,6 +21,7 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
         initialDate,
         months = 1,
         onChange,
+        onMonthChange,
         calendarLocale = 'en'
     }
 ) => {
@@ -43,7 +44,7 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
                 return
             }
 
-            if (! onChange) {
+            if (!onChange || !onMonthChange) {
                 return
             }
 
@@ -70,6 +71,7 @@ const DateTimeRangePicker: React.FunctionComponent<IProps> = (
                 fromDate={currentFromDate}
                 untilDate={currentUntilDate}
                 initialDate={initialDate}
+                onMonthChange={onMonthChange}
                 onFromDateChanged={
                     (changedDate: Moment | undefined) => {
                         setCurrentFromDate(changedDate)

diff --git a/src/DateTimeRangePicker/IProps.ts b/src/DateTimeRangePicker/IProps.ts
@@ -1,5 +1,6 @@
 import {Moment} from 'moment'
 import {TCalendarLocaleSupport} from './TCalendarLocaleSupport'
+import {IMonth} from './DatePicker/interfaces/IMonth'
 
 interface IProps {
     date?: boolean,
@@ -11,6 +12,7 @@ interface IProps {
     initialDate?: Moment
     months?: number,
     onChange?: (fromDateTime: Moment, untilDateTime?: Moment) => void
+    onMonthChange?: (month: IMonth) => void
     calendarLocale?: TCalendarLocaleSupport
 }