@acusti/date-picker 0.10.1 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,154 +0,0 @@
1
- export const ROOT_CLASS_NAME = 'uktmonthcalendar';
2
- export const STYLES = `
3
- .${ROOT_CLASS_NAME} {
4
- display: flex;
5
- flex-direction: column;
6
- flex: 1 1 auto;
7
- box-sizing: border-box;
8
- max-width: 325px;
9
- }
10
-
11
- .${ROOT_CLASS_NAME}-month-title {
12
- display: flex;
13
- align-items: center;
14
- justify-content: center;
15
- flex: 0 0 auto;
16
- box-sizing: border-box;
17
- padding-bottom: 25px;
18
- }
19
-
20
- h3.${ROOT_CLASS_NAME}-month-title-text {
21
- font-size: 18px;
22
- line-height: 23px;
23
- font-weight: 600;
24
- color: #000;
25
- margin: 0px;
26
- text-align: center;
27
- }
28
-
29
- .${ROOT_CLASS_NAME}-month-week {
30
- flex: 0 0 auto;
31
- display: grid;
32
- grid-column-gap: 0px;
33
- grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
34
- grid-auto-flow: dense;
35
- box-sizing: border-box;
36
- padding-bottom: 12px;
37
- }
38
-
39
- .${ROOT_CLASS_NAME}-month-week .week-day-item {
40
- flex: 1 1 auto;
41
- display: flex;
42
- justify-content: center;
43
- align-items: center;
44
- }
45
-
46
- .${ROOT_CLASS_NAME}-month-week span.week-day-item-text {
47
- text-align: center;
48
- font-size: 13px;
49
- line-height: 21px;
50
- margin: 0px;
51
- color: #9a9a9a;
52
- }
53
-
54
- .${ROOT_CLASS_NAME}-month-days {
55
- flex: 1 1 auto;
56
- display: flex;
57
- flex-direction: column;
58
- }
59
-
60
- .${ROOT_CLASS_NAME}-month-row {
61
- flex: 1 1 auto;
62
- display: grid;
63
- grid-column-gap: 0px;
64
- grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
65
- grid-auto-flow: dense;
66
- margin-bottom: 1px;
67
- }
68
-
69
- .${ROOT_CLASS_NAME}-month-day-item {
70
- display: flex;
71
- justify-content: center;
72
- align-items: center;
73
- position: relative;
74
- height: 46px;
75
- width: 46px;
76
- cursor: pointer;
77
- border: none;
78
- background-color: transparent;
79
- }
80
-
81
- .${ROOT_CLASS_NAME}-month-day-item:disabled {
82
- cursor: auto;
83
- }
84
-
85
- .${ROOT_CLASS_NAME}-month-day-item.is-selected {
86
- background-color: #f8f8f8;
87
- }
88
-
89
- .${ROOT_CLASS_NAME}-month-day-item.start-date {
90
- background-color: #f8f8f8;
91
- border-top-left-radius: 50%;
92
- border-bottom-left-radius: 50%;
93
- }
94
-
95
- .${ROOT_CLASS_NAME}-month-day-item.start-date:after {
96
- background-color: #000;
97
- opacity: 1;
98
- visibility: visible;
99
- }
100
- .${ROOT_CLASS_NAME}-month-day-item.start-date span.month-day-item-text {
101
- color: #fff;
102
- }
103
-
104
- .${ROOT_CLASS_NAME}-month-day-item.end-date {
105
- background-color: #f8f8f8;
106
- border-top-right-radius: 50%;
107
- border-bottom-right-radius: 50%;
108
- }
109
-
110
- .${ROOT_CLASS_NAME}-month-day-item.end-date:after {
111
- background-color: #000;
112
- opacity: 1;
113
- visibility: visible;
114
- }
115
- .${ROOT_CLASS_NAME}-month-day-item.end-date span.month-day-item-text {
116
- color: #fff;
117
- }
118
-
119
- .${ROOT_CLASS_NAME}-month-day-item:hover:after {
120
- opacity: 1;
121
- visibility: visible;
122
- }
123
-
124
- .${ROOT_CLASS_NAME}-month-day-item:after {
125
- content: "";
126
- position: absolute;
127
- left: 50%;
128
- top: 50%;
129
- transform: translate(-50%, -50%);
130
- pointer-events: none;
131
- border-radius: 50%;
132
- border: 1px solid #000;
133
- width: 43px;
134
- height: 43px;
135
- transition: opacity 0.25s ease-in-out;
136
- opacity: 0;
137
- visibility: hidden;
138
- }
139
-
140
- .${ROOT_CLASS_NAME}-month-day-item.is-empty:after {
141
- content: none;
142
- }
143
-
144
- .${ROOT_CLASS_NAME}-month-day-item span.month-day-item-text {
145
- text-align: center;
146
- font-size: 13px;
147
- line-height: 21px;
148
- margin: 0px;
149
- color: #000;
150
- position: relative;
151
- z-index: 1;
152
- }
153
- `;
154
- //# sourceMappingURL=month-calendar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"month-calendar.js","sourceRoot":"","sources":["../../src/styles/month-calendar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG;GACnB,eAAe;;;;;;;;GAQf,eAAe;;;;;;;;;KASb,eAAe;;;;;;;;;GASjB,eAAe;;;;;;;;;;GAUf,eAAe;;;;;;;GAOf,eAAe;;;;;;;;GAQf,eAAe;;;;;;GAMf,eAAe;;;;;;;;;GASf,eAAe;;;;;;;;;;;;GAYf,eAAe;;;;GAIf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;GAKf,eAAe;;;;;;;;;;;;;;;;GAgBf,eAAe;;;;GAIf,eAAe;;;;;;;;;CASjB,CAAC"}
package/dist/utils.js DELETED
@@ -1,49 +0,0 @@
1
- // The following utils work on a “month” as a unique numerical value
2
- // representing the number of months since the unix epoch (jan 1970)
3
- const START_YEAR = 1970;
4
- const MONTH_NAMES = [
5
- 'January',
6
- 'February',
7
- 'March',
8
- 'April',
9
- 'May',
10
- 'June',
11
- 'July',
12
- 'August',
13
- 'September',
14
- 'October',
15
- 'November',
16
- 'December',
17
- ];
18
- const getYearFromDate = (date, asUTC) => (asUTC ? date.getUTCFullYear() : date.getFullYear()) - START_YEAR;
19
- export const getMonthFromDate = (date, asUTC) => {
20
- const yearAsMonths = getYearFromDate(date, asUTC) * 12;
21
- return yearAsMonths + (asUTC ? date.getUTCMonth() : date.getMonth());
22
- };
23
- export const getYearFromMonth = (month) => Math.floor(month / 12) + START_YEAR;
24
- export const getMonthNameFromMonth = (month) => {
25
- let index = month % 12;
26
- if (Number.isNaN(index))
27
- return '';
28
- if (index < 0)
29
- index = 12 + index;
30
- return MONTH_NAMES[index];
31
- };
32
- export const getMonthAbbreviationFromMonth = (month) => {
33
- const monthName = getMonthNameFromMonth(month);
34
- if (monthName === 'September')
35
- return 'Sept';
36
- return monthName.substring(0, 3);
37
- };
38
- export const getDateFromMonthAndDay = (month, day, asUTC) => {
39
- const monthIn12 = month < 0 ? (12 - Math.abs(month % 12)) % 12 : month % 12;
40
- const year = getYearFromMonth(month);
41
- return asUTC
42
- ? new Date(Date.UTC(year, monthIn12, day))
43
- : new Date(year, monthIn12, day);
44
- };
45
- export const getLastDateFromMonth = (month, asUTC) => {
46
- // day 0 of the next month is the last day of the current month
47
- return getDateFromMonthAndDay(month + 1, 0, asUTC);
48
- };
49
- //# sourceMappingURL=utils.js.map
@@ -1,20 +0,0 @@
1
- /**
2
- * Flowtype definitions for utils
3
- * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.21.0
5
- * @flow
6
- */
7
-
8
- declare export var getMonthFromDate: (date: Date, asUTC?: boolean) => number;
9
- declare export var getYearFromMonth: (month: number) => number;
10
- declare export var getMonthNameFromMonth: (month: number) => string;
11
- declare export var getMonthAbbreviationFromMonth: (month: number) => string;
12
- declare export var getDateFromMonthAndDay: (
13
- month: number,
14
- day: number,
15
- asUTC?: boolean
16
- ) => Date;
17
- declare export var getLastDateFromMonth: (
18
- month: number,
19
- asUTC?: boolean
20
- ) => Date;
package/dist/utils.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,oEAAoE;AACpE,MAAM,UAAU,GAAG,IAAI,CAAC;AACxB,MAAM,WAAW,GAAG;IAChB,SAAS;IACT,UAAU;IACV,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,MAAM;IACN,QAAQ;IACR,WAAW;IACX,SAAS;IACT,UAAU;IACV,UAAU;CACb,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAU,EAAE,KAAe,EAAE,EAAE,CACpD,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,UAAU,CAAC;AAEtE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,KAAe,EAAE,EAAE;IAC5D,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC;IACvD,OAAO,YAAY,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,UAAU,CAAC;AAEvF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3D,IAAI,KAAK,GAAG,KAAK,GAAG,EAAE,CAAC;IACvB,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IACnC,IAAI,KAAK,GAAG,CAAC;QAAE,KAAK,GAAG,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAa,EAAE,EAAE;IAC3D,MAAM,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,SAAS,KAAK,WAAW;QAAE,OAAO,MAAM,CAAC;IAC7C,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,KAAe,EAAE,EAAE;IAClF,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;IAC5E,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACrC,OAAO,KAAK;QACR,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC;QAC1C,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAa,EAAE,KAAe,EAAE,EAAE;IACnE,+DAA+D;IAC/D,OAAO,sBAAsB,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC;AACvD,CAAC,CAAC"}
@@ -1 +0,0 @@
1
- export {};
@@ -1,88 +0,0 @@
1
- import { describe, expect, it } from 'vitest';
2
- import { getDateFromMonthAndDay, getLastDateFromMonth, getMonthFromDate, getMonthNameFromMonth, getYearFromMonth, } from './utils.js';
3
- const INVALID_DATE = new Date('');
4
- describe('@acusti/date-picker', () => {
5
- describe('utils', () => {
6
- describe('getMonthFromDate', () => {
7
- it('returns the correct month digit for a post-unix epoch month', () => {
8
- expect(getMonthFromDate(new Date(1970, 0, 8))).toBe(0); // january 8, 1970
9
- expect(getMonthFromDate(new Date(1971, 11, 1))).toBe(23); // november 1, 1971
10
- });
11
- it('returns the correct month digit for a pre-unix epoch month', () => {
12
- expect(getMonthFromDate(new Date(1969, 11, 31))).toBe(-1); // december 31, 1969
13
- expect(getMonthFromDate(new Date(1968, 3, 30))).toBe(-21); // april 30, 1968
14
- });
15
- it('returns the correct month digit based on UTC time if asUTC is true', () => {
16
- const date = new Date('1970-01-01T00:00:00.000Z');
17
- expect(getMonthFromDate(date, true)).toBe(0);
18
- // if test is run in a timezone behind UTC, ommitting asUTC returns -1
19
- // if not, the month should be the same with or without asUTC flag
20
- expect(getMonthFromDate(date)).toBe(date.getTimezoneOffset() >= 60 ? -1 : 0);
21
- });
22
- it('returns NaN for an Invalid Date', () => {
23
- expect(getMonthFromDate(INVALID_DATE)).toBe(NaN);
24
- });
25
- });
26
- describe('getYearFromMonth', () => {
27
- it('returns the correct year for a post-unix epoch date', () => {
28
- expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 1)))).toBe(1970);
29
- expect(getYearFromMonth(getMonthFromDate(new Date(2048, 4, 31)))).toBe(2048);
30
- });
31
- it('returns the correct year digit for a pre-unix epoch date', () => {
32
- expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 0)))).toBe(1969);
33
- expect(getYearFromMonth(getMonthFromDate(new Date(100, 11, 31)))).toBe(100);
34
- });
35
- it('returns NaN for an Invalid Date', () => {
36
- expect(getYearFromMonth(getMonthFromDate(INVALID_DATE))).toBe(NaN);
37
- });
38
- });
39
- describe('getMonthNameFromMonth', () => {
40
- it('returns the correct month name for a post-unix epoch month', () => {
41
- expect(getMonthNameFromMonth(getMonthFromDate(new Date(2023, 5, 19)))).toBe('June');
42
- });
43
- it('returns the correct month name for a pre-unix epoch month', () => {
44
- expect(getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5, 2)))).toBe('June');
45
- });
46
- it('returns an empty string if given NaN (e.g. if dealing with an Invalid Date)', () => {
47
- expect(getMonthNameFromMonth(getMonthFromDate(INVALID_DATE))).toBe('');
48
- });
49
- });
50
- describe('getDateFromMonthAndDay', () => {
51
- it('returns the date of the specified day for a post-unix epoch month', () => {
52
- expect(getDateFromMonthAndDay(getMonthFromDate(new Date(2008, 2, 13)), 1)).toEqual(new Date(2008, 2, 1));
53
- expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1999, 11, 1)), 31)).toEqual(new Date(1999, 11, 31));
54
- expect(getDateFromMonthAndDay(getMonthFromDate(new Date(2000, 0, 0)), 31)).toEqual(new Date(1999, 11, 31));
55
- });
56
- it('returns the correct date for a pre-unix epoch month', () => {
57
- expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1865, 5, 2)), 30)).toEqual(new Date(1865, 5, 30));
58
- expect(getDateFromMonthAndDay(getMonthFromDate(new Date(101, 0, 0)), 1)).toEqual(new Date(100, 11, 1));
59
- });
60
- it('returns date for start of day as UTC time if asUTC is true', () => {
61
- expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1865, 5, 2)), 30, true)).toEqual(new Date(Date.UTC(1865, 5, 30)));
62
- expect(getDateFromMonthAndDay(getMonthFromDate(new Date(101, 0, 0)), 1, true)).toEqual(new Date(Date.UTC(100, 11, 1)));
63
- });
64
- it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
65
- expect(getDateFromMonthAndDay(getMonthFromDate(INVALID_DATE), 1)).toEqual(INVALID_DATE);
66
- });
67
- });
68
- describe('getLastDateFromMonth', () => {
69
- it('returns the date of the last day for a post-unix epoch month', () => {
70
- expect(getLastDateFromMonth(getMonthFromDate(new Date(2008, 2, 13)))).toEqual(new Date(2008, 2, 31));
71
- // february in a leap year
72
- expect(getLastDateFromMonth(getMonthFromDate(new Date(2024, 1, 23)))).toEqual(new Date(2024, 1, 29));
73
- // february in a non-leap year
74
- expect(getLastDateFromMonth(getMonthFromDate(new Date(1985, 1, 1)))).toEqual(new Date(1985, 1, 28));
75
- });
76
- it('returns the correct date for a pre-unix epoch month', () => {
77
- expect(getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)))).toEqual(new Date(1865, 5, 30));
78
- });
79
- it('returns date for start of day as UTC time if asUTC is true', () => {
80
- expect(getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)), true)).toEqual(new Date(Date.UTC(1865, 5, 30)));
81
- });
82
- it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
83
- expect(getLastDateFromMonth(getMonthFromDate(INVALID_DATE))).toEqual(INVALID_DATE);
84
- });
85
- });
86
- });
87
- });
88
- //# sourceMappingURL=utils.test.js.map
@@ -1,6 +0,0 @@
1
- /**
2
- * Flowtype definitions for utils.test
3
- * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.21.0
5
- * @flow
6
- */
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../src/utils.test.ts"],"names":[],"mappings":"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"}
@@ -1,203 +0,0 @@
1
- /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
2
- import { Style } from '@acusti/styling';
3
- import clsx from 'clsx';
4
- import * as React from 'react';
5
-
6
- import MonthCalendar from './MonthCalendar.js';
7
- import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
8
- import {
9
- getMonthAbbreviationFromMonth,
10
- getMonthFromDate,
11
- getYearFromMonth,
12
- } from './utils.js';
13
-
14
- export type Props = {
15
- className?: string;
16
- dateEnd?: Date | number | string;
17
- dateStart?: Date | number | string;
18
- initialMonth?: number;
19
- isRange?: boolean;
20
- isTwoUp?: boolean;
21
- monthLimitFirst?: number;
22
- monthLimitLast?: number;
23
- onChange: (payload: { dateEnd?: null | string; dateStart: string }) => void;
24
- /**
25
- * Boolean to specify that date picker should initially render with the
26
- * end date’s month visible. The default behavior is to initially render
27
- * with the start date’s month visible.
28
- */
29
- showEndInitially?: boolean;
30
- useMonthAbbreviations?: boolean;
31
- };
32
-
33
- const { Fragment, useCallback, useEffect, useRef, useState } = React;
34
-
35
- const getAbbreviatedMonthTitle = (month: number) =>
36
- `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
37
-
38
- export default function DatePicker({
39
- className,
40
- dateEnd: _dateEnd,
41
- dateStart: _dateStart,
42
- initialMonth,
43
- isRange = _dateEnd != null,
44
- isTwoUp,
45
- monthLimitFirst,
46
- monthLimitLast,
47
- onChange,
48
- showEndInitially,
49
- useMonthAbbreviations,
50
- }: Props) {
51
- const dateEndFromProps =
52
- _dateEnd != null && typeof _dateEnd !== 'string'
53
- ? new Date(_dateEnd).toISOString()
54
- : _dateEnd;
55
- const dateStartFromProps =
56
- _dateStart != null && typeof _dateStart !== 'string'
57
- ? new Date(_dateStart).toISOString()
58
- : _dateStart;
59
- const [dateEnd, setDateEnd] = useState<null | string>(dateEndFromProps ?? null);
60
- const [dateStart, setDateStart] = useState<null | string>(dateStartFromProps ?? null);
61
- const updatingDateEndRef = useRef(false);
62
-
63
- useEffect(() => {
64
- if (dateEndFromProps == null) return;
65
- setDateEnd(dateEndFromProps);
66
- }, [dateEndFromProps]);
67
-
68
- useEffect(() => {
69
- if (dateStartFromProps == null) return;
70
- setDateStart(dateStartFromProps);
71
- }, [dateStartFromProps]);
72
-
73
- if (initialMonth == null) {
74
- // if no valid initial date, initially show present month as date end
75
- const useDateEnd = dateStart == null || Boolean(showEndInitially && dateEnd);
76
- // use date from props if set
77
- const initialDate = useDateEnd ? dateEnd : dateStart;
78
- initialMonth = getMonthFromDate(
79
- initialDate == null ? new Date() : new Date(initialDate),
80
- );
81
- if (useDateEnd && isTwoUp) {
82
- initialMonth -= 1;
83
- }
84
- }
85
-
86
- const [dateEndPreview, setDateEndPreview] = useState<null | string>(null);
87
- const [month, setMonth] = useState<number>(initialMonth);
88
-
89
- // In two-up view we see 1 more month, so monthLimitLast needs to be 1 less
90
- if (isTwoUp && monthLimitLast != null) {
91
- monthLimitLast -= 1;
92
- }
93
-
94
- const handleClickLeftArrow = useCallback(() => {
95
- setMonth((existingMonth: number) =>
96
- monthLimitFirst == null || existingMonth > monthLimitFirst
97
- ? existingMonth - 1
98
- : existingMonth,
99
- );
100
- }, [monthLimitFirst]);
101
-
102
- const handleClickRightArrow = useCallback(() => {
103
- setMonth((existingMonth: number) =>
104
- monthLimitLast == null || existingMonth < monthLimitLast
105
- ? existingMonth + 1
106
- : existingMonth,
107
- );
108
- }, [monthLimitLast]);
109
-
110
- const handleChange = useCallback(
111
- (date: string) => {
112
- // If we last set the dateStart or we have a dateStart but no dateEnd, set dateEnd
113
- if (
114
- isRange &&
115
- dateStart != null &&
116
- (updatingDateEndRef.current || dateEnd == null)
117
- ) {
118
- // Ensure that dateEnd is after dateStart; if not, swap them
119
- if (date < dateStart) {
120
- setDateStart(date);
121
- setDateEnd(dateStart);
122
- onChange({ dateEnd: dateStart, dateStart: date });
123
- } else {
124
- setDateEnd(date);
125
- onChange({ dateEnd: date, dateStart });
126
- }
127
- updatingDateEndRef.current = false;
128
- } else {
129
- setDateStart(date);
130
- setDateEnd(null);
131
- if (isRange) {
132
- onChange({ dateEnd: null, dateStart: date });
133
- updatingDateEndRef.current = true;
134
- } else {
135
- onChange({ dateStart: date });
136
- }
137
- }
138
- },
139
- [dateEnd, dateStart, isRange, onChange],
140
- );
141
-
142
- const handleChangeEndPreview = useCallback((date: string) => {
143
- setDateEndPreview(date);
144
- }, []);
145
-
146
- return (
147
- <Fragment>
148
- <Style href="@acusti/date-picker/DatePicker">{STYLES}</Style>
149
- <div
150
- className={clsx(ROOT_CLASS_NAME, className, {
151
- 'two-up': isTwoUp,
152
- })}
153
- >
154
- <div className={`${ROOT_CLASS_NAME}-range-arrow-wrap`}>
155
- <div
156
- className={clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
157
- disabled: monthLimitFirst != null && month <= monthLimitFirst,
158
- })}
159
- onClick={handleClickLeftArrow}
160
- />
161
- <div
162
- className={clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
163
- disabled: monthLimitLast != null && month >= monthLimitLast,
164
- })}
165
- onClick={handleClickRightArrow}
166
- />
167
- </div>
168
- <div className={`${ROOT_CLASS_NAME}-month-container`}>
169
- <MonthCalendar
170
- dateEnd={dateEnd}
171
- dateEndPreview={dateEndPreview}
172
- dateStart={dateStart}
173
- isRange={isRange}
174
- month={month}
175
- onChange={handleChange}
176
- onChangeEndPreview={handleChangeEndPreview}
177
- title={
178
- useMonthAbbreviations
179
- ? getAbbreviatedMonthTitle(month)
180
- : undefined
181
- }
182
- />
183
- {isTwoUp ? (
184
- <MonthCalendar
185
- dateEnd={dateEnd}
186
- dateEndPreview={dateEndPreview}
187
- dateStart={dateStart}
188
- isRange={isRange}
189
- month={month + 1}
190
- onChange={handleChange}
191
- onChangeEndPreview={handleChangeEndPreview}
192
- title={
193
- useMonthAbbreviations
194
- ? getAbbreviatedMonthTitle(month + 1)
195
- : undefined
196
- }
197
- />
198
- ) : null}
199
- </div>
200
- </div>
201
- </Fragment>
202
- );
203
- }