diff --git a/package-lock.json b/package-lock.json index a46cfc2..dec4b89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14279,7 +14279,11 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "2.0.0", @@ -15900,6 +15904,15 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==" }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -19915,6 +19928,12 @@ } } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "filename-regex": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz", @@ -23524,7 +23543,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } } } }, @@ -24866,6 +24889,12 @@ "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" }, + "nan": { + "version": "2.18.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz", + "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==", + "optional": true + }, "nanoid": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.0.tgz", @@ -32239,7 +32268,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", @@ -32526,7 +32559,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", @@ -33196,4 +33233,4 @@ "dev": true } } -} \ No newline at end of file +} diff --git a/src/DateTimeRangePicker/DatePicker/DatePicker.tsx b/src/DateTimeRangePicker/DatePicker/DatePicker.tsx index 3f9efb3..e50c07e 100644 --- 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 = ( initialDate, months = 1, onFromDateChanged, - onUntilDateChanged + onUntilDateChanged, + onMonthChange } ) => { const [calendarMode, setCalendarMode] = useState('normal') @@ -35,8 +36,28 @@ const DatePicker: React.FunctionComponent = ( return
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 new file mode 100644 index 0000000..03386c6 --- /dev/null +++ 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 b/src/DateTimeRangePicker/DatePicker/interfaces/IProps.ts similarity index 68% rename from src/DateTimeRangePicker/DatePicker/IProps.ts rename to src/DateTimeRangePicker/DatePicker/interfaces/IProps.ts index 80dad79..a68204d 100644 --- a/src/DateTimeRangePicker/DatePicker/IProps.ts +++ b/src/DateTimeRangePicker/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 index 4082dd4..d682305 100644 --- a/src/DateTimeRangePicker/DateTimeRangePicker.stories.tsx +++ b/src/DateTimeRangePicker/DateTimeRangePicker.stories.tsx @@ -12,9 +12,32 @@ export const basic = () => console.log(date, date2)} + onMonthChange={(newDate) => { + console.log('Month changed: ', newDate) + }} /> -export const dateTime = () => console.log(date, date2)}/> -export const range = () => console.log(date, date2)} /> -export const rangeWithMultipleMonths = () => { - return console.log(date, date2)} /> -} +export const dateTime = () => ( + console.log(date, date2)} + onMonthChange={(newDate) => { + console.log('Month changed: ', newDate) +}}/> +) +export const range = () => ( + console.log(date, date2)} + onMonthChange={(newDate) => { + console.log('Month changed: ', newDate) +}} /> +) +export const rangeWithMultipleMonths = () => ( + console.log(date, date2)} + onMonthChange={(newDate) => { + console.log('Month changed: ', newDate) + }} /> + ) diff --git a/src/DateTimeRangePicker/DateTimeRangePicker.tsx b/src/DateTimeRangePicker/DateTimeRangePicker.tsx index a1c463e..719c750 100644 --- a/src/DateTimeRangePicker/DateTimeRangePicker.tsx +++ b/src/DateTimeRangePicker/DateTimeRangePicker.tsx @@ -21,6 +21,7 @@ const DateTimeRangePicker: React.FunctionComponent = ( initialDate, months = 1, onChange, + onMonthChange, calendarLocale = 'en' } ) => { @@ -43,7 +44,7 @@ const DateTimeRangePicker: React.FunctionComponent = ( return } - if (! onChange) { + if (!onChange || !onMonthChange) { return } @@ -70,6 +71,7 @@ const DateTimeRangePicker: React.FunctionComponent = ( 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 index 1137d2f..01a38ec 100644 --- 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 }