@dhis2-ui/calendar 9.11.0 → 9.11.1-beta.2
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/__e2e__/{calendar-input.stories.e2e.js → calendar-input.e2e.stories.js} +11 -20
- package/build/cjs/calendar/calendar-table-cell.js +2 -10
- package/build/cjs/calendar/calendar-table-days-header.js +3 -10
- package/build/cjs/calendar/calendar-table.js +3 -12
- package/build/cjs/calendar/calendar.js +5 -27
- package/build/cjs/calendar/navigation-container.js +9 -19
- package/build/cjs/calendar-input/calendar-input.js +6 -26
- package/build/cjs/features/supports_calendar_clear_button/supports_calendar_clear_button.js +1 -2
- package/build/cjs/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +2 -3
- package/build/cjs/features/supports_gregorian_calendar/supports_gregorian_calendar.js +2 -3
- package/build/cjs/features/supports_islamic_calendar/supports_islamic_calendar.js +1 -2
- package/build/cjs/features/supports_nepali_calendar/supports_nepali_calendar.js +3 -3
- package/build/cjs/index.js +0 -2
- package/build/cjs/locales/index.js +3 -9
- package/build/cjs/stories/{calendar-input.stories.js → calendar-input.prod.stories.js} +19 -34
- package/build/cjs/stories/calendar-story-wrapper.js +4 -23
- package/build/cjs/stories/{calendar.stories.js → calendar.prod.stories.js} +13 -18
- package/build/es/__e2e__/{calendar-input.stories.e2e.js → calendar-input.e2e.stories.js} +2 -3
- package/build/es/calendar/calendar-table-cell.js +1 -1
- package/build/es/calendar/calendar-table-days-header.js +2 -2
- package/build/es/calendar/calendar-table.js +2 -2
- package/build/es/calendar/calendar.js +1 -10
- package/build/es/calendar/navigation-container.js +8 -8
- package/build/es/calendar-input/calendar-input.js +3 -7
- package/build/es/features/supports_calendar_clear_button/supports_calendar_clear_button.js +1 -1
- package/build/es/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +2 -2
- package/build/es/features/supports_gregorian_calendar/supports_gregorian_calendar.js +2 -2
- package/build/es/features/supports_islamic_calendar/supports_islamic_calendar.js +1 -1
- package/build/es/features/supports_nepali_calendar/supports_nepali_calendar.js +3 -2
- package/build/es/stories/{calendar-input.stories.js → calendar-input.prod.stories.js} +10 -8
- package/build/es/stories/calendar-story-wrapper.js +1 -10
- package/build/es/stories/{calendar.stories.js → calendar.prod.stories.js} +11 -4
- package/package.json +11 -11
@@ -6,71 +6,62 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
Object.defineProperty(exports, "EthiopicWithAmharic", {
|
7
7
|
enumerable: true,
|
8
8
|
get: function () {
|
9
|
-
return
|
9
|
+
return _calendarInputProdStories.EthiopicWithAmharic;
|
10
10
|
}
|
11
11
|
});
|
12
12
|
Object.defineProperty(exports, "EthiopicWithEnglish", {
|
13
13
|
enumerable: true,
|
14
14
|
get: function () {
|
15
|
-
return
|
15
|
+
return _calendarInputProdStories.EthiopicWithEnglish;
|
16
16
|
}
|
17
17
|
});
|
18
18
|
Object.defineProperty(exports, "GregorianWithArabic", {
|
19
19
|
enumerable: true,
|
20
20
|
get: function () {
|
21
|
-
return
|
21
|
+
return _calendarInputProdStories.GregorianWithArabic;
|
22
22
|
}
|
23
23
|
});
|
24
24
|
Object.defineProperty(exports, "GregorianWithEnglish", {
|
25
25
|
enumerable: true,
|
26
26
|
get: function () {
|
27
|
-
return
|
27
|
+
return _calendarInputProdStories.GregorianWithEnglish;
|
28
28
|
}
|
29
29
|
});
|
30
30
|
Object.defineProperty(exports, "IslamicWithArabic", {
|
31
31
|
enumerable: true,
|
32
32
|
get: function () {
|
33
|
-
return
|
33
|
+
return _calendarInputProdStories.IslamicWithArabic;
|
34
34
|
}
|
35
35
|
});
|
36
36
|
Object.defineProperty(exports, "NepaliWithEnglish", {
|
37
37
|
enumerable: true,
|
38
38
|
get: function () {
|
39
|
-
return
|
39
|
+
return _calendarInputProdStories.NepaliWithEnglish;
|
40
40
|
}
|
41
41
|
});
|
42
42
|
Object.defineProperty(exports, "NepaliWithNepali", {
|
43
43
|
enumerable: true,
|
44
44
|
get: function () {
|
45
|
-
return
|
45
|
+
return _calendarInputProdStories.NepaliWithNepali;
|
46
46
|
}
|
47
47
|
});
|
48
48
|
exports.default = exports.TestCalendarWithClearButton = void 0;
|
49
|
-
|
50
49
|
var _react = _interopRequireDefault(require("react"));
|
51
|
-
|
52
50
|
var _index = require("../index.js");
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
57
|
-
|
58
|
-
var _default = {
|
51
|
+
var _calendarInputProdStories = require("../stories/calendar-input.prod.stories.js");
|
52
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
53
|
+
var _default = exports.default = {
|
59
54
|
title: 'CalendarInputTesting',
|
60
55
|
component: _index.CalendarInput
|
61
56
|
};
|
62
|
-
exports.default = _default;
|
63
|
-
|
64
57
|
const TestCalendarWithClearButton = () => {
|
65
58
|
var _params$get, _params$get2;
|
66
|
-
|
67
59
|
const params = new URLSearchParams(location.search);
|
68
60
|
const calendar = (_params$get = params.get('calendar')) !== null && _params$get !== void 0 ? _params$get : 'gregory';
|
69
61
|
const initialDate = (_params$get2 = params.get('initialDate')) !== null && _params$get2 !== void 0 ? _params$get2 : null;
|
70
|
-
return /*#__PURE__*/_react.default.createElement(
|
62
|
+
return /*#__PURE__*/_react.default.createElement(_calendarInputProdStories.CalendarWithClearButton, {
|
71
63
|
calendar: calendar,
|
72
64
|
date: initialDate
|
73
65
|
});
|
74
66
|
};
|
75
|
-
|
76
67
|
exports.TestCalendarWithClearButton = TestCalendarWithClearButton;
|
@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.CalendarTableCell = void 0;
|
7
|
-
|
8
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
9
|
-
|
10
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
11
|
-
|
12
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
13
|
-
|
14
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
15
|
-
|
16
11
|
var _react = _interopRequireDefault(require("react"));
|
17
|
-
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
19
|
-
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
20
13
|
const CalendarTableCell = _ref => {
|
21
14
|
let {
|
22
15
|
day,
|
@@ -39,9 +32,8 @@ const CalendarTableCell = _ref => {
|
|
39
32
|
}, day.label), /*#__PURE__*/_react.default.createElement(_style.default, {
|
40
33
|
id: "2052411850",
|
41
34
|
dynamic: [cellSize, cellSize, cellSize, cellSize, _uiConstants.colors.grey900, dayHoverBackgroundColor, _uiConstants.colors.grey300, selectedDayBackgroundColor, _uiConstants.colors.teal600, _uiConstants.colors.teal200, _uiConstants.colors.grey600]
|
42
|
-
}, [
|
35
|
+
}, [`td.__jsx-style-dynamic-selector{width:${cellSize};height:100%;height:${cellSize};text-align:center;border:2px solid transparent;padding:0;}`, "td.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:2px 2px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:2px solid transparent;min-width:16px;}", `button.__jsx-style-dynamic-selector{border:0;overflow:hidden;width:${cellSize};height:${cellSize};border:2px solid transparent;border-radius:3px;background:none;color:${_uiConstants.colors.grey900};}`, `button.__jsx-style-dynamic-selector:hover{background-color:${dayHoverBackgroundColor};-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;}`, `button.__jsx-style-dynamic-selector:active{background-color:${_uiConstants.colors.grey300};}`, `button.isSelected.__jsx-style-dynamic-selector,button.otherMonth.isSelected.__jsx-style-dynamic-selector{background-color:${selectedDayBackgroundColor};color:white;}`, "button.isToday.__jsx-style-dynamic-selector{position:relative;}", `button.isToday.__jsx-style-dynamic-selector::after{content:'';position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);height:4px;width:4px;bottom:2px;left:50%;border-radius:100%;background-color:${_uiConstants.colors.teal600};}`, `button.isSelected.isToday.__jsx-style-dynamic-selector::after{background-color:${_uiConstants.colors.teal200};}`, `button.otherMonth.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey600};}`]));
|
43
36
|
};
|
44
|
-
|
45
37
|
exports.CalendarTableCell = CalendarTableCell;
|
46
38
|
CalendarTableCell.propTypes = {
|
47
39
|
cellSize: _propTypes.default.string,
|
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.CalendarTableDaysHeader = void 0;
|
7
|
-
|
8
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
9
|
-
|
10
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
11
|
-
|
12
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
13
|
-
|
14
10
|
var _react = _interopRequireDefault(require("react"));
|
15
|
-
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
17
|
-
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
18
12
|
const CalendarTableDaysHeader = _ref => {
|
19
13
|
let {
|
20
14
|
weekDayLabels
|
@@ -26,14 +20,13 @@ const CalendarTableDaysHeader = _ref => {
|
|
26
20
|
className: _style.default.dynamic([["1577512909", [dayNamesColor]]])
|
27
21
|
}, weekDayLabels.map((label, i) => /*#__PURE__*/_react.default.createElement("th", {
|
28
22
|
scope: "col",
|
29
|
-
key:
|
23
|
+
key: `weekday-${i}`,
|
30
24
|
className: _style.default.dynamic([["1577512909", [dayNamesColor]]])
|
31
25
|
}, label)))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
32
26
|
id: "1577512909",
|
33
27
|
dynamic: [dayNamesColor]
|
34
|
-
}, [
|
28
|
+
}, [`th.__jsx-style-dynamic-selector{color:${dayNamesColor};font-weight:300;font-style:normal;padding:8px 8px;background:none;font-size:0.85em;border:none;cursor:default;}`, "tr.__jsx-style-dynamic-selector{border:none;}"]));
|
35
29
|
};
|
36
|
-
|
37
30
|
exports.CalendarTableDaysHeader = CalendarTableDaysHeader;
|
38
31
|
CalendarTableDaysHeader.propTypes = {
|
39
32
|
weekDayLabels: _propTypes.default.arrayOf(_propTypes.default.string)
|
@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.CalendarTable = void 0;
|
7
|
-
|
8
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
9
|
-
|
10
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
11
|
-
|
12
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
13
|
-
|
14
10
|
var _react = _interopRequireDefault(require("react"));
|
15
|
-
|
16
11
|
var _calendarTableCell = require("./calendar-table-cell.js");
|
17
|
-
|
18
12
|
var _calendarTableDaysHeader = require("./calendar-table-days-header.js");
|
19
|
-
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
21
|
-
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
22
14
|
const CalendarTable = _ref => {
|
23
15
|
let {
|
24
16
|
weekDayLabels,
|
@@ -36,7 +28,7 @@ const CalendarTable = _ref => {
|
|
36
28
|
}), /*#__PURE__*/_react.default.createElement("tbody", {
|
37
29
|
className: _style.default.dynamic([["452536960", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]])
|
38
30
|
}, calendarWeekDays.map((week, weekIndex) => /*#__PURE__*/_react.default.createElement("tr", {
|
39
|
-
key:
|
31
|
+
key: `week-${weekIndex + 1}`,
|
40
32
|
className: _style.default.dynamic([["452536960", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]])
|
41
33
|
}, week.map(day => /*#__PURE__*/_react.default.createElement(_calendarTableCell.CalendarTableCell, {
|
42
34
|
selectedDate: selectedDate,
|
@@ -47,9 +39,8 @@ const CalendarTable = _ref => {
|
|
47
39
|
})))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
48
40
|
id: "452536960",
|
49
41
|
dynamic: [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]
|
50
|
-
}, [
|
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};}`]));
|
51
43
|
};
|
52
|
-
|
53
44
|
exports.CalendarTable = CalendarTable;
|
54
45
|
CalendarTable.propTypes = {
|
55
46
|
calendarWeekDays: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.shape({
|
@@ -4,27 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.CalendarProps = exports.Calendar = void 0;
|
7
|
-
|
8
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
9
|
-
|
10
8
|
var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
|
11
|
-
|
12
9
|
var _uiConstants = require("@dhis2/ui-constants");
|
13
|
-
|
14
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
15
|
-
|
16
11
|
var _react = _interopRequireWildcard(require("react"));
|
17
|
-
|
18
12
|
var _calendarTable = require("./calendar-table.js");
|
19
|
-
|
20
13
|
var _navigationContainer = require("./navigation-container.js");
|
21
|
-
|
22
|
-
function
|
23
|
-
|
24
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
25
|
-
|
26
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
27
|
-
|
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); }
|
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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
28
17
|
const Calendar = _ref => {
|
29
18
|
let {
|
30
19
|
onDateSelect,
|
@@ -82,45 +71,34 @@ const Calendar = _ref => {
|
|
82
71
|
})), /*#__PURE__*/_react.default.createElement(_style.default, {
|
83
72
|
id: "2823859047",
|
84
73
|
dynamic: [backgroundColor, wrapperBorderColor, width]
|
85
|
-
}, [
|
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;}`]));
|
86
75
|
};
|
87
|
-
|
88
76
|
exports.Calendar = Calendar;
|
89
77
|
Calendar.defaultProps = {
|
90
78
|
cellSize: '32px',
|
91
79
|
width: '240px',
|
92
80
|
weekDayFormat: 'narrow'
|
93
81
|
};
|
94
|
-
const CalendarProps = {
|
82
|
+
const CalendarProps = exports.CalendarProps = {
|
95
83
|
/** 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 */
|
96
84
|
calendar: _propTypes.default.any.isRequired,
|
97
|
-
|
98
85
|
/** 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` */
|
99
86
|
onDateSelect: _propTypes.default.func.isRequired,
|
100
|
-
|
101
87
|
/** the size of a single cell in the table forming the calendar */
|
102
88
|
cellSize: _propTypes.default.string,
|
103
|
-
|
104
89
|
/** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
|
105
90
|
date: _propTypes.default.string,
|
106
|
-
|
107
91
|
/** the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control */
|
108
92
|
dir: _propTypes.default.oneOf(['ltr', 'rtl']),
|
109
|
-
|
110
93
|
/** 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) */
|
111
94
|
locale: _propTypes.default.string,
|
112
|
-
|
113
95
|
/** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
|
114
96
|
numberingSystem: _propTypes.default.string,
|
115
|
-
|
116
97
|
/** the timeZone to use */
|
117
98
|
timeZone: _propTypes.default.string,
|
118
|
-
|
119
99
|
/** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
|
120
100
|
weekDayFormat: _propTypes.default.oneOf(['narrow', 'short', 'long']),
|
121
|
-
|
122
101
|
/** the width of the calendar component */
|
123
102
|
width: _propTypes.default.string
|
124
103
|
};
|
125
|
-
exports.CalendarProps = CalendarProps;
|
126
104
|
Calendar.propTypes = CalendarProps;
|
@@ -4,27 +4,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.NavigationContainer = void 0;
|
7
|
-
|
8
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
9
|
-
|
10
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
11
|
-
|
12
9
|
var _uiIcons = require("@dhis2/ui-icons");
|
13
|
-
|
14
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
15
|
-
|
16
11
|
var _react = _interopRequireDefault(require("react"));
|
17
|
-
|
18
12
|
var _index = _interopRequireDefault(require("../locales/index.js"));
|
19
|
-
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
21
|
-
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
22
14
|
const wrapperBorderColor = _uiConstants.colors.grey300;
|
23
15
|
const headerBackground = _uiConstants.colors.grey050;
|
24
|
-
|
25
16
|
const NavigationContainer = _ref => {
|
26
17
|
var _currYear$label;
|
27
|
-
|
28
18
|
let {
|
29
19
|
languageDirection,
|
30
20
|
pickerOptions
|
@@ -38,9 +28,10 @@ const NavigationContainer = _ref => {
|
|
38
28
|
nextYear,
|
39
29
|
prevMonth,
|
40
30
|
prevYear
|
41
|
-
} = pickerOptions;
|
42
|
-
// 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
|
31
|
+
} = pickerOptions;
|
43
32
|
|
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)
|
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
|
44
35
|
const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
|
45
36
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
46
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"
|
@@ -52,7 +43,7 @@ const NavigationContainer = _ref => {
|
|
52
43
|
onClick: prevMonth.navigateTo,
|
53
44
|
name: "previous-month",
|
54
45
|
"data-test": "calendar-previous-month",
|
55
|
-
"aria-label":
|
46
|
+
"aria-label": `${_index.default.t(`Go to ${prevMonth.label}`)}`,
|
56
47
|
type: "button",
|
57
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]]])
|
58
49
|
}, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
|
@@ -67,7 +58,7 @@ const NavigationContainer = _ref => {
|
|
67
58
|
onClick: nextMonth.navigateTo,
|
68
59
|
"data-test": "calendar-next-month",
|
69
60
|
name: "next-month",
|
70
|
-
"aria-label":
|
61
|
+
"aria-label": `${_index.default.t(`Go to ${nextMonth.label}`)}`,
|
71
62
|
type: "button",
|
72
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]]])
|
73
64
|
}, /*#__PURE__*/_react.default.createElement(NextIcon, {
|
@@ -79,7 +70,7 @@ const NavigationContainer = _ref => {
|
|
79
70
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
80
71
|
onClick: prevYear.navigateTo,
|
81
72
|
name: "previous-year",
|
82
|
-
"aria-label":
|
73
|
+
"aria-label": `${_index.default.t('Go to previous year')}`,
|
83
74
|
type: "button",
|
84
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]]])
|
85
76
|
}, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
|
@@ -94,7 +85,7 @@ const NavigationContainer = _ref => {
|
|
94
85
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
95
86
|
onClick: nextYear.navigateTo,
|
96
87
|
name: "next-year",
|
97
|
-
"aria-label":
|
88
|
+
"aria-label": `${_index.default.t('Go to next year')}`,
|
98
89
|
type: "button",
|
99
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]]])
|
100
91
|
}, /*#__PURE__*/_react.default.createElement(NextIcon, {
|
@@ -102,9 +93,8 @@ const NavigationContainer = _ref => {
|
|
102
93
|
}))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
103
94
|
id: "3883083596",
|
104
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]
|
105
|
-
}, ["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;}",
|
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;}`]));
|
106
97
|
};
|
107
|
-
|
108
98
|
exports.NavigationContainer = NavigationContainer;
|
109
99
|
NavigationContainer.propTypes = {
|
110
100
|
languageDirection: _propTypes.default.oneOf(['ltr', 'rtl']),
|
@@ -4,42 +4,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.CalendarInput = void 0;
|
7
|
-
|
8
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
9
|
-
|
10
8
|
var _button = require("@dhis2-ui/button");
|
11
|
-
|
12
9
|
var _card = require("@dhis2-ui/card");
|
13
|
-
|
14
10
|
var _input = require("@dhis2-ui/input");
|
15
|
-
|
16
11
|
var _layer = require("@dhis2-ui/layer");
|
17
|
-
|
18
12
|
var _popper = require("@dhis2-ui/popper");
|
19
|
-
|
20
13
|
var _classnames = _interopRequireDefault(require("classnames"));
|
21
|
-
|
22
14
|
var _react = _interopRequireWildcard(require("react"));
|
23
|
-
|
24
15
|
var _calendar = require("../calendar/calendar.js");
|
25
|
-
|
26
16
|
var _index = _interopRequireDefault(require("../locales/index.js"));
|
27
|
-
|
28
|
-
function
|
29
|
-
|
30
|
-
function
|
31
|
-
|
32
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
33
|
-
|
34
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
35
|
-
|
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); }
|
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; }
|
19
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
20
|
+
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); }
|
36
21
|
const offsetModifier = {
|
37
22
|
name: 'offset',
|
38
23
|
options: {
|
39
24
|
offset: [0, 2]
|
40
25
|
}
|
41
26
|
};
|
42
|
-
|
43
27
|
const CalendarInput = function () {
|
44
28
|
let {
|
45
29
|
onDateSelect,
|
@@ -57,13 +41,11 @@ const CalendarInput = function () {
|
|
57
41
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
58
42
|
const ref = (0, _react.useRef)();
|
59
43
|
const [open, setOpen] = (0, _react.useState)(false);
|
60
|
-
|
61
44
|
const calendarProps = _react.default.useMemo(() => {
|
62
45
|
const onDateSelectWrapper = selectedDate => {
|
63
46
|
setOpen(false);
|
64
47
|
onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(selectedDate);
|
65
48
|
};
|
66
|
-
|
67
49
|
return {
|
68
50
|
onDateSelect: onDateSelectWrapper,
|
69
51
|
calendar,
|
@@ -77,11 +59,9 @@ const CalendarInput = function () {
|
|
77
59
|
cellSize
|
78
60
|
};
|
79
61
|
}, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
|
80
|
-
|
81
62
|
const onFocus = () => {
|
82
63
|
setOpen(true);
|
83
64
|
};
|
84
|
-
|
85
65
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
86
66
|
ref: ref,
|
87
67
|
className: "jsx-862452676" + " " + "calendar-input-wrapper"
|
@@ -119,11 +99,11 @@ const CalendarInput = function () {
|
|
119
99
|
id: "862452676"
|
120
100
|
}, [".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;}"]));
|
121
101
|
};
|
122
|
-
|
123
102
|
exports.CalendarInput = CalendarInput;
|
124
103
|
CalendarInput.defaultProps = {
|
125
104
|
dataTest: 'dhis2-uiwidgets-calendar-inputfield'
|
126
105
|
};
|
127
|
-
CalendarInput.propTypes = {
|
106
|
+
CalendarInput.propTypes = {
|
107
|
+
..._calendar.CalendarProps,
|
128
108
|
..._input.InputFieldProps
|
129
109
|
};
|
@@ -1,7 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
|
-
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a "{word}" calendar is rendered with a selected date "{word}"', (calendar, initialDate) => {
|
6
5
|
cy.visitStory('CalendarInputTesting', 'Test Calendar With Clear Button', {
|
7
6
|
qs: {
|
@@ -12,7 +11,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
12
11
|
cy.get('[data-test="storybook-calendar-date-value"]').should('have.text', initialDate);
|
13
12
|
});
|
14
13
|
(0, _cypressCucumberPreprocessor.Then)('we should be able to clear it', () => {
|
15
|
-
cy.get(
|
14
|
+
cy.get(`[data-test="calendar-clear-button"]`).click();
|
16
15
|
cy.get('[data-test="storybook-calendar-date-value"]').should('have.text', 'undefined');
|
17
16
|
});
|
18
17
|
(0, _cypressCucumberPreprocessor.Then)('show the current month afterwards', () => {
|
@@ -1,9 +1,8 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
|
-
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('an Ethiopic calendar is rendered in {word}', language => {
|
6
|
-
cy.visitStory('CalendarInputTesting',
|
5
|
+
cy.visitStory('CalendarInputTesting', `Ethiopic With ${language}`);
|
7
6
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
|
8
7
|
cy.get('[data-test=calendar]').should('be.visible');
|
9
8
|
});
|
@@ -35,7 +34,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
35
34
|
});
|
36
35
|
(0, _cypressCucumberPreprocessor.Then)('we should be able to select a day', () => {
|
37
36
|
const date = '2014-02-03';
|
38
|
-
cy.get(
|
37
|
+
cy.get(`[data-test="${date}"]`).click();
|
39
38
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
|
40
39
|
cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
|
41
40
|
cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
|
@@ -1,9 +1,8 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
|
-
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a Gregorian calendar is rendered in {word}', language => {
|
6
|
-
cy.visitStory('CalendarInputTesting',
|
5
|
+
cy.visitStory('CalendarInputTesting', `Gregorian With ${language}`);
|
7
6
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
|
8
7
|
cy.get('[data-test=calendar]').should('be.visible');
|
9
8
|
});
|
@@ -32,7 +31,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
32
31
|
});
|
33
32
|
(0, _cypressCucumberPreprocessor.Then)('we should be able to select a day', () => {
|
34
33
|
const date = '2021-10-13';
|
35
|
-
cy.get(
|
34
|
+
cy.get(`[data-test="${date}"]`).click();
|
36
35
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
|
37
36
|
cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
|
38
37
|
cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
|
@@ -1,9 +1,8 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
|
-
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('an Islamic calendar is rendered with Arabic locale', () => {
|
6
|
-
cy.visitStory('CalendarInputTesting',
|
5
|
+
cy.visitStory('CalendarInputTesting', `Islamic With Arabic`);
|
7
6
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
|
8
7
|
cy.get('[data-test=calendar]').should('be.visible');
|
9
8
|
});
|
@@ -1,9 +1,8 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
|
-
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a nepali calendar in "{word}" is rendered', language => {
|
6
|
-
cy.visitStory('CalendarInputTesting',
|
5
|
+
cy.visitStory('CalendarInputTesting', `Nepali With ${language}`);
|
7
6
|
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]', {
|
8
7
|
timeout: 10000
|
9
8
|
}).click();
|
@@ -17,6 +16,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
17
16
|
});
|
18
17
|
(0, _cypressCucumberPreprocessor.Then)('months should be rendered in "{word}" with navigation', language => {
|
19
18
|
//
|
19
|
+
|
20
20
|
const months = language === 'nepali' ? {
|
21
21
|
current: 'असोज',
|
22
22
|
previous: 'भदौ',
|
@@ -35,7 +35,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
|
|
35
35
|
});
|
36
36
|
(0, _cypressCucumberPreprocessor.Then)('we should be able to select a day', () => {
|
37
37
|
const nepaliDate = '2078-06-27';
|
38
|
-
cy.get(
|
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
41
|
cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
|
package/build/cjs/index.js
CHANGED
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
|
-
|
8
7
|
var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
|
9
|
-
|
10
8
|
var _translations = _interopRequireDefault(require("./en/translations.json"));
|
11
|
-
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13
|
-
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
14
10
|
//------------------------------------------------------------------------------
|
15
11
|
// <auto-generated>
|
16
12
|
// This code was generated by d2-i18n-generate.
|
@@ -19,9 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
19
15
|
// the code is regenerated.
|
20
16
|
// </auto-generated>
|
21
17
|
//------------------------------------------------------------------------------
|
22
|
-
const namespace = 'default';
|
23
18
|
|
19
|
+
const namespace = 'default';
|
24
20
|
_d2I18n.default.addResources('en', namespace, _translations.default);
|
25
|
-
|
26
|
-
var _default = _d2I18n.default;
|
27
|
-
exports.default = _default;
|
21
|
+
var _default = exports.default = _d2I18n.default;
|