@acusti/date-picker 0.0.5 → 0.1.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.
- package/dist/DatePicker.d.ts +6 -1
- package/dist/DatePicker.js +38 -4
- package/dist/DatePicker.js.flow +5 -0
- package/dist/DatePicker.js.map +1 -1
- package/dist/MonthCalendar.d.ts +8 -5
- package/dist/MonthCalendar.js +21 -9
- package/dist/MonthCalendar.js.flow +6 -4
- package/dist/MonthCalendar.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.flow +1 -0
- package/dist/index.js.map +1 -1
- package/dist/styles/month-calendar.js +2 -0
- package/dist/styles/month-calendar.js.map +1 -1
- package/package.json +2 -2
- package/src/DatePicker.tsx +61 -6
- package/src/MonthCalendar.tsx +39 -11
- package/src/index.ts +1 -0
- package/src/styles/month-calendar.ts +2 -0
package/dist/DatePicker.d.ts
CHANGED
|
@@ -4,9 +4,14 @@ export type Props = {
|
|
|
4
4
|
dateEnd?: Date | string | number;
|
|
5
5
|
dateStart?: Date | string | number;
|
|
6
6
|
initialMonth?: number;
|
|
7
|
+
isRange?: boolean;
|
|
7
8
|
isTwoUp?: boolean;
|
|
8
9
|
monthLimitFirst?: number;
|
|
9
10
|
monthLimitLast?: number;
|
|
11
|
+
onChange: (payload: {
|
|
12
|
+
dateEnd?: string;
|
|
13
|
+
dateStart: string;
|
|
14
|
+
}) => void;
|
|
10
15
|
useMonthAbbreviations?: boolean;
|
|
11
16
|
};
|
|
12
|
-
export default function DatePicker({ className, dateEnd, dateStart, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, useMonthAbbreviations, }: Props): JSX.Element;
|
|
17
|
+
export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _dateStart, isRange, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, onChange, useMonthAbbreviations, }: Props): JSX.Element;
|
package/dist/DatePicker.js
CHANGED
|
@@ -4,9 +4,27 @@ import * as React from 'react';
|
|
|
4
4
|
import { getMonthAbbreviationFromMonth, getMonthFromDate, getYearFromMonth, } from './utils.js';
|
|
5
5
|
import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
|
|
6
6
|
import MonthCalendar from './MonthCalendar.js';
|
|
7
|
-
const { Fragment, useCallback, useState } = React;
|
|
7
|
+
const { Fragment, useCallback, useEffect, useState } = React;
|
|
8
8
|
const getAbbreviatedMonthTitle = (month) => `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
|
|
9
|
-
export default function DatePicker({ className, dateEnd, dateStart, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, useMonthAbbreviations, }) {
|
|
9
|
+
export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _dateStart, isRange = _dateEnd != null, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, onChange, useMonthAbbreviations, }) {
|
|
10
|
+
const dateEndFromProps = _dateEnd != null && typeof _dateEnd !== 'string'
|
|
11
|
+
? new Date(_dateEnd).toISOString()
|
|
12
|
+
: _dateEnd;
|
|
13
|
+
const dateStartFromProps = _dateStart != null && typeof _dateStart !== 'string'
|
|
14
|
+
? new Date(_dateStart).toISOString()
|
|
15
|
+
: _dateStart;
|
|
16
|
+
const [dateEnd, setDateEnd] = useState(dateEndFromProps || null);
|
|
17
|
+
const [dateStart, setDateStart] = useState(dateStartFromProps || null);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (dateEndFromProps == null)
|
|
20
|
+
return;
|
|
21
|
+
setDateEnd(dateEndFromProps);
|
|
22
|
+
}, [dateEndFromProps]);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (dateStartFromProps == null)
|
|
25
|
+
return;
|
|
26
|
+
setDateStart(dateStartFromProps);
|
|
27
|
+
}, [dateStartFromProps]);
|
|
10
28
|
if (initialMonth == null) {
|
|
11
29
|
// Use dateStart if it’s set
|
|
12
30
|
const initialDate = dateStart == null ? new Date() : new Date(dateStart);
|
|
@@ -15,6 +33,7 @@ export default function DatePicker({ className, dateEnd, dateStart, isTwoUp, ini
|
|
|
15
33
|
initialMonth -= 1;
|
|
16
34
|
}
|
|
17
35
|
}
|
|
36
|
+
const [dateEndPreview, setDateEndPreview] = useState(null);
|
|
18
37
|
const [month, setMonth] = useState(initialMonth);
|
|
19
38
|
// In two-up view we see 1 more month, so monthLimitLast needs to be 1 less
|
|
20
39
|
if (isTwoUp && monthLimitLast != null) {
|
|
@@ -30,6 +49,21 @@ export default function DatePicker({ className, dateEnd, dateStart, isTwoUp, ini
|
|
|
30
49
|
? existingMonth + 1
|
|
31
50
|
: existingMonth);
|
|
32
51
|
}, [monthLimitLast]);
|
|
52
|
+
const handleChange = useCallback((date) => {
|
|
53
|
+
// If we have a dateStart but no dateEnd, set dateEnd
|
|
54
|
+
if (isRange && dateStart != null && dateEnd == null) {
|
|
55
|
+
setDateEnd(date);
|
|
56
|
+
onChange({ dateEnd: date, dateStart });
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
setDateStart(date);
|
|
60
|
+
setDateEnd(null);
|
|
61
|
+
onChange({ dateStart: date });
|
|
62
|
+
}
|
|
63
|
+
}, [dateEnd, dateStart, isRange, onChange]);
|
|
64
|
+
const handleChangeEndPreview = useCallback((date) => {
|
|
65
|
+
setDateEndPreview(date);
|
|
66
|
+
}, []);
|
|
33
67
|
return (React.createElement(Fragment, null,
|
|
34
68
|
React.createElement(Style, null, STYLES),
|
|
35
69
|
React.createElement("div", { className: clsx(ROOT_CLASS_NAME, className, {
|
|
@@ -43,10 +77,10 @@ export default function DatePicker({ className, dateEnd, dateStart, isTwoUp, ini
|
|
|
43
77
|
disabled: monthLimitLast != null && month >= monthLimitLast,
|
|
44
78
|
}), onClick: handleClickRightArrow })),
|
|
45
79
|
React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-container` },
|
|
46
|
-
React.createElement(MonthCalendar, { dateEnd: dateEnd, dateStart: dateStart, month: month, title: useMonthAbbreviations
|
|
80
|
+
React.createElement(MonthCalendar, { dateEnd: dateEnd, dateEndPreview: dateEndPreview, dateStart: dateStart, isRange: isRange, month: month, onChange: handleChange, onChangeEndPreview: handleChangeEndPreview, title: useMonthAbbreviations
|
|
47
81
|
? getAbbreviatedMonthTitle(month)
|
|
48
82
|
: undefined }),
|
|
49
|
-
isTwoUp ? (React.createElement(MonthCalendar, { dateEnd: dateEnd, dateStart: dateStart, month: month + 1, title: useMonthAbbreviations
|
|
83
|
+
isTwoUp ? (React.createElement(MonthCalendar, { dateEnd: dateEnd, dateEndPreview: dateEndPreview, dateStart: dateStart, isRange: isRange, month: month + 1, onChange: handleChange, onChangeEndPreview: handleChangeEndPreview, title: useMonthAbbreviations
|
|
50
84
|
? getAbbreviatedMonthTitle(month + 1)
|
|
51
85
|
: undefined })) : null))));
|
|
52
86
|
}
|
package/dist/DatePicker.js.flow
CHANGED
|
@@ -10,9 +10,14 @@ export type Props = {|
|
|
|
10
10
|
dateEnd?: Date | string | number,
|
|
11
11
|
dateStart?: Date | string | number,
|
|
12
12
|
initialMonth?: number,
|
|
13
|
+
isRange?: boolean,
|
|
13
14
|
isTwoUp?: boolean,
|
|
14
15
|
monthLimitFirst?: number,
|
|
15
16
|
monthLimitLast?: number,
|
|
17
|
+
onChange: (payload: {|
|
|
18
|
+
dateEnd?: string,
|
|
19
|
+
dateStart: string,
|
|
20
|
+
|}) => void,
|
|
16
21
|
useMonthAbbreviations?: boolean,
|
|
17
22
|
|};
|
|
18
23
|
declare export default function DatePicker(x: Props): React$Node;
|
package/dist/DatePicker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACH,6BAA6B,EAC7B,gBAAgB,EAChB,gBAAgB,GACnB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,aAAa,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.tsx"],"names":[],"mappings":"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"}
|
package/dist/MonthCalendar.d.ts
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
export type Props = {
|
|
3
3
|
className?: string;
|
|
4
|
-
dateStart?: Date | string | number;
|
|
5
|
-
dateEnd?: Date | string | number;
|
|
4
|
+
dateStart?: Date | string | number | null;
|
|
5
|
+
dateEnd?: Date | string | number | null;
|
|
6
|
+
dateEndPreview?: string | null;
|
|
7
|
+
isRange?: boolean;
|
|
6
8
|
month: number;
|
|
7
|
-
onChange?: (
|
|
9
|
+
onChange?: (date: string) => void;
|
|
10
|
+
onChangeEndPreview?: (date: string) => void;
|
|
8
11
|
title?: string;
|
|
9
12
|
};
|
|
10
|
-
export default function MonthCalendar({ className, dateEnd, dateStart, month, onChange, title, }: Props): JSX.Element;
|
|
13
|
+
export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month, onChange, onChangeEndPreview, title, }: Props): JSX.Element;
|
package/dist/MonthCalendar.js
CHANGED
|
@@ -5,7 +5,7 @@ import { getMonthFromDate, getMonthNameFromMonth, getYearFromMonth } from './uti
|
|
|
5
5
|
import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
|
|
6
6
|
const { Fragment, useCallback } = React;
|
|
7
7
|
const DAYS = Array(7).fill(null);
|
|
8
|
-
export default function MonthCalendar({ className, dateEnd, dateStart, month, onChange, title, }) {
|
|
8
|
+
export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month, onChange, onChangeEndPreview, title, }) {
|
|
9
9
|
const year = getYearFromMonth(month);
|
|
10
10
|
title = title || `${getMonthNameFromMonth(month)} ${year}`;
|
|
11
11
|
const monthWithinYear = month % 12;
|
|
@@ -17,9 +17,10 @@ export default function MonthCalendar({ className, dateEnd, dateStart, month, on
|
|
|
17
17
|
const firstDay = firstDate.getDay();
|
|
18
18
|
const spacesAfterLastDay = 7 - (lastDate.getDay() % 7); // prettier-ignore
|
|
19
19
|
const daySpaces = totalDays + firstDay + spacesAfterLastDay;
|
|
20
|
-
const [dateRangeStartDay, dateRangeEndDay] = [
|
|
20
|
+
const [dateRangeStartDay, dateRangeEndDay, dateRangeEndPreviewDay] = [
|
|
21
21
|
dateStart,
|
|
22
22
|
dateEnd,
|
|
23
|
+
dateEndPreview,
|
|
23
24
|
].reduce((acc, date, index) => {
|
|
24
25
|
if (date != null && !(date instanceof Date)) {
|
|
25
26
|
date = new Date(date);
|
|
@@ -43,11 +44,19 @@ export default function MonthCalendar({ className, dateEnd, dateStart, month, on
|
|
|
43
44
|
}
|
|
44
45
|
}
|
|
45
46
|
return acc;
|
|
46
|
-
}, [null, null]);
|
|
47
|
+
}, [null, null, null]);
|
|
47
48
|
const handleClickDay = useCallback((event) => {
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
const { date } = event.currentTarget.dataset;
|
|
50
|
+
if (date && onChange)
|
|
51
|
+
onChange(date);
|
|
50
52
|
}, [onChange]);
|
|
53
|
+
const handleMouseEnterDay = useCallback((event) => {
|
|
54
|
+
if (isRange && onChangeEndPreview) {
|
|
55
|
+
const { date } = event.currentTarget.dataset;
|
|
56
|
+
if (date)
|
|
57
|
+
onChangeEndPreview(date);
|
|
58
|
+
}
|
|
59
|
+
}, [isRange, onChangeEndPreview]);
|
|
51
60
|
return (React.createElement(Fragment, null,
|
|
52
61
|
React.createElement(Style, null, STYLES),
|
|
53
62
|
React.createElement("div", { className: clsx(ROOT_CLASS_NAME, className) },
|
|
@@ -76,9 +85,12 @@ export default function MonthCalendar({ className, dateEnd, dateStart, month, on
|
|
|
76
85
|
const isEmpty = dayNumber < 1 || dayNumber > totalDays;
|
|
77
86
|
const isAfterDateRangeStart = dateRangeStartDay != null &&
|
|
78
87
|
dayNumber > dateRangeStartDay;
|
|
79
|
-
const isBeforeDateRangeEnd = dateRangeEndDay
|
|
80
|
-
|
|
81
|
-
|
|
88
|
+
const isBeforeDateRangeEnd = (dateRangeEndDay == null &&
|
|
89
|
+
dateRangeEndPreviewDay != null &&
|
|
90
|
+
dayNumber < dateRangeEndPreviewDay) ||
|
|
91
|
+
(dateRangeEndDay != null &&
|
|
92
|
+
dayNumber < dateRangeEndDay);
|
|
93
|
+
return (React.createElement("button", { className: clsx(`${ROOT_CLASS_NAME}-month-day-item`, {
|
|
82
94
|
'is-empty': isEmpty,
|
|
83
95
|
'is-selected': !isEmpty &&
|
|
84
96
|
isAfterDateRangeStart &&
|
|
@@ -87,7 +99,7 @@ export default function MonthCalendar({ className, dateEnd, dateStart, month, on
|
|
|
87
99
|
dayNumber === dateRangeEndDay,
|
|
88
100
|
'start-date': !isEmpty &&
|
|
89
101
|
dayNumber === dateRangeStartDay,
|
|
90
|
-
}), key: `MonthDayItem-${dayNumber}`, onClick: handleClickDay }, isEmpty ? null : (React.createElement("span", { className: "month-day-item-text" }, dayNumber))));
|
|
102
|
+
}), "data-date": new Date(year, monthWithinYear, dayNumber).toISOString(), key: `MonthDayItem-${dayNumber}`, onClick: handleClickDay, onMouseEnter: handleMouseEnterDay, type: "button" }, isEmpty ? null : (React.createElement("span", { className: "month-day-item-text" }, dayNumber))));
|
|
91
103
|
}))))))));
|
|
92
104
|
}
|
|
93
105
|
//# sourceMappingURL=MonthCalendar.js.map
|
|
@@ -5,13 +5,15 @@
|
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import * as React from "react";
|
|
9
8
|
export type Props = {|
|
|
10
9
|
className?: string,
|
|
11
|
-
dateStart?: Date | string | number,
|
|
12
|
-
dateEnd?: Date | string | number,
|
|
10
|
+
dateStart?: Date | string | number | null,
|
|
11
|
+
dateEnd?: Date | string | number | null,
|
|
12
|
+
dateEndPreview?: string | null,
|
|
13
|
+
isRange?: boolean,
|
|
13
14
|
month: number,
|
|
14
|
-
onChange?: (
|
|
15
|
+
onChange?: (date: string) => void,
|
|
16
|
+
onChangeEndPreview?: (date: string) => void,
|
|
15
17
|
title?: string,
|
|
16
18
|
|};
|
|
17
19
|
declare export default function MonthCalendar(x: Props): React$Node;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"MonthCalendar.js","sourceRoot":"","sources":["../src/MonthCalendar.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.flow
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,cAAc,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,cAAc,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;;GAMf,eAAe;;;;;GAKf,eAAe;;;;GAIf,eAAe;;;;;GAKf,eAAe;;;;;;;;;;;;;;;;GAgBf,eAAe;;;;GAIf,eAAe;;;;;;;;;CASjB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/date-picker",
|
|
3
|
-
"version": "0.0
|
|
4
|
-
"description": "React component that renders a date picker with
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "React component that renders a date picker with support for date ranges",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
7
7
|
"react-component",
|
package/src/DatePicker.tsx
CHANGED
|
@@ -16,27 +16,52 @@ export type Props = {
|
|
|
16
16
|
dateEnd?: Date | string | number;
|
|
17
17
|
dateStart?: Date | string | number;
|
|
18
18
|
initialMonth?: number;
|
|
19
|
+
isRange?: boolean;
|
|
19
20
|
isTwoUp?: boolean;
|
|
20
21
|
monthLimitFirst?: number;
|
|
21
22
|
monthLimitLast?: number;
|
|
23
|
+
onChange: (payload: { dateEnd?: string; dateStart: string }) => void;
|
|
22
24
|
useMonthAbbreviations?: boolean;
|
|
23
25
|
};
|
|
24
26
|
|
|
25
|
-
const { Fragment, useCallback, useState } = React;
|
|
27
|
+
const { Fragment, useCallback, useEffect, useState } = React;
|
|
26
28
|
|
|
27
29
|
const getAbbreviatedMonthTitle = (month: number) =>
|
|
28
30
|
`${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
|
|
29
31
|
|
|
30
32
|
export default function DatePicker({
|
|
31
33
|
className,
|
|
32
|
-
dateEnd,
|
|
33
|
-
dateStart,
|
|
34
|
+
dateEnd: _dateEnd,
|
|
35
|
+
dateStart: _dateStart,
|
|
36
|
+
isRange = _dateEnd != null,
|
|
34
37
|
isTwoUp,
|
|
35
38
|
initialMonth,
|
|
36
39
|
monthLimitFirst,
|
|
37
40
|
monthLimitLast,
|
|
41
|
+
onChange,
|
|
38
42
|
useMonthAbbreviations,
|
|
39
43
|
}: Props) {
|
|
44
|
+
const dateEndFromProps =
|
|
45
|
+
_dateEnd != null && typeof _dateEnd !== 'string'
|
|
46
|
+
? new Date(_dateEnd).toISOString()
|
|
47
|
+
: _dateEnd;
|
|
48
|
+
const dateStartFromProps =
|
|
49
|
+
_dateStart != null && typeof _dateStart !== 'string'
|
|
50
|
+
? new Date(_dateStart).toISOString()
|
|
51
|
+
: _dateStart;
|
|
52
|
+
const [dateEnd, setDateEnd] = useState<null | string>(dateEndFromProps || null);
|
|
53
|
+
const [dateStart, setDateStart] = useState<null | string>(dateStartFromProps || null);
|
|
54
|
+
|
|
55
|
+
useEffect(() => {
|
|
56
|
+
if (dateEndFromProps == null) return;
|
|
57
|
+
setDateEnd(dateEndFromProps);
|
|
58
|
+
}, [dateEndFromProps]);
|
|
59
|
+
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (dateStartFromProps == null) return;
|
|
62
|
+
setDateStart(dateStartFromProps);
|
|
63
|
+
}, [dateStartFromProps]);
|
|
64
|
+
|
|
40
65
|
if (initialMonth == null) {
|
|
41
66
|
// Use dateStart if it’s set
|
|
42
67
|
const initialDate = dateStart == null ? new Date() : new Date(dateStart);
|
|
@@ -45,14 +70,17 @@ export default function DatePicker({
|
|
|
45
70
|
initialMonth -= 1;
|
|
46
71
|
}
|
|
47
72
|
}
|
|
48
|
-
|
|
73
|
+
|
|
74
|
+
const [dateEndPreview, setDateEndPreview] = useState<null | string>(null);
|
|
75
|
+
const [month, setMonth] = useState<number>(initialMonth);
|
|
76
|
+
|
|
49
77
|
// In two-up view we see 1 more month, so monthLimitLast needs to be 1 less
|
|
50
78
|
if (isTwoUp && monthLimitLast != null) {
|
|
51
79
|
monthLimitLast -= 1;
|
|
52
80
|
}
|
|
53
81
|
|
|
54
82
|
const handleClickLeftArrow = useCallback(() => {
|
|
55
|
-
setMonth((existingMonth) =>
|
|
83
|
+
setMonth((existingMonth: number) =>
|
|
56
84
|
monthLimitFirst == null || existingMonth > monthLimitFirst
|
|
57
85
|
? existingMonth - 1
|
|
58
86
|
: existingMonth,
|
|
@@ -60,13 +88,32 @@ export default function DatePicker({
|
|
|
60
88
|
}, [monthLimitFirst]);
|
|
61
89
|
|
|
62
90
|
const handleClickRightArrow = useCallback(() => {
|
|
63
|
-
setMonth((existingMonth) =>
|
|
91
|
+
setMonth((existingMonth: number) =>
|
|
64
92
|
monthLimitLast == null || existingMonth < monthLimitLast
|
|
65
93
|
? existingMonth + 1
|
|
66
94
|
: existingMonth,
|
|
67
95
|
);
|
|
68
96
|
}, [monthLimitLast]);
|
|
69
97
|
|
|
98
|
+
const handleChange = useCallback(
|
|
99
|
+
(date: string) => {
|
|
100
|
+
// If we have a dateStart but no dateEnd, set dateEnd
|
|
101
|
+
if (isRange && dateStart != null && dateEnd == null) {
|
|
102
|
+
setDateEnd(date);
|
|
103
|
+
onChange({ dateEnd: date, dateStart });
|
|
104
|
+
} else {
|
|
105
|
+
setDateStart(date);
|
|
106
|
+
setDateEnd(null);
|
|
107
|
+
onChange({ dateStart: date });
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
[dateEnd, dateStart, isRange, onChange],
|
|
111
|
+
);
|
|
112
|
+
|
|
113
|
+
const handleChangeEndPreview = useCallback((date: string) => {
|
|
114
|
+
setDateEndPreview(date);
|
|
115
|
+
}, []);
|
|
116
|
+
|
|
70
117
|
return (
|
|
71
118
|
<Fragment>
|
|
72
119
|
<Style>{STYLES}</Style>
|
|
@@ -92,8 +139,12 @@ export default function DatePicker({
|
|
|
92
139
|
<div className={`${ROOT_CLASS_NAME}-month-container`}>
|
|
93
140
|
<MonthCalendar
|
|
94
141
|
dateEnd={dateEnd}
|
|
142
|
+
dateEndPreview={dateEndPreview}
|
|
95
143
|
dateStart={dateStart}
|
|
144
|
+
isRange={isRange}
|
|
96
145
|
month={month}
|
|
146
|
+
onChange={handleChange}
|
|
147
|
+
onChangeEndPreview={handleChangeEndPreview}
|
|
97
148
|
title={
|
|
98
149
|
useMonthAbbreviations
|
|
99
150
|
? getAbbreviatedMonthTitle(month)
|
|
@@ -103,8 +154,12 @@ export default function DatePicker({
|
|
|
103
154
|
{isTwoUp ? (
|
|
104
155
|
<MonthCalendar
|
|
105
156
|
dateEnd={dateEnd}
|
|
157
|
+
dateEndPreview={dateEndPreview}
|
|
106
158
|
dateStart={dateStart}
|
|
159
|
+
isRange={isRange}
|
|
107
160
|
month={month + 1}
|
|
161
|
+
onChange={handleChange}
|
|
162
|
+
onChangeEndPreview={handleChangeEndPreview}
|
|
108
163
|
title={
|
|
109
164
|
useMonthAbbreviations
|
|
110
165
|
? getAbbreviatedMonthTitle(month + 1)
|
package/src/MonthCalendar.tsx
CHANGED
|
@@ -7,14 +7,17 @@ import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
|
|
|
7
7
|
|
|
8
8
|
export type Props = {
|
|
9
9
|
className?: string;
|
|
10
|
-
dateStart?: Date | string | number;
|
|
11
|
-
dateEnd?: Date | string | number;
|
|
10
|
+
dateStart?: Date | string | number | null;
|
|
11
|
+
dateEnd?: Date | string | number | null;
|
|
12
|
+
dateEndPreview?: string | null;
|
|
13
|
+
isRange?: boolean;
|
|
12
14
|
month: number; // a unique numerical value representing the number of months since jan 1970
|
|
13
|
-
onChange?: (
|
|
15
|
+
onChange?: (date: string) => void;
|
|
16
|
+
onChangeEndPreview?: (date: string) => void;
|
|
14
17
|
title?: string;
|
|
15
18
|
};
|
|
16
19
|
|
|
17
|
-
type DateRangeDays = [number | null, number | null];
|
|
20
|
+
type DateRangeDays = [number | null, number | null, number | null];
|
|
18
21
|
|
|
19
22
|
const { Fragment, useCallback } = React;
|
|
20
23
|
|
|
@@ -23,9 +26,12 @@ const DAYS = Array(7).fill(null);
|
|
|
23
26
|
export default function MonthCalendar({
|
|
24
27
|
className,
|
|
25
28
|
dateEnd,
|
|
29
|
+
dateEndPreview,
|
|
26
30
|
dateStart,
|
|
31
|
+
isRange,
|
|
27
32
|
month,
|
|
28
33
|
onChange,
|
|
34
|
+
onChangeEndPreview,
|
|
29
35
|
title,
|
|
30
36
|
}: Props) {
|
|
31
37
|
const year = getYearFromMonth(month);
|
|
@@ -40,9 +46,10 @@ export default function MonthCalendar({
|
|
|
40
46
|
const spacesAfterLastDay = 7 - (lastDate.getDay() % 7); // prettier-ignore
|
|
41
47
|
const daySpaces = totalDays + firstDay + spacesAfterLastDay;
|
|
42
48
|
|
|
43
|
-
const [dateRangeStartDay, dateRangeEndDay]: DateRangeDays = [
|
|
49
|
+
const [dateRangeStartDay, dateRangeEndDay, dateRangeEndPreviewDay]: DateRangeDays = [
|
|
44
50
|
dateStart,
|
|
45
51
|
dateEnd,
|
|
52
|
+
dateEndPreview,
|
|
46
53
|
].reduce(
|
|
47
54
|
(acc: DateRangeDays, date, index) => {
|
|
48
55
|
if (date != null && !(date instanceof Date)) {
|
|
@@ -66,16 +73,27 @@ export default function MonthCalendar({
|
|
|
66
73
|
|
|
67
74
|
return acc;
|
|
68
75
|
},
|
|
69
|
-
[null, null],
|
|
76
|
+
[null, null, null],
|
|
70
77
|
);
|
|
71
78
|
|
|
72
79
|
const handleClickDay = useCallback(
|
|
73
80
|
(event: React.SyntheticEvent<HTMLElement>) => {
|
|
74
|
-
|
|
81
|
+
const { date } = event.currentTarget.dataset;
|
|
82
|
+
if (date && onChange) onChange(date);
|
|
75
83
|
},
|
|
76
84
|
[onChange],
|
|
77
85
|
);
|
|
78
86
|
|
|
87
|
+
const handleMouseEnterDay = useCallback(
|
|
88
|
+
(event: React.SyntheticEvent<HTMLElement>) => {
|
|
89
|
+
if (isRange && onChangeEndPreview) {
|
|
90
|
+
const { date } = event.currentTarget.dataset;
|
|
91
|
+
if (date) onChangeEndPreview(date);
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
[isRange, onChangeEndPreview],
|
|
95
|
+
);
|
|
96
|
+
|
|
79
97
|
return (
|
|
80
98
|
<Fragment>
|
|
81
99
|
<Style>{STYLES}</Style>
|
|
@@ -123,11 +141,14 @@ export default function MonthCalendar({
|
|
|
123
141
|
dateRangeStartDay != null &&
|
|
124
142
|
dayNumber > dateRangeStartDay;
|
|
125
143
|
const isBeforeDateRangeEnd =
|
|
126
|
-
dateRangeEndDay
|
|
127
|
-
|
|
144
|
+
(dateRangeEndDay == null &&
|
|
145
|
+
dateRangeEndPreviewDay != null &&
|
|
146
|
+
dayNumber < dateRangeEndPreviewDay) ||
|
|
147
|
+
(dateRangeEndDay != null &&
|
|
148
|
+
dayNumber < dateRangeEndDay);
|
|
128
149
|
|
|
129
150
|
return (
|
|
130
|
-
<
|
|
151
|
+
<button
|
|
131
152
|
className={clsx(
|
|
132
153
|
`${ROOT_CLASS_NAME}-month-day-item`,
|
|
133
154
|
{
|
|
@@ -144,15 +165,22 @@ export default function MonthCalendar({
|
|
|
144
165
|
dayNumber === dateRangeStartDay,
|
|
145
166
|
},
|
|
146
167
|
)}
|
|
168
|
+
data-date={new Date(
|
|
169
|
+
year,
|
|
170
|
+
monthWithinYear,
|
|
171
|
+
dayNumber,
|
|
172
|
+
).toISOString()}
|
|
147
173
|
key={`MonthDayItem-${dayNumber}`}
|
|
148
174
|
onClick={handleClickDay}
|
|
175
|
+
onMouseEnter={handleMouseEnterDay}
|
|
176
|
+
type="button"
|
|
149
177
|
>
|
|
150
178
|
{isEmpty ? null : (
|
|
151
179
|
<span className="month-day-item-text">
|
|
152
180
|
{dayNumber}
|
|
153
181
|
</span>
|
|
154
182
|
)}
|
|
155
|
-
</
|
|
183
|
+
</button>
|
|
156
184
|
);
|
|
157
185
|
})}
|
|
158
186
|
</div>
|
package/src/index.ts
CHANGED