@dhis2-ui/calendar 9.12.0-alpha.3 → 10.0.0-alpha.1
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/calendar/calendar-table-cell.js +3 -3
- package/build/cjs/calendar/calendar-table.js +1 -1
- package/build/cjs/calendar/calendar.js +1 -1
- package/build/cjs/calendar/navigation-container.js +22 -22
- package/build/cjs/calendar-input/calendar-input.js +27 -9
- package/build/cjs/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +0 -1
- package/build/cjs/features/supports_gregorian_calendar/supports_gregorian_calendar.js +0 -1
- package/build/cjs/features/supports_nepali_calendar/supports_nepali_calendar.js +0 -1
- package/build/cjs/stories/calendar-input.prod.stories.js +4 -5
- package/build/cjs/stories/calendar-story-wrapper.js +1 -6
- package/build/es/calendar/calendar-table-cell.js +3 -3
- package/build/es/calendar/calendar-table.js +1 -1
- package/build/es/calendar/calendar.js +1 -1
- package/build/es/calendar/navigation-container.js +22 -22
- package/build/es/calendar-input/calendar-input.js +27 -9
- package/build/es/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +0 -1
- package/build/es/features/supports_gregorian_calendar/supports_gregorian_calendar.js +0 -1
- package/build/es/features/supports_nepali_calendar/supports_nepali_calendar.js +0 -1
- package/build/es/stories/calendar-input.prod.stories.js +4 -5
- package/build/es/stories/calendar-story-wrapper.js +1 -6
- package/package.json +9 -9
- package/types/index.d.ts +1 -1
|
@@ -20,14 +20,14 @@ const CalendarTableCell = _ref => {
|
|
|
20
20
|
const dayHoverBackgroundColor = _uiConstants.colors.grey200;
|
|
21
21
|
const selectedDayBackgroundColor = _uiConstants.colors.teal700;
|
|
22
22
|
return /*#__PURE__*/_react.default.createElement("td", {
|
|
23
|
-
"data-test": day === null || day === void 0 ? void 0 : day.
|
|
23
|
+
"data-test": day === null || day === void 0 ? void 0 : day.dateValue,
|
|
24
24
|
onClick: day.onClick,
|
|
25
25
|
className: _style.default.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, _uiConstants.colors.grey900, dayHoverBackgroundColor, _uiConstants.colors.grey300, selectedDayBackgroundColor, _uiConstants.colors.teal600, _uiConstants.colors.teal200, _uiConstants.colors.grey600]]])
|
|
26
26
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
27
27
|
name: "day",
|
|
28
28
|
tabIndex: unfocusable ? -1 : 0,
|
|
29
29
|
className: _style.default.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, _uiConstants.colors.grey900, dayHoverBackgroundColor, _uiConstants.colors.grey300, selectedDayBackgroundColor, _uiConstants.colors.teal600, _uiConstants.colors.teal200, _uiConstants.colors.grey600]]]) + " " + ((0, _classnames.default)('day', {
|
|
30
|
-
isSelected: selectedDate === (day === null || day === void 0 ? void 0 : day.
|
|
30
|
+
isSelected: selectedDate === (day === null || day === void 0 ? void 0 : day.dateValue),
|
|
31
31
|
isToday: day.isToday,
|
|
32
32
|
otherMonth: !day.isInCurrentMonth
|
|
33
33
|
}) || "")
|
|
@@ -40,7 +40,7 @@ exports.CalendarTableCell = CalendarTableCell;
|
|
|
40
40
|
CalendarTableCell.propTypes = {
|
|
41
41
|
cellSize: _propTypes.default.string,
|
|
42
42
|
day: _propTypes.default.shape({
|
|
43
|
-
|
|
43
|
+
dateValue: _propTypes.default.string,
|
|
44
44
|
isInCurrentMonth: _propTypes.default.bool,
|
|
45
45
|
isSelected: _propTypes.default.bool,
|
|
46
46
|
isToday: _propTypes.default.bool,
|
|
@@ -34,7 +34,7 @@ const CalendarTable = _ref => {
|
|
|
34
34
|
}, week.map(day => /*#__PURE__*/_react.default.createElement(_calendarTableCell.CalendarTableCell, {
|
|
35
35
|
selectedDate: selectedDate,
|
|
36
36
|
day: day,
|
|
37
|
-
key: day === null || day === void 0 ? void 0 : day.
|
|
37
|
+
key: day === null || day === void 0 ? void 0 : day.dateValue,
|
|
38
38
|
cellSize: cellSize,
|
|
39
39
|
width: width,
|
|
40
40
|
unfocusable: unfocusable
|
|
@@ -78,7 +78,7 @@ Calendar.defaultProps = {
|
|
|
78
78
|
const CalendarProps = exports.CalendarProps = {
|
|
79
79
|
/** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts */
|
|
80
80
|
calendar: _propTypes.default.any.isRequired,
|
|
81
|
-
/** Called with signature `(null)` \|\| `({ dateCalendarString: string
|
|
81
|
+
/** Called with signature `(null)` \|\| `({ dateCalendarString: string })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
|
|
82
82
|
onDateSelect: _propTypes.default.func.isRequired,
|
|
83
83
|
/** the size of a single cell in the table forming the calendar */
|
|
84
84
|
cellSize: _propTypes.default.string,
|
|
@@ -32,11 +32,11 @@ const NavigationContainer = _ref => {
|
|
|
32
32
|
// there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
|
|
33
33
|
const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
|
|
34
34
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
35
|
-
className: _style.default.dynamic([["
|
|
35
|
+
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]]]) + " " + "navigation-container"
|
|
36
36
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
37
|
-
className: _style.default.dynamic([["
|
|
37
|
+
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]]]) + " " + "month"
|
|
38
38
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
39
|
-
className: _style.default.dynamic([["
|
|
39
|
+
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]]]) + " " + "prev"
|
|
40
40
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
41
41
|
onClick: prevMonth.navigateTo,
|
|
42
42
|
name: "previous-month",
|
|
@@ -44,15 +44,15 @@ const NavigationContainer = _ref => {
|
|
|
44
44
|
"aria-label": `${_index.default.t(`Go to ${prevMonth.label}`)}`,
|
|
45
45
|
type: "button",
|
|
46
46
|
tabIndex: unfocusable ? -1 : 0,
|
|
47
|
-
className: _style.default.dynamic([["
|
|
47
|
+
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]]])
|
|
48
48
|
}, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
|
|
49
|
-
className: _style.default.dynamic([["
|
|
49
|
+
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]]])
|
|
50
50
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
51
|
-
className: _style.default.dynamic([["
|
|
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]]]) + " " + "curr"
|
|
52
52
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
53
|
-
className: _style.default.dynamic([["
|
|
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]]]) + " " + "label"
|
|
54
54
|
}, currMonth.label)), /*#__PURE__*/_react.default.createElement("div", {
|
|
55
|
-
className: _style.default.dynamic([["
|
|
55
|
+
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"
|
|
56
56
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
57
57
|
onClick: nextMonth.navigateTo,
|
|
58
58
|
"data-test": "calendar-next-month",
|
|
@@ -60,42 +60,42 @@ const NavigationContainer = _ref => {
|
|
|
60
60
|
"aria-label": `${_index.default.t(`Go to ${nextMonth.label}`)}`,
|
|
61
61
|
type: "button",
|
|
62
62
|
tabIndex: unfocusable ? -1 : 0,
|
|
63
|
-
className: _style.default.dynamic([["
|
|
63
|
+
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]]])
|
|
64
64
|
}, /*#__PURE__*/_react.default.createElement(NextIcon, {
|
|
65
|
-
className: _style.default.dynamic([["
|
|
65
|
+
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]]])
|
|
66
66
|
})))), /*#__PURE__*/_react.default.createElement("div", {
|
|
67
|
-
className: _style.default.dynamic([["
|
|
67
|
+
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]]]) + " " + "year"
|
|
68
68
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
69
|
-
className: _style.default.dynamic([["
|
|
69
|
+
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]]]) + " " + "prev"
|
|
70
70
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
71
71
|
onClick: prevYear.navigateTo,
|
|
72
72
|
name: "previous-year",
|
|
73
73
|
"aria-label": `${_index.default.t('Go to previous year')}`,
|
|
74
74
|
type: "button",
|
|
75
75
|
tabIndex: unfocusable ? -1 : 0,
|
|
76
|
-
className: _style.default.dynamic([["
|
|
76
|
+
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]]])
|
|
77
77
|
}, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
|
|
78
|
-
className: _style.default.dynamic([["
|
|
78
|
+
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]]])
|
|
79
79
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
80
|
-
className: _style.default.dynamic([["
|
|
80
|
+
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]]]) + " " + "curr"
|
|
81
81
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
82
82
|
"data-test": "calendar-current-year",
|
|
83
|
-
className: _style.default.dynamic([["
|
|
83
|
+
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"
|
|
84
84
|
}, currentYearLabel)), /*#__PURE__*/_react.default.createElement("div", {
|
|
85
|
-
className: _style.default.dynamic([["
|
|
85
|
+
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"
|
|
86
86
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
87
87
|
onClick: nextYear.navigateTo,
|
|
88
88
|
name: "next-year",
|
|
89
89
|
"aria-label": `${_index.default.t('Go to next year')}`,
|
|
90
90
|
type: "button",
|
|
91
91
|
tabIndex: unfocusable ? -1 : 0,
|
|
92
|
-
className: _style.default.dynamic([["
|
|
92
|
+
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]]])
|
|
93
93
|
}, /*#__PURE__*/_react.default.createElement(NextIcon, {
|
|
94
|
-
className: _style.default.dynamic([["
|
|
94
|
+
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]]])
|
|
95
95
|
}))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
96
|
-
id: "
|
|
97
|
-
dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.
|
|
98
|
-
}, [
|
|
96
|
+
id: "1327991300",
|
|
97
|
+
dynamic: [_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]
|
|
98
|
+
}, [`.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:1.08em;}`, ".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;width:50%;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector,.curr.__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:24px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".curr.__jsx-style-dynamic-selector{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;}", `button.__jsx-style-dynamic-selector{background:none;border:0;padding:${_uiConstants.spacers.dp4};height:24px;width:24px;color:${_uiConstants.colors.grey600};border-radius:3px;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;}`, `button.__jsx-style-dynamic-selector:active{background-color:${_uiConstants.colors.grey300};}`, `.label.__jsx-style-dynamic-selector{padding:${_uiConstants.spacers.dp4} ${_uiConstants.spacers.dp8};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;max-width:100%;}`]));
|
|
99
99
|
};
|
|
100
100
|
exports.NavigationContainer = NavigationContainer;
|
|
101
101
|
const NavigationContainerProps = exports.NavigationContainerProps = {
|
|
@@ -41,13 +41,14 @@ const CalendarInput = function () {
|
|
|
41
41
|
minDate,
|
|
42
42
|
maxDate,
|
|
43
43
|
format,
|
|
44
|
-
// todo: props and types for format and validation
|
|
45
44
|
strictValidation,
|
|
45
|
+
inputWidth,
|
|
46
46
|
...rest
|
|
47
47
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
48
48
|
const ref = (0, _react.useRef)();
|
|
49
49
|
const [open, setOpen] = (0, _react.useState)(false);
|
|
50
50
|
const [partialDate, setPartialDate] = (0, _react.useState)(date);
|
|
51
|
+
const [isIconDisplayed, setIsIconDisplayed] = (0, _react.useState)(false);
|
|
51
52
|
const excludeRef = (0, _react.useRef)(null);
|
|
52
53
|
(0, _react.useEffect)(() => setPartialDate(date), [date]);
|
|
53
54
|
const useDatePickerOptions = (0, _react.useMemo)(() => ({
|
|
@@ -58,8 +59,19 @@ const CalendarInput = function () {
|
|
|
58
59
|
}), [calendar, locale, numberingSystem, weekDayFormat]);
|
|
59
60
|
const pickerResults = (0, _multiCalendarDates.useDatePicker)({
|
|
60
61
|
onDateSelect: result => {
|
|
62
|
+
const validated = (0, _multiCalendarDates.validateDateString)(result.calendarDateString, {
|
|
63
|
+
calendar,
|
|
64
|
+
format,
|
|
65
|
+
minDateString: minDate,
|
|
66
|
+
maxDateString: maxDate,
|
|
67
|
+
strictValidation
|
|
68
|
+
});
|
|
69
|
+
setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
|
|
61
70
|
setOpen(false);
|
|
62
|
-
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(
|
|
71
|
+
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
72
|
+
calendarDateString: result.calendarDateString,
|
|
73
|
+
...validated
|
|
74
|
+
});
|
|
63
75
|
},
|
|
64
76
|
date,
|
|
65
77
|
minDate: minDate,
|
|
@@ -80,6 +92,7 @@ const CalendarInput = function () {
|
|
|
80
92
|
maxDateString: maxDate,
|
|
81
93
|
strictValidation
|
|
82
94
|
});
|
|
95
|
+
setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
|
|
83
96
|
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
84
97
|
calendarDateString: partialDate,
|
|
85
98
|
...validated
|
|
@@ -111,7 +124,7 @@ const CalendarInput = function () {
|
|
|
111
124
|
}, [cellSize, date, pickerResults, width, languageDirection]);
|
|
112
125
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
113
126
|
ref: ref,
|
|
114
|
-
className: "
|
|
127
|
+
className: _style.default.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + "calendar-input-wrapper"
|
|
115
128
|
}, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
|
|
116
129
|
label: _index.default.t('Pick a date')
|
|
117
130
|
}, rest, {
|
|
@@ -122,9 +135,10 @@ const CalendarInput = function () {
|
|
|
122
135
|
onBlur: handleBlur,
|
|
123
136
|
validationText: pickerResults.errorMessage || pickerResults.warningMessage,
|
|
124
137
|
error: !!pickerResults.errorMessage,
|
|
125
|
-
warning: !!pickerResults.warningMessage
|
|
138
|
+
warning: !!pickerResults.warningMessage,
|
|
139
|
+
inputWidth: inputWidth
|
|
126
140
|
})), clearable && /*#__PURE__*/_react.default.createElement("div", {
|
|
127
|
-
className: "
|
|
141
|
+
className: _style.default.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + ((0, _classnames.default)('calendar-clear-button', {
|
|
128
142
|
'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
|
|
129
143
|
'with-dense-wrapper': rest.dense
|
|
130
144
|
}) || "")
|
|
@@ -134,6 +148,7 @@ const CalendarInput = function () {
|
|
|
134
148
|
small: true,
|
|
135
149
|
onClick: () => {
|
|
136
150
|
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
|
|
151
|
+
setIsIconDisplayed(false);
|
|
137
152
|
},
|
|
138
153
|
type: "button"
|
|
139
154
|
}, _index.default.t('Clear')))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
|
|
@@ -148,20 +163,21 @@ const CalendarInput = function () {
|
|
|
148
163
|
excludedRef: excludeRef,
|
|
149
164
|
unfocusable: true
|
|
150
165
|
}))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
151
|
-
id: "
|
|
152
|
-
|
|
166
|
+
id: "1003597543",
|
|
167
|
+
dynamic: [inputWidth, isIconDisplayed ? '36px' : '6px']
|
|
168
|
+
}, [`.calendar-input-wrapper.__jsx-style-dynamic-selector{position:relative;width:${inputWidth};}`, `.calendar-clear-button.__jsx-style-dynamic-selector{position:absolute;inset-inline-end:${isIconDisplayed ? '36px' : '6px'};-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}`, ".calendar-clear-button.with-icon.__jsx-style-dynamic-selector{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.__jsx-style-dynamic-selector{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
|
|
153
169
|
};
|
|
154
170
|
exports.CalendarInput = CalendarInput;
|
|
155
171
|
CalendarInput.defaultProps = {
|
|
156
172
|
dataTest: 'dhis2-uiwidgets-calendar-inputfield',
|
|
157
173
|
cellSize: '32px',
|
|
158
|
-
width: '
|
|
174
|
+
width: '300px',
|
|
159
175
|
weekDayFormat: 'narrow'
|
|
160
176
|
};
|
|
161
177
|
CalendarInput.propTypes = {
|
|
162
178
|
/** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts */
|
|
163
179
|
calendar: _propTypes.default.any.isRequired,
|
|
164
|
-
/** Called with signature `(null)` \|\| `({ dateCalendarString: string
|
|
180
|
+
/** Called with signature `(null)` \|\| `({ dateCalendarString: string })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
|
|
165
181
|
onDateSelect: _propTypes.default.func.isRequired,
|
|
166
182
|
/** the size of a single cell in the table forming the calendar */
|
|
167
183
|
cellSize: _propTypes.default.string,
|
|
@@ -175,6 +191,8 @@ CalendarInput.propTypes = {
|
|
|
175
191
|
dir: _propTypes.default.oneOf(['ltr', 'rtl']),
|
|
176
192
|
/** The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY` */
|
|
177
193
|
format: _propTypes.default.oneOf(['YYYY-MM-DD', 'DD-MM-YYYY']),
|
|
194
|
+
/** the width of input field */
|
|
195
|
+
inputWidth: _propTypes.default.string,
|
|
178
196
|
/** any valid locale - if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15) */
|
|
179
197
|
locale: _propTypes.default.string,
|
|
180
198
|
/** The maximum selectable date */
|
|
@@ -37,5 +37,4 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
|
37
37
|
cy.get(`[data-test="${date}"]`).click();
|
|
38
38
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
|
|
39
39
|
cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
|
|
40
|
-
cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
|
|
41
40
|
});
|
|
@@ -34,5 +34,4 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
|
34
34
|
cy.get(`[data-test="${date}"]`).click();
|
|
35
35
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
|
|
36
36
|
cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
|
|
37
|
-
cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
|
|
38
37
|
});
|
|
@@ -38,5 +38,4 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
|
38
38
|
cy.get(`[data-test="${nepaliDate}"]`).click();
|
|
39
39
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', nepaliDate);
|
|
40
40
|
cy.get('[data-test="storybook-calendar-result"]').should('have.text', nepaliDate);
|
|
41
|
-
cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
|
|
42
41
|
});
|
|
@@ -123,17 +123,16 @@ exports.CalendarWithClearButton = CalendarWithClearButton;
|
|
|
123
123
|
function CalendarWithEditiableInput() {
|
|
124
124
|
const [date, setDate] = (0, _react.useState)('2020-07-03');
|
|
125
125
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, {
|
|
126
|
-
editable: true,
|
|
127
126
|
date: date,
|
|
128
127
|
calendar: "gregory",
|
|
129
128
|
onDateSelect: selectedDate => {
|
|
130
129
|
const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
|
|
131
130
|
setDate(date);
|
|
132
131
|
},
|
|
133
|
-
width:
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
132
|
+
width: "400px",
|
|
133
|
+
minDate: "2020-07-01",
|
|
134
|
+
maxDate: "2020-07-09",
|
|
135
|
+
clearable: true
|
|
137
136
|
})));
|
|
138
137
|
}
|
|
139
138
|
function CalendarWithEditiableInputReactForm() {
|
|
@@ -17,7 +17,6 @@ const {
|
|
|
17
17
|
numberingSystems
|
|
18
18
|
} = _multiCalendarDates.constants;
|
|
19
19
|
const CalendarStoryWrapper = props => {
|
|
20
|
-
var _selectedDate$calenda;
|
|
21
20
|
const {
|
|
22
21
|
calendar,
|
|
23
22
|
locale,
|
|
@@ -158,11 +157,7 @@ const CalendarStoryWrapper = props => {
|
|
|
158
157
|
}
|
|
159
158
|
}, /*#__PURE__*/_react.default.createElement("div", null, selectedDate && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "calendar date: "), /*#__PURE__*/_react.default.createElement("span", {
|
|
160
159
|
"data-test": "storybook-calendar-result"
|
|
161
|
-
}, selectedDate.calendarDateString)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "
|
|
162
|
-
"data-test": "storybook-calendar-result-iso"
|
|
163
|
-
}, (_selectedDate$calenda = selectedDate.calendarDate) === null || _selectedDate$calenda === void 0 ? void 0 : _selectedDate$calenda.withCalendar('iso8601').toLocaleString('en-GB', {
|
|
164
|
-
dateStyle: 'long'
|
|
165
|
-
}))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
|
|
160
|
+
}, selectedDate.calendarDateString)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
|
|
166
161
|
};
|
|
167
162
|
exports.CalendarStoryWrapper = CalendarStoryWrapper;
|
|
168
163
|
CalendarStoryWrapper.defaultProps = {
|
|
@@ -13,14 +13,14 @@ export const CalendarTableCell = _ref => {
|
|
|
13
13
|
const dayHoverBackgroundColor = colors.grey200;
|
|
14
14
|
const selectedDayBackgroundColor = colors.teal700;
|
|
15
15
|
return /*#__PURE__*/React.createElement("td", {
|
|
16
|
-
"data-test": day === null || day === void 0 ? void 0 : day.
|
|
16
|
+
"data-test": day === null || day === void 0 ? void 0 : day.dateValue,
|
|
17
17
|
onClick: day.onClick,
|
|
18
18
|
className: _JSXStyle.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, colors.grey900, dayHoverBackgroundColor, colors.grey300, selectedDayBackgroundColor, colors.teal600, colors.teal200, colors.grey600]]])
|
|
19
19
|
}, /*#__PURE__*/React.createElement("button", {
|
|
20
20
|
name: "day",
|
|
21
21
|
tabIndex: unfocusable ? -1 : 0,
|
|
22
22
|
className: _JSXStyle.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, colors.grey900, dayHoverBackgroundColor, colors.grey300, selectedDayBackgroundColor, colors.teal600, colors.teal200, colors.grey600]]]) + " " + (cx('day', {
|
|
23
|
-
isSelected: selectedDate === (day === null || day === void 0 ? void 0 : day.
|
|
23
|
+
isSelected: selectedDate === (day === null || day === void 0 ? void 0 : day.dateValue),
|
|
24
24
|
isToday: day.isToday,
|
|
25
25
|
otherMonth: !day.isInCurrentMonth
|
|
26
26
|
}) || "")
|
|
@@ -32,7 +32,7 @@ export const CalendarTableCell = _ref => {
|
|
|
32
32
|
CalendarTableCell.propTypes = {
|
|
33
33
|
cellSize: PropTypes.string,
|
|
34
34
|
day: PropTypes.shape({
|
|
35
|
-
|
|
35
|
+
dateValue: PropTypes.string,
|
|
36
36
|
isInCurrentMonth: PropTypes.bool,
|
|
37
37
|
isSelected: PropTypes.bool,
|
|
38
38
|
isToday: PropTypes.bool,
|
|
@@ -27,7 +27,7 @@ export const CalendarTable = _ref => {
|
|
|
27
27
|
}, week.map(day => /*#__PURE__*/React.createElement(CalendarTableCell, {
|
|
28
28
|
selectedDate: selectedDate,
|
|
29
29
|
day: day,
|
|
30
|
-
key: day === null || day === void 0 ? void 0 : day.
|
|
30
|
+
key: day === null || day === void 0 ? void 0 : day.dateValue,
|
|
31
31
|
cellSize: cellSize,
|
|
32
32
|
width: width,
|
|
33
33
|
unfocusable: unfocusable
|
|
@@ -68,7 +68,7 @@ Calendar.defaultProps = {
|
|
|
68
68
|
export const CalendarProps = {
|
|
69
69
|
/** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts */
|
|
70
70
|
calendar: PropTypes.any.isRequired,
|
|
71
|
-
/** Called with signature `(null)` \|\| `({ dateCalendarString: string
|
|
71
|
+
/** Called with signature `(null)` \|\| `({ dateCalendarString: string })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
|
|
72
72
|
onDateSelect: PropTypes.func.isRequired,
|
|
73
73
|
/** the size of a single cell in the table forming the calendar */
|
|
74
74
|
cellSize: PropTypes.string,
|
|
@@ -25,11 +25,11 @@ export const NavigationContainer = _ref => {
|
|
|
25
25
|
// there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
|
|
26
26
|
const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
|
|
27
27
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
28
|
-
className: _JSXStyle.dynamic([["
|
|
28
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "navigation-container"
|
|
29
29
|
}, /*#__PURE__*/React.createElement("div", {
|
|
30
|
-
className: _JSXStyle.dynamic([["
|
|
30
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "month"
|
|
31
31
|
}, /*#__PURE__*/React.createElement("div", {
|
|
32
|
-
className: _JSXStyle.dynamic([["
|
|
32
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "prev"
|
|
33
33
|
}, /*#__PURE__*/React.createElement("button", {
|
|
34
34
|
onClick: prevMonth.navigateTo,
|
|
35
35
|
name: "previous-month",
|
|
@@ -37,15 +37,15 @@ export const NavigationContainer = _ref => {
|
|
|
37
37
|
"aria-label": `${i18n.t(`Go to ${prevMonth.label}`)}`,
|
|
38
38
|
type: "button",
|
|
39
39
|
tabIndex: unfocusable ? -1 : 0,
|
|
40
|
-
className: _JSXStyle.dynamic([["
|
|
40
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
|
|
41
41
|
}, /*#__PURE__*/React.createElement(PreviousIcon, {
|
|
42
|
-
className: _JSXStyle.dynamic([["
|
|
42
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
|
|
43
43
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
44
|
-
className: _JSXStyle.dynamic([["
|
|
44
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "curr"
|
|
45
45
|
}, /*#__PURE__*/React.createElement("span", {
|
|
46
|
-
className: _JSXStyle.dynamic([["
|
|
46
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "label"
|
|
47
47
|
}, currMonth.label)), /*#__PURE__*/React.createElement("div", {
|
|
48
|
-
className: _JSXStyle.dynamic([["
|
|
48
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "next"
|
|
49
49
|
}, /*#__PURE__*/React.createElement("button", {
|
|
50
50
|
onClick: nextMonth.navigateTo,
|
|
51
51
|
"data-test": "calendar-next-month",
|
|
@@ -53,42 +53,42 @@ export const NavigationContainer = _ref => {
|
|
|
53
53
|
"aria-label": `${i18n.t(`Go to ${nextMonth.label}`)}`,
|
|
54
54
|
type: "button",
|
|
55
55
|
tabIndex: unfocusable ? -1 : 0,
|
|
56
|
-
className: _JSXStyle.dynamic([["
|
|
56
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
|
|
57
57
|
}, /*#__PURE__*/React.createElement(NextIcon, {
|
|
58
|
-
className: _JSXStyle.dynamic([["
|
|
58
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
|
|
59
59
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
60
|
-
className: _JSXStyle.dynamic([["
|
|
60
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "year"
|
|
61
61
|
}, /*#__PURE__*/React.createElement("div", {
|
|
62
|
-
className: _JSXStyle.dynamic([["
|
|
62
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "prev"
|
|
63
63
|
}, /*#__PURE__*/React.createElement("button", {
|
|
64
64
|
onClick: prevYear.navigateTo,
|
|
65
65
|
name: "previous-year",
|
|
66
66
|
"aria-label": `${i18n.t('Go to previous year')}`,
|
|
67
67
|
type: "button",
|
|
68
68
|
tabIndex: unfocusable ? -1 : 0,
|
|
69
|
-
className: _JSXStyle.dynamic([["
|
|
69
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
|
|
70
70
|
}, /*#__PURE__*/React.createElement(PreviousIcon, {
|
|
71
|
-
className: _JSXStyle.dynamic([["
|
|
71
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
|
|
72
72
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
73
|
-
className: _JSXStyle.dynamic([["
|
|
73
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "curr"
|
|
74
74
|
}, /*#__PURE__*/React.createElement("span", {
|
|
75
75
|
"data-test": "calendar-current-year",
|
|
76
|
-
className: _JSXStyle.dynamic([["
|
|
76
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "label"
|
|
77
77
|
}, currentYearLabel)), /*#__PURE__*/React.createElement("div", {
|
|
78
|
-
className: _JSXStyle.dynamic([["
|
|
78
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "next"
|
|
79
79
|
}, /*#__PURE__*/React.createElement("button", {
|
|
80
80
|
onClick: nextYear.navigateTo,
|
|
81
81
|
name: "next-year",
|
|
82
82
|
"aria-label": `${i18n.t('Go to next year')}`,
|
|
83
83
|
type: "button",
|
|
84
84
|
tabIndex: unfocusable ? -1 : 0,
|
|
85
|
-
className: _JSXStyle.dynamic([["
|
|
85
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
|
|
86
86
|
}, /*#__PURE__*/React.createElement(NextIcon, {
|
|
87
|
-
className: _JSXStyle.dynamic([["
|
|
87
|
+
className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
|
|
88
88
|
}))))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
89
|
-
id: "
|
|
90
|
-
dynamic: [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.
|
|
91
|
-
}, [
|
|
89
|
+
id: "1327991300",
|
|
90
|
+
dynamic: [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]
|
|
91
|
+
}, [`.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:1.08em;}`, ".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;width:50%;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector,.curr.__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:24px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".curr.__jsx-style-dynamic-selector{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;}", `button.__jsx-style-dynamic-selector{background:none;border:0;padding:${spacers.dp4};height:24px;width:24px;color:${colors.grey600};border-radius:3px;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;}`, `button.__jsx-style-dynamic-selector:active{background-color:${colors.grey300};}`, `.label.__jsx-style-dynamic-selector{padding:${spacers.dp4} ${spacers.dp8};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;max-width:100%;}`]));
|
|
92
92
|
};
|
|
93
93
|
export const NavigationContainerProps = {
|
|
94
94
|
currMonth: PropTypes.shape({
|
|
@@ -32,13 +32,14 @@ export const CalendarInput = function () {
|
|
|
32
32
|
minDate,
|
|
33
33
|
maxDate,
|
|
34
34
|
format,
|
|
35
|
-
// todo: props and types for format and validation
|
|
36
35
|
strictValidation,
|
|
36
|
+
inputWidth,
|
|
37
37
|
...rest
|
|
38
38
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
39
39
|
const ref = useRef();
|
|
40
40
|
const [open, setOpen] = useState(false);
|
|
41
41
|
const [partialDate, setPartialDate] = useState(date);
|
|
42
|
+
const [isIconDisplayed, setIsIconDisplayed] = useState(false);
|
|
42
43
|
const excludeRef = useRef(null);
|
|
43
44
|
useEffect(() => setPartialDate(date), [date]);
|
|
44
45
|
const useDatePickerOptions = useMemo(() => ({
|
|
@@ -49,8 +50,19 @@ export const CalendarInput = function () {
|
|
|
49
50
|
}), [calendar, locale, numberingSystem, weekDayFormat]);
|
|
50
51
|
const pickerResults = useDatePicker({
|
|
51
52
|
onDateSelect: result => {
|
|
53
|
+
const validated = validateDateString(result.calendarDateString, {
|
|
54
|
+
calendar,
|
|
55
|
+
format,
|
|
56
|
+
minDateString: minDate,
|
|
57
|
+
maxDateString: maxDate,
|
|
58
|
+
strictValidation
|
|
59
|
+
});
|
|
60
|
+
setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
|
|
52
61
|
setOpen(false);
|
|
53
|
-
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(
|
|
62
|
+
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
63
|
+
calendarDateString: result.calendarDateString,
|
|
64
|
+
...validated
|
|
65
|
+
});
|
|
54
66
|
},
|
|
55
67
|
date,
|
|
56
68
|
minDate: minDate,
|
|
@@ -71,6 +83,7 @@ export const CalendarInput = function () {
|
|
|
71
83
|
maxDateString: maxDate,
|
|
72
84
|
strictValidation
|
|
73
85
|
});
|
|
86
|
+
setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
|
|
74
87
|
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
75
88
|
calendarDateString: partialDate,
|
|
76
89
|
...validated
|
|
@@ -102,7 +115,7 @@ export const CalendarInput = function () {
|
|
|
102
115
|
}, [cellSize, date, pickerResults, width, languageDirection]);
|
|
103
116
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
104
117
|
ref: ref,
|
|
105
|
-
className: "
|
|
118
|
+
className: _JSXStyle.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + "calendar-input-wrapper"
|
|
106
119
|
}, /*#__PURE__*/React.createElement(InputField, _extends({
|
|
107
120
|
label: i18n.t('Pick a date')
|
|
108
121
|
}, rest, {
|
|
@@ -113,9 +126,10 @@ export const CalendarInput = function () {
|
|
|
113
126
|
onBlur: handleBlur,
|
|
114
127
|
validationText: pickerResults.errorMessage || pickerResults.warningMessage,
|
|
115
128
|
error: !!pickerResults.errorMessage,
|
|
116
|
-
warning: !!pickerResults.warningMessage
|
|
129
|
+
warning: !!pickerResults.warningMessage,
|
|
130
|
+
inputWidth: inputWidth
|
|
117
131
|
})), clearable && /*#__PURE__*/React.createElement("div", {
|
|
118
|
-
className: "
|
|
132
|
+
className: _JSXStyle.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + (cx('calendar-clear-button', {
|
|
119
133
|
'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
|
|
120
134
|
'with-dense-wrapper': rest.dense
|
|
121
135
|
}) || "")
|
|
@@ -125,6 +139,7 @@ export const CalendarInput = function () {
|
|
|
125
139
|
small: true,
|
|
126
140
|
onClick: () => {
|
|
127
141
|
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
|
|
142
|
+
setIsIconDisplayed(false);
|
|
128
143
|
},
|
|
129
144
|
type: "button"
|
|
130
145
|
}, i18n.t('Clear')))), open && /*#__PURE__*/React.createElement(Layer, {
|
|
@@ -139,19 +154,20 @@ export const CalendarInput = function () {
|
|
|
139
154
|
excludedRef: excludeRef,
|
|
140
155
|
unfocusable: true
|
|
141
156
|
}))))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
142
|
-
id: "
|
|
143
|
-
|
|
157
|
+
id: "1003597543",
|
|
158
|
+
dynamic: [inputWidth, isIconDisplayed ? '36px' : '6px']
|
|
159
|
+
}, [`.calendar-input-wrapper.__jsx-style-dynamic-selector{position:relative;width:${inputWidth};}`, `.calendar-clear-button.__jsx-style-dynamic-selector{position:absolute;inset-inline-end:${isIconDisplayed ? '36px' : '6px'};-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}`, ".calendar-clear-button.with-icon.__jsx-style-dynamic-selector{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.__jsx-style-dynamic-selector{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
|
|
144
160
|
};
|
|
145
161
|
CalendarInput.defaultProps = {
|
|
146
162
|
dataTest: 'dhis2-uiwidgets-calendar-inputfield',
|
|
147
163
|
cellSize: '32px',
|
|
148
|
-
width: '
|
|
164
|
+
width: '300px',
|
|
149
165
|
weekDayFormat: 'narrow'
|
|
150
166
|
};
|
|
151
167
|
CalendarInput.propTypes = {
|
|
152
168
|
/** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts */
|
|
153
169
|
calendar: PropTypes.any.isRequired,
|
|
154
|
-
/** Called with signature `(null)` \|\| `({ dateCalendarString: string
|
|
170
|
+
/** Called with signature `(null)` \|\| `({ dateCalendarString: string })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
|
|
155
171
|
onDateSelect: PropTypes.func.isRequired,
|
|
156
172
|
/** the size of a single cell in the table forming the calendar */
|
|
157
173
|
cellSize: PropTypes.string,
|
|
@@ -165,6 +181,8 @@ CalendarInput.propTypes = {
|
|
|
165
181
|
dir: PropTypes.oneOf(['ltr', 'rtl']),
|
|
166
182
|
/** The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY` */
|
|
167
183
|
format: PropTypes.oneOf(['YYYY-MM-DD', 'DD-MM-YYYY']),
|
|
184
|
+
/** the width of input field */
|
|
185
|
+
inputWidth: PropTypes.string,
|
|
168
186
|
/** any valid locale - if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15) */
|
|
169
187
|
locale: PropTypes.string,
|
|
170
188
|
/** The maximum selectable date */
|
|
@@ -35,5 +35,4 @@ Then('we should be able to select a day', () => {
|
|
|
35
35
|
cy.get(`[data-test="${date}"]`).click();
|
|
36
36
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
|
|
37
37
|
cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
|
|
38
|
-
cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
|
|
39
38
|
});
|
|
@@ -32,5 +32,4 @@ Then('we should be able to select a day', () => {
|
|
|
32
32
|
cy.get(`[data-test="${date}"]`).click();
|
|
33
33
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
|
|
34
34
|
cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
|
|
35
|
-
cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
|
|
36
35
|
});
|
|
@@ -36,5 +36,4 @@ Then('we should be able to select a day', () => {
|
|
|
36
36
|
cy.get(`[data-test="${nepaliDate}"]`).click();
|
|
37
37
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', nepaliDate);
|
|
38
38
|
cy.get('[data-test="storybook-calendar-result"]').should('have.text', nepaliDate);
|
|
39
|
-
cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
|
|
40
39
|
});
|
|
@@ -110,17 +110,16 @@ export const CalendarWithClearButton = _ref2 => {
|
|
|
110
110
|
export function CalendarWithEditiableInput() {
|
|
111
111
|
const [date, setDate] = useState('2020-07-03');
|
|
112
112
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarInput, {
|
|
113
|
-
editable: true,
|
|
114
113
|
date: date,
|
|
115
114
|
calendar: "gregory",
|
|
116
115
|
onDateSelect: selectedDate => {
|
|
117
116
|
const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
|
|
118
117
|
setDate(date);
|
|
119
118
|
},
|
|
120
|
-
width:
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
119
|
+
width: "400px",
|
|
120
|
+
minDate: "2020-07-01",
|
|
121
|
+
maxDate: "2020-07-09",
|
|
122
|
+
clearable: true
|
|
124
123
|
})));
|
|
125
124
|
}
|
|
126
125
|
export function CalendarWithEditiableInputReactForm() {
|
|
@@ -8,7 +8,6 @@ const {
|
|
|
8
8
|
numberingSystems
|
|
9
9
|
} = constants;
|
|
10
10
|
export const CalendarStoryWrapper = props => {
|
|
11
|
-
var _selectedDate$calenda;
|
|
12
11
|
const {
|
|
13
12
|
calendar,
|
|
14
13
|
locale,
|
|
@@ -149,11 +148,7 @@ export const CalendarStoryWrapper = props => {
|
|
|
149
148
|
}
|
|
150
149
|
}, /*#__PURE__*/React.createElement("div", null, selectedDate && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "calendar date: "), /*#__PURE__*/React.createElement("span", {
|
|
151
150
|
"data-test": "storybook-calendar-result"
|
|
152
|
-
}, selectedDate.calendarDateString)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "
|
|
153
|
-
"data-test": "storybook-calendar-result-iso"
|
|
154
|
-
}, (_selectedDate$calenda = selectedDate.calendarDate) === null || _selectedDate$calenda === void 0 ? void 0 : _selectedDate$calenda.withCalendar('iso8601').toLocaleString('en-GB', {
|
|
155
|
-
dateStyle: 'long'
|
|
156
|
-
}))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
|
|
151
|
+
}, selectedDate.calendarDateString)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
|
|
157
152
|
};
|
|
158
153
|
CalendarStoryWrapper.defaultProps = {
|
|
159
154
|
calendar: 'gregorian',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/calendar",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.0-alpha.1",
|
|
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": "
|
|
37
|
-
"@dhis2-ui/card": "
|
|
38
|
-
"@dhis2-ui/input": "
|
|
39
|
-
"@dhis2-ui/layer": "
|
|
40
|
-
"@dhis2-ui/popper": "
|
|
41
|
-
"@dhis2/multi-calendar-dates": "
|
|
36
|
+
"@dhis2-ui/button": "10.0.0-alpha.1",
|
|
37
|
+
"@dhis2-ui/card": "10.0.0-alpha.1",
|
|
38
|
+
"@dhis2-ui/input": "10.0.0-alpha.1",
|
|
39
|
+
"@dhis2-ui/layer": "10.0.0-alpha.1",
|
|
40
|
+
"@dhis2-ui/popper": "10.0.0-alpha.1",
|
|
41
|
+
"@dhis2/multi-calendar-dates": "2.0.0-alpha.1",
|
|
42
42
|
"@dhis2/prop-types": "^3.1.2",
|
|
43
|
-
"@dhis2/ui-constants": "
|
|
44
|
-
"@dhis2/ui-icons": "
|
|
43
|
+
"@dhis2/ui-constants": "10.0.0-alpha.1",
|
|
44
|
+
"@dhis2/ui-icons": "10.0.0-alpha.1",
|
|
45
45
|
"classnames": "^2.3.1",
|
|
46
46
|
"prop-types": "^15.7.2"
|
|
47
47
|
},
|
package/types/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ export interface CalendarProps {
|
|
|
13
13
|
*/
|
|
14
14
|
calendar: CalendarPickerOptions['calendar']
|
|
15
15
|
/**
|
|
16
|
-
* Called with signature `(null)` \|\| `({ dateCalendarString: string
|
|
16
|
+
* Called with signature `(null)` \|\| `({ dateCalendarString: string })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd`
|
|
17
17
|
*/
|
|
18
18
|
onDateSelect: CalendarPickerParam['onDateSelect']
|
|
19
19
|
/**
|