@inseefr/lunatic 3.5.1-rc.1743691949561 → 3.5.1
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/components/Datepicker/Datepicker.js +3 -60
- package/components/Datepicker/Datepicker.js.map +1 -1
- package/components/Datepicker/DatepickerFields.d.ts +8 -0
- package/components/Datepicker/DatepickerFields.js +60 -0
- package/components/Datepicker/DatepickerFields.js.map +1 -0
- package/components/shared/HOC/slottableComponent.d.ts +2 -0
- package/components/shared/HOC/slottableComponent.js.map +1 -1
- package/esm/components/Datepicker/Datepicker.js +3 -60
- package/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/esm/components/Datepicker/DatepickerFields.d.ts +8 -0
- package/esm/components/Datepicker/DatepickerFields.js +57 -0
- package/esm/components/Datepicker/DatepickerFields.js.map +1 -0
- package/esm/components/shared/HOC/slottableComponent.d.ts +2 -0
- package/esm/components/shared/HOC/slottableComponent.js.map +1 -1
- package/package.json +8 -1
- package/src/components/Datepicker/Datepicker.tsx +4 -117
- package/src/components/Datepicker/DatepickerFields.tsx +127 -0
- package/src/components/shared/HOC/slottableComponent.tsx +4 -0
- package/tsconfig.build.tsbuildinfo +1 -1
|
@@ -3,74 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.CustomDatepicker = void 0;
|
|
4
4
|
exports.Datepicker = Datepicker;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const react_1 = require("react");
|
|
7
|
-
const DatepickerField_1 = require("./DatepickerField");
|
|
8
6
|
const slottableComponent_1 = require("../shared/HOC/slottableComponent");
|
|
9
7
|
const Label_1 = require("../shared/Label/Label");
|
|
10
8
|
const ComponentErrors_1 = require("../shared/ComponentErrors/ComponentErrors");
|
|
11
9
|
const Declarations_1 = require("../shared/Declarations/Declarations");
|
|
10
|
+
const DatepickerFields_1 = require("./DatepickerFields");
|
|
12
11
|
function Datepicker({ dateFormat = 'YYYY-MM-DD', response, handleChanges, errors, ...props }) {
|
|
13
12
|
return ((0, jsx_runtime_1.jsx)(exports.CustomDatepicker, { ...props, dateFormat: dateFormat ?? 'YYYY-MM-DD', onChange: (value) => handleChanges([{ name: response.name, value }]), errors: (0, ComponentErrors_1.getComponentErrors)(errors, props.id) }));
|
|
14
13
|
}
|
|
15
14
|
exports.CustomDatepicker = (0, slottableComponent_1.slottableComponent)('Datepicker', (props) => {
|
|
16
|
-
const {
|
|
15
|
+
const { id, label, errors, description, declarations } = props;
|
|
17
16
|
const labelId = `lunatic-datepicker-${id}`;
|
|
18
|
-
|
|
19
|
-
const showMonth = dateFormat.includes('MM');
|
|
20
|
-
// Raw state, we allow invalid dates to be typed
|
|
21
|
-
const [numbers, setNumbers] = (0, react_1.useState)(() => numbersFromDateString(value ?? undefined));
|
|
22
|
-
const setNumber = (index) => (value) => {
|
|
23
|
-
const newNumbers = [...numbers];
|
|
24
|
-
newNumbers[index] = value;
|
|
25
|
-
setNumbers(newNumbers);
|
|
26
|
-
onNumbersChange(newNumbers);
|
|
27
|
-
};
|
|
28
|
-
const onNumbersChange = (numbers) => {
|
|
29
|
-
const formatParts = dateFormat.split('-');
|
|
30
|
-
const hasNaNIndex = numbers.findIndex((v) => Number.isNaN(v));
|
|
31
|
-
// Date has a missing part
|
|
32
|
-
if (hasNaNIndex > -1 && hasNaNIndex <= formatParts.length - 1) {
|
|
33
|
-
onChange(null);
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
// Date is not valid
|
|
37
|
-
if (dateFormat === 'YYYY-MM-DD' && !isDateValid(numbers)) {
|
|
38
|
-
onChange(null);
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
const result = formatParts
|
|
42
|
-
.map((v, k) => numbers[k].toString().padStart(v.length, '0'))
|
|
43
|
-
.join('-');
|
|
44
|
-
onChange(result);
|
|
45
|
-
};
|
|
46
|
-
const extraProps = {
|
|
47
|
-
readOnly,
|
|
48
|
-
disabled,
|
|
49
|
-
};
|
|
50
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "lunatic-input", children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { htmlFor: id, id: labelId, description: description, children: label }), (0, jsx_runtime_1.jsx)(Declarations_1.Declarations, { type: "AFTER_QUESTION_TEXT", declarations: declarations, id: id }), (0, jsx_runtime_1.jsxs)("div", { className: "lunaticDatepickerFields", children: [showDay && ((0, jsx_runtime_1.jsx)(DatepickerField_1.DatepickerField, { id: id + 'day', label: "Jour", description: "Exemple: 14", max: 31, value: numbers[2], onChange: setNumber(2), ...extraProps })), showMonth && ((0, jsx_runtime_1.jsx)(DatepickerField_1.DatepickerField, { id: id + 'month', label: "Mois", description: "Exemple: 7", max: 12, value: numbers[1], onChange: setNumber(1), ...extraProps })), (0, jsx_runtime_1.jsx)(DatepickerField_1.DatepickerField, { id: id + 'year', label: "Ann\u00E9e", description: "Exemple: 2023", value: numbers[0], max: 9999, onChange: setNumber(0), ...extraProps })] }), (0, jsx_runtime_1.jsx)(ComponentErrors_1.ComponentErrors, { errors: errors })] }));
|
|
17
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "lunatic-input", children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { htmlFor: id, id: labelId, description: description, children: label }), (0, jsx_runtime_1.jsx)(Declarations_1.Declarations, { type: "AFTER_QUESTION_TEXT", declarations: declarations, id: id }), (0, jsx_runtime_1.jsx)(DatepickerFields_1.CustomDatepickerFields, { ...props }), (0, jsx_runtime_1.jsx)(ComponentErrors_1.ComponentErrors, { errors: errors })] }));
|
|
51
18
|
});
|
|
52
|
-
function numbersFromDateString(s) {
|
|
53
|
-
if (!s) {
|
|
54
|
-
return [NaN, NaN, NaN];
|
|
55
|
-
}
|
|
56
|
-
const parts = s.split('-');
|
|
57
|
-
return [
|
|
58
|
-
parseInt(parts[0], 10),
|
|
59
|
-
parseInt(parts[1], 10),
|
|
60
|
-
parseInt(parts[2], 10),
|
|
61
|
-
];
|
|
62
|
-
}
|
|
63
|
-
/**
|
|
64
|
-
* Check if the date provided by the user is valid (e.g. not 2001/02/29)
|
|
65
|
-
*/
|
|
66
|
-
function isDateValid(dateArray) {
|
|
67
|
-
const [year, month, day] = dateArray;
|
|
68
|
-
// do not set the date directly on new Date(), to avoid transformation on year between 0 and 99.
|
|
69
|
-
//See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#year
|
|
70
|
-
const date = new Date();
|
|
71
|
-
date.setFullYear(year, month - 1, day);
|
|
72
|
-
return (date.getFullYear() === year &&
|
|
73
|
-
date.getMonth() === month - 1 &&
|
|
74
|
-
date.getDate() === day);
|
|
75
|
-
}
|
|
76
19
|
//# sourceMappingURL=Datepicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Datepicker.js","sourceRoot":"","sources":["../../src/components/Datepicker/Datepicker.tsx"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"Datepicker.js","sourceRoot":"","sources":["../../src/components/Datepicker/Datepicker.tsx"],"names":[],"mappings":";;;AAWA,gCAeC;;AA1BD,yEAAsE;AAEtE,iDAA8C;AAC9C,+EAGmD;AACnD,sEAAmE;AAEnE,yDAA4D;AAE5D,SAAgB,UAAU,CAAC,EAC1B,UAAU,GAAG,YAAY,EACzB,QAAQ,EACR,aAAa,EACb,MAAM,EACN,GAAG,KAAK,EAC6B;IACrC,OAAO,CACN,uBAAC,wBAAgB,OACZ,KAAK,EACT,UAAU,EAAE,UAAU,IAAI,YAAY,EACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,EACpE,MAAM,EAAE,IAAA,oCAAkB,EAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,GAC3C,CACF,CAAC;AACH,CAAC;AAUY,QAAA,gBAAgB,GAAG,IAAA,uCAAkB,EACjD,YAAY,EACZ,CAAC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAE/D,MAAM,OAAO,GAAG,sBAAsB,EAAE,EAAE,CAAC;IAE3C,OAAO,CACN,iCAAK,SAAS,EAAC,eAAe,aAC7B,uBAAC,aAAK,IAAC,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,YACvD,KAAK,GACC,EACR,uBAAC,2BAAY,IACZ,IAAI,EAAC,qBAAqB,EAC1B,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,EAAE,GACL,EACF,uBAAC,yCAAsB,OAAK,KAAK,GAAI,EACrC,uBAAC,iCAAe,IAAC,MAAM,EAAE,MAAM,GAAI,IAC9B,CACN,CAAC;AACH,CAAC,CACD,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { LunaticComponentProps } from '../type';
|
|
2
|
+
import { LunaticError } from '../../use-lunatic/type';
|
|
3
|
+
type CustomProps = Omit<LunaticComponentProps<'Datepicker'>, 'response' | 'handleChanges' | 'errors'> & {
|
|
4
|
+
onChange: (s: string | null) => void;
|
|
5
|
+
errors?: LunaticError[];
|
|
6
|
+
};
|
|
7
|
+
export declare const CustomDatepickerFields: import("react").ComponentType<CustomProps>;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.CustomDatepickerFields = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const slottableComponent_1 = require("../shared/HOC/slottableComponent");
|
|
7
|
+
const DatepickerField_1 = require("./DatepickerField");
|
|
8
|
+
exports.CustomDatepickerFields = (0, slottableComponent_1.slottableComponent)('DatepickerFields', (props) => {
|
|
9
|
+
const { disabled, readOnly, value = '', dateFormat = 'YYYY-MM-DD', id, onChange, } = props;
|
|
10
|
+
const showDay = dateFormat.includes('DD');
|
|
11
|
+
const showMonth = dateFormat.includes('MM');
|
|
12
|
+
// Raw state, we allow invalid dates to be typed
|
|
13
|
+
const [numbers, setNumbers] = (0, react_1.useState)(() => numbersFromDateString(value ?? undefined));
|
|
14
|
+
const setNumber = (index) => (value) => {
|
|
15
|
+
const newNumbers = [...numbers];
|
|
16
|
+
newNumbers[index] = value;
|
|
17
|
+
setNumbers(newNumbers);
|
|
18
|
+
onNumbersChange(newNumbers);
|
|
19
|
+
};
|
|
20
|
+
const onNumbersChange = (numbers) => {
|
|
21
|
+
const formatParts = dateFormat.split('-');
|
|
22
|
+
const hasNaNIndex = numbers.findIndex((v) => Number.isNaN(v));
|
|
23
|
+
// Date is not valid, or date has a missing part
|
|
24
|
+
if ((dateFormat === 'YYYY-MM-DD' && !isDateValid(numbers)) ||
|
|
25
|
+
(hasNaNIndex > -1 && hasNaNIndex <= formatParts.length - 1)) {
|
|
26
|
+
onChange(null);
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
const result = formatParts
|
|
30
|
+
.map((v, k) => numbers[k].toString().padStart(v.length, '0'))
|
|
31
|
+
.join('-');
|
|
32
|
+
onChange(result);
|
|
33
|
+
};
|
|
34
|
+
const extraProps = {
|
|
35
|
+
readOnly,
|
|
36
|
+
disabled,
|
|
37
|
+
};
|
|
38
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "lunaticDatepickerFields", children: [showDay && ((0, jsx_runtime_1.jsx)(DatepickerField_1.DatepickerField, { id: id + 'day', label: "Jour", description: "Exemple: 14", max: 31, value: numbers[2], onChange: setNumber(2), ...extraProps })), showMonth && ((0, jsx_runtime_1.jsx)(DatepickerField_1.DatepickerField, { id: id + 'month', label: "Mois", description: "Exemple: 7", max: 12, value: numbers[1], onChange: setNumber(1), ...extraProps })), (0, jsx_runtime_1.jsx)(DatepickerField_1.DatepickerField, { id: id + 'year', label: "Ann\u00E9e", description: "Exemple: 2023", value: numbers[0], max: 9999, onChange: setNumber(0), ...extraProps })] }));
|
|
39
|
+
});
|
|
40
|
+
function numbersFromDateString(s) {
|
|
41
|
+
if (!s) {
|
|
42
|
+
return [NaN, NaN, NaN];
|
|
43
|
+
}
|
|
44
|
+
const [year, month, day] = s.split('-').map((part) => parseInt(part, 10));
|
|
45
|
+
return [year, month, day];
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Check if the date provided by the user is valid (e.g. not 2001/02/29)
|
|
49
|
+
*/
|
|
50
|
+
function isDateValid(dateArray) {
|
|
51
|
+
const [year, month, day] = dateArray;
|
|
52
|
+
// do not set the date directly on new Date(), to avoid transformation on year between 0 and 99.
|
|
53
|
+
//See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#year
|
|
54
|
+
const date = new Date();
|
|
55
|
+
date.setFullYear(year, month - 1, day);
|
|
56
|
+
return (date.getFullYear() === year &&
|
|
57
|
+
date.getMonth() === month - 1 &&
|
|
58
|
+
date.getDate() === day);
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=DatepickerFields.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatepickerFields.js","sourceRoot":"","sources":["../../src/components/Datepicker/DatepickerFields.tsx"],"names":[],"mappings":"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"}
|
|
@@ -37,6 +37,7 @@ import type { SummaryResponses, SummaryTitle } from '../../Summary/Summary';
|
|
|
37
37
|
import type { LunaticComponentProps } from '../../type';
|
|
38
38
|
import type { MarkdownLink } from '../MDLabel/MarkdownLink';
|
|
39
39
|
import type { Accordion } from '../../Accordion/Accordion';
|
|
40
|
+
import type { CustomDatepickerFields } from '../../Datepicker/DatepickerFields';
|
|
40
41
|
/**
|
|
41
42
|
* Contain the type of every customizable components.
|
|
42
43
|
*/
|
|
@@ -67,6 +68,7 @@ export type LunaticSlotComponents = {
|
|
|
67
68
|
ComboboxInput: typeof ComboboxInput;
|
|
68
69
|
ComboboxClearButton: typeof ComboboxClearButton;
|
|
69
70
|
ComboboxLabelSelection: typeof ComboboxLabelSelection;
|
|
71
|
+
DatepickerFields: typeof CustomDatepickerFields;
|
|
70
72
|
Roundabout: typeof CustomRoundabout;
|
|
71
73
|
SuggesterNotification: typeof SuggesterNotification;
|
|
72
74
|
SummaryTitle: typeof SummaryTitle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slottableComponent.js","sourceRoot":"","sources":["../../../src/components/shared/HOC/slottableComponent.tsx"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"slottableComponent.js","sourceRoot":"","sources":["../../../src/components/shared/HOC/slottableComponent.tsx"],"names":[],"mappings":";;;AA4IA,gDAkBC;;AA9JD,iCAMe;AA+Gf,MAAM,KAAK,GAAG,EAAgD,CAAC;AAE/D,MAAM,YAAY,GAAG,IAAA,qBAAa,EAAC,KAAK,CAAC,CAAC;AAEnC,MAAM,aAAa,GAAG,CAAC,EAC7B,KAAK,EACL,QAAQ,GACuD,EAAE,EAAE;IACnE,IAAI,CAAC,KAAK,EAAE,CAAC;QACZ,OAAO,2DAAG,QAAQ,GAAI,CAAC;IACxB,CAAC;IACD,OAAO,CACN,uBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAI,KAAK,YAC1C,QAAQ,GACc,CACxB,CAAC;AACH,CAAC,CAAC;AAZW,QAAA,aAAa,iBAYxB;AAEF;;;;GAIG;AACH,SAAgB,kBAAkB,CACjC,IAAiC,EACjC,iBAAuC;IAEvC,MAAM,kBAAkB,GAAG,CAAC,KAAQ,EAAE,EAAE;QACvC,MAAM,MAAM,GAAG,IAAA,kBAAU,EAAC,YAAY,CAAC,IAAI,KAAK,CAAC;QAEjD,IAAI,MAAM,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;YAC9B,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAqB,CAAC;YACvD,uCAAuC;YACvC,OAAO,uBAAC,aAAa,OAAK,KAAK,GAAI,CAAC;QACrC,CAAC;QAED,uCAAuC;QACvC,OAAO,uBAAC,iBAAiB,OAAK,KAAK,GAAI,CAAC;IACzC,CAAC,CAAC;IACF,kBAAkB,CAAC,WAAW,GAAG,IAAI,CAAC;IACtC,OAAO,kBAAkB,CAAC;AAC3B,CAAC"}
|
|
@@ -1,72 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { DatepickerField } from './DatepickerField';
|
|
4
2
|
import { slottableComponent } from '../shared/HOC/slottableComponent';
|
|
5
3
|
import { Label } from '../shared/Label/Label';
|
|
6
4
|
import { ComponentErrors, getComponentErrors, } from '../shared/ComponentErrors/ComponentErrors';
|
|
7
5
|
import { Declarations } from '../shared/Declarations/Declarations';
|
|
6
|
+
import { CustomDatepickerFields } from './DatepickerFields';
|
|
8
7
|
export function Datepicker({ dateFormat = 'YYYY-MM-DD', response, handleChanges, errors, ...props }) {
|
|
9
8
|
return (_jsx(CustomDatepicker, { ...props, dateFormat: dateFormat !== null && dateFormat !== void 0 ? dateFormat : 'YYYY-MM-DD', onChange: (value) => handleChanges([{ name: response.name, value }]), errors: getComponentErrors(errors, props.id) }));
|
|
10
9
|
}
|
|
11
10
|
export const CustomDatepicker = slottableComponent('Datepicker', (props) => {
|
|
12
|
-
const {
|
|
11
|
+
const { id, label, errors, description, declarations } = props;
|
|
13
12
|
const labelId = `lunatic-datepicker-${id}`;
|
|
14
|
-
|
|
15
|
-
const showMonth = dateFormat.includes('MM');
|
|
16
|
-
// Raw state, we allow invalid dates to be typed
|
|
17
|
-
const [numbers, setNumbers] = useState(() => numbersFromDateString(value !== null && value !== void 0 ? value : undefined));
|
|
18
|
-
const setNumber = (index) => (value) => {
|
|
19
|
-
const newNumbers = [...numbers];
|
|
20
|
-
newNumbers[index] = value;
|
|
21
|
-
setNumbers(newNumbers);
|
|
22
|
-
onNumbersChange(newNumbers);
|
|
23
|
-
};
|
|
24
|
-
const onNumbersChange = (numbers) => {
|
|
25
|
-
const formatParts = dateFormat.split('-');
|
|
26
|
-
const hasNaNIndex = numbers.findIndex((v) => Number.isNaN(v));
|
|
27
|
-
// Date has a missing part
|
|
28
|
-
if (hasNaNIndex > -1 && hasNaNIndex <= formatParts.length - 1) {
|
|
29
|
-
onChange(null);
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
// Date is not valid
|
|
33
|
-
if (dateFormat === 'YYYY-MM-DD' && !isDateValid(numbers)) {
|
|
34
|
-
onChange(null);
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
const result = formatParts
|
|
38
|
-
.map((v, k) => numbers[k].toString().padStart(v.length, '0'))
|
|
39
|
-
.join('-');
|
|
40
|
-
onChange(result);
|
|
41
|
-
};
|
|
42
|
-
const extraProps = {
|
|
43
|
-
readOnly,
|
|
44
|
-
disabled,
|
|
45
|
-
};
|
|
46
|
-
return (_jsxs("div", { className: "lunatic-input", children: [_jsx(Label, { htmlFor: id, id: labelId, description: description, children: label }), _jsx(Declarations, { type: "AFTER_QUESTION_TEXT", declarations: declarations, id: id }), _jsxs("div", { className: "lunaticDatepickerFields", children: [showDay && (_jsx(DatepickerField, { id: id + 'day', label: "Jour", description: "Exemple: 14", max: 31, value: numbers[2], onChange: setNumber(2), ...extraProps })), showMonth && (_jsx(DatepickerField, { id: id + 'month', label: "Mois", description: "Exemple: 7", max: 12, value: numbers[1], onChange: setNumber(1), ...extraProps })), _jsx(DatepickerField, { id: id + 'year', label: "Ann\u00E9e", description: "Exemple: 2023", value: numbers[0], max: 9999, onChange: setNumber(0), ...extraProps })] }), _jsx(ComponentErrors, { errors: errors })] }));
|
|
13
|
+
return (_jsxs("div", { className: "lunatic-input", children: [_jsx(Label, { htmlFor: id, id: labelId, description: description, children: label }), _jsx(Declarations, { type: "AFTER_QUESTION_TEXT", declarations: declarations, id: id }), _jsx(CustomDatepickerFields, { ...props }), _jsx(ComponentErrors, { errors: errors })] }));
|
|
47
14
|
});
|
|
48
|
-
function numbersFromDateString(s) {
|
|
49
|
-
if (!s) {
|
|
50
|
-
return [NaN, NaN, NaN];
|
|
51
|
-
}
|
|
52
|
-
const parts = s.split('-');
|
|
53
|
-
return [
|
|
54
|
-
parseInt(parts[0], 10),
|
|
55
|
-
parseInt(parts[1], 10),
|
|
56
|
-
parseInt(parts[2], 10),
|
|
57
|
-
];
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* Check if the date provided by the user is valid (e.g. not 2001/02/29)
|
|
61
|
-
*/
|
|
62
|
-
function isDateValid(dateArray) {
|
|
63
|
-
const [year, month, day] = dateArray;
|
|
64
|
-
// do not set the date directly on new Date(), to avoid transformation on year between 0 and 99.
|
|
65
|
-
//See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#year
|
|
66
|
-
const date = new Date();
|
|
67
|
-
date.setFullYear(year, month - 1, day);
|
|
68
|
-
return (date.getFullYear() === year &&
|
|
69
|
-
date.getMonth() === month - 1 &&
|
|
70
|
-
date.getDate() === day);
|
|
71
|
-
}
|
|
72
15
|
//# sourceMappingURL=Datepicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Datepicker.js","sourceRoot":"","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Datepicker.js","sourceRoot":"","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EACN,eAAe,EACf,kBAAkB,GAClB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,MAAM,UAAU,UAAU,CAAC,EAC1B,UAAU,GAAG,YAAY,EACzB,QAAQ,EACR,aAAa,EACb,MAAM,EACN,GAAG,KAAK,EAC6B;IACrC,OAAO,CACN,KAAC,gBAAgB,OACZ,KAAK,EACT,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,YAAY,EACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,EACpE,MAAM,EAAE,kBAAkB,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,GAC3C,CACF,CAAC;AACH,CAAC;AAUD,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CACjD,YAAY,EACZ,CAAC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAE/D,MAAM,OAAO,GAAG,sBAAsB,EAAE,EAAE,CAAC;IAE3C,OAAO,CACN,eAAK,SAAS,EAAC,eAAe,aAC7B,KAAC,KAAK,IAAC,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,YACvD,KAAK,GACC,EACR,KAAC,YAAY,IACZ,IAAI,EAAC,qBAAqB,EAC1B,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,EAAE,GACL,EACF,KAAC,sBAAsB,OAAK,KAAK,GAAI,EACrC,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,GAAI,IAC9B,CACN,CAAC;AACH,CAAC,CACD,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { LunaticComponentProps } from '../type';
|
|
2
|
+
import { LunaticError } from '../../use-lunatic/type';
|
|
3
|
+
type CustomProps = Omit<LunaticComponentProps<'Datepicker'>, 'response' | 'handleChanges' | 'errors'> & {
|
|
4
|
+
onChange: (s: string | null) => void;
|
|
5
|
+
errors?: LunaticError[];
|
|
6
|
+
};
|
|
7
|
+
export declare const CustomDatepickerFields: import("react").ComponentType<CustomProps>;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { slottableComponent } from '../shared/HOC/slottableComponent';
|
|
4
|
+
import { DatepickerField } from './DatepickerField';
|
|
5
|
+
export const CustomDatepickerFields = slottableComponent('DatepickerFields', (props) => {
|
|
6
|
+
const { disabled, readOnly, value = '', dateFormat = 'YYYY-MM-DD', id, onChange, } = props;
|
|
7
|
+
const showDay = dateFormat.includes('DD');
|
|
8
|
+
const showMonth = dateFormat.includes('MM');
|
|
9
|
+
// Raw state, we allow invalid dates to be typed
|
|
10
|
+
const [numbers, setNumbers] = useState(() => numbersFromDateString(value !== null && value !== void 0 ? value : undefined));
|
|
11
|
+
const setNumber = (index) => (value) => {
|
|
12
|
+
const newNumbers = [...numbers];
|
|
13
|
+
newNumbers[index] = value;
|
|
14
|
+
setNumbers(newNumbers);
|
|
15
|
+
onNumbersChange(newNumbers);
|
|
16
|
+
};
|
|
17
|
+
const onNumbersChange = (numbers) => {
|
|
18
|
+
const formatParts = dateFormat.split('-');
|
|
19
|
+
const hasNaNIndex = numbers.findIndex((v) => Number.isNaN(v));
|
|
20
|
+
// Date is not valid, or date has a missing part
|
|
21
|
+
if ((dateFormat === 'YYYY-MM-DD' && !isDateValid(numbers)) ||
|
|
22
|
+
(hasNaNIndex > -1 && hasNaNIndex <= formatParts.length - 1)) {
|
|
23
|
+
onChange(null);
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
const result = formatParts
|
|
27
|
+
.map((v, k) => numbers[k].toString().padStart(v.length, '0'))
|
|
28
|
+
.join('-');
|
|
29
|
+
onChange(result);
|
|
30
|
+
};
|
|
31
|
+
const extraProps = {
|
|
32
|
+
readOnly,
|
|
33
|
+
disabled,
|
|
34
|
+
};
|
|
35
|
+
return (_jsxs("div", { className: "lunaticDatepickerFields", children: [showDay && (_jsx(DatepickerField, { id: id + 'day', label: "Jour", description: "Exemple: 14", max: 31, value: numbers[2], onChange: setNumber(2), ...extraProps })), showMonth && (_jsx(DatepickerField, { id: id + 'month', label: "Mois", description: "Exemple: 7", max: 12, value: numbers[1], onChange: setNumber(1), ...extraProps })), _jsx(DatepickerField, { id: id + 'year', label: "Ann\u00E9e", description: "Exemple: 2023", value: numbers[0], max: 9999, onChange: setNumber(0), ...extraProps })] }));
|
|
36
|
+
});
|
|
37
|
+
function numbersFromDateString(s) {
|
|
38
|
+
if (!s) {
|
|
39
|
+
return [NaN, NaN, NaN];
|
|
40
|
+
}
|
|
41
|
+
const [year, month, day] = s.split('-').map((part) => parseInt(part, 10));
|
|
42
|
+
return [year, month, day];
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Check if the date provided by the user is valid (e.g. not 2001/02/29)
|
|
46
|
+
*/
|
|
47
|
+
function isDateValid(dateArray) {
|
|
48
|
+
const [year, month, day] = dateArray;
|
|
49
|
+
// do not set the date directly on new Date(), to avoid transformation on year between 0 and 99.
|
|
50
|
+
//See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#year
|
|
51
|
+
const date = new Date();
|
|
52
|
+
date.setFullYear(year, month - 1, day);
|
|
53
|
+
return (date.getFullYear() === year &&
|
|
54
|
+
date.getMonth() === month - 1 &&
|
|
55
|
+
date.getDate() === day);
|
|
56
|
+
}
|
|
57
|
+
//# sourceMappingURL=DatepickerFields.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatepickerFields.js","sourceRoot":"","sources":["../../../src/components/Datepicker/DatepickerFields.tsx"],"names":[],"mappings":"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"}
|
|
@@ -37,6 +37,7 @@ import type { SummaryResponses, SummaryTitle } from '../../Summary/Summary';
|
|
|
37
37
|
import type { LunaticComponentProps } from '../../type';
|
|
38
38
|
import type { MarkdownLink } from '../MDLabel/MarkdownLink';
|
|
39
39
|
import type { Accordion } from '../../Accordion/Accordion';
|
|
40
|
+
import type { CustomDatepickerFields } from '../../Datepicker/DatepickerFields';
|
|
40
41
|
/**
|
|
41
42
|
* Contain the type of every customizable components.
|
|
42
43
|
*/
|
|
@@ -67,6 +68,7 @@ export type LunaticSlotComponents = {
|
|
|
67
68
|
ComboboxInput: typeof ComboboxInput;
|
|
68
69
|
ComboboxClearButton: typeof ComboboxClearButton;
|
|
69
70
|
ComboboxLabelSelection: typeof ComboboxLabelSelection;
|
|
71
|
+
DatepickerFields: typeof CustomDatepickerFields;
|
|
70
72
|
Roundabout: typeof CustomRoundabout;
|
|
71
73
|
SuggesterNotification: typeof SuggesterNotification;
|
|
72
74
|
SummaryTitle: typeof SummaryTitle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slottableComponent.js","sourceRoot":"","sources":["../../../../src/components/shared/HOC/slottableComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEN,aAAa,EAGb,UAAU,GACV,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"slottableComponent.js","sourceRoot":"","sources":["../../../../src/components/shared/HOC/slottableComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEN,aAAa,EAGb,UAAU,GACV,MAAM,OAAO,CAAC;AA+Gf,MAAM,KAAK,GAAG,EAAgD,CAAC;AAE/D,MAAM,YAAY,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;AAE1C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC7B,KAAK,EACL,QAAQ,GACuD,EAAE,EAAE;IACnE,IAAI,CAAC,KAAK,EAAE,CAAC;QACZ,OAAO,4BAAG,QAAQ,GAAI,CAAC;IACxB,CAAC;IACD,OAAO,CACN,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,YAC1C,QAAQ,GACc,CACxB,CAAC;AACH,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CACjC,IAAiC,EACjC,iBAAuC;IAEvC,MAAM,kBAAkB,GAAG,CAAC,KAAQ,EAAE,EAAE;;QACvC,MAAM,MAAM,GAAG,MAAA,UAAU,CAAC,YAAY,CAAC,mCAAI,KAAK,CAAC;QAEjD,IAAI,MAAM,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;YAC9B,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAqB,CAAC;YACvD,uCAAuC;YACvC,OAAO,KAAC,aAAa,OAAK,KAAK,GAAI,CAAC;QACrC,CAAC;QAED,uCAAuC;QACvC,OAAO,KAAC,iBAAiB,OAAK,KAAK,GAAI,CAAC;IACzC,CAAC,CAAC;IACF,kBAAkB,CAAC,WAAW,GAAG,IAAI,CAAC;IACtC,OAAO,kBAAkB,CAAC;AAC3B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inseefr/lunatic",
|
|
3
|
-
"version": "3.5.1
|
|
3
|
+
"version": "3.5.1",
|
|
4
4
|
"description": "Library of questionnaire components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
"src/components/Datepicker/Datepicker.spec.tsx",
|
|
46
46
|
"src/components/Datepicker/Datepicker.tsx",
|
|
47
47
|
"src/components/Datepicker/DatepickerField.tsx",
|
|
48
|
+
"src/components/Datepicker/DatepickerFields.tsx",
|
|
48
49
|
"src/components/Datepicker/__snapshots__/Datepicker.spec.tsx.snap",
|
|
49
50
|
"src/components/Dropdown/Dropdown.spec.tsx",
|
|
50
51
|
"src/components/Dropdown/Dropdown.tsx",
|
|
@@ -510,6 +511,9 @@
|
|
|
510
511
|
"components/Datepicker/DatepickerField.d.ts",
|
|
511
512
|
"components/Datepicker/DatepickerField.js",
|
|
512
513
|
"components/Datepicker/DatepickerField.js.map",
|
|
514
|
+
"components/Datepicker/DatepickerFields.d.ts",
|
|
515
|
+
"components/Datepicker/DatepickerFields.js",
|
|
516
|
+
"components/Datepicker/DatepickerFields.js.map",
|
|
513
517
|
"components/Dropdown/Dropdown.d.ts",
|
|
514
518
|
"components/Dropdown/Dropdown.js",
|
|
515
519
|
"components/Dropdown/Dropdown.js.map",
|
|
@@ -930,6 +934,9 @@
|
|
|
930
934
|
"esm/components/Datepicker/DatepickerField.d.ts",
|
|
931
935
|
"esm/components/Datepicker/DatepickerField.js",
|
|
932
936
|
"esm/components/Datepicker/DatepickerField.js.map",
|
|
937
|
+
"esm/components/Datepicker/DatepickerFields.d.ts",
|
|
938
|
+
"esm/components/Datepicker/DatepickerFields.js",
|
|
939
|
+
"esm/components/Datepicker/DatepickerFields.js.map",
|
|
933
940
|
"esm/components/Dropdown/Dropdown.d.ts",
|
|
934
941
|
"esm/components/Dropdown/Dropdown.js",
|
|
935
942
|
"esm/components/Dropdown/Dropdown.js.map",
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import { DatepickerField } from './DatepickerField';
|
|
3
1
|
import { slottableComponent } from '../shared/HOC/slottableComponent';
|
|
4
2
|
import type { LunaticComponentProps } from '../type';
|
|
5
3
|
import { Label } from '../shared/Label/Label';
|
|
@@ -9,6 +7,7 @@ import {
|
|
|
9
7
|
} from '../shared/ComponentErrors/ComponentErrors';
|
|
10
8
|
import { Declarations } from '../shared/Declarations/Declarations';
|
|
11
9
|
import type { LunaticError } from '../../use-lunatic/type';
|
|
10
|
+
import { CustomDatepickerFields } from './DatepickerFields';
|
|
12
11
|
|
|
13
12
|
export function Datepicker({
|
|
14
13
|
dateFormat = 'YYYY-MM-DD',
|
|
@@ -38,59 +37,9 @@ type CustomProps = Omit<
|
|
|
38
37
|
export const CustomDatepicker = slottableComponent<CustomProps>(
|
|
39
38
|
'Datepicker',
|
|
40
39
|
(props) => {
|
|
41
|
-
const {
|
|
42
|
-
disabled,
|
|
43
|
-
readOnly,
|
|
44
|
-
value = '',
|
|
45
|
-
dateFormat = 'YYYY-MM-DD',
|
|
46
|
-
id,
|
|
47
|
-
label,
|
|
48
|
-
errors,
|
|
49
|
-
description,
|
|
50
|
-
declarations,
|
|
51
|
-
onChange,
|
|
52
|
-
} = props;
|
|
53
|
-
const labelId = `lunatic-datepicker-${id}`;
|
|
54
|
-
const showDay = dateFormat.includes('DD');
|
|
55
|
-
const showMonth = dateFormat.includes('MM');
|
|
56
|
-
|
|
57
|
-
// Raw state, we allow invalid dates to be typed
|
|
58
|
-
const [numbers, setNumbers] = useState(() =>
|
|
59
|
-
numbersFromDateString(value ?? undefined)
|
|
60
|
-
);
|
|
61
|
-
const setNumber = (index: number) => (value: number) => {
|
|
62
|
-
const newNumbers = [...numbers] as typeof numbers;
|
|
63
|
-
newNumbers[index] = value;
|
|
64
|
-
setNumbers(newNumbers);
|
|
65
|
-
onNumbersChange(newNumbers);
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
const onNumbersChange = (numbers: [number, number, number]) => {
|
|
69
|
-
const formatParts = dateFormat.split('-');
|
|
70
|
-
const hasNaNIndex = numbers.findIndex((v) => Number.isNaN(v));
|
|
71
|
-
|
|
72
|
-
// Date has a missing part
|
|
73
|
-
if (hasNaNIndex > -1 && hasNaNIndex <= formatParts.length - 1) {
|
|
74
|
-
onChange(null);
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
40
|
+
const { id, label, errors, description, declarations } = props;
|
|
77
41
|
|
|
78
|
-
|
|
79
|
-
if (dateFormat === 'YYYY-MM-DD' && !isDateValid(numbers)) {
|
|
80
|
-
onChange(null);
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
const result = formatParts
|
|
85
|
-
.map((v, k) => numbers[k].toString().padStart(v.length, '0'))
|
|
86
|
-
.join('-');
|
|
87
|
-
onChange(result);
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
const extraProps = {
|
|
91
|
-
readOnly,
|
|
92
|
-
disabled,
|
|
93
|
-
};
|
|
42
|
+
const labelId = `lunatic-datepicker-${id}`;
|
|
94
43
|
|
|
95
44
|
return (
|
|
96
45
|
<div className="lunatic-input">
|
|
@@ -102,71 +51,9 @@ export const CustomDatepicker = slottableComponent<CustomProps>(
|
|
|
102
51
|
declarations={declarations}
|
|
103
52
|
id={id}
|
|
104
53
|
/>
|
|
105
|
-
<
|
|
106
|
-
{showDay && (
|
|
107
|
-
<DatepickerField
|
|
108
|
-
id={id + 'day'}
|
|
109
|
-
label="Jour"
|
|
110
|
-
description="Exemple: 14"
|
|
111
|
-
max={31}
|
|
112
|
-
value={numbers[2]}
|
|
113
|
-
onChange={setNumber(2)}
|
|
114
|
-
{...extraProps}
|
|
115
|
-
/>
|
|
116
|
-
)}
|
|
117
|
-
{showMonth && (
|
|
118
|
-
<DatepickerField
|
|
119
|
-
id={id + 'month'}
|
|
120
|
-
label="Mois"
|
|
121
|
-
description="Exemple: 7"
|
|
122
|
-
max={12}
|
|
123
|
-
value={numbers[1]}
|
|
124
|
-
onChange={setNumber(1)}
|
|
125
|
-
{...extraProps}
|
|
126
|
-
/>
|
|
127
|
-
)}
|
|
128
|
-
<DatepickerField
|
|
129
|
-
id={id + 'year'}
|
|
130
|
-
label="Année"
|
|
131
|
-
description="Exemple: 2023"
|
|
132
|
-
value={numbers[0]}
|
|
133
|
-
max={9999}
|
|
134
|
-
onChange={setNumber(0)}
|
|
135
|
-
{...extraProps}
|
|
136
|
-
/>
|
|
137
|
-
</div>
|
|
54
|
+
<CustomDatepickerFields {...props} />
|
|
138
55
|
<ComponentErrors errors={errors} />
|
|
139
56
|
</div>
|
|
140
57
|
);
|
|
141
58
|
}
|
|
142
59
|
);
|
|
143
|
-
|
|
144
|
-
function numbersFromDateString(s?: string): [number, number, number] {
|
|
145
|
-
if (!s) {
|
|
146
|
-
return [NaN, NaN, NaN];
|
|
147
|
-
}
|
|
148
|
-
const parts = s.split('-');
|
|
149
|
-
return [
|
|
150
|
-
parseInt(parts[0], 10),
|
|
151
|
-
parseInt(parts[1], 10),
|
|
152
|
-
parseInt(parts[2], 10),
|
|
153
|
-
];
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* Check if the date provided by the user is valid (e.g. not 2001/02/29)
|
|
158
|
-
*/
|
|
159
|
-
function isDateValid(dateArray: [number, number, number]) {
|
|
160
|
-
const [year, month, day] = dateArray;
|
|
161
|
-
|
|
162
|
-
// do not set the date directly on new Date(), to avoid transformation on year between 0 and 99.
|
|
163
|
-
//See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#year
|
|
164
|
-
const date = new Date();
|
|
165
|
-
date.setFullYear(year, month - 1, day);
|
|
166
|
-
|
|
167
|
-
return (
|
|
168
|
-
date.getFullYear() === year &&
|
|
169
|
-
date.getMonth() === month - 1 &&
|
|
170
|
-
date.getDate() === day
|
|
171
|
-
);
|
|
172
|
-
}
|