@navikt/ds-react 1.3.20 → 1.3.22
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/_docs.json +57 -0
- package/cjs/button/Button.js +1 -0
- package/cjs/date/datepicker/DatePicker.js +3 -3
- package/cjs/date/datepicker/DatePickerStandalone.js +3 -3
- package/cjs/date/datepicker/DayButton.js +5 -2
- package/cjs/date/datepicker/caption/DropdownCaption.js +5 -3
- package/cjs/date/hooks/useDatepicker.js +22 -16
- package/cjs/date/hooks/useMonthPicker.js +14 -12
- package/cjs/date/hooks/useRangeDatepicker.js +36 -24
- package/cjs/date/hooks/useSharedMonthContext.js +6 -2
- package/cjs/date/monthpicker/MonthButton.js +14 -10
- package/cjs/date/monthpicker/MonthCaption.js +9 -6
- package/cjs/date/monthpicker/MonthSelector.js +11 -8
- package/cjs/date/utils/check-dates.js +6 -2
- package/cjs/date/utils/dates-disabled.js +6 -3
- package/cjs/date/utils/format-date.js +5 -2
- package/cjs/date/utils/get-dates.js +20 -13
- package/cjs/date/utils/get-initial-year.js +5 -2
- package/cjs/date/utils/is-match.js +20 -14
- package/cjs/date/utils/navigation.js +24 -21
- package/cjs/date/utils/parse-date.js +5 -2
- package/esm/button/Button.js +1 -0
- package/esm/button/Button.js.map +1 -1
- package/esm/date/datepicker/DatePicker.js +1 -1
- package/esm/date/datepicker/DatePicker.js.map +1 -1
- package/esm/date/datepicker/DatePickerStandalone.js +1 -1
- package/esm/date/datepicker/DatePickerStandalone.js.map +1 -1
- package/esm/date/datepicker/DayButton.js +1 -1
- package/esm/date/datepicker/DayButton.js.map +1 -1
- package/esm/date/datepicker/caption/DropdownCaption.js +3 -1
- package/esm/date/datepicker/caption/DropdownCaption.js.map +1 -1
- package/esm/date/hooks/useDatepicker.d.ts +4 -0
- package/esm/date/hooks/useDatepicker.js +16 -13
- package/esm/date/hooks/useDatepicker.js.map +1 -1
- package/esm/date/hooks/useMonthPicker.d.ts +4 -0
- package/esm/date/hooks/useMonthPicker.js +14 -12
- package/esm/date/hooks/useMonthPicker.js.map +1 -1
- package/esm/date/hooks/useRangeDatepicker.d.ts +5 -1
- package/esm/date/hooks/useRangeDatepicker.js +26 -17
- package/esm/date/hooks/useRangeDatepicker.js.map +1 -1
- package/esm/date/hooks/useSharedMonthContext.js +2 -1
- package/esm/date/hooks/useSharedMonthContext.js.map +1 -1
- package/esm/date/monthpicker/MonthButton.js +5 -1
- package/esm/date/monthpicker/MonthButton.js.map +1 -1
- package/esm/date/monthpicker/MonthCaption.js +4 -1
- package/esm/date/monthpicker/MonthCaption.js.map +1 -1
- package/esm/date/monthpicker/MonthSelector.js +4 -1
- package/esm/date/monthpicker/MonthSelector.js.map +1 -1
- package/esm/date/utils/check-dates.js +2 -1
- package/esm/date/utils/check-dates.js.map +1 -1
- package/esm/date/utils/dates-disabled.js +1 -1
- package/esm/date/utils/dates-disabled.js.map +1 -1
- package/esm/date/utils/format-date.js +1 -1
- package/esm/date/utils/format-date.js.map +1 -1
- package/esm/date/utils/get-dates.js +5 -1
- package/esm/date/utils/get-dates.js.map +1 -1
- package/esm/date/utils/get-initial-year.js +1 -1
- package/esm/date/utils/get-initial-year.js.map +1 -1
- package/esm/date/utils/is-match.js +4 -1
- package/esm/date/utils/is-match.js.map +1 -1
- package/esm/date/utils/navigation.js +1 -1
- package/esm/date/utils/navigation.js.map +1 -1
- package/esm/date/utils/parse-date.js +1 -1
- package/esm/date/utils/parse-date.js.map +1 -1
- package/package.json +3 -4
- package/src/button/Button.tsx +1 -0
- package/src/button/button.stories.tsx +20 -1
- package/src/date/datepicker/DatePicker.tsx +1 -1
- package/src/date/datepicker/DatePickerStandalone.tsx +1 -1
- package/src/date/datepicker/DayButton.tsx +1 -1
- package/src/date/datepicker/caption/DropdownCaption.tsx +3 -1
- package/src/date/datepicker/datepicker.stories.tsx +32 -10
- package/src/date/hooks/useDatepicker.tsx +24 -13
- package/src/date/hooks/useMonthPicker.tsx +21 -12
- package/src/date/hooks/useRangeDatepicker.tsx +45 -19
- package/src/date/hooks/useSharedMonthContext.tsx +2 -1
- package/src/date/monthpicker/MonthButton.tsx +5 -7
- package/src/date/monthpicker/MonthCaption.tsx +4 -1
- package/src/date/monthpicker/MonthSelector.tsx +4 -1
- package/src/date/monthpicker/monthpicker.stories.tsx +1 -2
- package/src/date/utils/__tests__/get-initial-year.test.ts +1 -1
- package/src/date/utils/__tests__/parse-dates.test.ts +2 -1
- package/src/date/utils/check-dates.ts +2 -1
- package/src/date/utils/dates-disabled.ts +1 -1
- package/src/date/utils/format-date.ts +1 -1
- package/src/date/utils/get-dates.ts +5 -7
- package/src/date/utils/get-initial-year.ts +1 -1
- package/src/date/utils/is-match.ts +5 -6
- package/src/date/utils/navigation.ts +1 -1
- package/src/date/utils/parse-date.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-initial-year.js","sourceRoot":"","sources":["../../../src/date/utils/get-initial-year.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"get-initial-year.js","sourceRoot":"","sources":["../../../src/date/utils/get-initial-year.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAG/C;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,OAAuC;IACpE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAE1D,IAAI,YAAY,GAAG,KAAK,IAAI,YAAY,IAAI,IAAI,IAAI,EAAE,CAAC;IAEvD,MAAM,OAAO,GAAG,MAAM,IAAI,MAAM,CAAC,WAAW,EAAE,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC;IAE5E,MAAM,QAAQ,GACZ,QAAQ,IAAI,QAAQ,CAAC,WAAW,EAAE,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC;IAElE,IAAI,OAAO,EAAE;QACX,YAAY,GAAG,MAAM,CAAC;KACvB;IACD,IAAI,QAAQ,EAAE;QACZ,YAAY,GAAG,QAAQ,CAAC;KACzB;IAED,OAAO,WAAW,CAAC,YAAY,CAAC,CAAC;AACnC,CAAC"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import isSameDay from "date-fns/isSameDay";
|
|
2
|
+
import isDate from "date-fns/isDate";
|
|
3
|
+
import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
|
|
4
|
+
import isSameMonth from "date-fns/isSameMonth";
|
|
2
5
|
import { isDateAfterType, isDateBeforeType, isDateRange, } from "react-day-picker";
|
|
3
6
|
function isDateType(value) {
|
|
4
7
|
return isDate(value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-match.js","sourceRoot":"","sources":["../../../src/date/utils/is-match.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"is-match.js","sourceRoot":"","sources":["../../../src/date/utils/is-match.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,wBAAwB,MAAM,mCAAmC,CAAC;AACzE,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAIL,eAAe,EACf,gBAAgB,EAChB,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAU1B,SAAS,UAAU,CAAC,KAAc;IAChC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC;AAED,SAAS,cAAc,CAAC,KAAc;IACpC,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AACrD,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,GAAS,EAAE,QAAmB;IACpD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAgB,EAAE,EAAE;QACxC,IAAI,UAAU,CAAC,OAAO,CAAC,EAAE;YACvB,OAAO,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;SAClC;QACD,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAC3B,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE;gBACjC,OAAO,WAAW,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;SACJ;QACD,IAAI,WAAW,CAAC,OAAO,CAAC,EAAE;YACxB,OAAO,aAAa,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;SACpC;QACD,IAAI,eAAe,CAAC,OAAO,CAAC,EAAE;YAC5B,OAAO,CACL,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC;gBAC/B,wBAAwB,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CACjD,CAAC;SACH;QACD,IAAI,gBAAgB,CAAC,OAAO,CAAC,EAAE;YAC7B,OAAO,CACL,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC;gBAChC,wBAAwB,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,CAClD,CAAC;SACH;QACD,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;YACjC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;SACrB;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,IAAU,EAAE,KAAgB;IACxD,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC;IACzB,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IACD,IAAI,CAAC,EAAE,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IACD,IAAI,CAAC,EAAE,EAAE;QACP,OAAO,KAAK,CAAC;KACd;IACD,MAAM,cAAc,GAAG,wBAAwB,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9D,IAAI,EAAE,IAAI,cAAc,EAAE;QACxB,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;KACzB;IAED,IAAI,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,WAAW,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE;QACpD,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,wBAAwB,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC;QACzC,wBAAwB,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CACxC,CAAC;AACJ,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import setYear from "date-fns/setYear";
|
|
2
2
|
import { isMatch } from "./is-match";
|
|
3
3
|
export const nextEnabled = (months, key, disabled, currentMonth, setYearState, yearState, dropdownCaption, fromDate, toDate) => {
|
|
4
4
|
const currentIndex = currentMonth.getMonth();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../src/date/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../src/date/utils/navigation.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parse-date.js","sourceRoot":"","sources":["../../../src/date/utils/parse-date.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"parse-date.js","sourceRoot":"","sources":["../../../src/date/utils/parse-date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAEhC,MAAM,CAAC,MAAM,6BAA6B,GAAG,YAAY,CAAC;AAE1D,MAAM,CAAC,MAAM,8BAA8B,GAAG,SAAS,CAAC;AAExD,MAAM,0BAA0B,GAAG;IACjC,QAAQ;IACR,QAAQ;IACR,UAAU;IACV,UAAU;IACV,UAAU;IACV,6BAA6B;IAC7B,UAAU;IACV,YAAY;IACZ,YAAY;IACZ,UAAU;CACX,CAAC;AAEF,MAAM,2BAA2B,GAAG;IAClC,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,SAAS;IACT,SAAS;IACT,8BAA8B;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAY,EACZ,KAAW,EACX,MAAc,EACd,IAAsB,EACtB,EAAE;IACF,IAAI,MAAM,CAAC;IACX,MAAM,eAAe,GACnB,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,2BAA2B,CAAC;IAC7E,KAAK,MAAM,MAAM,IAAI,eAAe,EAAE;QACpC,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAChD,IAAI,WAAW,CAAC,MAAM,CAAC,EAAE;YACvB,OAAO,MAAM,CAAC;SACf;KACF;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.22",
|
|
4
4
|
"description": "NAV designsystem react components",
|
|
5
5
|
"author": "NAV Designsystem team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@floating-ui/react-dom-interactions": "0.9.2",
|
|
39
|
-
"@navikt/ds-icons": "^1.3.
|
|
39
|
+
"@navikt/ds-icons": "^1.3.22",
|
|
40
40
|
"@radix-ui/react-tabs": "1.0.0",
|
|
41
41
|
"@radix-ui/react-toggle-group": "1.0.0",
|
|
42
42
|
"clsx": "^1.2.1",
|
|
@@ -58,7 +58,6 @@
|
|
|
58
58
|
"faker": "5.5.3",
|
|
59
59
|
"fast-glob": "3.2.11",
|
|
60
60
|
"jest": "^27.5.0",
|
|
61
|
-
"react-docgen-typescript": "2.2.2",
|
|
62
61
|
"react-dom": "^18.0.0",
|
|
63
62
|
"react-router-dom": "^6.3.0",
|
|
64
63
|
"rimraf": "3.0.2",
|
|
@@ -76,5 +75,5 @@
|
|
|
76
75
|
"optional": true
|
|
77
76
|
}
|
|
78
77
|
},
|
|
79
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "ba3666a0e6b287102f3fada66e1a32f2afb2744b"
|
|
80
79
|
}
|
package/src/button/Button.tsx
CHANGED
|
@@ -6,7 +6,7 @@ export default {
|
|
|
6
6
|
title: "ds-react/Button",
|
|
7
7
|
component: Button,
|
|
8
8
|
parameters: {
|
|
9
|
-
chromatic: { delay:
|
|
9
|
+
chromatic: { delay: 600 },
|
|
10
10
|
},
|
|
11
11
|
argTypes: {
|
|
12
12
|
variant: {
|
|
@@ -197,3 +197,22 @@ export const IconWText = () => (
|
|
|
197
197
|
</div>
|
|
198
198
|
</div>
|
|
199
199
|
);
|
|
200
|
+
|
|
201
|
+
export const Disabled = () => (
|
|
202
|
+
<div className="colgap">
|
|
203
|
+
<div className="rowgap">
|
|
204
|
+
{variants.map((variant) => (
|
|
205
|
+
<Button key={variant} variant={variant} disabled>
|
|
206
|
+
{varSwitch[variant]}
|
|
207
|
+
</Button>
|
|
208
|
+
))}
|
|
209
|
+
</div>
|
|
210
|
+
<div className="rowgap">
|
|
211
|
+
{variants.map((variant) => (
|
|
212
|
+
<Button key={variant} variant={variant} disabled as="a" href="#">
|
|
213
|
+
{varSwitch[variant]}
|
|
214
|
+
</Button>
|
|
215
|
+
))}
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
);
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { Left, Right } from "@navikt/ds-icons";
|
|
2
|
-
import
|
|
2
|
+
import setMonth from "date-fns/setMonth";
|
|
3
|
+
import setYear from "date-fns/setYear";
|
|
4
|
+
import startOfMonth from "date-fns/startOfMonth";
|
|
3
5
|
import React from "react";
|
|
4
6
|
import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
|
|
5
7
|
import { Button, Select } from "../../..";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import isSaturday from "date-fns/isSaturday";
|
|
2
2
|
import React, { useId, useState } from "react";
|
|
3
3
|
import { UNSAFE_useDatepicker, UNSAFE_useRangeDatepicker } from "..";
|
|
4
4
|
import { Button } from "../..";
|
|
@@ -133,14 +133,21 @@ export const DropdownCaption = () => (
|
|
|
133
133
|
);
|
|
134
134
|
|
|
135
135
|
export const DisabledDays = () => (
|
|
136
|
-
<DatePicker.Standalone
|
|
136
|
+
<DatePicker.Standalone
|
|
137
|
+
disabled={disabledDays}
|
|
138
|
+
disableWeekends
|
|
139
|
+
today={new Date("2006-07-01")}
|
|
140
|
+
/>
|
|
137
141
|
);
|
|
138
142
|
|
|
139
|
-
export const ShowWeekNumber = () =>
|
|
143
|
+
export const ShowWeekNumber = () => (
|
|
144
|
+
<DatePicker.Standalone showWeekNumber today={new Date("2006-07-01")} />
|
|
145
|
+
);
|
|
140
146
|
|
|
141
147
|
export const UseDatepicker = () => {
|
|
142
148
|
const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
|
|
143
149
|
fromDate: new Date("Aug 23 2019"),
|
|
150
|
+
onDateChange: console.log,
|
|
144
151
|
locale: "en",
|
|
145
152
|
});
|
|
146
153
|
|
|
@@ -157,13 +164,18 @@ export const UseRangedDatepicker = () => {
|
|
|
157
164
|
const { datepickerProps, fromInputProps, toInputProps } =
|
|
158
165
|
UNSAFE_useRangeDatepicker({
|
|
159
166
|
fromDate: new Date("Aug 23 2019"),
|
|
167
|
+
onRangeChange: console.log,
|
|
160
168
|
});
|
|
161
169
|
|
|
162
170
|
return (
|
|
163
171
|
<div style={{ display: "flex", gap: "1rem" }}>
|
|
164
172
|
<DatePicker {...datepickerProps}>
|
|
165
173
|
<div style={{ display: "flex", gap: "1rem" }}>
|
|
166
|
-
<DatePicker.Input
|
|
174
|
+
<DatePicker.Input
|
|
175
|
+
{...fromInputProps}
|
|
176
|
+
label="Fra"
|
|
177
|
+
onFocus={(e) => e.preventDefault()}
|
|
178
|
+
/>
|
|
167
179
|
<DatePicker.Input {...toInputProps} label="Til" />
|
|
168
180
|
</div>
|
|
169
181
|
</DatePicker>
|
|
@@ -171,15 +183,25 @@ export const UseRangedDatepicker = () => {
|
|
|
171
183
|
);
|
|
172
184
|
};
|
|
173
185
|
|
|
174
|
-
export const NB = () =>
|
|
175
|
-
|
|
176
|
-
|
|
186
|
+
export const NB = () => (
|
|
187
|
+
<DatePicker.Standalone locale="nb" today={new Date("2006-07-01")} />
|
|
188
|
+
);
|
|
189
|
+
export const NN = () => (
|
|
190
|
+
<DatePicker.Standalone locale="nn" today={new Date("2006-07-01")} />
|
|
191
|
+
);
|
|
192
|
+
export const EN = () => (
|
|
193
|
+
<DatePicker.Standalone locale="en" today={new Date("2006-07-01")} />
|
|
194
|
+
);
|
|
177
195
|
|
|
178
|
-
export const Standalone = () =>
|
|
196
|
+
export const Standalone = () => (
|
|
197
|
+
<DatePicker.Standalone today={new Date("2006-07-01")} />
|
|
198
|
+
);
|
|
179
199
|
|
|
180
|
-
export const StandaloneRange = () =>
|
|
200
|
+
export const StandaloneRange = () => (
|
|
201
|
+
<DatePicker.Standalone mode="range" today={new Date("2006-07-01")} />
|
|
202
|
+
);
|
|
181
203
|
export const StandaloneMultiple = () => (
|
|
182
|
-
<DatePicker.Standalone mode="multiple" />
|
|
204
|
+
<DatePicker.Standalone mode="multiple" today={new Date("2006-07-01")} />
|
|
183
205
|
);
|
|
184
206
|
|
|
185
207
|
export const UserControlled = () => {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
|
|
2
|
+
import isWeekend from "date-fns/isWeekend";
|
|
2
3
|
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
3
4
|
import { DayClickEventHandler, isMatch } from "react-day-picker";
|
|
4
5
|
import { DateInputProps } from "../DateInput";
|
|
@@ -31,6 +32,10 @@ export interface UseDatepickerOptions
|
|
|
31
32
|
* Make selection of Date required
|
|
32
33
|
*/
|
|
33
34
|
required?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Callback for changed state
|
|
37
|
+
*/
|
|
38
|
+
onDateChange?: (val?: Date) => void;
|
|
34
39
|
}
|
|
35
40
|
|
|
36
41
|
interface UseDatepickerValue {
|
|
@@ -63,12 +68,13 @@ export const useDatepicker = (
|
|
|
63
68
|
const {
|
|
64
69
|
locale: _locale = "nb",
|
|
65
70
|
required,
|
|
66
|
-
defaultSelected,
|
|
71
|
+
defaultSelected: _defaultSelected,
|
|
67
72
|
today = new Date(),
|
|
68
73
|
fromDate,
|
|
69
74
|
toDate,
|
|
70
75
|
disabled,
|
|
71
76
|
disableWeekends,
|
|
77
|
+
onDateChange,
|
|
72
78
|
} = opt;
|
|
73
79
|
|
|
74
80
|
const locale = getLocaleFromString(_locale);
|
|
@@ -76,6 +82,8 @@ export const useDatepicker = (
|
|
|
76
82
|
const inputRef = useRef<HTMLDivElement>(null);
|
|
77
83
|
const daypickerRef = useRef<HTMLDivElement>(null);
|
|
78
84
|
|
|
85
|
+
const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
|
|
86
|
+
|
|
79
87
|
// Initialize states
|
|
80
88
|
const [month, setMonth] = useState(defaultSelected ?? today);
|
|
81
89
|
const [selectedDay, setSelectedDay] = useState(defaultSelected);
|
|
@@ -86,6 +94,11 @@ export const useDatepicker = (
|
|
|
86
94
|
: "";
|
|
87
95
|
const [inputValue, setInputValue] = useState(defaultInputValue);
|
|
88
96
|
|
|
97
|
+
const getSelectedDate = (date?: Date) => {
|
|
98
|
+
onDateChange?.(date);
|
|
99
|
+
return date;
|
|
100
|
+
};
|
|
101
|
+
|
|
89
102
|
const handleFocusIn = useCallback(
|
|
90
103
|
(e) => {
|
|
91
104
|
![
|
|
@@ -109,23 +122,21 @@ export const useDatepicker = (
|
|
|
109
122
|
}, [handleFocusIn]);
|
|
110
123
|
|
|
111
124
|
const reset = () => {
|
|
112
|
-
setSelectedDay(defaultSelected);
|
|
125
|
+
setSelectedDay(getSelectedDate(defaultSelected));
|
|
113
126
|
setMonth(defaultSelected ?? today);
|
|
114
127
|
setInputValue(defaultInputValue ?? "");
|
|
128
|
+
setDefaultSelected(_defaultSelected);
|
|
115
129
|
};
|
|
116
130
|
|
|
117
131
|
const setSelected = (date: Date | undefined) => {
|
|
118
|
-
setSelectedDay(date);
|
|
132
|
+
setSelectedDay(getSelectedDate(date));
|
|
119
133
|
setMonth(date ?? today);
|
|
120
134
|
setInputValue(date ? formatDateForInput(date, locale, "date") : "");
|
|
121
135
|
};
|
|
122
136
|
|
|
123
137
|
const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
|
|
124
138
|
!open && setOpen(true);
|
|
125
|
-
|
|
126
|
-
reset();
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
139
|
+
|
|
129
140
|
let day = parseDate(e.target.value, today, locale, "date");
|
|
130
141
|
if (isValidDate(day)) {
|
|
131
142
|
setMonth(day);
|
|
@@ -146,11 +157,11 @@ export const useDatepicker = (
|
|
|
146
157
|
}
|
|
147
158
|
|
|
148
159
|
if (!required && selected) {
|
|
149
|
-
setSelectedDay(undefined);
|
|
160
|
+
setSelectedDay(getSelectedDate(undefined));
|
|
150
161
|
setInputValue("");
|
|
151
162
|
return;
|
|
152
163
|
}
|
|
153
|
-
setSelectedDay(day);
|
|
164
|
+
setSelectedDay(getSelectedDate(day));
|
|
154
165
|
setMonth(day);
|
|
155
166
|
setInputValue(day ? formatDateForInput(day, locale, "date") : "");
|
|
156
167
|
};
|
|
@@ -167,17 +178,17 @@ export const useDatepicker = (
|
|
|
167
178
|
(disabled &&
|
|
168
179
|
((disableWeekends && isWeekend(day)) || isMatch(day, disabled)))
|
|
169
180
|
) {
|
|
170
|
-
setSelectedDay(undefined);
|
|
181
|
+
setSelectedDay(getSelectedDate(undefined));
|
|
171
182
|
return;
|
|
172
183
|
}
|
|
173
184
|
|
|
174
185
|
const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
|
|
175
186
|
const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
|
|
176
187
|
if (isBefore || isAfter) {
|
|
177
|
-
setSelectedDay(undefined);
|
|
188
|
+
setSelectedDay(getSelectedDate(undefined));
|
|
178
189
|
return;
|
|
179
190
|
}
|
|
180
|
-
setSelectedDay(day);
|
|
191
|
+
setSelectedDay(getSelectedDate(day));
|
|
181
192
|
setMonth(day);
|
|
182
193
|
};
|
|
183
194
|
|
|
@@ -18,6 +18,10 @@ export interface UseMonthPickerOptions
|
|
|
18
18
|
* Make Date-selection required
|
|
19
19
|
*/
|
|
20
20
|
required?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Callback for month-change
|
|
23
|
+
*/
|
|
24
|
+
onMonthChange?: (date?: Date) => void;
|
|
21
25
|
}
|
|
22
26
|
|
|
23
27
|
interface UseMonthPickerValue {
|
|
@@ -49,13 +53,16 @@ export const useMonthpicker = (
|
|
|
49
53
|
): UseMonthPickerValue => {
|
|
50
54
|
const {
|
|
51
55
|
locale: _locale = "nb",
|
|
52
|
-
defaultSelected,
|
|
56
|
+
defaultSelected: _defaultSelected,
|
|
53
57
|
fromDate,
|
|
54
58
|
toDate,
|
|
55
59
|
disabled,
|
|
56
60
|
required,
|
|
61
|
+
onMonthChange,
|
|
57
62
|
} = opt;
|
|
58
63
|
|
|
64
|
+
const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
|
|
65
|
+
|
|
59
66
|
const today = new Date();
|
|
60
67
|
const locale = getLocaleFromString(_locale);
|
|
61
68
|
|
|
@@ -73,6 +80,11 @@ export const useMonthpicker = (
|
|
|
73
80
|
|
|
74
81
|
const [inputValue, setInputValue] = useState(defaultInputValue);
|
|
75
82
|
|
|
83
|
+
const getMonth = (date?: Date) => {
|
|
84
|
+
onMonthChange?.(date);
|
|
85
|
+
return date;
|
|
86
|
+
};
|
|
87
|
+
|
|
76
88
|
const handleFocusIn = useCallback(
|
|
77
89
|
(e) =>
|
|
78
90
|
![
|
|
@@ -95,23 +107,20 @@ export const useMonthpicker = (
|
|
|
95
107
|
}, [handleFocusIn]);
|
|
96
108
|
|
|
97
109
|
const reset = () => {
|
|
98
|
-
setSelectedMonth(defaultSelected);
|
|
110
|
+
setSelectedMonth(getMonth(defaultSelected));
|
|
99
111
|
setYear(defaultSelected ?? today);
|
|
100
112
|
setInputValue(defaultInputValue ?? "");
|
|
113
|
+
setDefaultSelected(_defaultSelected);
|
|
101
114
|
};
|
|
102
115
|
|
|
103
116
|
const setSelected = (date: Date | undefined) => {
|
|
104
|
-
setSelectedMonth(date);
|
|
117
|
+
setSelectedMonth(getMonth(date));
|
|
105
118
|
setYear(date ?? today);
|
|
106
119
|
setInputValue(date ? formatDateForInput(date, locale, "month") : "");
|
|
107
120
|
};
|
|
108
121
|
|
|
109
122
|
const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
|
|
110
123
|
!open && setOpen(true);
|
|
111
|
-
if (!e.target.value) {
|
|
112
|
-
reset();
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
124
|
let day = parseDate(e.target.value, today, locale, "month");
|
|
116
125
|
if (isValidDate(day)) {
|
|
117
126
|
setYear(day);
|
|
@@ -132,11 +141,11 @@ export const useMonthpicker = (
|
|
|
132
141
|
}
|
|
133
142
|
|
|
134
143
|
if (!required && !month) {
|
|
135
|
-
setSelectedMonth(undefined);
|
|
144
|
+
setSelectedMonth(getMonth(undefined));
|
|
136
145
|
setInputValue("");
|
|
137
146
|
return;
|
|
138
147
|
}
|
|
139
|
-
setSelectedMonth(month);
|
|
148
|
+
setSelectedMonth(getMonth(month));
|
|
140
149
|
setInputValue(month ? formatDateForInput(month, locale, "month") : "");
|
|
141
150
|
};
|
|
142
151
|
|
|
@@ -148,7 +157,7 @@ export const useMonthpicker = (
|
|
|
148
157
|
const month = parseDate(e.target.value, today, locale, "month");
|
|
149
158
|
|
|
150
159
|
if (!isValidDate(month) || (disabled && isMatch(month, disabled))) {
|
|
151
|
-
setSelectedMonth(undefined);
|
|
160
|
+
setSelectedMonth(getMonth(undefined));
|
|
152
161
|
return;
|
|
153
162
|
}
|
|
154
163
|
|
|
@@ -169,10 +178,10 @@ export const useMonthpicker = (
|
|
|
169
178
|
isBefore ||
|
|
170
179
|
(fromDate && toDate && !isMatch(month, [{ from: fromDate, to: toDate }]))
|
|
171
180
|
) {
|
|
172
|
-
setSelectedMonth(undefined);
|
|
181
|
+
setSelectedMonth(getMonth(undefined));
|
|
173
182
|
return;
|
|
174
183
|
}
|
|
175
|
-
setSelectedMonth(month);
|
|
184
|
+
setSelectedMonth(getMonth(month));
|
|
176
185
|
setYear(month);
|
|
177
186
|
};
|
|
178
187
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
|
|
2
|
+
import isWeekend from "date-fns/isWeekend";
|
|
2
3
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
4
|
import { DateRange, isMatch } from "react-day-picker";
|
|
4
5
|
import { DateInputProps } from "../DateInput";
|
|
@@ -12,11 +13,15 @@ import {
|
|
|
12
13
|
import { UseDatepickerOptions } from "./useDatepicker";
|
|
13
14
|
|
|
14
15
|
interface UseRangeDatepickerOptions
|
|
15
|
-
extends Omit<UseDatepickerOptions, "defaultSelected"> {
|
|
16
|
+
extends Omit<UseDatepickerOptions, "defaultSelected" | "onDateChange"> {
|
|
16
17
|
/**
|
|
17
18
|
* The initially selected DateRange
|
|
18
19
|
*/
|
|
19
20
|
defaultSelected?: DateRange;
|
|
21
|
+
/**
|
|
22
|
+
* Callback for changed state
|
|
23
|
+
*/
|
|
24
|
+
onRangeChange?: (val?: DateRange) => void;
|
|
20
25
|
}
|
|
21
26
|
|
|
22
27
|
interface UseRangeDatepickerValue {
|
|
@@ -65,12 +70,13 @@ export const useRangeDatepicker = (
|
|
|
65
70
|
): UseRangeDatepickerValue => {
|
|
66
71
|
const {
|
|
67
72
|
locale: _locale = "nb",
|
|
68
|
-
defaultSelected,
|
|
73
|
+
defaultSelected: _defaultSelected,
|
|
69
74
|
today = new Date(),
|
|
70
75
|
fromDate,
|
|
71
76
|
toDate,
|
|
72
77
|
disabled,
|
|
73
78
|
disableWeekends,
|
|
79
|
+
onRangeChange,
|
|
74
80
|
} = opt;
|
|
75
81
|
|
|
76
82
|
const locale = getLocaleFromString(_locale);
|
|
@@ -79,11 +85,15 @@ export const useRangeDatepicker = (
|
|
|
79
85
|
const inputRefFrom = useRef<HTMLDivElement>(null);
|
|
80
86
|
const datePickerRef = useRef<HTMLDivElement | null>(null);
|
|
81
87
|
|
|
88
|
+
const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
|
|
89
|
+
|
|
82
90
|
// Initialize states
|
|
83
91
|
const [month, setMonth] = useState(
|
|
84
|
-
defaultSelected ? defaultSelected
|
|
92
|
+
defaultSelected ? defaultSelected?.from : today
|
|
93
|
+
);
|
|
94
|
+
const [selectedRange, setSelectedRange] = useState<DateRange | undefined>(
|
|
95
|
+
defaultSelected ?? { from: undefined, to: undefined }
|
|
85
96
|
);
|
|
86
|
-
const [selectedRange, setSelectedRange] = useState(defaultSelected);
|
|
87
97
|
|
|
88
98
|
const [fromInputValue, setFromInputValue] = useState(
|
|
89
99
|
defaultSelected?.from
|
|
@@ -98,6 +108,11 @@ export const useRangeDatepicker = (
|
|
|
98
108
|
);
|
|
99
109
|
const [open, setOpen] = useState(false);
|
|
100
110
|
|
|
111
|
+
const getSelectedRange = (range?: DateRange) => {
|
|
112
|
+
onRangeChange?.(range);
|
|
113
|
+
return range;
|
|
114
|
+
};
|
|
115
|
+
|
|
101
116
|
const handleFocusIn = useCallback(
|
|
102
117
|
(e) =>
|
|
103
118
|
![
|
|
@@ -122,8 +137,10 @@ export const useRangeDatepicker = (
|
|
|
122
137
|
}, [handleFocusIn]);
|
|
123
138
|
|
|
124
139
|
const reset = () => {
|
|
125
|
-
setSelectedRange(
|
|
126
|
-
|
|
140
|
+
setSelectedRange(
|
|
141
|
+
getSelectedRange(defaultSelected ?? { from: undefined, to: undefined })
|
|
142
|
+
);
|
|
143
|
+
setMonth(defaultSelected ? defaultSelected?.from : today);
|
|
127
144
|
setFromInputValue(
|
|
128
145
|
defaultSelected?.from
|
|
129
146
|
? formatDateForInput(defaultSelected.from, locale, "date")
|
|
@@ -134,10 +151,11 @@ export const useRangeDatepicker = (
|
|
|
134
151
|
? formatDateForInput(defaultSelected.to, locale, "date")
|
|
135
152
|
: ""
|
|
136
153
|
);
|
|
154
|
+
setDefaultSelected(_defaultSelected);
|
|
137
155
|
};
|
|
138
156
|
|
|
139
157
|
const setSelected = (range?: DateRange) => {
|
|
140
|
-
setSelectedRange(range);
|
|
158
|
+
setSelectedRange(getSelectedRange(range));
|
|
141
159
|
setFromInputValue(
|
|
142
160
|
range?.from ? formatDateForInput(range.from, locale, "date") : ""
|
|
143
161
|
);
|
|
@@ -211,7 +229,7 @@ export const useRangeDatepicker = (
|
|
|
211
229
|
};
|
|
212
230
|
|
|
213
231
|
const handleSelect = (range) => {
|
|
214
|
-
if (range
|
|
232
|
+
if (range?.from && range?.to) {
|
|
215
233
|
setOpen(false);
|
|
216
234
|
}
|
|
217
235
|
const prevToRange =
|
|
@@ -223,7 +241,7 @@ export const useRangeDatepicker = (
|
|
|
223
241
|
prevToRange
|
|
224
242
|
? setToInputValue(formatDateForInput(prevToRange, locale, "date"))
|
|
225
243
|
: setToInputValue("");
|
|
226
|
-
setSelectedRange({ from: range?.from, to: prevToRange });
|
|
244
|
+
setSelectedRange(getSelectedRange({ from: range?.from, to: prevToRange }));
|
|
227
245
|
};
|
|
228
246
|
|
|
229
247
|
/* live-update datepicker based on changes in inputfields */
|
|
@@ -239,9 +257,11 @@ export const useRangeDatepicker = (
|
|
|
239
257
|
((disableWeekends && isWeekend(day)) || isMatch(day, disabled)))
|
|
240
258
|
) {
|
|
241
259
|
setSelectedRange((x) =>
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
260
|
+
getSelectedRange(
|
|
261
|
+
src === RANGE.FROM
|
|
262
|
+
? { ...x, from: undefined }
|
|
263
|
+
: { from: x?.from, to: undefined }
|
|
264
|
+
)
|
|
245
265
|
);
|
|
246
266
|
return;
|
|
247
267
|
}
|
|
@@ -250,8 +270,10 @@ export const useRangeDatepicker = (
|
|
|
250
270
|
const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
|
|
251
271
|
if (isBefore || isAfter) {
|
|
252
272
|
src === RANGE.FROM
|
|
253
|
-
? setSelectedRange((x) => ({ ...x, from: undefined }))
|
|
254
|
-
: setSelectedRange((x) =>
|
|
273
|
+
? setSelectedRange((x) => getSelectedRange({ ...x, from: undefined }))
|
|
274
|
+
: setSelectedRange((x) =>
|
|
275
|
+
getSelectedRange({ from: x?.from, to: undefined })
|
|
276
|
+
);
|
|
255
277
|
return;
|
|
256
278
|
}
|
|
257
279
|
|
|
@@ -261,7 +283,9 @@ export const useRangeDatepicker = (
|
|
|
261
283
|
selectedRange?.from &&
|
|
262
284
|
differenceInCalendarDays(selectedRange?.from, day) >= 0
|
|
263
285
|
) {
|
|
264
|
-
setSelectedRange(
|
|
286
|
+
setSelectedRange(
|
|
287
|
+
getSelectedRange({ from: day, to: selectedRange?.from })
|
|
288
|
+
);
|
|
265
289
|
setMonth(day);
|
|
266
290
|
return;
|
|
267
291
|
}
|
|
@@ -272,13 +296,15 @@ export const useRangeDatepicker = (
|
|
|
272
296
|
selectedRange?.to &&
|
|
273
297
|
differenceInCalendarDays(day, selectedRange?.to) >= 0
|
|
274
298
|
) {
|
|
275
|
-
setSelectedRange({ to: day, from: selectedRange?.to });
|
|
299
|
+
setSelectedRange(getSelectedRange({ to: day, from: selectedRange?.to }));
|
|
276
300
|
setMonth(day);
|
|
277
301
|
return;
|
|
278
302
|
}
|
|
279
303
|
|
|
280
|
-
src === RANGE.FROM &&
|
|
281
|
-
|
|
304
|
+
src === RANGE.FROM &&
|
|
305
|
+
setSelectedRange((x) => getSelectedRange({ ...x, from: day }));
|
|
306
|
+
src === RANGE.TO &&
|
|
307
|
+
setSelectedRange((x) => getSelectedRange({ from: x?.from, to: day }));
|
|
282
308
|
setMonth(day);
|
|
283
309
|
};
|
|
284
310
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import setYear from "date-fns/setYear";
|
|
2
|
+
import startOfMonth from "date-fns/startOfMonth";
|
|
2
3
|
import React, { createContext, useContext, useState } from "react";
|
|
3
4
|
import { useDayPicker } from "react-day-picker";
|
|
4
5
|
import { getInitialYear, Matcher } from "../utils";
|