@acusti/date-picker 0.4.1 → 0.5.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 +1 -1
- package/dist/DatePicker.js +14 -4
- package/dist/DatePicker.js.flow +1 -1
- package/dist/DatePicker.js.map +1 -1
- package/package.json +1 -1
- package/src/DatePicker.tsx +16 -5
package/dist/DatePicker.d.ts
CHANGED
package/dist/DatePicker.js
CHANGED
|
@@ -5,7 +5,7 @@ import * as React from 'react';
|
|
|
5
5
|
import MonthCalendar from './MonthCalendar.js';
|
|
6
6
|
import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
|
|
7
7
|
import { getMonthAbbreviationFromMonth, getMonthFromDate, getYearFromMonth, } from './utils.js';
|
|
8
|
-
const { Fragment, useCallback, useEffect, useState } = React;
|
|
8
|
+
const { Fragment, useCallback, useEffect, useRef, useState } = React;
|
|
9
9
|
const getAbbreviatedMonthTitle = (month) => `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
|
|
10
10
|
export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _dateStart, isRange = _dateEnd != null, isTwoUp, initialMonth, monthLimitFirst, monthLimitLast, onChange, useMonthAbbreviations, }) {
|
|
11
11
|
const dateEndFromProps = _dateEnd != null && typeof _dateEnd !== 'string'
|
|
@@ -16,6 +16,7 @@ export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _d
|
|
|
16
16
|
: _dateStart;
|
|
17
17
|
const [dateEnd, setDateEnd] = useState(dateEndFromProps !== null && dateEndFromProps !== void 0 ? dateEndFromProps : null);
|
|
18
18
|
const [dateStart, setDateStart] = useState(dateStartFromProps !== null && dateStartFromProps !== void 0 ? dateStartFromProps : null);
|
|
19
|
+
const updatingDateEndRef = useRef(false);
|
|
19
20
|
useEffect(() => {
|
|
20
21
|
if (dateEndFromProps == null)
|
|
21
22
|
return;
|
|
@@ -51,8 +52,10 @@ export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _d
|
|
|
51
52
|
: existingMonth);
|
|
52
53
|
}, [monthLimitLast]);
|
|
53
54
|
const handleChange = useCallback((date) => {
|
|
54
|
-
// If we have a dateStart but no dateEnd, set dateEnd
|
|
55
|
-
if (isRange &&
|
|
55
|
+
// If we last set the dateStart or we have a dateStart but no dateEnd, set dateEnd
|
|
56
|
+
if (isRange &&
|
|
57
|
+
dateStart != null &&
|
|
58
|
+
(updatingDateEndRef.current || dateEnd == null)) {
|
|
56
59
|
// Ensure that dateEnd is after dateStart; if not, swap them
|
|
57
60
|
if (date < dateStart) {
|
|
58
61
|
setDateStart(date);
|
|
@@ -63,11 +66,18 @@ export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _d
|
|
|
63
66
|
setDateEnd(date);
|
|
64
67
|
onChange({ dateEnd: date, dateStart });
|
|
65
68
|
}
|
|
69
|
+
updatingDateEndRef.current = false;
|
|
66
70
|
}
|
|
67
71
|
else {
|
|
68
72
|
setDateStart(date);
|
|
69
73
|
setDateEnd(null);
|
|
70
|
-
|
|
74
|
+
if (isRange) {
|
|
75
|
+
onChange({ dateEnd: null, dateStart: date });
|
|
76
|
+
updatingDateEndRef.current = true;
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
onChange({ dateStart: date });
|
|
80
|
+
}
|
|
71
81
|
}
|
|
72
82
|
}, [dateEnd, dateStart, isRange, onChange]);
|
|
73
83
|
const handleChangeEndPreview = useCallback((date) => {
|
package/dist/DatePicker.js.flow
CHANGED
package/dist/DatePicker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.tsx"],"names":[],"mappings":"AAAA,mGAAmG;AACnG,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACH,6BAA6B,EAC7B,gBAAgB,EAChB,gBAAgB,GACnB,MAAM,YAAY,CAAC;AAepB,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/DatePicker.tsx
CHANGED
|
@@ -20,11 +20,11 @@ export type Props = {
|
|
|
20
20
|
isTwoUp?: boolean;
|
|
21
21
|
monthLimitFirst?: number;
|
|
22
22
|
monthLimitLast?: number;
|
|
23
|
-
onChange: (payload: { dateEnd?: string; dateStart: string }) => void;
|
|
23
|
+
onChange: (payload: { dateEnd?: string | null; dateStart: string }) => void;
|
|
24
24
|
useMonthAbbreviations?: boolean;
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
-
const { Fragment, useCallback, useEffect, useState } = React;
|
|
27
|
+
const { Fragment, useCallback, useEffect, useRef, useState } = React;
|
|
28
28
|
|
|
29
29
|
const getAbbreviatedMonthTitle = (month: number) =>
|
|
30
30
|
`${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
|
|
@@ -51,6 +51,7 @@ export default function DatePicker({
|
|
|
51
51
|
: _dateStart;
|
|
52
52
|
const [dateEnd, setDateEnd] = useState<null | string>(dateEndFromProps ?? null);
|
|
53
53
|
const [dateStart, setDateStart] = useState<null | string>(dateStartFromProps ?? null);
|
|
54
|
+
const updatingDateEndRef = useRef(false);
|
|
54
55
|
|
|
55
56
|
useEffect(() => {
|
|
56
57
|
if (dateEndFromProps == null) return;
|
|
@@ -97,8 +98,12 @@ export default function DatePicker({
|
|
|
97
98
|
|
|
98
99
|
const handleChange = useCallback(
|
|
99
100
|
(date: string) => {
|
|
100
|
-
// If we have a dateStart but no dateEnd, set dateEnd
|
|
101
|
-
if (
|
|
101
|
+
// If we last set the dateStart or we have a dateStart but no dateEnd, set dateEnd
|
|
102
|
+
if (
|
|
103
|
+
isRange &&
|
|
104
|
+
dateStart != null &&
|
|
105
|
+
(updatingDateEndRef.current || dateEnd == null)
|
|
106
|
+
) {
|
|
102
107
|
// Ensure that dateEnd is after dateStart; if not, swap them
|
|
103
108
|
if (date < dateStart) {
|
|
104
109
|
setDateStart(date);
|
|
@@ -108,10 +113,16 @@ export default function DatePicker({
|
|
|
108
113
|
setDateEnd(date);
|
|
109
114
|
onChange({ dateEnd: date, dateStart });
|
|
110
115
|
}
|
|
116
|
+
updatingDateEndRef.current = false;
|
|
111
117
|
} else {
|
|
112
118
|
setDateStart(date);
|
|
113
119
|
setDateEnd(null);
|
|
114
|
-
|
|
120
|
+
if (isRange) {
|
|
121
|
+
onChange({ dateEnd: null, dateStart: date });
|
|
122
|
+
updatingDateEndRef.current = true;
|
|
123
|
+
} else {
|
|
124
|
+
onChange({ dateStart: date });
|
|
125
|
+
}
|
|
115
126
|
}
|
|
116
127
|
},
|
|
117
128
|
[dateEnd, dateStart, isRange, onChange],
|