@dhis2-ui/calendar 9.12.0-alpha.2 → 9.12.0-alpha.4
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/navigation-container.js +22 -22
- package/build/cjs/calendar-input/calendar-input.js +71 -15
- 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 +55 -6
- package/build/cjs/stories/calendar-story-wrapper.js +1 -6
- package/build/es/calendar/navigation-container.js +22 -22
- package/build/es/calendar-input/calendar-input.js +72 -16
- 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 +54 -6
- package/build/es/stories/calendar-story-wrapper.js +1 -6
- package/package.json +8 -8
|
@@ -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 = {
|
|
@@ -12,9 +12,9 @@ var _input = require("@dhis2-ui/input");
|
|
|
12
12
|
var _layer = require("@dhis2-ui/layer");
|
|
13
13
|
var _popper = require("@dhis2-ui/popper");
|
|
14
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
16
17
|
var _calendarContainer = require("../calendar/calendar-container.js");
|
|
17
|
-
var _calendar = require("../calendar/calendar.js");
|
|
18
18
|
var _index = _interopRequireDefault(require("../locales/index.js"));
|
|
19
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
20
20
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -35,34 +35,43 @@ const CalendarInput = function () {
|
|
|
35
35
|
locale,
|
|
36
36
|
numberingSystem,
|
|
37
37
|
weekDayFormat,
|
|
38
|
-
timeZone,
|
|
39
38
|
width,
|
|
40
39
|
cellSize,
|
|
41
40
|
clearable,
|
|
42
41
|
minDate,
|
|
43
42
|
maxDate,
|
|
44
43
|
format,
|
|
45
|
-
// todo: props and types for format and validation
|
|
46
44
|
strictValidation,
|
|
45
|
+
inputWidth,
|
|
47
46
|
...rest
|
|
48
47
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
49
48
|
const ref = (0, _react.useRef)();
|
|
50
49
|
const [open, setOpen] = (0, _react.useState)(false);
|
|
51
50
|
const [partialDate, setPartialDate] = (0, _react.useState)(date);
|
|
51
|
+
const [isIconDisplayed, setIsIconDisplayed] = (0, _react.useState)(false);
|
|
52
52
|
const excludeRef = (0, _react.useRef)(null);
|
|
53
53
|
(0, _react.useEffect)(() => setPartialDate(date), [date]);
|
|
54
54
|
const useDatePickerOptions = (0, _react.useMemo)(() => ({
|
|
55
55
|
calendar,
|
|
56
56
|
locale,
|
|
57
|
-
timeZone,
|
|
58
|
-
// todo: we probably shouldn't have had timezone here in the first place
|
|
59
57
|
numberingSystem,
|
|
60
58
|
weekDayFormat
|
|
61
|
-
}), [calendar, locale, numberingSystem,
|
|
59
|
+
}), [calendar, locale, numberingSystem, weekDayFormat]);
|
|
62
60
|
const pickerResults = (0, _multiCalendarDates.useDatePicker)({
|
|
63
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);
|
|
64
70
|
setOpen(false);
|
|
65
|
-
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(
|
|
71
|
+
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
72
|
+
calendarDateString: result.calendarDateString,
|
|
73
|
+
...validated
|
|
74
|
+
});
|
|
66
75
|
},
|
|
67
76
|
date,
|
|
68
77
|
minDate: minDate,
|
|
@@ -72,11 +81,21 @@ const CalendarInput = function () {
|
|
|
72
81
|
options: useDatePickerOptions
|
|
73
82
|
});
|
|
74
83
|
const handleChange = e => {
|
|
84
|
+
setOpen(false);
|
|
75
85
|
setPartialDate(e.value);
|
|
76
86
|
};
|
|
77
87
|
const handleBlur = (_, e) => {
|
|
88
|
+
const validated = (0, _multiCalendarDates.validateDateString)(partialDate, {
|
|
89
|
+
calendar,
|
|
90
|
+
format,
|
|
91
|
+
minDateString: minDate,
|
|
92
|
+
maxDateString: maxDate,
|
|
93
|
+
strictValidation
|
|
94
|
+
});
|
|
95
|
+
setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
|
|
78
96
|
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
79
|
-
calendarDateString: partialDate
|
|
97
|
+
calendarDateString: partialDate,
|
|
98
|
+
...validated
|
|
80
99
|
});
|
|
81
100
|
if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
|
|
82
101
|
setOpen(false);
|
|
@@ -105,7 +124,7 @@ const CalendarInput = function () {
|
|
|
105
124
|
}, [cellSize, date, pickerResults, width, languageDirection]);
|
|
106
125
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
107
126
|
ref: ref,
|
|
108
|
-
className: "
|
|
127
|
+
className: _style.default.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + "calendar-input-wrapper"
|
|
109
128
|
}, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
|
|
110
129
|
label: _index.default.t('Pick a date')
|
|
111
130
|
}, rest, {
|
|
@@ -116,9 +135,10 @@ const CalendarInput = function () {
|
|
|
116
135
|
onBlur: handleBlur,
|
|
117
136
|
validationText: pickerResults.errorMessage || pickerResults.warningMessage,
|
|
118
137
|
error: !!pickerResults.errorMessage,
|
|
119
|
-
warning: !!pickerResults.warningMessage
|
|
138
|
+
warning: !!pickerResults.warningMessage,
|
|
139
|
+
inputWidth: inputWidth
|
|
120
140
|
})), clearable && /*#__PURE__*/_react.default.createElement("div", {
|
|
121
|
-
className: "
|
|
141
|
+
className: _style.default.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + ((0, _classnames.default)('calendar-clear-button', {
|
|
122
142
|
'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
|
|
123
143
|
'with-dense-wrapper': rest.dense
|
|
124
144
|
}) || "")
|
|
@@ -128,6 +148,7 @@ const CalendarInput = function () {
|
|
|
128
148
|
small: true,
|
|
129
149
|
onClick: () => {
|
|
130
150
|
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
|
|
151
|
+
setIsIconDisplayed(false);
|
|
131
152
|
},
|
|
132
153
|
type: "button"
|
|
133
154
|
}, _index.default.t('Clear')))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
|
|
@@ -142,13 +163,48 @@ const CalendarInput = function () {
|
|
|
142
163
|
excludedRef: excludeRef,
|
|
143
164
|
unfocusable: true
|
|
144
165
|
}))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
145
|
-
id: "
|
|
146
|
-
|
|
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;}"]));
|
|
147
169
|
};
|
|
148
170
|
exports.CalendarInput = CalendarInput;
|
|
149
171
|
CalendarInput.defaultProps = {
|
|
150
|
-
dataTest: 'dhis2-uiwidgets-calendar-inputfield'
|
|
172
|
+
dataTest: 'dhis2-uiwidgets-calendar-inputfield',
|
|
173
|
+
cellSize: '32px',
|
|
174
|
+
width: '300px',
|
|
175
|
+
weekDayFormat: 'narrow'
|
|
151
176
|
};
|
|
152
177
|
CalendarInput.propTypes = {
|
|
153
|
-
|
|
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 */
|
|
179
|
+
calendar: _propTypes.default.any.isRequired,
|
|
180
|
+
/** Called with signature `(null)` \|\| `({ dateCalendarString: string, dateCalendar: Temporal.ZonedDateTime })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
|
|
181
|
+
onDateSelect: _propTypes.default.func.isRequired,
|
|
182
|
+
/** the size of a single cell in the table forming the calendar */
|
|
183
|
+
cellSize: _propTypes.default.string,
|
|
184
|
+
/** Whether the clear button is displayed */
|
|
185
|
+
clearable: _propTypes.default.bool,
|
|
186
|
+
/** 'data-test' attribute of `InputField` component */
|
|
187
|
+
dataTest: _propTypes.default.string,
|
|
188
|
+
/** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
|
|
189
|
+
date: _propTypes.default.string,
|
|
190
|
+
/** the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control */
|
|
191
|
+
dir: _propTypes.default.oneOf(['ltr', 'rtl']),
|
|
192
|
+
/** The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY` */
|
|
193
|
+
format: _propTypes.default.oneOf(['YYYY-MM-DD', 'DD-MM-YYYY']),
|
|
194
|
+
/** the width of input field */
|
|
195
|
+
inputWidth: _propTypes.default.string,
|
|
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) */
|
|
197
|
+
locale: _propTypes.default.string,
|
|
198
|
+
/** The maximum selectable date */
|
|
199
|
+
maxDate: _propTypes.default.string,
|
|
200
|
+
/** The minimum selectable date */
|
|
201
|
+
minDate: _propTypes.default.string,
|
|
202
|
+
/** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
|
|
203
|
+
numberingSystem: _propTypes.default.string,
|
|
204
|
+
/** Whether to use strict validation by showing errors for out-of-range dates when enabled (default), and warnings when disabled */
|
|
205
|
+
strictValidation: _propTypes.default.bool,
|
|
206
|
+
/** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
|
|
207
|
+
weekDayFormat: _propTypes.default.oneOf(['narrow', 'short', 'long']),
|
|
208
|
+
/** the width of the calendar component */
|
|
209
|
+
width: _propTypes.default.string
|
|
154
210
|
};
|
|
@@ -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
|
});
|
|
@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.CalendarWithClearButton = void 0;
|
|
7
7
|
exports.CalendarWithEditiableInput = CalendarWithEditiableInput;
|
|
8
|
+
exports.CalendarWithEditiableInputReactForm = CalendarWithEditiableInputReactForm;
|
|
8
9
|
exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
|
|
9
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _reactFinalForm = require("react-final-form");
|
|
10
12
|
var _calendarInput = require("../calendar-input/calendar-input.js");
|
|
11
13
|
var _calendarStoryWrapper = require("./calendar-story-wrapper.js");
|
|
12
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
17
|
const subtitle = `[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar`;
|
|
15
18
|
const description = `
|
|
16
19
|
Use a CalendarInput where there is a need to let the user input a date.
|
|
@@ -120,17 +123,63 @@ exports.CalendarWithClearButton = CalendarWithClearButton;
|
|
|
120
123
|
function CalendarWithEditiableInput() {
|
|
121
124
|
const [date, setDate] = (0, _react.useState)('2020-07-03');
|
|
122
125
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, {
|
|
123
|
-
editable: true,
|
|
124
126
|
date: date,
|
|
125
127
|
calendar: "gregory",
|
|
126
128
|
onDateSelect: selectedDate => {
|
|
127
129
|
const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
|
|
128
130
|
setDate(date);
|
|
129
131
|
},
|
|
130
|
-
width:
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
maxDate: '2020-07-09'
|
|
132
|
+
width: "400px",
|
|
133
|
+
minDate: "2020-07-01",
|
|
134
|
+
maxDate: "2020-07-09",
|
|
135
|
+
clearable: true
|
|
135
136
|
})));
|
|
137
|
+
}
|
|
138
|
+
function CalendarWithEditiableInputReactForm() {
|
|
139
|
+
const [calendarError, setCalendarError] = (0, _react.useState)(undefined);
|
|
140
|
+
const errored = () => {
|
|
141
|
+
return {
|
|
142
|
+
calendar: calendarError
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Form, {
|
|
146
|
+
onSubmit: (values, meta) => {
|
|
147
|
+
console.log('SUBMITTING', {
|
|
148
|
+
values,
|
|
149
|
+
meta
|
|
150
|
+
});
|
|
151
|
+
},
|
|
152
|
+
initialValues: {
|
|
153
|
+
calendar: '2022-10-12'
|
|
154
|
+
},
|
|
155
|
+
validate: errored
|
|
156
|
+
}, _ref3 => {
|
|
157
|
+
let {
|
|
158
|
+
handleSubmit
|
|
159
|
+
} = _ref3;
|
|
160
|
+
return /*#__PURE__*/_react.default.createElement("form", {
|
|
161
|
+
onSubmit: handleSubmit
|
|
162
|
+
}, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
|
|
163
|
+
name: "calendar"
|
|
164
|
+
}, props => /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, _extends({}, props, {
|
|
165
|
+
input: props.input,
|
|
166
|
+
meta: props.meta,
|
|
167
|
+
editable: true,
|
|
168
|
+
date: props.input.value,
|
|
169
|
+
calendar: "gregory",
|
|
170
|
+
onDateSelect: date => {
|
|
171
|
+
if (!date.isValid) {
|
|
172
|
+
setCalendarError(date.errorMessage);
|
|
173
|
+
} else {
|
|
174
|
+
setCalendarError(undefined);
|
|
175
|
+
}
|
|
176
|
+
props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
|
|
177
|
+
},
|
|
178
|
+
timeZone: 'UTC'
|
|
179
|
+
}))), /*#__PURE__*/_react.default.createElement("button", {
|
|
180
|
+
type: "submit",
|
|
181
|
+
disabled: false,
|
|
182
|
+
onClick: handleSubmit
|
|
183
|
+
}, "Submit"));
|
|
184
|
+
});
|
|
136
185
|
}
|
|
@@ -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 = {
|
|
@@ -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({
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
2
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
3
|
-
import { useDatePicker, useResolvedDirection } from '@dhis2/multi-calendar-dates';
|
|
3
|
+
import { useDatePicker, useResolvedDirection, validateDateString } from '@dhis2/multi-calendar-dates';
|
|
4
4
|
import { Button } from '@dhis2-ui/button';
|
|
5
5
|
import { Card } from '@dhis2-ui/card';
|
|
6
6
|
import { InputField } from '@dhis2-ui/input';
|
|
7
7
|
import { Layer } from '@dhis2-ui/layer';
|
|
8
8
|
import { Popper } from '@dhis2-ui/popper';
|
|
9
9
|
import cx from 'classnames';
|
|
10
|
+
import PropTypes from 'prop-types';
|
|
10
11
|
import React, { useRef, useState, useMemo, useEffect } from 'react';
|
|
11
12
|
import { CalendarContainer } from '../calendar/calendar-container.js';
|
|
12
|
-
import { CalendarProps } from '../calendar/calendar.js';
|
|
13
13
|
import i18n from '../locales/index.js';
|
|
14
14
|
const offsetModifier = {
|
|
15
15
|
name: 'offset',
|
|
@@ -26,34 +26,43 @@ export const CalendarInput = function () {
|
|
|
26
26
|
locale,
|
|
27
27
|
numberingSystem,
|
|
28
28
|
weekDayFormat,
|
|
29
|
-
timeZone,
|
|
30
29
|
width,
|
|
31
30
|
cellSize,
|
|
32
31
|
clearable,
|
|
33
32
|
minDate,
|
|
34
33
|
maxDate,
|
|
35
34
|
format,
|
|
36
|
-
// todo: props and types for format and validation
|
|
37
35
|
strictValidation,
|
|
36
|
+
inputWidth,
|
|
38
37
|
...rest
|
|
39
38
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
40
39
|
const ref = useRef();
|
|
41
40
|
const [open, setOpen] = useState(false);
|
|
42
41
|
const [partialDate, setPartialDate] = useState(date);
|
|
42
|
+
const [isIconDisplayed, setIsIconDisplayed] = useState(false);
|
|
43
43
|
const excludeRef = useRef(null);
|
|
44
44
|
useEffect(() => setPartialDate(date), [date]);
|
|
45
45
|
const useDatePickerOptions = useMemo(() => ({
|
|
46
46
|
calendar,
|
|
47
47
|
locale,
|
|
48
|
-
timeZone,
|
|
49
|
-
// todo: we probably shouldn't have had timezone here in the first place
|
|
50
48
|
numberingSystem,
|
|
51
49
|
weekDayFormat
|
|
52
|
-
}), [calendar, locale, numberingSystem,
|
|
50
|
+
}), [calendar, locale, numberingSystem, weekDayFormat]);
|
|
53
51
|
const pickerResults = useDatePicker({
|
|
54
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);
|
|
55
61
|
setOpen(false);
|
|
56
|
-
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(
|
|
62
|
+
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
63
|
+
calendarDateString: result.calendarDateString,
|
|
64
|
+
...validated
|
|
65
|
+
});
|
|
57
66
|
},
|
|
58
67
|
date,
|
|
59
68
|
minDate: minDate,
|
|
@@ -63,11 +72,21 @@ export const CalendarInput = function () {
|
|
|
63
72
|
options: useDatePickerOptions
|
|
64
73
|
});
|
|
65
74
|
const handleChange = e => {
|
|
75
|
+
setOpen(false);
|
|
66
76
|
setPartialDate(e.value);
|
|
67
77
|
};
|
|
68
78
|
const handleBlur = (_, e) => {
|
|
79
|
+
const validated = validateDateString(partialDate, {
|
|
80
|
+
calendar,
|
|
81
|
+
format,
|
|
82
|
+
minDateString: minDate,
|
|
83
|
+
maxDateString: maxDate,
|
|
84
|
+
strictValidation
|
|
85
|
+
});
|
|
86
|
+
setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
|
|
69
87
|
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
70
|
-
calendarDateString: partialDate
|
|
88
|
+
calendarDateString: partialDate,
|
|
89
|
+
...validated
|
|
71
90
|
});
|
|
72
91
|
if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
|
|
73
92
|
setOpen(false);
|
|
@@ -96,7 +115,7 @@ export const CalendarInput = function () {
|
|
|
96
115
|
}, [cellSize, date, pickerResults, width, languageDirection]);
|
|
97
116
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
98
117
|
ref: ref,
|
|
99
|
-
className: "
|
|
118
|
+
className: _JSXStyle.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + "calendar-input-wrapper"
|
|
100
119
|
}, /*#__PURE__*/React.createElement(InputField, _extends({
|
|
101
120
|
label: i18n.t('Pick a date')
|
|
102
121
|
}, rest, {
|
|
@@ -107,9 +126,10 @@ export const CalendarInput = function () {
|
|
|
107
126
|
onBlur: handleBlur,
|
|
108
127
|
validationText: pickerResults.errorMessage || pickerResults.warningMessage,
|
|
109
128
|
error: !!pickerResults.errorMessage,
|
|
110
|
-
warning: !!pickerResults.warningMessage
|
|
129
|
+
warning: !!pickerResults.warningMessage,
|
|
130
|
+
inputWidth: inputWidth
|
|
111
131
|
})), clearable && /*#__PURE__*/React.createElement("div", {
|
|
112
|
-
className: "
|
|
132
|
+
className: _JSXStyle.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + (cx('calendar-clear-button', {
|
|
113
133
|
'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
|
|
114
134
|
'with-dense-wrapper': rest.dense
|
|
115
135
|
}) || "")
|
|
@@ -119,6 +139,7 @@ export const CalendarInput = function () {
|
|
|
119
139
|
small: true,
|
|
120
140
|
onClick: () => {
|
|
121
141
|
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
|
|
142
|
+
setIsIconDisplayed(false);
|
|
122
143
|
},
|
|
123
144
|
type: "button"
|
|
124
145
|
}, i18n.t('Clear')))), open && /*#__PURE__*/React.createElement(Layer, {
|
|
@@ -133,12 +154,47 @@ export const CalendarInput = function () {
|
|
|
133
154
|
excludedRef: excludeRef,
|
|
134
155
|
unfocusable: true
|
|
135
156
|
}))))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
136
|
-
id: "
|
|
137
|
-
|
|
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;}"]));
|
|
138
160
|
};
|
|
139
161
|
CalendarInput.defaultProps = {
|
|
140
|
-
dataTest: 'dhis2-uiwidgets-calendar-inputfield'
|
|
162
|
+
dataTest: 'dhis2-uiwidgets-calendar-inputfield',
|
|
163
|
+
cellSize: '32px',
|
|
164
|
+
width: '300px',
|
|
165
|
+
weekDayFormat: 'narrow'
|
|
141
166
|
};
|
|
142
167
|
CalendarInput.propTypes = {
|
|
143
|
-
|
|
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 */
|
|
169
|
+
calendar: PropTypes.any.isRequired,
|
|
170
|
+
/** Called with signature `(null)` \|\| `({ dateCalendarString: string, dateCalendar: Temporal.ZonedDateTime })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
|
|
171
|
+
onDateSelect: PropTypes.func.isRequired,
|
|
172
|
+
/** the size of a single cell in the table forming the calendar */
|
|
173
|
+
cellSize: PropTypes.string,
|
|
174
|
+
/** Whether the clear button is displayed */
|
|
175
|
+
clearable: PropTypes.bool,
|
|
176
|
+
/** 'data-test' attribute of `InputField` component */
|
|
177
|
+
dataTest: PropTypes.string,
|
|
178
|
+
/** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
|
|
179
|
+
date: PropTypes.string,
|
|
180
|
+
/** the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control */
|
|
181
|
+
dir: PropTypes.oneOf(['ltr', 'rtl']),
|
|
182
|
+
/** The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY` */
|
|
183
|
+
format: PropTypes.oneOf(['YYYY-MM-DD', 'DD-MM-YYYY']),
|
|
184
|
+
/** the width of input field */
|
|
185
|
+
inputWidth: PropTypes.string,
|
|
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) */
|
|
187
|
+
locale: PropTypes.string,
|
|
188
|
+
/** The maximum selectable date */
|
|
189
|
+
maxDate: PropTypes.string,
|
|
190
|
+
/** The minimum selectable date */
|
|
191
|
+
minDate: PropTypes.string,
|
|
192
|
+
/** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
|
|
193
|
+
numberingSystem: PropTypes.string,
|
|
194
|
+
/** Whether to use strict validation by showing errors for out-of-range dates when enabled (default), and warnings when disabled */
|
|
195
|
+
strictValidation: PropTypes.bool,
|
|
196
|
+
/** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
|
|
197
|
+
weekDayFormat: PropTypes.oneOf(['narrow', 'short', 'long']),
|
|
198
|
+
/** the width of the calendar component */
|
|
199
|
+
width: PropTypes.string
|
|
144
200
|
};
|
|
@@ -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
|
});
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
1
2
|
import React, { useState } from 'react';
|
|
3
|
+
import { Field, Form } from 'react-final-form';
|
|
2
4
|
import { CalendarInput } from '../calendar-input/calendar-input.js';
|
|
3
5
|
import { CalendarStoryWrapper } from './calendar-story-wrapper.js';
|
|
4
6
|
const subtitle = `[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar`;
|
|
@@ -108,17 +110,63 @@ export const CalendarWithClearButton = _ref2 => {
|
|
|
108
110
|
export function CalendarWithEditiableInput() {
|
|
109
111
|
const [date, setDate] = useState('2020-07-03');
|
|
110
112
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarInput, {
|
|
111
|
-
editable: true,
|
|
112
113
|
date: date,
|
|
113
114
|
calendar: "gregory",
|
|
114
115
|
onDateSelect: selectedDate => {
|
|
115
116
|
const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
|
|
116
117
|
setDate(date);
|
|
117
118
|
},
|
|
118
|
-
width:
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
maxDate: '2020-07-09'
|
|
119
|
+
width: "400px",
|
|
120
|
+
minDate: "2020-07-01",
|
|
121
|
+
maxDate: "2020-07-09",
|
|
122
|
+
clearable: true
|
|
123
123
|
})));
|
|
124
|
+
}
|
|
125
|
+
export function CalendarWithEditiableInputReactForm() {
|
|
126
|
+
const [calendarError, setCalendarError] = useState(undefined);
|
|
127
|
+
const errored = () => {
|
|
128
|
+
return {
|
|
129
|
+
calendar: calendarError
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
return /*#__PURE__*/React.createElement(Form, {
|
|
133
|
+
onSubmit: (values, meta) => {
|
|
134
|
+
console.log('SUBMITTING', {
|
|
135
|
+
values,
|
|
136
|
+
meta
|
|
137
|
+
});
|
|
138
|
+
},
|
|
139
|
+
initialValues: {
|
|
140
|
+
calendar: '2022-10-12'
|
|
141
|
+
},
|
|
142
|
+
validate: errored
|
|
143
|
+
}, _ref3 => {
|
|
144
|
+
let {
|
|
145
|
+
handleSubmit
|
|
146
|
+
} = _ref3;
|
|
147
|
+
return /*#__PURE__*/React.createElement("form", {
|
|
148
|
+
onSubmit: handleSubmit
|
|
149
|
+
}, /*#__PURE__*/React.createElement(Field, {
|
|
150
|
+
name: "calendar"
|
|
151
|
+
}, props => /*#__PURE__*/React.createElement(CalendarInput, _extends({}, props, {
|
|
152
|
+
input: props.input,
|
|
153
|
+
meta: props.meta,
|
|
154
|
+
editable: true,
|
|
155
|
+
date: props.input.value,
|
|
156
|
+
calendar: "gregory",
|
|
157
|
+
onDateSelect: date => {
|
|
158
|
+
if (!date.isValid) {
|
|
159
|
+
setCalendarError(date.errorMessage);
|
|
160
|
+
} else {
|
|
161
|
+
setCalendarError(undefined);
|
|
162
|
+
}
|
|
163
|
+
props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
|
|
164
|
+
},
|
|
165
|
+
timeZone: 'UTC'
|
|
166
|
+
}))), /*#__PURE__*/React.createElement("button", {
|
|
167
|
+
type: "submit",
|
|
168
|
+
disabled: false,
|
|
169
|
+
onClick: handleSubmit
|
|
170
|
+
}, "Submit"));
|
|
171
|
+
});
|
|
124
172
|
}
|
|
@@ -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": "9.12.0-alpha.
|
|
3
|
+
"version": "9.12.0-alpha.4",
|
|
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": "9.12.0-alpha.
|
|
37
|
-
"@dhis2-ui/card": "9.12.0-alpha.
|
|
38
|
-
"@dhis2-ui/input": "9.12.0-alpha.
|
|
39
|
-
"@dhis2-ui/layer": "9.12.0-alpha.
|
|
40
|
-
"@dhis2-ui/popper": "9.12.0-alpha.
|
|
36
|
+
"@dhis2-ui/button": "9.12.0-alpha.4",
|
|
37
|
+
"@dhis2-ui/card": "9.12.0-alpha.4",
|
|
38
|
+
"@dhis2-ui/input": "9.12.0-alpha.4",
|
|
39
|
+
"@dhis2-ui/layer": "9.12.0-alpha.4",
|
|
40
|
+
"@dhis2-ui/popper": "9.12.0-alpha.4",
|
|
41
41
|
"@dhis2/multi-calendar-dates": "1.3.0",
|
|
42
42
|
"@dhis2/prop-types": "^3.1.2",
|
|
43
|
-
"@dhis2/ui-constants": "9.12.0-alpha.
|
|
44
|
-
"@dhis2/ui-icons": "9.12.0-alpha.
|
|
43
|
+
"@dhis2/ui-constants": "9.12.0-alpha.4",
|
|
44
|
+
"@dhis2/ui-icons": "9.12.0-alpha.4",
|
|
45
45
|
"classnames": "^2.3.1",
|
|
46
46
|
"prop-types": "^15.7.2"
|
|
47
47
|
},
|