@dhis2-ui/calendar 10.3.1 → 10.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/build/cjs/calendar/calendar-container.js +10 -2
- package/build/cjs/calendar/calendar-table.js +6 -6
- package/build/cjs/calendar/calendar.js +10 -2
- package/build/cjs/calendar/navigation-container.js +94 -36
- package/build/cjs/calendar-input/__tests__/calendar-input.test.js +9 -6
- package/build/cjs/calendar-input/calendar-input.js +10 -2
- package/build/cjs/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +4 -4
- package/build/cjs/features/supports_gregorian_calendar/supports_gregorian_calendar.js +3 -3
- package/build/cjs/features/supports_nepali_calendar/supports_nepali_calendar.js +3 -3
- package/build/cjs/stories/calendar-input.prod.stories.js +0 -27
- package/build/cjs/stories/calendar.prod.stories.js +4 -0
- package/build/es/calendar/calendar-container.js +10 -2
- package/build/es/calendar/calendar-table.js +6 -6
- package/build/es/calendar/calendar.js +10 -2
- package/build/es/calendar/navigation-container.js +94 -36
- package/build/es/calendar-input/__tests__/calendar-input.test.js +9 -6
- package/build/es/calendar-input/calendar-input.js +10 -2
- package/build/es/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +4 -4
- package/build/es/features/supports_gregorian_calendar/supports_gregorian_calendar.js +3 -3
- package/build/es/features/supports_nepali_calendar/supports_nepali_calendar.js +3 -3
- package/build/es/stories/calendar-input.prod.stories.js +0 -26
- package/build/es/stories/calendar.prod.stories.js +4 -0
- package/package.json +9 -9
|
@@ -28,6 +28,10 @@ const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_react.defaul
|
|
|
28
28
|
nextYear,
|
|
29
29
|
prevMonth,
|
|
30
30
|
prevYear,
|
|
31
|
+
navigateToYear,
|
|
32
|
+
navigateToMonth,
|
|
33
|
+
months,
|
|
34
|
+
years,
|
|
31
35
|
languageDirection,
|
|
32
36
|
calendarRef
|
|
33
37
|
} = _ref;
|
|
@@ -39,9 +43,13 @@ const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_react.defaul
|
|
|
39
43
|
nextYear,
|
|
40
44
|
prevMonth,
|
|
41
45
|
prevYear,
|
|
42
|
-
languageDirection
|
|
46
|
+
languageDirection,
|
|
47
|
+
navigateToYear,
|
|
48
|
+
navigateToMonth,
|
|
49
|
+
months,
|
|
50
|
+
years
|
|
43
51
|
};
|
|
44
|
-
}, [currMonth, currYear, languageDirection, nextMonth, nextYear, prevMonth, prevYear]);
|
|
52
|
+
}, [currMonth, currYear, languageDirection, nextMonth, nextYear, prevMonth, prevYear, navigateToYear, navigateToMonth, months, years]);
|
|
45
53
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
46
54
|
className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
|
|
47
55
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -20,16 +20,16 @@ const CalendarTable = _ref => {
|
|
|
20
20
|
selectedDate
|
|
21
21
|
} = _ref;
|
|
22
22
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
23
|
-
className: _style.default.dynamic([["
|
|
23
|
+
className: _style.default.dynamic([["890354150", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]]) + " " + "calendar-table-wrapper"
|
|
24
24
|
}, /*#__PURE__*/_react.default.createElement("table", {
|
|
25
|
-
className: _style.default.dynamic([["
|
|
25
|
+
className: _style.default.dynamic([["890354150", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]]) + " " + "calendar-table"
|
|
26
26
|
}, /*#__PURE__*/_react.default.createElement(_calendarTableDaysHeader.CalendarTableDaysHeader, {
|
|
27
27
|
weekDayLabels: weekDayLabels
|
|
28
28
|
}), /*#__PURE__*/_react.default.createElement("tbody", {
|
|
29
|
-
className: _style.default.dynamic([["
|
|
29
|
+
className: _style.default.dynamic([["890354150", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]])
|
|
30
30
|
}, calendarWeekDays.map((week, weekIndex) => /*#__PURE__*/_react.default.createElement("tr", {
|
|
31
31
|
key: `week-${weekIndex + 1}`,
|
|
32
|
-
className: _style.default.dynamic([["
|
|
32
|
+
className: _style.default.dynamic([["890354150", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]])
|
|
33
33
|
}, week.map(day => /*#__PURE__*/_react.default.createElement(_calendarTableCell.CalendarTableCell, {
|
|
34
34
|
selectedDate: selectedDate,
|
|
35
35
|
day: day,
|
|
@@ -37,9 +37,9 @@ const CalendarTable = _ref => {
|
|
|
37
37
|
cellSize: cellSize,
|
|
38
38
|
width: width
|
|
39
39
|
})))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
40
|
-
id: "
|
|
40
|
+
id: "890354150",
|
|
41
41
|
dynamic: [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]
|
|
42
|
-
}, [`.calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block
|
|
42
|
+
}, [`.calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:0 ${_uiConstants.spacers.dp4};}`, ".calendar-table.__jsx-style-dynamic-selector tr.__jsx-style-dynamic-selector,.calendar-table.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{border:none;}", `.calendar-table-wrapper.__jsx-style-dynamic-selector{padding-inline:${_uiConstants.spacers.dp4};}`]));
|
|
43
43
|
};
|
|
44
44
|
exports.CalendarTable = CalendarTable;
|
|
45
45
|
const CalendarTableProps = exports.CalendarTableProps = {
|
|
@@ -22,7 +22,8 @@ const Calendar = _ref => {
|
|
|
22
22
|
weekDayFormat = 'narrow',
|
|
23
23
|
timeZone,
|
|
24
24
|
width = '240px',
|
|
25
|
-
cellSize = '32px'
|
|
25
|
+
cellSize = '32px',
|
|
26
|
+
pastOnly
|
|
26
27
|
} = _ref;
|
|
27
28
|
const [selectedDateString, setSelectedDateString] = (0, _react.useState)(date);
|
|
28
29
|
const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
|
|
@@ -31,7 +32,8 @@ const Calendar = _ref => {
|
|
|
31
32
|
calendar,
|
|
32
33
|
timeZone,
|
|
33
34
|
numberingSystem,
|
|
34
|
-
weekDayFormat
|
|
35
|
+
weekDayFormat,
|
|
36
|
+
pastOnly
|
|
35
37
|
};
|
|
36
38
|
const pickerResults = (0, _multiCalendarDates.useDatePicker)({
|
|
37
39
|
onDateSelect: result => {
|
|
@@ -64,6 +66,10 @@ const Calendar = _ref => {
|
|
|
64
66
|
nextYear: pickerResults.nextYear,
|
|
65
67
|
prevMonth: pickerResults.prevMonth,
|
|
66
68
|
prevYear: pickerResults.prevYear,
|
|
69
|
+
navigateToYear: pickerResults.navigateToYear,
|
|
70
|
+
navigateToMonth: pickerResults.navigateToMonth,
|
|
71
|
+
months: pickerResults.months,
|
|
72
|
+
years: pickerResults.years,
|
|
67
73
|
languageDirection
|
|
68
74
|
};
|
|
69
75
|
}, [cellSize, date, dir, locale, pickerResults, width, languageDirection]);
|
|
@@ -85,6 +91,8 @@ const CalendarProps = exports.CalendarProps = {
|
|
|
85
91
|
locale: _propTypes.default.string,
|
|
86
92
|
/** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
|
|
87
93
|
numberingSystem: _propTypes.default.string,
|
|
94
|
+
/** When true, only shows years in the past (current year and earlier) */
|
|
95
|
+
pastOnly: _propTypes.default.bool,
|
|
88
96
|
/** the timeZone to use */
|
|
89
97
|
timeZone: _propTypes.default.string,
|
|
90
98
|
/** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
|
|
@@ -12,9 +12,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
12
12
|
var _index = _interopRequireDefault(require("../locales/index.js"));
|
|
13
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
14
|
const wrapperBorderColor = _uiConstants.colors.grey300;
|
|
15
|
-
const headerBackground = _uiConstants.colors.
|
|
15
|
+
const headerBackground = _uiConstants.colors.grey100;
|
|
16
16
|
const NavigationContainer = _ref => {
|
|
17
|
-
var _currYear$label;
|
|
18
17
|
let {
|
|
19
18
|
languageDirection,
|
|
20
19
|
currMonth,
|
|
@@ -22,75 +21,123 @@ const NavigationContainer = _ref => {
|
|
|
22
21
|
nextMonth,
|
|
23
22
|
nextYear,
|
|
24
23
|
prevMonth,
|
|
25
|
-
prevYear
|
|
24
|
+
prevYear,
|
|
25
|
+
navigateToYear,
|
|
26
|
+
navigateToMonth,
|
|
27
|
+
months,
|
|
28
|
+
years
|
|
26
29
|
} = _ref;
|
|
27
30
|
const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
|
|
28
31
|
const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
const handleYearChange = e => {
|
|
33
|
+
const targetYear = parseInt(e.target.value);
|
|
34
|
+
navigateToYear(targetYear);
|
|
35
|
+
};
|
|
36
|
+
const handleMonthChange = e => {
|
|
37
|
+
const selectedMonth = months.find(month => month.label === e.target.value);
|
|
38
|
+
if (selectedMonth) {
|
|
39
|
+
navigateToMonth(selectedMonth.value);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
33
42
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
34
|
-
className: _style.default.dynamic([["
|
|
43
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]]) + " " + "navigation-container"
|
|
35
44
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
36
|
-
className: _style.default.dynamic([["
|
|
45
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]]) + " " + "month"
|
|
37
46
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
38
|
-
className: _style.default.dynamic([["
|
|
47
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]]) + " " + "prev"
|
|
39
48
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
40
49
|
onClick: prevMonth.navigateTo,
|
|
41
50
|
name: "previous-month",
|
|
42
51
|
"data-test": "calendar-previous-month",
|
|
43
52
|
"aria-label": `${_index.default.t(`Go to ${prevMonth.label}`)}`,
|
|
44
53
|
type: "button",
|
|
45
|
-
className: _style.default.dynamic([["
|
|
54
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
46
55
|
}, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
|
|
47
|
-
className: _style.default.dynamic([["
|
|
56
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
57
|
+
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
58
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]]) + " " + "monthList"
|
|
59
|
+
}, /*#__PURE__*/_react.default.createElement("select", {
|
|
60
|
+
value: currMonth.label,
|
|
61
|
+
onChange: handleMonthChange,
|
|
62
|
+
"data-test": "calendar-month-select",
|
|
63
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]]) + " " + "month-select"
|
|
64
|
+
}, months.map(month => /*#__PURE__*/_react.default.createElement("option", {
|
|
65
|
+
key: month.value,
|
|
66
|
+
value: month.label,
|
|
67
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
68
|
+
}, month.label))), /*#__PURE__*/_react.default.createElement("svg", {
|
|
69
|
+
width: "16",
|
|
70
|
+
height: "16",
|
|
71
|
+
viewBox: "0 0 16 16",
|
|
72
|
+
fill: "none",
|
|
73
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
74
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
75
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
76
|
+
d: "M10.1465 6.85363L10.8536 6.14652L8.00004 3.29297L5.14648 6.14652L5.85359 6.85363L8.00004 4.70718L10.1465 6.85363ZM5.85367 9.1466L5.14656 9.8537L8.00011 12.7073L10.8537 9.8537L10.1466 9.1466L8.00011 11.293L5.85367 9.1466Z",
|
|
77
|
+
fill: _uiConstants.colors.grey700,
|
|
78
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
48
79
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
49
|
-
className: _style.default.dynamic([["
|
|
50
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
51
|
-
className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]]) + " " + "label"
|
|
52
|
-
}, currMonth.label)), /*#__PURE__*/_react.default.createElement("div", {
|
|
53
|
-
className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]]) + " " + "next"
|
|
80
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]]) + " " + "next"
|
|
54
81
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
55
82
|
onClick: nextMonth.navigateTo,
|
|
56
83
|
"data-test": "calendar-next-month",
|
|
57
84
|
name: "next-month",
|
|
58
85
|
"aria-label": `${_index.default.t(`Go to ${nextMonth.label}`)}`,
|
|
59
86
|
type: "button",
|
|
60
|
-
className: _style.default.dynamic([["
|
|
87
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
61
88
|
}, /*#__PURE__*/_react.default.createElement(NextIcon, {
|
|
62
|
-
className: _style.default.dynamic([["
|
|
89
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
63
90
|
})))), /*#__PURE__*/_react.default.createElement("div", {
|
|
64
|
-
className: _style.default.dynamic([["
|
|
91
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]]) + " " + "year"
|
|
65
92
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
66
|
-
className: _style.default.dynamic([["
|
|
93
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]]) + " " + "prev"
|
|
67
94
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
68
95
|
onClick: prevYear.navigateTo,
|
|
69
96
|
name: "previous-year",
|
|
70
97
|
"aria-label": `${_index.default.t('Go to previous year')}`,
|
|
71
98
|
type: "button",
|
|
72
|
-
className: _style.default.dynamic([["
|
|
99
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
73
100
|
}, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
|
|
74
|
-
className: _style.default.dynamic([["
|
|
101
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
102
|
+
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
103
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]]) + " " + "yearList"
|
|
104
|
+
}, /*#__PURE__*/_react.default.createElement("select", {
|
|
105
|
+
value: currYear.value,
|
|
106
|
+
onChange: handleYearChange,
|
|
107
|
+
"data-test": "calendar-year-select",
|
|
108
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]]) + " " + "year-select"
|
|
109
|
+
}, years.map(year => {
|
|
110
|
+
var _year$label;
|
|
111
|
+
return /*#__PURE__*/_react.default.createElement("option", {
|
|
112
|
+
key: year.value,
|
|
113
|
+
value: year.value,
|
|
114
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
115
|
+
}, (_year$label = year.label) === null || _year$label === void 0 ? void 0 : _year$label.replace(/ERA\d/, ''));
|
|
116
|
+
})), /*#__PURE__*/_react.default.createElement("svg", {
|
|
117
|
+
width: "16",
|
|
118
|
+
height: "16",
|
|
119
|
+
viewBox: "0 0 16 16",
|
|
120
|
+
fill: "none",
|
|
121
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
122
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
123
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
124
|
+
d: "M10.1465 6.85363L10.8536 6.14652L8.00004 3.29297L5.14648 6.14652L5.85359 6.85363L8.00004 4.70718L10.1465 6.85363ZM5.85367 9.1466L5.14656 9.8537L8.00011 12.7073L10.8537 9.8537L10.1466 9.1466L8.00011 11.293L5.85367 9.1466Z",
|
|
125
|
+
fill: _uiConstants.colors.grey700,
|
|
126
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
75
127
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
76
|
-
className: _style.default.dynamic([["
|
|
77
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
78
|
-
"data-test": "calendar-current-year",
|
|
79
|
-
className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]]) + " " + "label"
|
|
80
|
-
}, currentYearLabel)), /*#__PURE__*/_react.default.createElement("div", {
|
|
81
|
-
className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]]) + " " + "next"
|
|
128
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]]) + " " + "next"
|
|
82
129
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
83
130
|
onClick: nextYear.navigateTo,
|
|
84
131
|
name: "next-year",
|
|
85
132
|
"aria-label": `${_index.default.t('Go to next year')}`,
|
|
86
133
|
type: "button",
|
|
87
|
-
className: _style.default.dynamic([["
|
|
134
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
88
135
|
}, /*#__PURE__*/_react.default.createElement(NextIcon, {
|
|
89
|
-
className: _style.default.dynamic([["
|
|
136
|
+
className: _style.default.dynamic([["1374897249", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]]])
|
|
90
137
|
}))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
91
|
-
id: "
|
|
92
|
-
dynamic: [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.
|
|
93
|
-
}, [`.navigation-container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:${_uiConstants.spacers.dp4};border-bottom:1px solid ${wrapperBorderColor};background-color:${headerBackground};font-size:
|
|
138
|
+
id: "1374897249",
|
|
139
|
+
dynamic: [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.colors.grey300, _uiConstants.colors.white, _uiConstants.colors.grey300, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.colors.grey200, _uiConstants.colors.grey700]
|
|
140
|
+
}, [`.navigation-container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;gap:${_uiConstants.spacers.dp4};padding:${_uiConstants.spacers.dp4};border-bottom:1px solid ${wrapperBorderColor};background-color:${headerBackground};font-size:1em;width:100%;}`, `.month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;border:1px solid ${_uiConstants.colors.grey300};border-radius:3px;background:${_uiConstants.colors.white};}`, ".month.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", `.prev.__jsx-style-dynamic-selector{border-inline-end:1px solid ${_uiConstants.colors.grey300};}`, `.next.__jsx-style-dynamic-selector{border-inline-start:1px solid ${_uiConstants.colors.grey300};}`, ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector,.monthList.__jsx-style-dynamic-selector,.yearList.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{width:20px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".monthList.__jsx-style-dynamic-selector,.yearList.__jsx-style-dynamic-selector{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;position:relative;}", ".monthList.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%;}", ".monthList.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.yearList.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{position:absolute;inset-inline-end:0px;pointer-events:none;}", `button.__jsx-style-dynamic-selector{background:none;border:0;padding:${_uiConstants.spacers.dp4} 2px;height:24px;width:20px;color:${_uiConstants.colors.grey700};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}`, `button.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey200};color:${_uiConstants.colors.grey900};cursor:pointer;}`, `.month-select.__jsx-style-dynamic-selector,.year-select.__jsx-style-dynamic-selector{padding-inline-start:4px;padding-inline-end:16px;height:24px;white-space:nowrap;overflow:hidden;text-align:start;width:100%;max-width:100%;border-radius:0px;border:0;color:${_uiConstants.colors.grey800};background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;}`, `.month-select.__jsx-style-dynamic-selector:hover,.year-select.__jsx-style-dynamic-selector:hover{background:${_uiConstants.colors.grey200};cursor:pointer;}`, `.month-select.__jsx-style-dynamic-selector:focus,.month-select-active.__jsx-style-dynamic-selector,.year-select.__jsx-style-dynamic-selector:focus,.year-select-active.__jsx-style-dynamic-selector{background:${_uiConstants.colors.grey200};outline-color:${_uiConstants.colors.grey700};}`]));
|
|
94
141
|
};
|
|
95
142
|
exports.NavigationContainer = NavigationContainer;
|
|
96
143
|
const NavigationContainerProps = exports.NavigationContainerProps = {
|
|
@@ -98,9 +145,16 @@ const NavigationContainerProps = exports.NavigationContainerProps = {
|
|
|
98
145
|
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
99
146
|
}),
|
|
100
147
|
currYear: _propTypes.default.shape({
|
|
101
|
-
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
148
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
149
|
+
value: _propTypes.default.number
|
|
102
150
|
}),
|
|
103
151
|
languageDirection: _propTypes.default.oneOf(['ltr', 'rtl']),
|
|
152
|
+
months: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
153
|
+
label: _propTypes.default.string.isRequired,
|
|
154
|
+
value: _propTypes.default.number.isRequired
|
|
155
|
+
})),
|
|
156
|
+
navigateToMonth: _propTypes.default.func,
|
|
157
|
+
navigateToYear: _propTypes.default.func,
|
|
104
158
|
nextMonth: _propTypes.default.shape({
|
|
105
159
|
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
106
160
|
navigateTo: _propTypes.default.func
|
|
@@ -116,6 +170,10 @@ const NavigationContainerProps = exports.NavigationContainerProps = {
|
|
|
116
170
|
prevYear: _propTypes.default.shape({
|
|
117
171
|
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
118
172
|
navigateTo: _propTypes.default.func
|
|
119
|
-
})
|
|
173
|
+
}),
|
|
174
|
+
years: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
175
|
+
label: _propTypes.default.string.isRequired,
|
|
176
|
+
value: _propTypes.default.number.isRequired
|
|
177
|
+
}))
|
|
120
178
|
};
|
|
121
179
|
NavigationContainer.propTypes = NavigationContainerProps;
|
|
@@ -70,7 +70,8 @@ describe('Calendar Input', () => {
|
|
|
70
70
|
expect(await screen.findByText('Date 2023-10-12 is less than the minimum allowed date 2024-01-01.'));
|
|
71
71
|
expect(onDateSelectMock).toHaveBeenCalledTimes(1);
|
|
72
72
|
});
|
|
73
|
-
|
|
73
|
+
// skipping since test times out - reference issue: https://dhis2.atlassian.net/browse/LIBS-763
|
|
74
|
+
it.skip('should validate maximum date', async () => {
|
|
74
75
|
const {
|
|
75
76
|
getByTestId,
|
|
76
77
|
findByText
|
|
@@ -101,9 +102,10 @@ describe('Calendar Input', () => {
|
|
|
101
102
|
await _userEvent.userEvent.clear(dateInput);
|
|
102
103
|
await _userEvent.userEvent.type(dateInput, dateInputString);
|
|
103
104
|
await _userEvent.userEvent.tab();
|
|
104
|
-
|
|
105
|
+
await findByText('Date 2018-13-02 is less than the minimum allowed date 2018-13-04.');
|
|
105
106
|
dateInputString = '2018-13-05';
|
|
106
107
|
await _userEvent.userEvent.clear(dateInput);
|
|
108
|
+
await _userEvent.userEvent.click(dateInput);
|
|
107
109
|
await _userEvent.userEvent.type(dateInput, dateInputString);
|
|
108
110
|
await _userEvent.userEvent.tab();
|
|
109
111
|
expect(queryByText('Date 2018-13-04 is less than the minimum allowed date 2018-13-05.')).not.toBeInTheDocument();
|
|
@@ -112,8 +114,9 @@ describe('Calendar Input', () => {
|
|
|
112
114
|
await _userEvent.userEvent.type(dateInput, dateInputString);
|
|
113
115
|
await _userEvent.userEvent.tab();
|
|
114
116
|
expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
|
|
115
|
-
});
|
|
116
|
-
|
|
117
|
+
}, 20 * 1000);
|
|
118
|
+
// ToDo: these scenarios seem to work but they timeout on CI sporadically - ticket: https://dhis2.atlassian.net/browse/LIBS-763
|
|
119
|
+
it.skip('should validate date in nepali calendar', async () => {
|
|
117
120
|
const onDateSelectMock = jest.fn();
|
|
118
121
|
const {
|
|
119
122
|
getByTestId,
|
|
@@ -140,8 +143,8 @@ describe('Calendar Input', () => {
|
|
|
140
143
|
await _userEvent.userEvent.type(dateInput, dateInputString);
|
|
141
144
|
await _userEvent.userEvent.tab();
|
|
142
145
|
expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
|
|
143
|
-
});
|
|
144
|
-
it('should validate from date picker', async () => {
|
|
146
|
+
}, 20 * 1000);
|
|
147
|
+
it.skip('should validate from date picker', async () => {
|
|
145
148
|
jest.useFakeTimers('modern');
|
|
146
149
|
jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
|
|
147
150
|
const onDateSelectMock = jest.fn();
|
|
@@ -44,6 +44,7 @@ const CalendarInput = function () {
|
|
|
44
44
|
strictValidation,
|
|
45
45
|
inputWidth,
|
|
46
46
|
dataTest = 'dhis2-uiwidgets-calendar-inputfield',
|
|
47
|
+
pastOnly,
|
|
47
48
|
...rest
|
|
48
49
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
49
50
|
const ref = (0, _react.useRef)();
|
|
@@ -55,8 +56,9 @@ const CalendarInput = function () {
|
|
|
55
56
|
calendar,
|
|
56
57
|
locale,
|
|
57
58
|
numberingSystem,
|
|
58
|
-
weekDayFormat
|
|
59
|
-
|
|
59
|
+
weekDayFormat,
|
|
60
|
+
pastOnly
|
|
61
|
+
}), [calendar, locale, numberingSystem, weekDayFormat, pastOnly]);
|
|
60
62
|
const onChooseDate = (date, validationOptions) => {
|
|
61
63
|
if (!date) {
|
|
62
64
|
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
@@ -120,6 +122,10 @@ const CalendarInput = function () {
|
|
|
120
122
|
nextYear: pickerResults.nextYear,
|
|
121
123
|
prevMonth: pickerResults.prevMonth,
|
|
122
124
|
prevYear: pickerResults.prevYear,
|
|
125
|
+
navigateToYear: pickerResults.navigateToYear,
|
|
126
|
+
navigateToMonth: pickerResults.navigateToMonth,
|
|
127
|
+
months: pickerResults.months,
|
|
128
|
+
years: pickerResults.years,
|
|
123
129
|
languageDirection
|
|
124
130
|
}), [cellSize, date, pickerResults, width, languageDirection]);
|
|
125
131
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -187,6 +193,8 @@ CalendarInput.propTypes = {
|
|
|
187
193
|
minDate: _propTypes.default.string,
|
|
188
194
|
/** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
|
|
189
195
|
numberingSystem: _propTypes.default.string,
|
|
196
|
+
/** When true, only shows years in the past (current year and earlier) */
|
|
197
|
+
pastOnly: _propTypes.default.bool,
|
|
190
198
|
/** Whether to use strict validation by showing errors for out-of-range dates when enabled (default), and warnings when disabled */
|
|
191
199
|
strictValidation: _propTypes.default.bool,
|
|
192
200
|
/** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
|
|
@@ -22,15 +22,15 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
|
22
22
|
previous: 'Meskerem',
|
|
23
23
|
next: 'Hedar'
|
|
24
24
|
};
|
|
25
|
-
cy.
|
|
25
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.current);
|
|
26
26
|
cy.get('[data-test="calendar-next-month"]').click();
|
|
27
|
-
cy.
|
|
27
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.next);
|
|
28
28
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
29
29
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
30
|
-
cy.
|
|
30
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.previous);
|
|
31
31
|
});
|
|
32
32
|
(0, _cypressCucumberPreprocessor.Then)('the era should not be displayed in the year', () => {
|
|
33
|
-
cy.get('[data-test="calendar-
|
|
33
|
+
cy.get('[data-test="calendar-year-select"] option:selected').should('not.contain.text', 'ERA');
|
|
34
34
|
});
|
|
35
35
|
(0, _cypressCucumberPreprocessor.Then)('we should be able to select a day', () => {
|
|
36
36
|
const date = '2014-02-03';
|
|
@@ -22,12 +22,12 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
|
22
22
|
previous: 'سبتمبر',
|
|
23
23
|
next: 'نوفمبر'
|
|
24
24
|
};
|
|
25
|
-
cy.
|
|
25
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.current);
|
|
26
26
|
cy.get('[data-test="calendar-next-month"]').click();
|
|
27
|
-
cy.
|
|
27
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.next);
|
|
28
28
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
29
29
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
30
|
-
cy.
|
|
30
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.previous);
|
|
31
31
|
});
|
|
32
32
|
(0, _cypressCucumberPreprocessor.Then)('we should be able to select a day', () => {
|
|
33
33
|
const date = '2021-10-13';
|
|
@@ -26,12 +26,12 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
|
26
26
|
previous: 'Bhadra',
|
|
27
27
|
next: 'Kartik'
|
|
28
28
|
};
|
|
29
|
-
cy.
|
|
29
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.current);
|
|
30
30
|
cy.get('[data-test="calendar-next-month"]').click();
|
|
31
|
-
cy.
|
|
31
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.next);
|
|
32
32
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
33
33
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
34
|
-
cy.
|
|
34
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.previous);
|
|
35
35
|
});
|
|
36
36
|
(0, _cypressCucumberPreprocessor.Then)('we should be able to select a day', () => {
|
|
37
37
|
const nepaliDate = '2078-06-27';
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.CalendarWithClearButton = void 0;
|
|
7
|
-
exports.CalendarWithEditiableInput = CalendarWithEditiableInput;
|
|
8
7
|
exports.CalendarWithNonStrictValidation = CalendarWithNonStrictValidation;
|
|
9
8
|
exports.CalendarWithStrictValidation = CalendarWithStrictValidation;
|
|
10
9
|
exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
|
|
@@ -122,32 +121,6 @@ const CalendarWithClearButton = _ref2 => {
|
|
|
122
121
|
}, date !== null && date !== void 0 ? date : 'undefined')));
|
|
123
122
|
};
|
|
124
123
|
exports.CalendarWithClearButton = CalendarWithClearButton;
|
|
125
|
-
function CalendarWithEditiableInput() {
|
|
126
|
-
const [date, setDate] = (0, _react.useState)('');
|
|
127
|
-
const [validation, setValidation] = (0, _react.useState)({});
|
|
128
|
-
const errorProps = {
|
|
129
|
-
error: !!(validation !== null && validation !== void 0 && validation.error),
|
|
130
|
-
validationText: validation === null || validation === void 0 ? void 0 : validation.validationText
|
|
131
|
-
};
|
|
132
|
-
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, _extends({
|
|
133
|
-
date: date,
|
|
134
|
-
calendar: "gregory",
|
|
135
|
-
onDateSelect: result => {
|
|
136
|
-
const {
|
|
137
|
-
calendarDateString,
|
|
138
|
-
validation
|
|
139
|
-
} = result || {};
|
|
140
|
-
setDate(calendarDateString);
|
|
141
|
-
setValidation(validation);
|
|
142
|
-
},
|
|
143
|
-
onFocus: () => {
|
|
144
|
-
console.log('focused');
|
|
145
|
-
},
|
|
146
|
-
width: "400px"
|
|
147
|
-
}, errorProps, {
|
|
148
|
-
clearable: true
|
|
149
|
-
}))));
|
|
150
|
-
}
|
|
151
124
|
function CalendarWithStrictValidation() {
|
|
152
125
|
const [validation, setValidation] = (0, _react.useState)({});
|
|
153
126
|
const errored = () => {
|
|
@@ -19,6 +19,10 @@ export const CalendarContainer = /*#__PURE__*/React.memo(function CalendarContai
|
|
|
19
19
|
nextYear,
|
|
20
20
|
prevMonth,
|
|
21
21
|
prevYear,
|
|
22
|
+
navigateToYear,
|
|
23
|
+
navigateToMonth,
|
|
24
|
+
months,
|
|
25
|
+
years,
|
|
22
26
|
languageDirection,
|
|
23
27
|
calendarRef
|
|
24
28
|
} = _ref;
|
|
@@ -30,9 +34,13 @@ export const CalendarContainer = /*#__PURE__*/React.memo(function CalendarContai
|
|
|
30
34
|
nextYear,
|
|
31
35
|
prevMonth,
|
|
32
36
|
prevYear,
|
|
33
|
-
languageDirection
|
|
37
|
+
languageDirection,
|
|
38
|
+
navigateToYear,
|
|
39
|
+
navigateToMonth,
|
|
40
|
+
months,
|
|
41
|
+
years
|
|
34
42
|
};
|
|
35
|
-
}, [currMonth, currYear, languageDirection, nextMonth, nextYear, prevMonth, prevYear]);
|
|
43
|
+
}, [currMonth, currYear, languageDirection, nextMonth, nextYear, prevMonth, prevYear, navigateToYear, navigateToMonth, months, years]);
|
|
36
44
|
return /*#__PURE__*/React.createElement("div", {
|
|
37
45
|
className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
|
|
38
46
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -13,16 +13,16 @@ export const CalendarTable = _ref => {
|
|
|
13
13
|
selectedDate
|
|
14
14
|
} = _ref;
|
|
15
15
|
return /*#__PURE__*/React.createElement("div", {
|
|
16
|
-
className: _JSXStyle.dynamic([["
|
|
16
|
+
className: _JSXStyle.dynamic([["890354150", [spacers.dp4, spacers.dp4]]]) + " " + "calendar-table-wrapper"
|
|
17
17
|
}, /*#__PURE__*/React.createElement("table", {
|
|
18
|
-
className: _JSXStyle.dynamic([["
|
|
18
|
+
className: _JSXStyle.dynamic([["890354150", [spacers.dp4, spacers.dp4]]]) + " " + "calendar-table"
|
|
19
19
|
}, /*#__PURE__*/React.createElement(CalendarTableDaysHeader, {
|
|
20
20
|
weekDayLabels: weekDayLabels
|
|
21
21
|
}), /*#__PURE__*/React.createElement("tbody", {
|
|
22
|
-
className: _JSXStyle.dynamic([["
|
|
22
|
+
className: _JSXStyle.dynamic([["890354150", [spacers.dp4, spacers.dp4]]])
|
|
23
23
|
}, calendarWeekDays.map((week, weekIndex) => /*#__PURE__*/React.createElement("tr", {
|
|
24
24
|
key: `week-${weekIndex + 1}`,
|
|
25
|
-
className: _JSXStyle.dynamic([["
|
|
25
|
+
className: _JSXStyle.dynamic([["890354150", [spacers.dp4, spacers.dp4]]])
|
|
26
26
|
}, week.map(day => /*#__PURE__*/React.createElement(CalendarTableCell, {
|
|
27
27
|
selectedDate: selectedDate,
|
|
28
28
|
day: day,
|
|
@@ -30,9 +30,9 @@ export const CalendarTable = _ref => {
|
|
|
30
30
|
cellSize: cellSize,
|
|
31
31
|
width: width
|
|
32
32
|
})))))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
33
|
-
id: "
|
|
33
|
+
id: "890354150",
|
|
34
34
|
dynamic: [spacers.dp4, spacers.dp4]
|
|
35
|
-
}, [`.calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block
|
|
35
|
+
}, [`.calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:0 ${spacers.dp4};}`, ".calendar-table.__jsx-style-dynamic-selector tr.__jsx-style-dynamic-selector,.calendar-table.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{border:none;}", `.calendar-table-wrapper.__jsx-style-dynamic-selector{padding-inline:${spacers.dp4};}`]));
|
|
36
36
|
};
|
|
37
37
|
export const CalendarTableProps = {
|
|
38
38
|
calendarWeekDays: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
|
|
@@ -13,7 +13,8 @@ export const Calendar = _ref => {
|
|
|
13
13
|
weekDayFormat = 'narrow',
|
|
14
14
|
timeZone,
|
|
15
15
|
width = '240px',
|
|
16
|
-
cellSize = '32px'
|
|
16
|
+
cellSize = '32px',
|
|
17
|
+
pastOnly
|
|
17
18
|
} = _ref;
|
|
18
19
|
const [selectedDateString, setSelectedDateString] = useState(date);
|
|
19
20
|
const languageDirection = useResolvedDirection(dir, locale);
|
|
@@ -22,7 +23,8 @@ export const Calendar = _ref => {
|
|
|
22
23
|
calendar,
|
|
23
24
|
timeZone,
|
|
24
25
|
numberingSystem,
|
|
25
|
-
weekDayFormat
|
|
26
|
+
weekDayFormat,
|
|
27
|
+
pastOnly
|
|
26
28
|
};
|
|
27
29
|
const pickerResults = useDatePicker({
|
|
28
30
|
onDateSelect: result => {
|
|
@@ -55,6 +57,10 @@ export const Calendar = _ref => {
|
|
|
55
57
|
nextYear: pickerResults.nextYear,
|
|
56
58
|
prevMonth: pickerResults.prevMonth,
|
|
57
59
|
prevYear: pickerResults.prevYear,
|
|
60
|
+
navigateToYear: pickerResults.navigateToYear,
|
|
61
|
+
navigateToMonth: pickerResults.navigateToMonth,
|
|
62
|
+
months: pickerResults.months,
|
|
63
|
+
years: pickerResults.years,
|
|
58
64
|
languageDirection
|
|
59
65
|
};
|
|
60
66
|
}, [cellSize, date, dir, locale, pickerResults, width, languageDirection]);
|
|
@@ -75,6 +81,8 @@ export const CalendarProps = {
|
|
|
75
81
|
locale: PropTypes.string,
|
|
76
82
|
/** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
|
|
77
83
|
numberingSystem: PropTypes.string,
|
|
84
|
+
/** When true, only shows years in the past (current year and earlier) */
|
|
85
|
+
pastOnly: PropTypes.bool,
|
|
78
86
|
/** the timeZone to use */
|
|
79
87
|
timeZone: PropTypes.string,
|
|
80
88
|
/** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
|
|
@@ -5,9 +5,8 @@ import PropTypes from 'prop-types';
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import i18n from '../locales/index.js';
|
|
7
7
|
const wrapperBorderColor = colors.grey300;
|
|
8
|
-
const headerBackground = colors.
|
|
8
|
+
const headerBackground = colors.grey100;
|
|
9
9
|
export const NavigationContainer = _ref => {
|
|
10
|
-
var _currYear$label;
|
|
11
10
|
let {
|
|
12
11
|
languageDirection,
|
|
13
12
|
currMonth,
|
|
@@ -15,84 +14,139 @@ export const NavigationContainer = _ref => {
|
|
|
15
14
|
nextMonth,
|
|
16
15
|
nextYear,
|
|
17
16
|
prevMonth,
|
|
18
|
-
prevYear
|
|
17
|
+
prevYear,
|
|
18
|
+
navigateToYear,
|
|
19
|
+
navigateToMonth,
|
|
20
|
+
months,
|
|
21
|
+
years
|
|
19
22
|
} = _ref;
|
|
20
23
|
const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
|
|
21
24
|
const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
const handleYearChange = e => {
|
|
26
|
+
const targetYear = parseInt(e.target.value);
|
|
27
|
+
navigateToYear(targetYear);
|
|
28
|
+
};
|
|
29
|
+
const handleMonthChange = e => {
|
|
30
|
+
const selectedMonth = months.find(month => month.label === e.target.value);
|
|
31
|
+
if (selectedMonth) {
|
|
32
|
+
navigateToMonth(selectedMonth.value);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
26
35
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
27
|
-
className: _JSXStyle.dynamic([["
|
|
36
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]]) + " " + "navigation-container"
|
|
28
37
|
}, /*#__PURE__*/React.createElement("div", {
|
|
29
|
-
className: _JSXStyle.dynamic([["
|
|
38
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]]) + " " + "month"
|
|
30
39
|
}, /*#__PURE__*/React.createElement("div", {
|
|
31
|
-
className: _JSXStyle.dynamic([["
|
|
40
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]]) + " " + "prev"
|
|
32
41
|
}, /*#__PURE__*/React.createElement("button", {
|
|
33
42
|
onClick: prevMonth.navigateTo,
|
|
34
43
|
name: "previous-month",
|
|
35
44
|
"data-test": "calendar-previous-month",
|
|
36
45
|
"aria-label": `${i18n.t(`Go to ${prevMonth.label}`)}`,
|
|
37
46
|
type: "button",
|
|
38
|
-
className: _JSXStyle.dynamic([["
|
|
47
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
39
48
|
}, /*#__PURE__*/React.createElement(PreviousIcon, {
|
|
40
|
-
className: _JSXStyle.dynamic([["
|
|
49
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
41
50
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
42
|
-
className: _JSXStyle.dynamic([["
|
|
43
|
-
}, /*#__PURE__*/React.createElement("
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
51
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]]) + " " + "monthList"
|
|
52
|
+
}, /*#__PURE__*/React.createElement("select", {
|
|
53
|
+
value: currMonth.label,
|
|
54
|
+
onChange: handleMonthChange,
|
|
55
|
+
"data-test": "calendar-month-select",
|
|
56
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]]) + " " + "month-select"
|
|
57
|
+
}, months.map(month => /*#__PURE__*/React.createElement("option", {
|
|
58
|
+
key: month.value,
|
|
59
|
+
value: month.label,
|
|
60
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
61
|
+
}, month.label))), /*#__PURE__*/React.createElement("svg", {
|
|
62
|
+
width: "16",
|
|
63
|
+
height: "16",
|
|
64
|
+
viewBox: "0 0 16 16",
|
|
65
|
+
fill: "none",
|
|
66
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
67
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
68
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
69
|
+
d: "M10.1465 6.85363L10.8536 6.14652L8.00004 3.29297L5.14648 6.14652L5.85359 6.85363L8.00004 4.70718L10.1465 6.85363ZM5.85367 9.1466L5.14656 9.8537L8.00011 12.7073L10.8537 9.8537L10.1466 9.1466L8.00011 11.293L5.85367 9.1466Z",
|
|
70
|
+
fill: colors.grey700,
|
|
71
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
72
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
73
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]]) + " " + "next"
|
|
47
74
|
}, /*#__PURE__*/React.createElement("button", {
|
|
48
75
|
onClick: nextMonth.navigateTo,
|
|
49
76
|
"data-test": "calendar-next-month",
|
|
50
77
|
name: "next-month",
|
|
51
78
|
"aria-label": `${i18n.t(`Go to ${nextMonth.label}`)}`,
|
|
52
79
|
type: "button",
|
|
53
|
-
className: _JSXStyle.dynamic([["
|
|
80
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
54
81
|
}, /*#__PURE__*/React.createElement(NextIcon, {
|
|
55
|
-
className: _JSXStyle.dynamic([["
|
|
82
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
56
83
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
57
|
-
className: _JSXStyle.dynamic([["
|
|
84
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]]) + " " + "year"
|
|
58
85
|
}, /*#__PURE__*/React.createElement("div", {
|
|
59
|
-
className: _JSXStyle.dynamic([["
|
|
86
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]]) + " " + "prev"
|
|
60
87
|
}, /*#__PURE__*/React.createElement("button", {
|
|
61
88
|
onClick: prevYear.navigateTo,
|
|
62
89
|
name: "previous-year",
|
|
63
90
|
"aria-label": `${i18n.t('Go to previous year')}`,
|
|
64
91
|
type: "button",
|
|
65
|
-
className: _JSXStyle.dynamic([["
|
|
92
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
66
93
|
}, /*#__PURE__*/React.createElement(PreviousIcon, {
|
|
67
|
-
className: _JSXStyle.dynamic([["
|
|
94
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
95
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
96
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]]) + " " + "yearList"
|
|
97
|
+
}, /*#__PURE__*/React.createElement("select", {
|
|
98
|
+
value: currYear.value,
|
|
99
|
+
onChange: handleYearChange,
|
|
100
|
+
"data-test": "calendar-year-select",
|
|
101
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]]) + " " + "year-select"
|
|
102
|
+
}, years.map(year => {
|
|
103
|
+
var _year$label;
|
|
104
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
105
|
+
key: year.value,
|
|
106
|
+
value: year.value,
|
|
107
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
108
|
+
}, (_year$label = year.label) === null || _year$label === void 0 ? void 0 : _year$label.replace(/ERA\d/, ''));
|
|
109
|
+
})), /*#__PURE__*/React.createElement("svg", {
|
|
110
|
+
width: "16",
|
|
111
|
+
height: "16",
|
|
112
|
+
viewBox: "0 0 16 16",
|
|
113
|
+
fill: "none",
|
|
114
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
115
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
116
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
117
|
+
d: "M10.1465 6.85363L10.8536 6.14652L8.00004 3.29297L5.14648 6.14652L5.85359 6.85363L8.00004 4.70718L10.1465 6.85363ZM5.85367 9.1466L5.14656 9.8537L8.00011 12.7073L10.8537 9.8537L10.1466 9.1466L8.00011 11.293L5.85367 9.1466Z",
|
|
118
|
+
fill: colors.grey700,
|
|
119
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
68
120
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
69
|
-
className: _JSXStyle.dynamic([["
|
|
70
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
71
|
-
"data-test": "calendar-current-year",
|
|
72
|
-
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "label"
|
|
73
|
-
}, currentYearLabel)), /*#__PURE__*/React.createElement("div", {
|
|
74
|
-
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "next"
|
|
121
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]]) + " " + "next"
|
|
75
122
|
}, /*#__PURE__*/React.createElement("button", {
|
|
76
123
|
onClick: nextYear.navigateTo,
|
|
77
124
|
name: "next-year",
|
|
78
125
|
"aria-label": `${i18n.t('Go to next year')}`,
|
|
79
126
|
type: "button",
|
|
80
|
-
className: _JSXStyle.dynamic([["
|
|
127
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
81
128
|
}, /*#__PURE__*/React.createElement(NextIcon, {
|
|
82
|
-
className: _JSXStyle.dynamic([["
|
|
129
|
+
className: _JSXStyle.dynamic([["1374897249", [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]]])
|
|
83
130
|
}))))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
84
|
-
id: "
|
|
85
|
-
dynamic: [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.
|
|
86
|
-
}, [`.navigation-container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:${spacers.dp4};border-bottom:1px solid ${wrapperBorderColor};background-color:${headerBackground};font-size:
|
|
131
|
+
id: "1374897249",
|
|
132
|
+
dynamic: [spacers.dp4, spacers.dp4, wrapperBorderColor, headerBackground, colors.grey300, colors.white, colors.grey300, colors.grey300, spacers.dp4, colors.grey700, colors.grey200, colors.grey900, colors.grey800, colors.grey200, colors.grey200, colors.grey700]
|
|
133
|
+
}, [`.navigation-container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;gap:${spacers.dp4};padding:${spacers.dp4};border-bottom:1px solid ${wrapperBorderColor};background-color:${headerBackground};font-size:1em;width:100%;}`, `.month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;border:1px solid ${colors.grey300};border-radius:3px;background:${colors.white};}`, ".month.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", `.prev.__jsx-style-dynamic-selector{border-inline-end:1px solid ${colors.grey300};}`, `.next.__jsx-style-dynamic-selector{border-inline-start:1px solid ${colors.grey300};}`, ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector,.monthList.__jsx-style-dynamic-selector,.yearList.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{width:20px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".monthList.__jsx-style-dynamic-selector,.yearList.__jsx-style-dynamic-selector{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;position:relative;}", ".monthList.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%;}", ".monthList.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.yearList.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{position:absolute;inset-inline-end:0px;pointer-events:none;}", `button.__jsx-style-dynamic-selector{background:none;border:0;padding:${spacers.dp4} 2px;height:24px;width:20px;color:${colors.grey700};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}`, `button.__jsx-style-dynamic-selector:hover{background-color:${colors.grey200};color:${colors.grey900};cursor:pointer;}`, `.month-select.__jsx-style-dynamic-selector,.year-select.__jsx-style-dynamic-selector{padding-inline-start:4px;padding-inline-end:16px;height:24px;white-space:nowrap;overflow:hidden;text-align:start;width:100%;max-width:100%;border-radius:0px;border:0;color:${colors.grey800};background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;}`, `.month-select.__jsx-style-dynamic-selector:hover,.year-select.__jsx-style-dynamic-selector:hover{background:${colors.grey200};cursor:pointer;}`, `.month-select.__jsx-style-dynamic-selector:focus,.month-select-active.__jsx-style-dynamic-selector,.year-select.__jsx-style-dynamic-selector:focus,.year-select-active.__jsx-style-dynamic-selector{background:${colors.grey200};outline-color:${colors.grey700};}`]));
|
|
87
134
|
};
|
|
88
135
|
export const NavigationContainerProps = {
|
|
89
136
|
currMonth: PropTypes.shape({
|
|
90
137
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
91
138
|
}),
|
|
92
139
|
currYear: PropTypes.shape({
|
|
93
|
-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
140
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
141
|
+
value: PropTypes.number
|
|
94
142
|
}),
|
|
95
143
|
languageDirection: PropTypes.oneOf(['ltr', 'rtl']),
|
|
144
|
+
months: PropTypes.arrayOf(PropTypes.shape({
|
|
145
|
+
label: PropTypes.string.isRequired,
|
|
146
|
+
value: PropTypes.number.isRequired
|
|
147
|
+
})),
|
|
148
|
+
navigateToMonth: PropTypes.func,
|
|
149
|
+
navigateToYear: PropTypes.func,
|
|
96
150
|
nextMonth: PropTypes.shape({
|
|
97
151
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
98
152
|
navigateTo: PropTypes.func
|
|
@@ -108,6 +162,10 @@ export const NavigationContainerProps = {
|
|
|
108
162
|
prevYear: PropTypes.shape({
|
|
109
163
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
110
164
|
navigateTo: PropTypes.func
|
|
111
|
-
})
|
|
165
|
+
}),
|
|
166
|
+
years: PropTypes.arrayOf(PropTypes.shape({
|
|
167
|
+
label: PropTypes.string.isRequired,
|
|
168
|
+
value: PropTypes.number.isRequired
|
|
169
|
+
}))
|
|
112
170
|
};
|
|
113
171
|
NavigationContainer.propTypes = NavigationContainerProps;
|
|
@@ -66,7 +66,8 @@ describe('Calendar Input', () => {
|
|
|
66
66
|
expect(await screen.findByText('Date 2023-10-12 is less than the minimum allowed date 2024-01-01.'));
|
|
67
67
|
expect(onDateSelectMock).toHaveBeenCalledTimes(1);
|
|
68
68
|
});
|
|
69
|
-
|
|
69
|
+
// skipping since test times out - reference issue: https://dhis2.atlassian.net/browse/LIBS-763
|
|
70
|
+
it.skip('should validate maximum date', async () => {
|
|
70
71
|
const {
|
|
71
72
|
getByTestId,
|
|
72
73
|
findByText
|
|
@@ -97,9 +98,10 @@ describe('Calendar Input', () => {
|
|
|
97
98
|
await userEvent.clear(dateInput);
|
|
98
99
|
await userEvent.type(dateInput, dateInputString);
|
|
99
100
|
await userEvent.tab();
|
|
100
|
-
|
|
101
|
+
await findByText('Date 2018-13-02 is less than the minimum allowed date 2018-13-04.');
|
|
101
102
|
dateInputString = '2018-13-05';
|
|
102
103
|
await userEvent.clear(dateInput);
|
|
104
|
+
await userEvent.click(dateInput);
|
|
103
105
|
await userEvent.type(dateInput, dateInputString);
|
|
104
106
|
await userEvent.tab();
|
|
105
107
|
expect(queryByText('Date 2018-13-04 is less than the minimum allowed date 2018-13-05.')).not.toBeInTheDocument();
|
|
@@ -108,8 +110,9 @@ describe('Calendar Input', () => {
|
|
|
108
110
|
await userEvent.type(dateInput, dateInputString);
|
|
109
111
|
await userEvent.tab();
|
|
110
112
|
expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
+
}, 20 * 1000);
|
|
114
|
+
// ToDo: these scenarios seem to work but they timeout on CI sporadically - ticket: https://dhis2.atlassian.net/browse/LIBS-763
|
|
115
|
+
it.skip('should validate date in nepali calendar', async () => {
|
|
113
116
|
const onDateSelectMock = jest.fn();
|
|
114
117
|
const {
|
|
115
118
|
getByTestId,
|
|
@@ -136,8 +139,8 @@ describe('Calendar Input', () => {
|
|
|
136
139
|
await userEvent.type(dateInput, dateInputString);
|
|
137
140
|
await userEvent.tab();
|
|
138
141
|
expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
|
|
139
|
-
});
|
|
140
|
-
it('should validate from date picker', async () => {
|
|
142
|
+
}, 20 * 1000);
|
|
143
|
+
it.skip('should validate from date picker', async () => {
|
|
141
144
|
jest.useFakeTimers('modern');
|
|
142
145
|
jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
|
|
143
146
|
const onDateSelectMock = jest.fn();
|
|
@@ -35,6 +35,7 @@ export const CalendarInput = function () {
|
|
|
35
35
|
strictValidation,
|
|
36
36
|
inputWidth,
|
|
37
37
|
dataTest = 'dhis2-uiwidgets-calendar-inputfield',
|
|
38
|
+
pastOnly,
|
|
38
39
|
...rest
|
|
39
40
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
40
41
|
const ref = useRef();
|
|
@@ -46,8 +47,9 @@ export const CalendarInput = function () {
|
|
|
46
47
|
calendar,
|
|
47
48
|
locale,
|
|
48
49
|
numberingSystem,
|
|
49
|
-
weekDayFormat
|
|
50
|
-
|
|
50
|
+
weekDayFormat,
|
|
51
|
+
pastOnly
|
|
52
|
+
}), [calendar, locale, numberingSystem, weekDayFormat, pastOnly]);
|
|
51
53
|
const onChooseDate = (date, validationOptions) => {
|
|
52
54
|
if (!date) {
|
|
53
55
|
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
@@ -111,6 +113,10 @@ export const CalendarInput = function () {
|
|
|
111
113
|
nextYear: pickerResults.nextYear,
|
|
112
114
|
prevMonth: pickerResults.prevMonth,
|
|
113
115
|
prevYear: pickerResults.prevYear,
|
|
116
|
+
navigateToYear: pickerResults.navigateToYear,
|
|
117
|
+
navigateToMonth: pickerResults.navigateToMonth,
|
|
118
|
+
months: pickerResults.months,
|
|
119
|
+
years: pickerResults.years,
|
|
114
120
|
languageDirection
|
|
115
121
|
}), [cellSize, date, pickerResults, width, languageDirection]);
|
|
116
122
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
@@ -177,6 +183,8 @@ CalendarInput.propTypes = {
|
|
|
177
183
|
minDate: PropTypes.string,
|
|
178
184
|
/** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
|
|
179
185
|
numberingSystem: PropTypes.string,
|
|
186
|
+
/** When true, only shows years in the past (current year and earlier) */
|
|
187
|
+
pastOnly: PropTypes.bool,
|
|
180
188
|
/** Whether to use strict validation by showing errors for out-of-range dates when enabled (default), and warnings when disabled */
|
|
181
189
|
strictValidation: PropTypes.bool,
|
|
182
190
|
/** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
|
|
@@ -20,15 +20,15 @@ Then('months should be rendered in "{word}" with navigation', language => {
|
|
|
20
20
|
previous: 'Meskerem',
|
|
21
21
|
next: 'Hedar'
|
|
22
22
|
};
|
|
23
|
-
cy.
|
|
23
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.current);
|
|
24
24
|
cy.get('[data-test="calendar-next-month"]').click();
|
|
25
|
-
cy.
|
|
25
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.next);
|
|
26
26
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
27
27
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
28
|
-
cy.
|
|
28
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.previous);
|
|
29
29
|
});
|
|
30
30
|
Then('the era should not be displayed in the year', () => {
|
|
31
|
-
cy.get('[data-test="calendar-
|
|
31
|
+
cy.get('[data-test="calendar-year-select"] option:selected').should('not.contain.text', 'ERA');
|
|
32
32
|
});
|
|
33
33
|
Then('we should be able to select a day', () => {
|
|
34
34
|
const date = '2014-02-03';
|
|
@@ -20,12 +20,12 @@ Then('months should be rendered in "{word}" with navigation', language => {
|
|
|
20
20
|
previous: 'سبتمبر',
|
|
21
21
|
next: 'نوفمبر'
|
|
22
22
|
};
|
|
23
|
-
cy.
|
|
23
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.current);
|
|
24
24
|
cy.get('[data-test="calendar-next-month"]').click();
|
|
25
|
-
cy.
|
|
25
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.next);
|
|
26
26
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
27
27
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
28
|
-
cy.
|
|
28
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.previous);
|
|
29
29
|
});
|
|
30
30
|
Then('we should be able to select a day', () => {
|
|
31
31
|
const date = '2021-10-13';
|
|
@@ -24,12 +24,12 @@ Then('months should be rendered in "{word}" with navigation', language => {
|
|
|
24
24
|
previous: 'Bhadra',
|
|
25
25
|
next: 'Kartik'
|
|
26
26
|
};
|
|
27
|
-
cy.
|
|
27
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.current);
|
|
28
28
|
cy.get('[data-test="calendar-next-month"]').click();
|
|
29
|
-
cy.
|
|
29
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.next);
|
|
30
30
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
31
31
|
cy.get('[data-test="calendar-previous-month"]').click();
|
|
32
|
-
cy.
|
|
32
|
+
cy.get('[data-test="calendar-month-select"] option:selected').should('have.text', months.previous);
|
|
33
33
|
});
|
|
34
34
|
Then('we should be able to select a day', () => {
|
|
35
35
|
const nepaliDate = '2078-06-27';
|
|
@@ -108,32 +108,6 @@ export const CalendarWithClearButton = _ref2 => {
|
|
|
108
108
|
"data-test": "storybook-calendar-date-value"
|
|
109
109
|
}, date !== null && date !== void 0 ? date : 'undefined')));
|
|
110
110
|
};
|
|
111
|
-
export function CalendarWithEditiableInput() {
|
|
112
|
-
const [date, setDate] = useState('');
|
|
113
|
-
const [validation, setValidation] = useState({});
|
|
114
|
-
const errorProps = {
|
|
115
|
-
error: !!(validation !== null && validation !== void 0 && validation.error),
|
|
116
|
-
validationText: validation === null || validation === void 0 ? void 0 : validation.validationText
|
|
117
|
-
};
|
|
118
|
-
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarInput, _extends({
|
|
119
|
-
date: date,
|
|
120
|
-
calendar: "gregory",
|
|
121
|
-
onDateSelect: result => {
|
|
122
|
-
const {
|
|
123
|
-
calendarDateString,
|
|
124
|
-
validation
|
|
125
|
-
} = result || {};
|
|
126
|
-
setDate(calendarDateString);
|
|
127
|
-
setValidation(validation);
|
|
128
|
-
},
|
|
129
|
-
onFocus: () => {
|
|
130
|
-
console.log('focused');
|
|
131
|
-
},
|
|
132
|
-
width: "400px"
|
|
133
|
-
}, errorProps, {
|
|
134
|
-
clearable: true
|
|
135
|
-
}))));
|
|
136
|
-
}
|
|
137
111
|
export function CalendarWithStrictValidation() {
|
|
138
112
|
const [validation, setValidation] = useState({});
|
|
139
113
|
const errored = () => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/calendar",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.5.0",
|
|
4
4
|
"description": "UI Calendar",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,15 +33,15 @@
|
|
|
33
33
|
"styled-jsx": "^4"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@dhis2-ui/button": "10.
|
|
37
|
-
"@dhis2-ui/card": "10.
|
|
38
|
-
"@dhis2-ui/input": "10.
|
|
39
|
-
"@dhis2-ui/layer": "10.
|
|
40
|
-
"@dhis2-ui/popper": "10.
|
|
41
|
-
"@dhis2/multi-calendar-dates": "2.
|
|
36
|
+
"@dhis2-ui/button": "10.5.0",
|
|
37
|
+
"@dhis2-ui/card": "10.5.0",
|
|
38
|
+
"@dhis2-ui/input": "10.5.0",
|
|
39
|
+
"@dhis2-ui/layer": "10.5.0",
|
|
40
|
+
"@dhis2-ui/popper": "10.5.0",
|
|
41
|
+
"@dhis2/multi-calendar-dates": "2.1.0",
|
|
42
42
|
"@dhis2/prop-types": "^3.1.2",
|
|
43
|
-
"@dhis2/ui-constants": "10.
|
|
44
|
-
"@dhis2/ui-icons": "10.
|
|
43
|
+
"@dhis2/ui-constants": "10.5.0",
|
|
44
|
+
"@dhis2/ui-icons": "10.5.0",
|
|
45
45
|
"classnames": "^2.3.1",
|
|
46
46
|
"prop-types": "^15.7.2"
|
|
47
47
|
},
|