@dhis2-ui/calendar 9.9.0-alpha.1 → 9.9.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/calendar/calendar-container.js +83 -0
- package/build/cjs/calendar/calendar-table.js +5 -3
- package/build/cjs/calendar/calendar.js +26 -33
- package/build/cjs/calendar/navigation-container.js +29 -32
- package/build/cjs/calendar-input/calendar-input.js +67 -34
- package/build/cjs/stories/calendar-input.stories.js +22 -2
- package/build/es/calendar/calendar-container.js +61 -0
- package/build/es/calendar/calendar-table.js +3 -2
- package/build/es/calendar/calendar.js +27 -31
- package/build/es/calendar/navigation-container.js +27 -31
- package/build/es/calendar-input/calendar-input.js +67 -35
- package/build/es/stories/calendar-input.stories.js +18 -1
- package/package.json +9 -9
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.CalendarContainer = void 0;
|
|
7
|
+
|
|
8
|
+
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
|
+
|
|
10
|
+
var _uiConstants = require("@dhis2/ui-constants");
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _calendarTable = require("./calendar-table.js");
|
|
17
|
+
|
|
18
|
+
var _navigationContainer = require("./navigation-container.js");
|
|
19
|
+
|
|
20
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
+
|
|
22
|
+
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; }
|
|
23
|
+
|
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
|
+
|
|
26
|
+
const wrapperBorderColor = _uiConstants.colors.grey300;
|
|
27
|
+
const backgroundColor = 'none';
|
|
28
|
+
|
|
29
|
+
const CalendarContainer = _ref => {
|
|
30
|
+
let {
|
|
31
|
+
date,
|
|
32
|
+
width,
|
|
33
|
+
cellSize,
|
|
34
|
+
calendarWeekDays,
|
|
35
|
+
weekDayLabels,
|
|
36
|
+
currMonth,
|
|
37
|
+
currYear,
|
|
38
|
+
nextMonth,
|
|
39
|
+
nextYear,
|
|
40
|
+
prevMonth,
|
|
41
|
+
prevYear,
|
|
42
|
+
languageDirection
|
|
43
|
+
} = _ref;
|
|
44
|
+
const navigationProps = (0, _react.useMemo)(() => {
|
|
45
|
+
return {
|
|
46
|
+
currMonth,
|
|
47
|
+
currYear,
|
|
48
|
+
nextMonth,
|
|
49
|
+
nextYear,
|
|
50
|
+
prevMonth,
|
|
51
|
+
prevYear,
|
|
52
|
+
languageDirection
|
|
53
|
+
};
|
|
54
|
+
}, [currMonth, currYear, languageDirection, nextMonth, nextYear, prevMonth, prevYear]);
|
|
55
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
56
|
+
className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
|
|
57
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
58
|
+
dir: languageDirection,
|
|
59
|
+
"data-test": "calendar",
|
|
60
|
+
className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
|
|
61
|
+
}, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, navigationProps), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
|
|
62
|
+
selectedDate: date,
|
|
63
|
+
calendarWeekDays: calendarWeekDays,
|
|
64
|
+
weekDayLabels: weekDayLabels,
|
|
65
|
+
cellSize: cellSize,
|
|
66
|
+
width: width
|
|
67
|
+
})), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
68
|
+
id: "2823859047",
|
|
69
|
+
dynamic: [backgroundColor, wrapperBorderColor, width]
|
|
70
|
+
}, [".calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:".concat(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 ").concat(wrapperBorderColor, ";border-radius:3px;min-width:").concat(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
|
+
};
|
|
72
|
+
|
|
73
|
+
exports.CalendarContainer = CalendarContainer;
|
|
74
|
+
CalendarContainer.defaultProps = {
|
|
75
|
+
cellSize: '32px',
|
|
76
|
+
width: '240px'
|
|
77
|
+
};
|
|
78
|
+
CalendarContainer.propTypes = {
|
|
79
|
+
/** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
|
|
80
|
+
date: _propTypes.default.string,
|
|
81
|
+
..._calendarTable.CalendarTableProps,
|
|
82
|
+
..._navigationContainer.NavigationContainerProps
|
|
83
|
+
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.CalendarTable = void 0;
|
|
6
|
+
exports.CalendarTableProps = exports.CalendarTable = void 0;
|
|
7
7
|
|
|
8
8
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
9
|
|
|
@@ -51,7 +51,7 @@ const CalendarTable = _ref => {
|
|
|
51
51
|
};
|
|
52
52
|
|
|
53
53
|
exports.CalendarTable = CalendarTable;
|
|
54
|
-
|
|
54
|
+
const CalendarTableProps = {
|
|
55
55
|
calendarWeekDays: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.shape({
|
|
56
56
|
calendarDate: _propTypes.default.string,
|
|
57
57
|
isInCurrentMonth: _propTypes.default.bool,
|
|
@@ -65,4 +65,6 @@ CalendarTable.propTypes = {
|
|
|
65
65
|
selectedDate: _propTypes.default.string,
|
|
66
66
|
weekDayLabels: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
67
67
|
width: _propTypes.default.string
|
|
68
|
-
};
|
|
68
|
+
};
|
|
69
|
+
exports.CalendarTableProps = CalendarTableProps;
|
|
70
|
+
CalendarTable.propTypes = CalendarTableProps;
|
|
@@ -5,19 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.CalendarProps = exports.Calendar = void 0;
|
|
7
7
|
|
|
8
|
-
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
|
-
|
|
10
8
|
var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
|
|
11
9
|
|
|
12
|
-
var _uiConstants = require("@dhis2/ui-constants");
|
|
13
|
-
|
|
14
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
11
|
|
|
16
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
13
|
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
var _navigationContainer = require("./navigation-container.js");
|
|
14
|
+
var _calendarContainer = require("./calendar-container.js");
|
|
21
15
|
|
|
22
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
17
|
|
|
@@ -38,8 +32,6 @@ const Calendar = _ref => {
|
|
|
38
32
|
width,
|
|
39
33
|
cellSize
|
|
40
34
|
} = _ref;
|
|
41
|
-
const wrapperBorderColor = _uiConstants.colors.grey300;
|
|
42
|
-
const backgroundColor = 'none';
|
|
43
35
|
const [selectedDateString, setSelectedDateString] = (0, _react.useState)(date);
|
|
44
36
|
const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
|
|
45
37
|
const options = {
|
|
@@ -49,7 +41,7 @@ const Calendar = _ref => {
|
|
|
49
41
|
numberingSystem,
|
|
50
42
|
weekDayFormat
|
|
51
43
|
};
|
|
52
|
-
const
|
|
44
|
+
const pickerResults = (0, _multiCalendarDates.useDatePicker)({
|
|
53
45
|
onDateSelect: result => {
|
|
54
46
|
const {
|
|
55
47
|
calendarDateString
|
|
@@ -60,29 +52,30 @@ const Calendar = _ref => {
|
|
|
60
52
|
date: selectedDateString,
|
|
61
53
|
options
|
|
62
54
|
});
|
|
63
|
-
const {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}, [
|
|
55
|
+
const calendarProps = (0, _react.useMemo)(() => {
|
|
56
|
+
return {
|
|
57
|
+
date,
|
|
58
|
+
dir,
|
|
59
|
+
locale,
|
|
60
|
+
width,
|
|
61
|
+
cellSize,
|
|
62
|
+
// minDate,
|
|
63
|
+
// maxDate,
|
|
64
|
+
// validation, // todo: clarify how we use validation props (and format) in Calendar (not CalendarInput)
|
|
65
|
+
// format,
|
|
66
|
+
isValid: pickerResults.isValid,
|
|
67
|
+
calendarWeekDays: pickerResults.calendarWeekDays,
|
|
68
|
+
weekDayLabels: pickerResults.weekDayLabels,
|
|
69
|
+
currMonth: pickerResults.currMonth,
|
|
70
|
+
currYear: pickerResults.currYear,
|
|
71
|
+
nextMonth: pickerResults.nextMonth,
|
|
72
|
+
nextYear: pickerResults.nextYear,
|
|
73
|
+
prevMonth: pickerResults.prevMonth,
|
|
74
|
+
prevYear: pickerResults.prevYear,
|
|
75
|
+
languageDirection
|
|
76
|
+
};
|
|
77
|
+
}, [cellSize, date, dir, locale, pickerResults, width, languageDirection]);
|
|
78
|
+
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, calendarProps));
|
|
86
79
|
};
|
|
87
80
|
|
|
88
81
|
exports.Calendar = Calendar;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.NavigationContainer = void 0;
|
|
6
|
+
exports.NavigationContainerProps = exports.NavigationContainer = void 0;
|
|
7
7
|
|
|
8
8
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
9
|
|
|
@@ -27,18 +27,15 @@ const NavigationContainer = _ref => {
|
|
|
27
27
|
|
|
28
28
|
let {
|
|
29
29
|
languageDirection,
|
|
30
|
-
pickerOptions
|
|
31
|
-
} = _ref;
|
|
32
|
-
const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
|
|
33
|
-
const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16;
|
|
34
|
-
const {
|
|
35
30
|
currMonth,
|
|
36
31
|
currYear,
|
|
37
32
|
nextMonth,
|
|
38
33
|
nextYear,
|
|
39
34
|
prevMonth,
|
|
40
35
|
prevYear
|
|
41
|
-
} =
|
|
36
|
+
} = _ref;
|
|
37
|
+
const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
|
|
38
|
+
const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16; // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
|
|
42
39
|
// 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
|
|
43
40
|
|
|
44
41
|
const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
|
|
@@ -106,30 +103,30 @@ const NavigationContainer = _ref => {
|
|
|
106
103
|
};
|
|
107
104
|
|
|
108
105
|
exports.NavigationContainer = NavigationContainer;
|
|
109
|
-
|
|
106
|
+
const NavigationContainerProps = {
|
|
107
|
+
currMonth: _propTypes.default.shape({
|
|
108
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
109
|
+
}),
|
|
110
|
+
currYear: _propTypes.default.shape({
|
|
111
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
112
|
+
}),
|
|
110
113
|
languageDirection: _propTypes.default.oneOf(['ltr', 'rtl']),
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
prevMonth: _propTypes.default.shape({
|
|
127
|
-
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
128
|
-
navigateTo: _propTypes.default.func
|
|
129
|
-
}),
|
|
130
|
-
prevYear: _propTypes.default.shape({
|
|
131
|
-
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
132
|
-
navigateTo: _propTypes.default.func
|
|
133
|
-
})
|
|
114
|
+
nextMonth: _propTypes.default.shape({
|
|
115
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
116
|
+
navigateTo: _propTypes.default.func
|
|
117
|
+
}),
|
|
118
|
+
nextYear: _propTypes.default.shape({
|
|
119
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
120
|
+
navigateTo: _propTypes.default.func
|
|
121
|
+
}),
|
|
122
|
+
prevMonth: _propTypes.default.shape({
|
|
123
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
124
|
+
navigateTo: _propTypes.default.func
|
|
125
|
+
}),
|
|
126
|
+
prevYear: _propTypes.default.shape({
|
|
127
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
128
|
+
navigateTo: _propTypes.default.func
|
|
134
129
|
})
|
|
135
|
-
};
|
|
130
|
+
};
|
|
131
|
+
exports.NavigationContainerProps = NavigationContainerProps;
|
|
132
|
+
NavigationContainer.propTypes = NavigationContainerProps;
|
|
@@ -17,10 +17,14 @@ var _layer = require("@dhis2-ui/layer");
|
|
|
17
17
|
|
|
18
18
|
var _popper = require("@dhis2-ui/popper");
|
|
19
19
|
|
|
20
|
+
var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
|
|
21
|
+
|
|
20
22
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
23
|
|
|
22
24
|
var _react = _interopRequireWildcard(require("react"));
|
|
23
25
|
|
|
26
|
+
var _calendarContainer = require("../calendar/calendar-container.js");
|
|
27
|
+
|
|
24
28
|
var _calendar = require("../calendar/calendar.js");
|
|
25
29
|
|
|
26
30
|
var _index = _interopRequireDefault(require("../locales/index.js"));
|
|
@@ -42,7 +46,7 @@ const offsetModifier = {
|
|
|
42
46
|
|
|
43
47
|
const CalendarInput = function () {
|
|
44
48
|
let {
|
|
45
|
-
onDateSelect,
|
|
49
|
+
onDateSelect: parentOnDateSelect,
|
|
46
50
|
calendar,
|
|
47
51
|
date,
|
|
48
52
|
dir,
|
|
@@ -53,49 +57,79 @@ const CalendarInput = function () {
|
|
|
53
57
|
width,
|
|
54
58
|
cellSize,
|
|
55
59
|
clearable,
|
|
60
|
+
minDate,
|
|
61
|
+
maxDate,
|
|
62
|
+
format,
|
|
63
|
+
// todo: props and types for format and validation
|
|
64
|
+
strictValidation,
|
|
56
65
|
...rest
|
|
57
66
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
58
67
|
const ref = (0, _react.useRef)();
|
|
59
68
|
const [open, setOpen] = (0, _react.useState)(false);
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
69
|
+
const useDatePickerOptions = (0, _react.useMemo)(() => ({
|
|
70
|
+
calendar,
|
|
71
|
+
locale,
|
|
72
|
+
timeZone,
|
|
73
|
+
// todo: we probably shouldn't have had timezone here in the first place
|
|
74
|
+
numberingSystem,
|
|
75
|
+
weekDayFormat
|
|
76
|
+
}), [calendar, locale, numberingSystem, timeZone, weekDayFormat]);
|
|
77
|
+
const pickerResults = (0, _multiCalendarDates.useDatePicker)({
|
|
78
|
+
onDateSelect: result => {
|
|
63
79
|
setOpen(false);
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
|
|
80
|
+
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(result);
|
|
81
|
+
},
|
|
82
|
+
date,
|
|
83
|
+
minDate: minDate,
|
|
84
|
+
maxDate: maxDate,
|
|
85
|
+
strictValidation: strictValidation,
|
|
86
|
+
format: format,
|
|
87
|
+
options: useDatePickerOptions
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
const handleChange = e => {
|
|
91
|
+
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
92
|
+
calendarDateString: e.value
|
|
93
|
+
});
|
|
94
|
+
};
|
|
80
95
|
|
|
81
96
|
const onFocus = () => {
|
|
82
97
|
setOpen(true);
|
|
83
98
|
};
|
|
84
99
|
|
|
100
|
+
const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
|
|
101
|
+
const calendarProps = (0, _react.useMemo)(() => {
|
|
102
|
+
return {
|
|
103
|
+
date,
|
|
104
|
+
width,
|
|
105
|
+
cellSize,
|
|
106
|
+
isValid: pickerResults.isValid,
|
|
107
|
+
calendarWeekDays: pickerResults.calendarWeekDays,
|
|
108
|
+
weekDayLabels: pickerResults.weekDayLabels,
|
|
109
|
+
currMonth: pickerResults.currMonth,
|
|
110
|
+
currYear: pickerResults.currYear,
|
|
111
|
+
nextMonth: pickerResults.nextMonth,
|
|
112
|
+
nextYear: pickerResults.nextYear,
|
|
113
|
+
prevMonth: pickerResults.prevMonth,
|
|
114
|
+
prevYear: pickerResults.prevYear,
|
|
115
|
+
languageDirection
|
|
116
|
+
};
|
|
117
|
+
}, [cellSize, date, pickerResults, width, languageDirection]);
|
|
85
118
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
86
119
|
ref: ref,
|
|
87
|
-
className: "jsx-
|
|
120
|
+
className: "jsx-633677374" + " " + "calendar-input-wrapper"
|
|
88
121
|
}, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
|
|
89
122
|
label: "Pick a date"
|
|
90
123
|
}, rest, {
|
|
91
124
|
type: "text",
|
|
92
125
|
onFocus: onFocus,
|
|
93
|
-
value: date
|
|
126
|
+
value: date,
|
|
127
|
+
onChange: handleChange,
|
|
128
|
+
validationText: pickerResults.errorMessage || pickerResults.warningMessage,
|
|
129
|
+
error: !!pickerResults.errorMessage,
|
|
130
|
+
warning: !!pickerResults.warningMessage
|
|
94
131
|
})), clearable && /*#__PURE__*/_react.default.createElement("div", {
|
|
95
|
-
className: "jsx-
|
|
96
|
-
// ToDo: this is a workaround to show the clear button in the correct place when an icon is shown.
|
|
97
|
-
// Long-term, we should abstract and share the logic multi-select uses for the input-wrapper
|
|
98
|
-
// https://dhis2.atlassian.net/browse/DHIS2-14848
|
|
132
|
+
className: "jsx-633677374" + " " + ((0, _classnames.default)('calendar-clear-button', {
|
|
99
133
|
'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
|
|
100
134
|
'with-dense-wrapper': rest.dense
|
|
101
135
|
}) || "")
|
|
@@ -103,7 +137,9 @@ const CalendarInput = function () {
|
|
|
103
137
|
dataTest: "calendar-clear-button",
|
|
104
138
|
secondary: true,
|
|
105
139
|
small: true,
|
|
106
|
-
onClick: () =>
|
|
140
|
+
onClick: () => {
|
|
141
|
+
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
|
|
142
|
+
},
|
|
107
143
|
type: "button"
|
|
108
144
|
}, _index.default.t('Clear')))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
|
|
109
145
|
onBackdropClick: () => {
|
|
@@ -113,17 +149,14 @@ const CalendarInput = function () {
|
|
|
113
149
|
reference: ref,
|
|
114
150
|
placement: "bottom-start",
|
|
115
151
|
modifiers: [offsetModifier]
|
|
116
|
-
}, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
id: "862452676"
|
|
120
|
-
}, [".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;}"]));
|
|
152
|
+
}, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, calendarProps)))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
153
|
+
id: "633677374"
|
|
154
|
+
}, [".calendar-input-wrapper.jsx-633677374{position:relative;}", ".calendar-clear-button.jsx-633677374{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-633677374{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-633677374{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
|
|
121
155
|
};
|
|
122
156
|
|
|
123
157
|
exports.CalendarInput = CalendarInput;
|
|
124
158
|
CalendarInput.defaultProps = {
|
|
125
159
|
dataTest: 'dhis2-uiwidgets-calendar-inputfield'
|
|
126
160
|
};
|
|
127
|
-
CalendarInput.propTypes = { ..._calendar.CalendarProps
|
|
128
|
-
..._input.InputFieldProps
|
|
161
|
+
CalendarInput.propTypes = { ..._calendar.CalendarProps
|
|
129
162
|
};
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.CalendarWithClearButton = void 0;
|
|
7
|
+
exports.CalendarWithEditiableInput = CalendarWithEditiableInput;
|
|
8
|
+
exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
|
|
7
9
|
|
|
8
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
11
|
|
|
@@ -127,4 +129,22 @@ const CalendarWithClearButton = _ref2 => {
|
|
|
127
129
|
}, date !== null && date !== void 0 ? date : 'undefined')));
|
|
128
130
|
};
|
|
129
131
|
|
|
130
|
-
exports.CalendarWithClearButton = CalendarWithClearButton;
|
|
132
|
+
exports.CalendarWithClearButton = CalendarWithClearButton;
|
|
133
|
+
|
|
134
|
+
function CalendarWithEditiableInput() {
|
|
135
|
+
const [date, setDate] = (0, _react.useState)('2020-07-03');
|
|
136
|
+
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, {
|
|
137
|
+
editable: true,
|
|
138
|
+
date: date,
|
|
139
|
+
calendar: "gregory",
|
|
140
|
+
onDateSelect: selectedDate => {
|
|
141
|
+
const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
|
|
142
|
+
setDate(date);
|
|
143
|
+
},
|
|
144
|
+
width: '700px',
|
|
145
|
+
inputWidth: "900px",
|
|
146
|
+
timeZone: 'UTC',
|
|
147
|
+
minDate: '2020-07-01',
|
|
148
|
+
maxDate: '2020-07-09'
|
|
149
|
+
})));
|
|
150
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import _JSXStyle from "styled-jsx/style";
|
|
2
|
+
import { colors } from '@dhis2/ui-constants';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import React, { useMemo } from 'react';
|
|
5
|
+
import { CalendarTable, CalendarTableProps } from './calendar-table.js';
|
|
6
|
+
import { NavigationContainer, NavigationContainerProps } from './navigation-container.js';
|
|
7
|
+
const wrapperBorderColor = colors.grey300;
|
|
8
|
+
const backgroundColor = 'none';
|
|
9
|
+
export const CalendarContainer = _ref => {
|
|
10
|
+
let {
|
|
11
|
+
date,
|
|
12
|
+
width,
|
|
13
|
+
cellSize,
|
|
14
|
+
calendarWeekDays,
|
|
15
|
+
weekDayLabels,
|
|
16
|
+
currMonth,
|
|
17
|
+
currYear,
|
|
18
|
+
nextMonth,
|
|
19
|
+
nextYear,
|
|
20
|
+
prevMonth,
|
|
21
|
+
prevYear,
|
|
22
|
+
languageDirection
|
|
23
|
+
} = _ref;
|
|
24
|
+
const navigationProps = useMemo(() => {
|
|
25
|
+
return {
|
|
26
|
+
currMonth,
|
|
27
|
+
currYear,
|
|
28
|
+
nextMonth,
|
|
29
|
+
nextYear,
|
|
30
|
+
prevMonth,
|
|
31
|
+
prevYear,
|
|
32
|
+
languageDirection
|
|
33
|
+
};
|
|
34
|
+
}, [currMonth, currYear, languageDirection, nextMonth, nextYear, prevMonth, prevYear]);
|
|
35
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
36
|
+
className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
|
|
37
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
38
|
+
dir: languageDirection,
|
|
39
|
+
"data-test": "calendar",
|
|
40
|
+
className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
|
|
41
|
+
}, /*#__PURE__*/React.createElement(NavigationContainer, navigationProps), /*#__PURE__*/React.createElement(CalendarTable, {
|
|
42
|
+
selectedDate: date,
|
|
43
|
+
calendarWeekDays: calendarWeekDays,
|
|
44
|
+
weekDayLabels: weekDayLabels,
|
|
45
|
+
cellSize: cellSize,
|
|
46
|
+
width: width
|
|
47
|
+
})), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
48
|
+
id: "2823859047",
|
|
49
|
+
dynamic: [backgroundColor, wrapperBorderColor, width]
|
|
50
|
+
}, [".calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:".concat(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 ").concat(wrapperBorderColor, ";border-radius:3px;min-width:").concat(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;}")]));
|
|
51
|
+
};
|
|
52
|
+
CalendarContainer.defaultProps = {
|
|
53
|
+
cellSize: '32px',
|
|
54
|
+
width: '240px'
|
|
55
|
+
};
|
|
56
|
+
CalendarContainer.propTypes = {
|
|
57
|
+
/** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
|
|
58
|
+
date: PropTypes.string,
|
|
59
|
+
...CalendarTableProps,
|
|
60
|
+
...NavigationContainerProps
|
|
61
|
+
};
|
|
@@ -34,7 +34,7 @@ export const CalendarTable = _ref => {
|
|
|
34
34
|
dynamic: [spacers.dp4, spacers.dp4]
|
|
35
35
|
}, [".calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:".concat(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:".concat(spacers.dp4, ";}")]));
|
|
36
36
|
};
|
|
37
|
-
|
|
37
|
+
export const CalendarTableProps = {
|
|
38
38
|
calendarWeekDays: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
|
|
39
39
|
calendarDate: PropTypes.string,
|
|
40
40
|
isInCurrentMonth: PropTypes.bool,
|
|
@@ -48,4 +48,5 @@ CalendarTable.propTypes = {
|
|
|
48
48
|
selectedDate: PropTypes.string,
|
|
49
49
|
weekDayLabels: PropTypes.arrayOf(PropTypes.string),
|
|
50
50
|
width: PropTypes.string
|
|
51
|
-
};
|
|
51
|
+
};
|
|
52
|
+
CalendarTable.propTypes = CalendarTableProps;
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import _JSXStyle from "styled-jsx/style";
|
|
2
1
|
import { useDatePicker, useResolvedDirection } from '@dhis2/multi-calendar-dates';
|
|
3
|
-
import { colors } from '@dhis2/ui-constants';
|
|
4
2
|
import PropTypes from 'prop-types';
|
|
5
|
-
import React, { useState } from 'react';
|
|
6
|
-
import {
|
|
7
|
-
import { NavigationContainer } from './navigation-container.js';
|
|
3
|
+
import React, { useMemo, useState } from 'react';
|
|
4
|
+
import { CalendarContainer } from './calendar-container.js';
|
|
8
5
|
export const Calendar = _ref => {
|
|
9
6
|
let {
|
|
10
7
|
onDateSelect,
|
|
@@ -18,8 +15,6 @@ export const Calendar = _ref => {
|
|
|
18
15
|
width,
|
|
19
16
|
cellSize
|
|
20
17
|
} = _ref;
|
|
21
|
-
const wrapperBorderColor = colors.grey300;
|
|
22
|
-
const backgroundColor = 'none';
|
|
23
18
|
const [selectedDateString, setSelectedDateString] = useState(date);
|
|
24
19
|
const languageDirection = useResolvedDirection(dir, locale);
|
|
25
20
|
const options = {
|
|
@@ -29,7 +24,7 @@ export const Calendar = _ref => {
|
|
|
29
24
|
numberingSystem,
|
|
30
25
|
weekDayFormat
|
|
31
26
|
};
|
|
32
|
-
const
|
|
27
|
+
const pickerResults = useDatePicker({
|
|
33
28
|
onDateSelect: result => {
|
|
34
29
|
const {
|
|
35
30
|
calendarDateString
|
|
@@ -40,29 +35,30 @@ export const Calendar = _ref => {
|
|
|
40
35
|
date: selectedDateString,
|
|
41
36
|
options
|
|
42
37
|
});
|
|
43
|
-
const {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}, [
|
|
38
|
+
const calendarProps = useMemo(() => {
|
|
39
|
+
return {
|
|
40
|
+
date,
|
|
41
|
+
dir,
|
|
42
|
+
locale,
|
|
43
|
+
width,
|
|
44
|
+
cellSize,
|
|
45
|
+
// minDate,
|
|
46
|
+
// maxDate,
|
|
47
|
+
// validation, // todo: clarify how we use validation props (and format) in Calendar (not CalendarInput)
|
|
48
|
+
// format,
|
|
49
|
+
isValid: pickerResults.isValid,
|
|
50
|
+
calendarWeekDays: pickerResults.calendarWeekDays,
|
|
51
|
+
weekDayLabels: pickerResults.weekDayLabels,
|
|
52
|
+
currMonth: pickerResults.currMonth,
|
|
53
|
+
currYear: pickerResults.currYear,
|
|
54
|
+
nextMonth: pickerResults.nextMonth,
|
|
55
|
+
nextYear: pickerResults.nextYear,
|
|
56
|
+
prevMonth: pickerResults.prevMonth,
|
|
57
|
+
prevYear: pickerResults.prevYear,
|
|
58
|
+
languageDirection
|
|
59
|
+
};
|
|
60
|
+
}, [cellSize, date, dir, locale, pickerResults, width, languageDirection]);
|
|
61
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CalendarContainer, calendarProps));
|
|
66
62
|
};
|
|
67
63
|
Calendar.defaultProps = {
|
|
68
64
|
cellSize: '32px',
|
|
@@ -11,18 +11,15 @@ export const NavigationContainer = _ref => {
|
|
|
11
11
|
|
|
12
12
|
let {
|
|
13
13
|
languageDirection,
|
|
14
|
-
pickerOptions
|
|
15
|
-
} = _ref;
|
|
16
|
-
const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
|
|
17
|
-
const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16;
|
|
18
|
-
const {
|
|
19
14
|
currMonth,
|
|
20
15
|
currYear,
|
|
21
16
|
nextMonth,
|
|
22
17
|
nextYear,
|
|
23
18
|
prevMonth,
|
|
24
19
|
prevYear
|
|
25
|
-
} =
|
|
20
|
+
} = _ref;
|
|
21
|
+
const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
|
|
22
|
+
const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16; // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
|
|
26
23
|
// 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
|
|
27
24
|
|
|
28
25
|
const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
|
|
@@ -88,30 +85,29 @@ export const NavigationContainer = _ref => {
|
|
|
88
85
|
dynamic: [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]
|
|
89
86
|
}, ["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:".concat(spacers.dp4, ";height:24px;width:24px;color:").concat(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:".concat(colors.grey200, ";color:").concat(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:".concat(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:".concat(spacers.dp8, ";padding:").concat(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 ").concat(wrapperBorderColor, ";background-color:").concat(headerBackground, ";font-size:1.08em;}")]));
|
|
90
87
|
};
|
|
91
|
-
|
|
88
|
+
export const NavigationContainerProps = {
|
|
89
|
+
currMonth: PropTypes.shape({
|
|
90
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
91
|
+
}),
|
|
92
|
+
currYear: PropTypes.shape({
|
|
93
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
94
|
+
}),
|
|
92
95
|
languageDirection: PropTypes.oneOf(['ltr', 'rtl']),
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
prevMonth: PropTypes.shape({
|
|
109
|
-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
110
|
-
navigateTo: PropTypes.func
|
|
111
|
-
}),
|
|
112
|
-
prevYear: PropTypes.shape({
|
|
113
|
-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
114
|
-
navigateTo: PropTypes.func
|
|
115
|
-
})
|
|
96
|
+
nextMonth: PropTypes.shape({
|
|
97
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
98
|
+
navigateTo: PropTypes.func
|
|
99
|
+
}),
|
|
100
|
+
nextYear: PropTypes.shape({
|
|
101
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
102
|
+
navigateTo: PropTypes.func
|
|
103
|
+
}),
|
|
104
|
+
prevMonth: PropTypes.shape({
|
|
105
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
106
|
+
navigateTo: PropTypes.func
|
|
107
|
+
}),
|
|
108
|
+
prevYear: PropTypes.shape({
|
|
109
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
110
|
+
navigateTo: PropTypes.func
|
|
116
111
|
})
|
|
117
|
-
};
|
|
112
|
+
};
|
|
113
|
+
NavigationContainer.propTypes = NavigationContainerProps;
|
|
@@ -4,12 +4,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
4
4
|
|
|
5
5
|
import { Button } from '@dhis2-ui/button';
|
|
6
6
|
import { Card } from '@dhis2-ui/card';
|
|
7
|
-
import { InputField
|
|
7
|
+
import { InputField } from '@dhis2-ui/input';
|
|
8
8
|
import { Layer } from '@dhis2-ui/layer';
|
|
9
9
|
import { Popper } from '@dhis2-ui/popper';
|
|
10
|
+
import { useDatePicker, useResolvedDirection } from '@dhis2/multi-calendar-dates';
|
|
10
11
|
import cx from 'classnames';
|
|
11
|
-
import React, { useRef, useState } from 'react';
|
|
12
|
-
import {
|
|
12
|
+
import React, { useRef, useState, useMemo } from 'react';
|
|
13
|
+
import { CalendarContainer } from '../calendar/calendar-container.js';
|
|
14
|
+
import { CalendarProps } from '../calendar/calendar.js';
|
|
13
15
|
import i18n from '../locales/index.js';
|
|
14
16
|
const offsetModifier = {
|
|
15
17
|
name: 'offset',
|
|
@@ -19,7 +21,7 @@ const offsetModifier = {
|
|
|
19
21
|
};
|
|
20
22
|
export const CalendarInput = function () {
|
|
21
23
|
let {
|
|
22
|
-
onDateSelect,
|
|
24
|
+
onDateSelect: parentOnDateSelect,
|
|
23
25
|
calendar,
|
|
24
26
|
date,
|
|
25
27
|
dir,
|
|
@@ -30,48 +32,79 @@ export const CalendarInput = function () {
|
|
|
30
32
|
width,
|
|
31
33
|
cellSize,
|
|
32
34
|
clearable,
|
|
35
|
+
minDate,
|
|
36
|
+
maxDate,
|
|
37
|
+
format,
|
|
38
|
+
// todo: props and types for format and validation
|
|
39
|
+
strictValidation,
|
|
33
40
|
...rest
|
|
34
41
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
35
42
|
const ref = useRef();
|
|
36
43
|
const [open, setOpen] = useState(false);
|
|
37
|
-
const
|
|
38
|
-
|
|
44
|
+
const useDatePickerOptions = useMemo(() => ({
|
|
45
|
+
calendar,
|
|
46
|
+
locale,
|
|
47
|
+
timeZone,
|
|
48
|
+
// todo: we probably shouldn't have had timezone here in the first place
|
|
49
|
+
numberingSystem,
|
|
50
|
+
weekDayFormat
|
|
51
|
+
}), [calendar, locale, numberingSystem, timeZone, weekDayFormat]);
|
|
52
|
+
const pickerResults = useDatePicker({
|
|
53
|
+
onDateSelect: result => {
|
|
39
54
|
setOpen(false);
|
|
40
|
-
|
|
41
|
-
}
|
|
55
|
+
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(result);
|
|
56
|
+
},
|
|
57
|
+
date,
|
|
58
|
+
minDate: minDate,
|
|
59
|
+
maxDate: maxDate,
|
|
60
|
+
strictValidation: strictValidation,
|
|
61
|
+
format: format,
|
|
62
|
+
options: useDatePickerOptions
|
|
63
|
+
});
|
|
42
64
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
locale,
|
|
49
|
-
numberingSystem,
|
|
50
|
-
weekDayFormat,
|
|
51
|
-
timeZone,
|
|
52
|
-
width,
|
|
53
|
-
cellSize
|
|
54
|
-
};
|
|
55
|
-
}, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
|
|
65
|
+
const handleChange = e => {
|
|
66
|
+
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
|
|
67
|
+
calendarDateString: e.value
|
|
68
|
+
});
|
|
69
|
+
};
|
|
56
70
|
|
|
57
71
|
const onFocus = () => {
|
|
58
72
|
setOpen(true);
|
|
59
73
|
};
|
|
60
74
|
|
|
75
|
+
const languageDirection = useResolvedDirection(dir, locale);
|
|
76
|
+
const calendarProps = useMemo(() => {
|
|
77
|
+
return {
|
|
78
|
+
date,
|
|
79
|
+
width,
|
|
80
|
+
cellSize,
|
|
81
|
+
isValid: pickerResults.isValid,
|
|
82
|
+
calendarWeekDays: pickerResults.calendarWeekDays,
|
|
83
|
+
weekDayLabels: pickerResults.weekDayLabels,
|
|
84
|
+
currMonth: pickerResults.currMonth,
|
|
85
|
+
currYear: pickerResults.currYear,
|
|
86
|
+
nextMonth: pickerResults.nextMonth,
|
|
87
|
+
nextYear: pickerResults.nextYear,
|
|
88
|
+
prevMonth: pickerResults.prevMonth,
|
|
89
|
+
prevYear: pickerResults.prevYear,
|
|
90
|
+
languageDirection
|
|
91
|
+
};
|
|
92
|
+
}, [cellSize, date, pickerResults, width, languageDirection]);
|
|
61
93
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
62
94
|
ref: ref,
|
|
63
|
-
className: "jsx-
|
|
95
|
+
className: "jsx-633677374" + " " + "calendar-input-wrapper"
|
|
64
96
|
}, /*#__PURE__*/React.createElement(InputField, _extends({
|
|
65
97
|
label: "Pick a date"
|
|
66
98
|
}, rest, {
|
|
67
99
|
type: "text",
|
|
68
100
|
onFocus: onFocus,
|
|
69
|
-
value: date
|
|
101
|
+
value: date,
|
|
102
|
+
onChange: handleChange,
|
|
103
|
+
validationText: pickerResults.errorMessage || pickerResults.warningMessage,
|
|
104
|
+
error: !!pickerResults.errorMessage,
|
|
105
|
+
warning: !!pickerResults.warningMessage
|
|
70
106
|
})), clearable && /*#__PURE__*/React.createElement("div", {
|
|
71
|
-
className: "jsx-
|
|
72
|
-
// ToDo: this is a workaround to show the clear button in the correct place when an icon is shown.
|
|
73
|
-
// Long-term, we should abstract and share the logic multi-select uses for the input-wrapper
|
|
74
|
-
// https://dhis2.atlassian.net/browse/DHIS2-14848
|
|
107
|
+
className: "jsx-633677374" + " " + (cx('calendar-clear-button', {
|
|
75
108
|
'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
|
|
76
109
|
'with-dense-wrapper': rest.dense
|
|
77
110
|
}) || "")
|
|
@@ -79,7 +112,9 @@ export const CalendarInput = function () {
|
|
|
79
112
|
dataTest: "calendar-clear-button",
|
|
80
113
|
secondary: true,
|
|
81
114
|
small: true,
|
|
82
|
-
onClick: () =>
|
|
115
|
+
onClick: () => {
|
|
116
|
+
parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
|
|
117
|
+
},
|
|
83
118
|
type: "button"
|
|
84
119
|
}, i18n.t('Clear')))), open && /*#__PURE__*/React.createElement(Layer, {
|
|
85
120
|
onBackdropClick: () => {
|
|
@@ -89,15 +124,12 @@ export const CalendarInput = function () {
|
|
|
89
124
|
reference: ref,
|
|
90
125
|
placement: "bottom-start",
|
|
91
126
|
modifiers: [offsetModifier]
|
|
92
|
-
}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
-
id: "862452676"
|
|
96
|
-
}, [".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;}"]));
|
|
127
|
+
}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CalendarContainer, calendarProps)))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
128
|
+
id: "633677374"
|
|
129
|
+
}, [".calendar-input-wrapper.jsx-633677374{position:relative;}", ".calendar-clear-button.jsx-633677374{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-633677374{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-633677374{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
|
|
97
130
|
};
|
|
98
131
|
CalendarInput.defaultProps = {
|
|
99
132
|
dataTest: 'dhis2-uiwidgets-calendar-inputfield'
|
|
100
133
|
};
|
|
101
|
-
CalendarInput.propTypes = { ...CalendarProps
|
|
102
|
-
...InputFieldProps
|
|
134
|
+
CalendarInput.propTypes = { ...CalendarProps
|
|
103
135
|
};
|
|
@@ -100,4 +100,21 @@ export const CalendarWithClearButton = _ref2 => {
|
|
|
100
100
|
}), /*#__PURE__*/React.createElement("div", null, "value:", /*#__PURE__*/React.createElement("span", {
|
|
101
101
|
"data-test": "storybook-calendar-date-value"
|
|
102
102
|
}, date !== null && date !== void 0 ? date : 'undefined')));
|
|
103
|
-
};
|
|
103
|
+
};
|
|
104
|
+
export function CalendarWithEditiableInput() {
|
|
105
|
+
const [date, setDate] = useState('2020-07-03');
|
|
106
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarInput, {
|
|
107
|
+
editable: true,
|
|
108
|
+
date: date,
|
|
109
|
+
calendar: "gregory",
|
|
110
|
+
onDateSelect: selectedDate => {
|
|
111
|
+
const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
|
|
112
|
+
setDate(date);
|
|
113
|
+
},
|
|
114
|
+
width: '700px',
|
|
115
|
+
inputWidth: "900px",
|
|
116
|
+
timeZone: 'UTC',
|
|
117
|
+
minDate: '2020-07-01',
|
|
118
|
+
maxDate: '2020-07-09'
|
|
119
|
+
})));
|
|
120
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/calendar",
|
|
3
|
-
"version": "9.9.0-alpha.
|
|
3
|
+
"version": "9.9.0-alpha.2",
|
|
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.9.0-alpha.
|
|
37
|
-
"@dhis2-ui/card": "9.9.0-alpha.
|
|
38
|
-
"@dhis2-ui/input": "9.9.0-alpha.
|
|
39
|
-
"@dhis2-ui/layer": "9.9.0-alpha.
|
|
40
|
-
"@dhis2-ui/popper": "9.9.0-alpha.
|
|
41
|
-
"@dhis2/multi-calendar-dates": "
|
|
36
|
+
"@dhis2-ui/button": "9.9.0-alpha.2",
|
|
37
|
+
"@dhis2-ui/card": "9.9.0-alpha.2",
|
|
38
|
+
"@dhis2-ui/input": "9.9.0-alpha.2",
|
|
39
|
+
"@dhis2-ui/layer": "9.9.0-alpha.2",
|
|
40
|
+
"@dhis2-ui/popper": "9.9.0-alpha.2",
|
|
41
|
+
"@dhis2/multi-calendar-dates": "v1.0.0-alpha.26",
|
|
42
42
|
"@dhis2/prop-types": "^3.1.2",
|
|
43
|
-
"@dhis2/ui-constants": "9.9.0-alpha.
|
|
44
|
-
"@dhis2/ui-icons": "9.9.0-alpha.
|
|
43
|
+
"@dhis2/ui-constants": "9.9.0-alpha.2",
|
|
44
|
+
"@dhis2/ui-icons": "9.9.0-alpha.2",
|
|
45
45
|
"classnames": "^2.3.1",
|
|
46
46
|
"prop-types": "^15.7.2"
|
|
47
47
|
},
|