@dhis2-ui/calendar 9.12.0-alpha.4 → 9.12.0
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 +2 -5
- package/build/cjs/calendar/calendar-table.js +5 -9
- package/build/cjs/calendar/calendar.js +33 -34
- package/build/cjs/calendar/navigation-container.js +56 -58
- package/build/cjs/calendar-input/calendar-input.js +34 -136
- package/build/cjs/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +1 -0
- package/build/cjs/features/supports_gregorian_calendar/supports_gregorian_calendar.js +1 -0
- package/build/cjs/features/supports_nepali_calendar/supports_nepali_calendar.js +1 -0
- package/build/cjs/stories/calendar-input.prod.stories.js +2 -70
- package/build/cjs/stories/calendar-story-wrapper.js +9 -9
- package/build/es/calendar/calendar-table-cell.js +2 -5
- package/build/es/calendar/calendar-table.js +4 -8
- package/build/es/calendar/calendar.js +34 -35
- package/build/es/calendar/navigation-container.js +55 -57
- package/build/es/calendar-input/calendar-input.js +36 -138
- package/build/es/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +1 -0
- package/build/es/features/supports_gregorian_calendar/supports_gregorian_calendar.js +1 -0
- package/build/es/features/supports_nepali_calendar/supports_nepali_calendar.js +1 -0
- package/build/es/stories/calendar-input.prod.stories.js +1 -66
- package/build/es/stories/calendar-story-wrapper.js +9 -9
- package/package.json +9 -9
- package/build/cjs/calendar/calendar-container.js +0 -81
- package/build/cjs/calendar-input/__tests__/calendar-input.test.js +0 -46
- package/build/es/calendar/calendar-container.js +0 -72
- package/build/es/calendar-input/__tests__/calendar-input.test.js +0 -43
|
@@ -14,8 +14,7 @@ const CalendarTableCell = _ref => {
|
|
|
14
14
|
let {
|
|
15
15
|
day,
|
|
16
16
|
cellSize,
|
|
17
|
-
selectedDate
|
|
18
|
-
unfocusable
|
|
17
|
+
selectedDate
|
|
19
18
|
} = _ref;
|
|
20
19
|
const dayHoverBackgroundColor = _uiConstants.colors.grey200;
|
|
21
20
|
const selectedDayBackgroundColor = _uiConstants.colors.teal700;
|
|
@@ -25,7 +24,6 @@ const CalendarTableCell = _ref => {
|
|
|
25
24
|
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
25
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
27
26
|
name: "day",
|
|
28
|
-
tabIndex: unfocusable ? -1 : 0,
|
|
29
27
|
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
28
|
isSelected: selectedDate === (day === null || day === void 0 ? void 0 : day.calendarDate),
|
|
31
29
|
isToday: day.isToday,
|
|
@@ -47,6 +45,5 @@ CalendarTableCell.propTypes = {
|
|
|
47
45
|
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
48
46
|
onClick: _propTypes.default.func
|
|
49
47
|
}),
|
|
50
|
-
selectedDate: _propTypes.default.string
|
|
51
|
-
unfocusable: _propTypes.default.bool
|
|
48
|
+
selectedDate: _propTypes.default.string
|
|
52
49
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.CalendarTable = void 0;
|
|
7
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
@@ -17,8 +17,7 @@ const CalendarTable = _ref => {
|
|
|
17
17
|
calendarWeekDays,
|
|
18
18
|
width,
|
|
19
19
|
cellSize,
|
|
20
|
-
selectedDate
|
|
21
|
-
unfocusable
|
|
20
|
+
selectedDate
|
|
22
21
|
} = _ref;
|
|
23
22
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
24
23
|
className: _style.default.dynamic([["452536960", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]]) + " " + "calendar-table-wrapper"
|
|
@@ -36,15 +35,14 @@ const CalendarTable = _ref => {
|
|
|
36
35
|
day: day,
|
|
37
36
|
key: day === null || day === void 0 ? void 0 : day.calendarDate,
|
|
38
37
|
cellSize: cellSize,
|
|
39
|
-
width: width
|
|
40
|
-
unfocusable: unfocusable
|
|
38
|
+
width: width
|
|
41
39
|
})))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
42
40
|
id: "452536960",
|
|
43
41
|
dynamic: [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]
|
|
44
42
|
}, [`.calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:${_uiConstants.spacers.dp4};}`, ".calendar-table.__jsx-style-dynamic-selector tr.__jsx-style-dynamic-selector,.calendar-table.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{border:none;}", `.calendar-table-wrapper.__jsx-style-dynamic-selector{padding-inline:${_uiConstants.spacers.dp4};}`]));
|
|
45
43
|
};
|
|
46
44
|
exports.CalendarTable = CalendarTable;
|
|
47
|
-
|
|
45
|
+
CalendarTable.propTypes = {
|
|
48
46
|
calendarWeekDays: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.shape({
|
|
49
47
|
calendarDate: _propTypes.default.string,
|
|
50
48
|
isInCurrentMonth: _propTypes.default.bool,
|
|
@@ -56,8 +54,6 @@ const CalendarTableProps = exports.CalendarTableProps = {
|
|
|
56
54
|
}).isRequired).isRequired).isRequired,
|
|
57
55
|
cellSize: _propTypes.default.string,
|
|
58
56
|
selectedDate: _propTypes.default.string,
|
|
59
|
-
unfocusable: _propTypes.default.bool,
|
|
60
57
|
weekDayLabels: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
61
58
|
width: _propTypes.default.string
|
|
62
|
-
};
|
|
63
|
-
CalendarTable.propTypes = CalendarTableProps;
|
|
59
|
+
};
|
|
@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.CalendarProps = exports.Calendar = void 0;
|
|
7
|
+
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
7
8
|
var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
|
|
9
|
+
var _uiConstants = require("@dhis2/ui-constants");
|
|
8
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var
|
|
12
|
+
var _calendarTable = require("./calendar-table.js");
|
|
13
|
+
var _navigationContainer = require("./navigation-container.js");
|
|
11
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); }
|
|
12
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; }
|
|
13
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -19,11 +22,13 @@ const Calendar = _ref => {
|
|
|
19
22
|
dir,
|
|
20
23
|
locale,
|
|
21
24
|
numberingSystem,
|
|
22
|
-
weekDayFormat,
|
|
25
|
+
weekDayFormat = 'narrow',
|
|
23
26
|
timeZone,
|
|
24
|
-
width,
|
|
25
|
-
cellSize
|
|
27
|
+
width = '240px',
|
|
28
|
+
cellSize = '32px'
|
|
26
29
|
} = _ref;
|
|
30
|
+
const wrapperBorderColor = _uiConstants.colors.grey300;
|
|
31
|
+
const backgroundColor = 'none';
|
|
27
32
|
const [selectedDateString, setSelectedDateString] = (0, _react.useState)(date);
|
|
28
33
|
const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
|
|
29
34
|
const options = {
|
|
@@ -33,7 +38,7 @@ const Calendar = _ref => {
|
|
|
33
38
|
numberingSystem,
|
|
34
39
|
weekDayFormat
|
|
35
40
|
};
|
|
36
|
-
const
|
|
41
|
+
const pickerOptions = (0, _multiCalendarDates.useDatePicker)({
|
|
37
42
|
onDateSelect: result => {
|
|
38
43
|
const {
|
|
39
44
|
calendarDateString
|
|
@@ -44,37 +49,31 @@ const Calendar = _ref => {
|
|
|
44
49
|
date: selectedDateString,
|
|
45
50
|
options
|
|
46
51
|
});
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}, [
|
|
70
|
-
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, calendarProps));
|
|
52
|
+
const {
|
|
53
|
+
calendarWeekDays,
|
|
54
|
+
weekDayLabels
|
|
55
|
+
} = pickerOptions;
|
|
56
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
57
|
+
className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
|
|
58
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
59
|
+
dir: languageDirection,
|
|
60
|
+
"data-test": "calendar",
|
|
61
|
+
className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
|
|
62
|
+
}, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, {
|
|
63
|
+
pickerOptions: pickerOptions,
|
|
64
|
+
languageDirection: languageDirection
|
|
65
|
+
}), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
|
|
66
|
+
selectedDate: selectedDateString,
|
|
67
|
+
calendarWeekDays: calendarWeekDays,
|
|
68
|
+
weekDayLabels: weekDayLabels,
|
|
69
|
+
cellSize: cellSize,
|
|
70
|
+
width: width
|
|
71
|
+
})), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
72
|
+
id: "2823859047",
|
|
73
|
+
dynamic: [backgroundColor, wrapperBorderColor, width]
|
|
74
|
+
}, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
|
|
71
75
|
};
|
|
72
76
|
exports.Calendar = Calendar;
|
|
73
|
-
Calendar.defaultProps = {
|
|
74
|
-
cellSize: '32px',
|
|
75
|
-
width: '240px',
|
|
76
|
-
weekDayFormat: 'narrow'
|
|
77
|
-
};
|
|
78
77
|
const CalendarProps = exports.CalendarProps = {
|
|
79
78
|
/** 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
79
|
calendar: _propTypes.default.any.isRequired,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.NavigationContainer = void 0;
|
|
7
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
var _uiIcons = require("@dhis2/ui-icons");
|
|
@@ -17,111 +17,109 @@ const NavigationContainer = _ref => {
|
|
|
17
17
|
var _currYear$label;
|
|
18
18
|
let {
|
|
19
19
|
languageDirection,
|
|
20
|
+
pickerOptions
|
|
21
|
+
} = _ref;
|
|
22
|
+
const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
|
|
23
|
+
const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16;
|
|
24
|
+
const {
|
|
20
25
|
currMonth,
|
|
21
26
|
currYear,
|
|
22
27
|
nextMonth,
|
|
23
28
|
nextYear,
|
|
24
29
|
prevMonth,
|
|
25
|
-
prevYear
|
|
26
|
-
|
|
27
|
-
} = _ref;
|
|
28
|
-
const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
|
|
29
|
-
const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16;
|
|
30
|
+
prevYear
|
|
31
|
+
} = pickerOptions;
|
|
30
32
|
|
|
31
33
|
// Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
|
|
32
34
|
// 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
35
|
const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
|
|
34
36
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
35
|
-
className: _style.default.dynamic([["
|
|
37
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "navigation-container"
|
|
36
38
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
37
|
-
className: _style.default.dynamic([["
|
|
39
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "month"
|
|
38
40
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
39
|
-
className: _style.default.dynamic([["
|
|
41
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "prev"
|
|
40
42
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
41
43
|
onClick: prevMonth.navigateTo,
|
|
42
44
|
name: "previous-month",
|
|
43
45
|
"data-test": "calendar-previous-month",
|
|
44
46
|
"aria-label": `${_index.default.t(`Go to ${prevMonth.label}`)}`,
|
|
45
47
|
type: "button",
|
|
46
|
-
|
|
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
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
48
49
|
}, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
|
|
49
|
-
className: _style.default.dynamic([["
|
|
50
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
50
51
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
51
|
-
className: _style.default.dynamic([["
|
|
52
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
|
|
52
53
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
53
|
-
className: _style.default.dynamic([["
|
|
54
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
|
|
54
55
|
}, currMonth.label)), /*#__PURE__*/_react.default.createElement("div", {
|
|
55
|
-
className: _style.default.dynamic([["
|
|
56
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
|
|
56
57
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
57
58
|
onClick: nextMonth.navigateTo,
|
|
58
59
|
"data-test": "calendar-next-month",
|
|
59
60
|
name: "next-month",
|
|
60
61
|
"aria-label": `${_index.default.t(`Go to ${nextMonth.label}`)}`,
|
|
61
62
|
type: "button",
|
|
62
|
-
|
|
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]]])
|
|
63
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
64
64
|
}, /*#__PURE__*/_react.default.createElement(NextIcon, {
|
|
65
|
-
className: _style.default.dynamic([["
|
|
65
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
66
66
|
})))), /*#__PURE__*/_react.default.createElement("div", {
|
|
67
|
-
className: _style.default.dynamic([["
|
|
67
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "year"
|
|
68
68
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
69
|
-
className: _style.default.dynamic([["
|
|
69
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "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
|
-
|
|
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]]])
|
|
75
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
77
76
|
}, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
|
|
78
|
-
className: _style.default.dynamic([["
|
|
77
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
79
78
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
80
|
-
className: _style.default.dynamic([["
|
|
79
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
|
|
81
80
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
82
81
|
"data-test": "calendar-current-year",
|
|
83
|
-
className: _style.default.dynamic([["
|
|
82
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
|
|
84
83
|
}, currentYearLabel)), /*#__PURE__*/_react.default.createElement("div", {
|
|
85
|
-
className: _style.default.dynamic([["
|
|
84
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
|
|
86
85
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
87
86
|
onClick: nextYear.navigateTo,
|
|
88
87
|
name: "next-year",
|
|
89
88
|
"aria-label": `${_index.default.t('Go to next year')}`,
|
|
90
89
|
type: "button",
|
|
91
|
-
|
|
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]]])
|
|
90
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
93
91
|
}, /*#__PURE__*/_react.default.createElement(NextIcon, {
|
|
94
|
-
className: _style.default.dynamic([["
|
|
92
|
+
className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
|
|
95
93
|
}))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
96
|
-
id: "
|
|
97
|
-
dynamic: [_uiConstants.spacers.dp4,
|
|
98
|
-
}, [
|
|
94
|
+
id: "3883083596",
|
|
95
|
+
dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]
|
|
96
|
+
}, ["button.__jsx-style-dynamic-selector{background:none;border:0;}", ".month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-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;cursor:default;}", ".month.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector{-webkit-flex:2;-ms-flex:2;flex:2;white-space:nowrap;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}", `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector{padding:${_uiConstants.spacers.dp4};height:24px;width:24px;color:${_uiConstants.colors.grey600};border-radius:3px;}`, ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{width:16px;height:16px;}", `.prev.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.grey200};color:${_uiConstants.colors.grey900};cursor:pointer;}`, `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active{background-color:${_uiConstants.colors.grey300};}`, ".label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px 8px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:16px;}", `.navigation-container.__jsx-style-dynamic-selector{gap:${_uiConstants.spacers.dp8};padding:${_uiConstants.spacers.dp4};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid ${wrapperBorderColor};background-color:${headerBackground};font-size:1.08em;}`]));
|
|
99
97
|
};
|
|
100
98
|
exports.NavigationContainer = NavigationContainer;
|
|
101
|
-
|
|
102
|
-
currMonth: _propTypes.default.shape({
|
|
103
|
-
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
104
|
-
}),
|
|
105
|
-
currYear: _propTypes.default.shape({
|
|
106
|
-
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
107
|
-
}),
|
|
99
|
+
NavigationContainer.propTypes = {
|
|
108
100
|
languageDirection: _propTypes.default.oneOf(['ltr', 'rtl']),
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
101
|
+
pickerOptions: _propTypes.default.shape({
|
|
102
|
+
currMonth: _propTypes.default.shape({
|
|
103
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
104
|
+
}),
|
|
105
|
+
currYear: _propTypes.default.shape({
|
|
106
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
107
|
+
}),
|
|
108
|
+
nextMonth: _propTypes.default.shape({
|
|
109
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
110
|
+
navigateTo: _propTypes.default.func
|
|
111
|
+
}),
|
|
112
|
+
nextYear: _propTypes.default.shape({
|
|
113
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
114
|
+
navigateTo: _propTypes.default.func
|
|
115
|
+
}),
|
|
116
|
+
prevMonth: _propTypes.default.shape({
|
|
117
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
118
|
+
navigateTo: _propTypes.default.func
|
|
119
|
+
}),
|
|
120
|
+
prevYear: _propTypes.default.shape({
|
|
121
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
122
|
+
navigateTo: _propTypes.default.func
|
|
123
|
+
})
|
|
124
|
+
})
|
|
125
|
+
};
|
|
@@ -5,16 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.CalendarInput = void 0;
|
|
7
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
8
|
-
var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
|
|
9
8
|
var _button = require("@dhis2-ui/button");
|
|
10
9
|
var _card = require("@dhis2-ui/card");
|
|
11
10
|
var _input = require("@dhis2-ui/input");
|
|
12
11
|
var _layer = require("@dhis2-ui/layer");
|
|
13
12
|
var _popper = require("@dhis2-ui/popper");
|
|
14
13
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
16
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
-
var
|
|
15
|
+
var _calendar = require("../calendar/calendar.js");
|
|
18
16
|
var _index = _interopRequireDefault(require("../locales/index.js"));
|
|
19
17
|
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
18
|
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; }
|
|
@@ -28,117 +26,58 @@ const offsetModifier = {
|
|
|
28
26
|
};
|
|
29
27
|
const CalendarInput = function () {
|
|
30
28
|
let {
|
|
31
|
-
onDateSelect
|
|
29
|
+
onDateSelect,
|
|
32
30
|
calendar,
|
|
33
31
|
date,
|
|
34
32
|
dir,
|
|
35
33
|
locale,
|
|
36
34
|
numberingSystem,
|
|
37
35
|
weekDayFormat,
|
|
36
|
+
timeZone,
|
|
38
37
|
width,
|
|
39
38
|
cellSize,
|
|
40
39
|
clearable,
|
|
41
|
-
|
|
42
|
-
maxDate,
|
|
43
|
-
format,
|
|
44
|
-
strictValidation,
|
|
45
|
-
inputWidth,
|
|
40
|
+
dataTest = 'dhis2-uiwidgets-calendar-inputfield',
|
|
46
41
|
...rest
|
|
47
42
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
48
43
|
const ref = (0, _react.useRef)();
|
|
49
44
|
const [open, setOpen] = (0, _react.useState)(false);
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
const excludeRef = (0, _react.useRef)(null);
|
|
53
|
-
(0, _react.useEffect)(() => setPartialDate(date), [date]);
|
|
54
|
-
const useDatePickerOptions = (0, _react.useMemo)(() => ({
|
|
55
|
-
calendar,
|
|
56
|
-
locale,
|
|
57
|
-
numberingSystem,
|
|
58
|
-
weekDayFormat
|
|
59
|
-
}), [calendar, locale, numberingSystem, weekDayFormat]);
|
|
60
|
-
const pickerResults = (0, _multiCalendarDates.useDatePicker)({
|
|
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);
|
|
45
|
+
const calendarProps = _react.default.useMemo(() => {
|
|
46
|
+
const onDateSelectWrapper = selectedDate => {
|
|
70
47
|
setOpen(false);
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
...validated
|
|
74
|
-
});
|
|
75
|
-
},
|
|
76
|
-
date,
|
|
77
|
-
minDate: minDate,
|
|
78
|
-
maxDate: maxDate,
|
|
79
|
-
strictValidation: strictValidation,
|
|
80
|
-
format: format,
|
|
81
|
-
options: useDatePickerOptions
|
|
82
|
-
});
|
|
83
|
-
const handleChange = e => {
|
|
84
|
-
setOpen(false);
|
|
85
|
-
setPartialDate(e.value);
|
|
86
|
-
};
|
|
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);
|
|
96
|
-
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
97
|
-
calendarDateString: partialDate,
|
|
98
|
-
...validated
|
|
99
|
-
});
|
|
100
|
-
if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
|
|
101
|
-
setOpen(false);
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
const onFocus = () => {
|
|
105
|
-
setOpen(true);
|
|
106
|
-
};
|
|
107
|
-
const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
|
|
108
|
-
const calendarProps = (0, _react.useMemo)(() => {
|
|
48
|
+
onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(selectedDate);
|
|
49
|
+
};
|
|
109
50
|
return {
|
|
51
|
+
onDateSelect: onDateSelectWrapper,
|
|
52
|
+
calendar,
|
|
110
53
|
date,
|
|
54
|
+
dir,
|
|
55
|
+
locale,
|
|
56
|
+
numberingSystem,
|
|
57
|
+
weekDayFormat,
|
|
58
|
+
timeZone,
|
|
111
59
|
width,
|
|
112
|
-
cellSize
|
|
113
|
-
isValid: pickerResults.isValid,
|
|
114
|
-
calendarWeekDays: pickerResults.calendarWeekDays,
|
|
115
|
-
weekDayLabels: pickerResults.weekDayLabels,
|
|
116
|
-
currMonth: pickerResults.currMonth,
|
|
117
|
-
currYear: pickerResults.currYear,
|
|
118
|
-
nextMonth: pickerResults.nextMonth,
|
|
119
|
-
nextYear: pickerResults.nextYear,
|
|
120
|
-
prevMonth: pickerResults.prevMonth,
|
|
121
|
-
prevYear: pickerResults.prevYear,
|
|
122
|
-
languageDirection
|
|
60
|
+
cellSize
|
|
123
61
|
};
|
|
124
|
-
}, [cellSize, date,
|
|
62
|
+
}, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
|
|
63
|
+
const onFocus = () => {
|
|
64
|
+
setOpen(true);
|
|
65
|
+
};
|
|
125
66
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
126
67
|
ref: ref,
|
|
127
|
-
className:
|
|
68
|
+
className: "jsx-862452676" + " " + "calendar-input-wrapper"
|
|
128
69
|
}, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
|
|
129
70
|
label: _index.default.t('Pick a date')
|
|
130
71
|
}, rest, {
|
|
72
|
+
dataTest: dataTest,
|
|
131
73
|
type: "text",
|
|
132
74
|
onFocus: onFocus,
|
|
133
|
-
value:
|
|
134
|
-
onChange: handleChange,
|
|
135
|
-
onBlur: handleBlur,
|
|
136
|
-
validationText: pickerResults.errorMessage || pickerResults.warningMessage,
|
|
137
|
-
error: !!pickerResults.errorMessage,
|
|
138
|
-
warning: !!pickerResults.warningMessage,
|
|
139
|
-
inputWidth: inputWidth
|
|
75
|
+
value: date
|
|
140
76
|
})), clearable && /*#__PURE__*/_react.default.createElement("div", {
|
|
141
|
-
className:
|
|
77
|
+
className: "jsx-862452676" + " " + ((0, _classnames.default)('calendar-clear-button', {
|
|
78
|
+
// ToDo: this is a workaround to show the clear button in the correct place when an icon is shown.
|
|
79
|
+
// Long-term, we should abstract and share the logic multi-select uses for the input-wrapper
|
|
80
|
+
// https://dhis2.atlassian.net/browse/DHIS2-14848
|
|
142
81
|
'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
|
|
143
82
|
'with-dense-wrapper': rest.dense
|
|
144
83
|
}) || "")
|
|
@@ -146,10 +85,7 @@ const CalendarInput = function () {
|
|
|
146
85
|
dataTest: "calendar-clear-button",
|
|
147
86
|
secondary: true,
|
|
148
87
|
small: true,
|
|
149
|
-
onClick: () =>
|
|
150
|
-
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
|
|
151
|
-
setIsIconDisplayed(false);
|
|
152
|
-
},
|
|
88
|
+
onClick: () => calendarProps.onDateSelect(null),
|
|
153
89
|
type: "button"
|
|
154
90
|
}, _index.default.t('Clear')))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
|
|
155
91
|
onBackdropClick: () => {
|
|
@@ -159,52 +95,14 @@ const CalendarInput = function () {
|
|
|
159
95
|
reference: ref,
|
|
160
96
|
placement: "bottom-start",
|
|
161
97
|
modifiers: [offsetModifier]
|
|
162
|
-
}, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(
|
|
163
|
-
|
|
164
|
-
unfocusable: true
|
|
98
|
+
}, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_calendar.Calendar, _extends({}, calendarProps, {
|
|
99
|
+
date: date
|
|
165
100
|
}))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
166
|
-
id: "
|
|
167
|
-
|
|
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;}"]));
|
|
101
|
+
id: "862452676"
|
|
102
|
+
}, [".calendar-input-wrapper.jsx-862452676{position:relative;}", ".calendar-clear-button.jsx-862452676{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-862452676{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-862452676{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
|
|
169
103
|
};
|
|
170
104
|
exports.CalendarInput = CalendarInput;
|
|
171
|
-
CalendarInput.defaultProps = {
|
|
172
|
-
dataTest: 'dhis2-uiwidgets-calendar-inputfield',
|
|
173
|
-
cellSize: '32px',
|
|
174
|
-
width: '300px',
|
|
175
|
-
weekDayFormat: 'narrow'
|
|
176
|
-
};
|
|
177
105
|
CalendarInput.propTypes = {
|
|
178
|
-
|
|
179
|
-
|
|
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
|
|
106
|
+
..._calendar.CalendarProps,
|
|
107
|
+
..._input.InputFieldProps
|
|
210
108
|
};
|
|
@@ -37,4 +37,5 @@ 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');
|
|
40
41
|
});
|
|
@@ -34,4 +34,5 @@ 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');
|
|
37
38
|
});
|