intelicoreact 0.0.66 → 0.0.71
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/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js +6 -2
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +2 -1
- package/dist/Atomic/FormElements/Dropdown/Dropdown.js +48 -17
- package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +21 -3
- package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +22 -6
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +16 -43
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +98 -73
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +3 -156
- package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +4 -4
- package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +3 -3
- package/dist/Atomic/FormElements/InputDateRange/dependencies.js +7 -7
- package/dist/Atomic/FormElements/Table/Table.scss +1 -1
- package/dist/Atomic/FormElements/Textarea/Textarea.scss +1 -1
- package/dist/Atomic/MainMenu/MainMenu.scss +2 -2
- package/dist/Atomic/UI/Accordion/Accordion.scss +2 -2
- package/dist/Atomic/UI/Arrow/Arrow.js +7 -8
- package/dist/Atomic/UI/Calendar/Calendar.js +3 -2
- package/dist/Atomic/UI/Calendar/Calendar.stories.js +3 -2
- package/dist/Atomic/UI/Status/Status.scss +1 -1
- package/dist/Molecular/Datepicker/Datepicker.js +451 -0
- package/dist/Molecular/Datepicker/Datepicker.scss +8 -0
- package/dist/Molecular/Datepicker/Datepicker.stories.js +44 -0
- package/dist/Molecular/Datepicker/components/Calendar.js +156 -0
- package/dist/scss/_vars.scss +3 -1
- package/dist/scss/main.scss +1 -1
- package/package.json +6 -4
- package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.js +12 -2
- package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
- package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +4 -3
- package/src/Atomic/FormElements/Dropdown/Dropdown.js +53 -19
- package/src/Atomic/FormElements/Dropdown/Dropdown.scss +21 -3
- package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +28 -15
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +187 -214
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +98 -73
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +35 -123
- package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +2 -2
- package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +1 -1
- package/src/Atomic/FormElements/InputDateRange/dependencies.js +6 -6
- package/src/Atomic/FormElements/Table/Table.scss +1 -1
- package/src/Atomic/FormElements/Textarea/Textarea.scss +1 -1
- package/src/Atomic/MainMenu/MainMenu.scss +2 -2
- package/src/Atomic/UI/Accordion/Accordion.scss +2 -2
- package/src/Atomic/UI/Arrow/Arrow.js +5 -5
- package/src/Atomic/UI/Calendar/Calendar.js +2 -2
- package/src/Atomic/UI/Calendar/Calendar.stories.js +2 -1
- package/src/Atomic/UI/Status/Status.scss +1 -1
- package/src/Molecular/Datepicker/Datepicker.js +346 -0
- package/src/Molecular/Datepicker/Datepicker.scss +8 -0
- package/src/Molecular/Datepicker/Datepicker.stories.js +27 -0
- package/src/Molecular/Datepicker/components/Calendar.js +118 -0
- package/src/scss/_vars.scss +3 -1
- package/src/scss/main.scss +1 -1
- package/dist/scss/anme/_anme-bootstrap-grid.scss +0 -748
- package/dist/scss/anme/_anme-elements.scss +0 -269
- package/dist/scss/anme/_anme-grid.scss +0 -111
- package/dist/scss/anme/_anme-justify.scss +0 -111
- package/dist/scss/anme/_anme-mixins-media.scss +0 -116
- package/dist/scss/anme/_anme-mixins.scss +0 -166
- package/dist/scss/anme/_anme-normalize.scss +0 -8
- package/dist/scss/anme/_anme-overall.scss +0 -34
- package/dist/scss/anme/_anme-padding-margins.scss +0 -419
- package/dist/scss/anme/_anme-table.scss +0 -81
- package/dist/scss/anme/_anme-theme.scss +0 -275
- package/dist/scss/anme/_anme-vars.scss +0 -91
- package/dist/scss/anme/_code-styling.scss +0 -23
- package/dist/scss/anme/styles.scss +0 -12
- package/src/scss/anme/_anme-bootstrap-grid.scss +0 -748
- package/src/scss/anme/_anme-elements.scss +0 -269
- package/src/scss/anme/_anme-grid.scss +0 -111
- package/src/scss/anme/_anme-justify.scss +0 -111
- package/src/scss/anme/_anme-mixins-media.scss +0 -116
- package/src/scss/anme/_anme-mixins.scss +0 -166
- package/src/scss/anme/_anme-normalize.scss +0 -8
- package/src/scss/anme/_anme-overall.scss +0 -34
- package/src/scss/anme/_anme-padding-margins.scss +0 -419
- package/src/scss/anme/_anme-table.scss +0 -81
- package/src/scss/anme/_anme-theme.scss +0 -275
- package/src/scss/anme/_anme-vars.scss +0 -91
- package/src/scss/anme/_code-styling.scss +0 -23
- package/src/scss/anme/styles.scss +0 -12
|
@@ -37,8 +37,7 @@ var Arrow = function Arrow(_ref) {
|
|
|
37
37
|
setColor = _useState2[1];
|
|
38
38
|
|
|
39
39
|
(0, _react.useEffect)(function () {
|
|
40
|
-
if (ref.current) {
|
|
41
|
-
setColor((0, _utils.getStyles)(ref.current, 'color'));
|
|
40
|
+
if (ref.current) {//setColor(getStyles(ref.current, 'color'));
|
|
42
41
|
}
|
|
43
42
|
|
|
44
43
|
;
|
|
@@ -58,9 +57,9 @@ var Arrow = function Arrow(_ref) {
|
|
|
58
57
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
59
58
|
d: "M15 18L9 12L15 6",
|
|
60
59
|
stroke: color,
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
strokeWidth: "2",
|
|
61
|
+
strokeLinecap: "round",
|
|
62
|
+
strokeLinejoin: "round"
|
|
64
63
|
})) : /*#__PURE__*/_react.default.createElement("svg", {
|
|
65
64
|
width: "24",
|
|
66
65
|
height: "24",
|
|
@@ -70,9 +69,9 @@ var Arrow = function Arrow(_ref) {
|
|
|
70
69
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
71
70
|
d: "M9 18L15 12L9 6",
|
|
72
71
|
stroke: color,
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
72
|
+
strokeWidth: "2",
|
|
73
|
+
strokeLinecap: "round",
|
|
74
|
+
strokeLinejoin: "round"
|
|
76
75
|
})));
|
|
77
76
|
};
|
|
78
77
|
|
|
@@ -34,7 +34,8 @@ function _default(props) {
|
|
|
34
34
|
allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
|
|
35
35
|
_props$allowNext = props.allowNext,
|
|
36
36
|
allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
|
|
37
|
-
params = props.params
|
|
37
|
+
params = props.params,
|
|
38
|
+
className = props.className;
|
|
38
39
|
var minDate = params.minDate,
|
|
39
40
|
maxDate = params.maxDate;
|
|
40
41
|
|
|
@@ -112,7 +113,7 @@ function _default(props) {
|
|
|
112
113
|
};
|
|
113
114
|
|
|
114
115
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
115
|
-
className: "calendar"
|
|
116
|
+
className: "calendar ".concat(className)
|
|
116
117
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
117
118
|
className: "calendar-header"
|
|
118
119
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -13,7 +13,7 @@ var _Calendar = _interopRequireDefault(require("./Calendar"));
|
|
|
13
13
|
|
|
14
14
|
global.lng = 'en';
|
|
15
15
|
var _default = {
|
|
16
|
-
title: '
|
|
16
|
+
title: 'Calendar',
|
|
17
17
|
component: _Calendar.default
|
|
18
18
|
};
|
|
19
19
|
exports.default = _default;
|
|
@@ -33,5 +33,6 @@ CalendarTemplate.args = {
|
|
|
33
33
|
params: {},
|
|
34
34
|
setDate: function setDate() {
|
|
35
35
|
return null;
|
|
36
|
-
}
|
|
36
|
+
},
|
|
37
|
+
className: ''
|
|
37
38
|
};
|
|
@@ -0,0 +1,451 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _useClickOutside = require("../../Functions/useClickOutside");
|
|
19
|
+
|
|
20
|
+
var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
|
|
21
|
+
|
|
22
|
+
var _moment = _interopRequireDefault(require("moment"));
|
|
23
|
+
|
|
24
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
25
|
+
|
|
26
|
+
var _Langs = _interopRequireDefault(require("../../../../Langs"));
|
|
27
|
+
|
|
28
|
+
var _Button = _interopRequireDefault(require("../../Atomic/UI/Button/Button"));
|
|
29
|
+
|
|
30
|
+
var _Calendar = _interopRequireDefault(require("./components/Calendar"));
|
|
31
|
+
|
|
32
|
+
require("./Datepicker.scss");
|
|
33
|
+
|
|
34
|
+
var _Switcher = _interopRequireDefault(require("../../Atomic/FormElements/Switcher/Switcher"));
|
|
35
|
+
|
|
36
|
+
var _Dropdown = _interopRequireDefault(require("../../Atomic/FormElements/Dropdown/Dropdown"));
|
|
37
|
+
|
|
38
|
+
var _Input = _interopRequireDefault(require("../../Atomic/FormElements/Input/Input"));
|
|
39
|
+
|
|
40
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
41
|
+
|
|
42
|
+
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; }
|
|
43
|
+
|
|
44
|
+
var padTime = function padTime(time) {
|
|
45
|
+
return "".concat(time.toString().padStart(2, '0'), ":00");
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
var Datepicker = function Datepicker(props) {
|
|
49
|
+
var _props$values = props.values,
|
|
50
|
+
values = _props$values === void 0 ? {} : _props$values,
|
|
51
|
+
onChange = props.onChange,
|
|
52
|
+
onChangeCompare = props.onChangeCompare,
|
|
53
|
+
onCancel = props.onCancel,
|
|
54
|
+
_props$getSelectedMod = props.getSelectedMode,
|
|
55
|
+
getSelectedMode = _props$getSelectedMod === void 0 ? function () {} : _props$getSelectedMod,
|
|
56
|
+
onChangeInterval = props.onChangeInterval,
|
|
57
|
+
isCompareHidden = props.isCompareHidden,
|
|
58
|
+
limitRange = props.limitRange;
|
|
59
|
+
var _values$start = values.start,
|
|
60
|
+
start = _values$start === void 0 ? null : _values$start,
|
|
61
|
+
_values$end = values.end,
|
|
62
|
+
end = _values$end === void 0 ? null : _values$end,
|
|
63
|
+
_values$compare = values.compare,
|
|
64
|
+
compare = _values$compare === void 0 ? false : _values$compare;
|
|
65
|
+
var txt = _Langs.default[global.lng];
|
|
66
|
+
var startDateInputRef = (0, _react.useRef)(null);
|
|
67
|
+
var endDateInputRef = (0, _react.useRef)(null);
|
|
68
|
+
|
|
69
|
+
var _useState = (0, _react.useState)(start),
|
|
70
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
71
|
+
startDate = _useState2[0],
|
|
72
|
+
setStartDate = _useState2[1];
|
|
73
|
+
|
|
74
|
+
var _useState3 = (0, _react.useState)(end),
|
|
75
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
76
|
+
endDate = _useState4[0],
|
|
77
|
+
setEndDate = _useState4[1];
|
|
78
|
+
|
|
79
|
+
var dateInterval = getSelectedMode({
|
|
80
|
+
start: startDate,
|
|
81
|
+
end: endDate
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
var _useState5 = (0, _react.useState)(start),
|
|
85
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
86
|
+
startDateInput = _useState6[0],
|
|
87
|
+
setStartDateInput = _useState6[1];
|
|
88
|
+
|
|
89
|
+
var _useState7 = (0, _react.useState)(end),
|
|
90
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
91
|
+
endDateInput = _useState8[0],
|
|
92
|
+
setEndDateInput = _useState8[1];
|
|
93
|
+
|
|
94
|
+
var _useState9 = (0, _react.useState)(start ? (0, _moment.default)(start).hour() : 0),
|
|
95
|
+
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
96
|
+
startHour = _useState10[0],
|
|
97
|
+
setStartHour = _useState10[1];
|
|
98
|
+
|
|
99
|
+
var _useState11 = (0, _react.useState)(end ? (0, _moment.default)(end).hour() : 0),
|
|
100
|
+
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
101
|
+
endHour = _useState12[0],
|
|
102
|
+
setEndHour = _useState12[1]; // eslint-disable-next-line no-unused-vars
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
var _useState13 = (0, _react.useState)(compare),
|
|
106
|
+
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
|
107
|
+
isCompare = _useState14[0],
|
|
108
|
+
setIsCompare = _useState14[1];
|
|
109
|
+
|
|
110
|
+
var _useState15 = (0, _react.useState)(start ? (0, _moment.default)(start).toDate() : (0, _moment.default)().subtract(1, 'month').toDate()),
|
|
111
|
+
_useState16 = (0, _slicedToArray2.default)(_useState15, 2),
|
|
112
|
+
date1 = _useState16[0],
|
|
113
|
+
setDate1 = _useState16[1];
|
|
114
|
+
|
|
115
|
+
var _useState17 = (0, _react.useState)(end ? (0, _moment.default)(end).toDate() : (0, _moment.default)().toDate()),
|
|
116
|
+
_useState18 = (0, _slicedToArray2.default)(_useState17, 2),
|
|
117
|
+
date2 = _useState18[0],
|
|
118
|
+
setDate2 = _useState18[1];
|
|
119
|
+
|
|
120
|
+
var _useState19 = (0, _react.useState)(false),
|
|
121
|
+
_useState20 = (0, _slicedToArray2.default)(_useState19, 2),
|
|
122
|
+
isStartFocused = _useState20[0],
|
|
123
|
+
setIsStartFocused = _useState20[1];
|
|
124
|
+
|
|
125
|
+
var _useState21 = (0, _react.useState)(false),
|
|
126
|
+
_useState22 = (0, _slicedToArray2.default)(_useState21, 2),
|
|
127
|
+
isEndFocused = _useState22[0],
|
|
128
|
+
setIsEndFocused = _useState22[1];
|
|
129
|
+
|
|
130
|
+
var _useState23 = (0, _react.useState)(null),
|
|
131
|
+
_useState24 = (0, _slicedToArray2.default)(_useState23, 2),
|
|
132
|
+
hoverStatus = _useState24[0],
|
|
133
|
+
setHoverStatus = _useState24[1];
|
|
134
|
+
|
|
135
|
+
var isNearby = (0, _react.useMemo)(function () {
|
|
136
|
+
return (0, _moment.default)(date2).subtract(1, 'month').isSame((0, _moment.default)(date1), 'month');
|
|
137
|
+
}, [date1, date2]);
|
|
138
|
+
var isPreviousPeriodShowed = (0, _react.useMemo)(function () {
|
|
139
|
+
return isCompare && !isCompareHidden && startDate && endDate;
|
|
140
|
+
}, [startDate, endDate, isCompare]);
|
|
141
|
+
var prevEndHour = (0, _react.useRef)(endHour);
|
|
142
|
+
|
|
143
|
+
var getStartHourItems = function getStartHourItems() {
|
|
144
|
+
return (0, _toConsumableArray2.default)(Array(24).keys()).map(function (hour) {
|
|
145
|
+
return {
|
|
146
|
+
label: padTime(hour),
|
|
147
|
+
value: hour,
|
|
148
|
+
disabled: (0, _moment.default)(startDate).isSame(endDate, 'day') && endHour <= hour
|
|
149
|
+
};
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
var getEndHourItems = function getEndHourItems() {
|
|
154
|
+
return (0, _toConsumableArray2.default)(Array(24).keys()).map(function (hour) {
|
|
155
|
+
return {
|
|
156
|
+
label: padTime(hour + 1),
|
|
157
|
+
value: hour === 23 ? 0 : hour + 1,
|
|
158
|
+
disabled: ((0, _moment.default)(startDate).isSame(endDate, 'day') || (0, _moment.default)(startDate).isSame((0, _moment.default)(endDate).subtract(1, 'days'), 'day') && endHour === 0) && hour < startHour
|
|
159
|
+
};
|
|
160
|
+
});
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
var startPrevDate = (0, _react.useMemo)(function () {
|
|
164
|
+
if (isPreviousPeriodShowed) {
|
|
165
|
+
var intervalHoursCount = (0, _moment.default)(endDate).diff(startDate, 'hours');
|
|
166
|
+
return (0, _moment.default)(startDate).subtract(intervalHoursCount, 'hours').toDate();
|
|
167
|
+
} else return null;
|
|
168
|
+
}, [startDate, endDate, isCompare]);
|
|
169
|
+
var endPrevDate = (0, _react.useMemo)(function () {
|
|
170
|
+
if (isPreviousPeriodShowed) {
|
|
171
|
+
return startDate;
|
|
172
|
+
} else return null;
|
|
173
|
+
}, [startDate, endDate, isCompare]);
|
|
174
|
+
var title = (0, _react.useMemo)(function () {
|
|
175
|
+
if (isCompare && !isCompareHidden && startDate && endDate) {
|
|
176
|
+
return "".concat((0, _moment.default)(startPrevDate).format('ll'), " (").concat((0, _moment.default)(startPrevDate).format('HH:mm'), ") - ").concat((0, _moment.default)(endPrevDate).format('ll'), " (").concat((0, _moment.default)(endPrevDate).format('HH:mm'), ")");
|
|
177
|
+
} else return '';
|
|
178
|
+
}, [startDate, endDate, isCompare]);
|
|
179
|
+
|
|
180
|
+
var subtractDay = function subtractDay(date) {
|
|
181
|
+
return endHour === 0 ? (0, _moment.default)(date).subtract(1, 'days') : date;
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
var addDay = function addDay(date) {
|
|
185
|
+
return endHour === 0 ? (0, _moment.default)(date).add(1, 'days') : date;
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
(0, _react.useEffect)(function () {
|
|
189
|
+
if ((0, _moment.default)(startDate).isSameOrAfter(endDate)) {
|
|
190
|
+
setStartDate((0, _moment.default)(endDate).subtract(1, 'd').toDate());
|
|
191
|
+
setDate1((0, _moment.default)(endDate).subtract(1, 'd'));
|
|
192
|
+
}
|
|
193
|
+
}, [startDate]);
|
|
194
|
+
(0, _react.useEffect)(function () {
|
|
195
|
+
if ((0, _moment.default)(endDate).isSameOrBefore(startDate)) {
|
|
196
|
+
setEndDate((0, _moment.default)(startDate).add(1, 'd').toDate());
|
|
197
|
+
setDate2((0, _moment.default)(startDate).add(1, 'd'));
|
|
198
|
+
}
|
|
199
|
+
}, [endDate]);
|
|
200
|
+
(0, _react.useEffect)(function () {
|
|
201
|
+
setStartDateInput(startDate);
|
|
202
|
+
setEndDateInput(endDate);
|
|
203
|
+
|
|
204
|
+
if ((0, _moment.default)(startDate).isBefore((0, _moment.default)(endDate), 'month')) {
|
|
205
|
+
setDate1((0, _moment.default)(startDate));
|
|
206
|
+
setDate2((0, _moment.default)(endDate));
|
|
207
|
+
}
|
|
208
|
+
}, [startDate, endDate]);
|
|
209
|
+
(0, _react.useEffect)(function () {
|
|
210
|
+
if ((0, _moment.default)(date1).isSameOrAfter((0, _moment.default)(date2), 'month')) {
|
|
211
|
+
setDate1((0, _moment.default)(date2).subtract(1, 'month'));
|
|
212
|
+
}
|
|
213
|
+
}, [date1, date2]);
|
|
214
|
+
(0, _react.useEffect)(function () {
|
|
215
|
+
onChangeInterval(dateInterval);
|
|
216
|
+
}, [dateInterval]);
|
|
217
|
+
|
|
218
|
+
var handleClick = function handleClick(date) {
|
|
219
|
+
prevEndHour.current = 0;
|
|
220
|
+
|
|
221
|
+
if (!startDate || startDate && endDate && !((0, _moment.default)(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0)) {
|
|
222
|
+
setStartDate((0, _moment.default)(date).startOf('day').toDate());
|
|
223
|
+
setEndDate((0, _moment.default)(date).add(1, 'd').startOf('day').toDate());
|
|
224
|
+
setStartHour(0);
|
|
225
|
+
setEndHour(0);
|
|
226
|
+
} else if ((0, _moment.default)(date).isBefore((0, _moment.default)(startDate), 'day')) {
|
|
227
|
+
setEndDate((0, _moment.default)(startDate).add(1, 'd').startOf('day').toDate());
|
|
228
|
+
setStartDate((0, _moment.default)(date).set('hour', parseInt(startHour, 10)).toDate());
|
|
229
|
+
} else if ((0, _moment.default)(date).isAfter((0, _moment.default)(startDate), 'day')) {
|
|
230
|
+
setEndDate((0, _moment.default)(date).add(1, 'd').startOf('day').toDate());
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
setHoverStatus(null);
|
|
234
|
+
};
|
|
235
|
+
|
|
236
|
+
var timerId;
|
|
237
|
+
|
|
238
|
+
var handleHover = function handleHover(date) {
|
|
239
|
+
if (!date) {
|
|
240
|
+
timerId = setTimeout(function () {
|
|
241
|
+
setHoverStatus(null);
|
|
242
|
+
}, 400);
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
if (timerId) clearTimeout(timerId);
|
|
247
|
+
|
|
248
|
+
if ((0, _moment.default)(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0) {
|
|
249
|
+
if ((0, _moment.default)(date).isAfter((0, _moment.default)(startDate), 'day')) setHoverStatus('end');else if ((0, _moment.default)(date).isBefore((0, _moment.default)(startDate), 'day')) setHoverStatus('start');else setHoverStatus(null);
|
|
250
|
+
} else {
|
|
251
|
+
setHoverStatus('start');
|
|
252
|
+
}
|
|
253
|
+
};
|
|
254
|
+
|
|
255
|
+
var handleChangeStartHour = function handleChangeStartHour(_ref) {
|
|
256
|
+
var val = _ref.target.value;
|
|
257
|
+
setStartHour(+val);
|
|
258
|
+
setStartDate((0, _moment.default)(startDate).set('hour', +val).toDate());
|
|
259
|
+
};
|
|
260
|
+
|
|
261
|
+
var handleChangeEndHour = function handleChangeEndHour(_ref2) {
|
|
262
|
+
var val = _ref2.target.value;
|
|
263
|
+
var newHour = +val;
|
|
264
|
+
setEndHour(newHour);
|
|
265
|
+
var newEndDate;
|
|
266
|
+
|
|
267
|
+
if (prevEndHour.current === 0 && newHour !== 0) {
|
|
268
|
+
newEndDate = (0, _moment.default)(endDate).subtract(1, 'days');
|
|
269
|
+
} else if (prevEndHour.current !== 0 && newHour === 0) {
|
|
270
|
+
newEndDate = (0, _moment.default)(endDate).add(1, 'days');
|
|
271
|
+
} else {
|
|
272
|
+
newEndDate = endDate;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
prevEndHour.current = newHour;
|
|
276
|
+
setEndDate((0, _moment.default)(newEndDate).set('hour', newHour).toDate());
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
var renderButtons = function renderButtons() {
|
|
280
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
281
|
+
className: "plr15 mr5",
|
|
282
|
+
onClick: function onClick() {
|
|
283
|
+
return onCancel();
|
|
284
|
+
}
|
|
285
|
+
}, txt.buttons.cancel), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
286
|
+
className: "plr20",
|
|
287
|
+
type: "filled",
|
|
288
|
+
disabled: !startDate || !endDate,
|
|
289
|
+
onClick: function onClick() {
|
|
290
|
+
return onChange({
|
|
291
|
+
start: startDate,
|
|
292
|
+
end: endDate,
|
|
293
|
+
startPrevDate: startPrevDate,
|
|
294
|
+
endPrevDate: endPrevDate,
|
|
295
|
+
compare: isCompare
|
|
296
|
+
});
|
|
297
|
+
}
|
|
298
|
+
}, txt.buttons.apply));
|
|
299
|
+
};
|
|
300
|
+
|
|
301
|
+
var renderPreviousPeriod = function renderPreviousPeriod() {
|
|
302
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, txt.labels.previousPeriod, ": ", /*#__PURE__*/_react.default.createElement("span", {
|
|
303
|
+
className: "date-picker__previous-period-interval"
|
|
304
|
+
}, title));
|
|
305
|
+
};
|
|
306
|
+
|
|
307
|
+
var handleStartDateFocus = function handleStartDateFocus() {
|
|
308
|
+
setIsStartFocused(true);
|
|
309
|
+
setStartDateInput((0, _moment.default)(startDate).format('L'));
|
|
310
|
+
};
|
|
311
|
+
|
|
312
|
+
var handleStartDateBlur = function handleStartDateBlur() {
|
|
313
|
+
var newDate;
|
|
314
|
+
|
|
315
|
+
if ((0, _moment.default)(startDateInput).isValid()) {
|
|
316
|
+
newDate = (0, _moment.default)(startDateInput).set('hour', parseInt(startHour, 10)).toDate();
|
|
317
|
+
setStartDate(newDate);
|
|
318
|
+
} else {
|
|
319
|
+
newDate = startDate;
|
|
320
|
+
setStartDateInput(newDate);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
setIsStartFocused(false);
|
|
324
|
+
startDateInputRef.current.blur();
|
|
325
|
+
setDate1((0, _moment.default)(newDate).isSameOrAfter((0, _moment.default)(date2), 'month') ? (0, _moment.default)(date2).subtract(1, 'month') : (0, _moment.default)(newDate));
|
|
326
|
+
};
|
|
327
|
+
|
|
328
|
+
var handleEndDateFocus = function handleEndDateFocus() {
|
|
329
|
+
setIsEndFocused(true);
|
|
330
|
+
setEndDateInput((0, _moment.default)(subtractDay(endDateInput)).format('L'));
|
|
331
|
+
};
|
|
332
|
+
|
|
333
|
+
var handleEndDateBlur = function handleEndDateBlur() {
|
|
334
|
+
var newDate;
|
|
335
|
+
|
|
336
|
+
if ((0, _moment.default)(endDateInput).isValid()) {
|
|
337
|
+
newDate = (0, _moment.default)(endDateInput).set('hour', parseInt(endHour, 10)).toDate();
|
|
338
|
+
setEndDate(addDay(newDate));
|
|
339
|
+
} else {
|
|
340
|
+
newDate = endDate;
|
|
341
|
+
setEndDateInput(newDate);
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
setIsEndFocused(false);
|
|
345
|
+
endDateInputRef.current.blur();
|
|
346
|
+
setDate2(newDate);
|
|
347
|
+
setEndDateInput();
|
|
348
|
+
};
|
|
349
|
+
|
|
350
|
+
var handleKeyPressed = function handleKeyPressed(e, handleDateBlur) {
|
|
351
|
+
if (e.key === 'Enter') handleDateBlur();
|
|
352
|
+
};
|
|
353
|
+
|
|
354
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
355
|
+
className: "date-picker"
|
|
356
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
357
|
+
className: "date-picker__header"
|
|
358
|
+
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
359
|
+
dataTest: "datepicker_start-date-input",
|
|
360
|
+
className: (0, _classnames.default)('mr5', {
|
|
361
|
+
'date-picker-text-input--active': hoverStatus === 'start'
|
|
362
|
+
}),
|
|
363
|
+
value: isStartFocused ? startDateInput : (0, _moment.default)(startDate).format('ll'),
|
|
364
|
+
disabled: !startDate,
|
|
365
|
+
onChange: function onChange(e) {
|
|
366
|
+
return setStartDateInput(e.target.value);
|
|
367
|
+
},
|
|
368
|
+
onFocus: handleStartDateFocus,
|
|
369
|
+
onBlur: handleStartDateBlur,
|
|
370
|
+
onKeyPress: function onKeyPress(e) {
|
|
371
|
+
return handleKeyPressed(e, handleStartDateBlur);
|
|
372
|
+
},
|
|
373
|
+
ref: startDateInputRef
|
|
374
|
+
}), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
375
|
+
dataTest: "datepicker_start-hour-select-input",
|
|
376
|
+
onChange: handleChangeStartHour,
|
|
377
|
+
value: startHour,
|
|
378
|
+
items: getStartHourItems(),
|
|
379
|
+
disabled: !startDate,
|
|
380
|
+
short: true
|
|
381
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
382
|
+
className: "pl5 pr5 date-picker__header--gray"
|
|
383
|
+
}, "\u2014"), /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
384
|
+
dataTest: "datepicker_end-date-input",
|
|
385
|
+
className: (0, _classnames.default)('mr5', {
|
|
386
|
+
'date-picker-text-input--active': hoverStatus === 'end'
|
|
387
|
+
}),
|
|
388
|
+
value: isEndFocused ? endDateInput : (0, _moment.default)(subtractDay(endDate)).format('ll'),
|
|
389
|
+
disabled: !endDate,
|
|
390
|
+
onChange: function onChange(e) {
|
|
391
|
+
return setEndDateInput(e.target.value);
|
|
392
|
+
},
|
|
393
|
+
onFocus: handleEndDateFocus,
|
|
394
|
+
onBlur: handleEndDateBlur,
|
|
395
|
+
onKeyPress: function onKeyPress(e) {
|
|
396
|
+
return handleKeyPressed(e, handleEndDateBlur);
|
|
397
|
+
},
|
|
398
|
+
ref: endDateInputRef
|
|
399
|
+
}), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
400
|
+
dataTest: "datepicker_end-hour-select-input",
|
|
401
|
+
onChange: handleChangeEndHour,
|
|
402
|
+
value: endHour,
|
|
403
|
+
items: getEndHourItems(),
|
|
404
|
+
disabled: !endDate,
|
|
405
|
+
short: true
|
|
406
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
407
|
+
className: "date-picker__previous-period"
|
|
408
|
+
}, isCompare && !isCompareHidden && startDate && endDate && renderPreviousPeriod()), /*#__PURE__*/_react.default.createElement("div", {
|
|
409
|
+
className: "date-picker__calendars"
|
|
410
|
+
}, /*#__PURE__*/_react.default.createElement(_Calendar.default, {
|
|
411
|
+
date: date1,
|
|
412
|
+
setDate: setDate1,
|
|
413
|
+
allowNext: !isNearby,
|
|
414
|
+
startDate: startDate,
|
|
415
|
+
endDate: endDate,
|
|
416
|
+
startPrevDate: startPrevDate,
|
|
417
|
+
endPrevDate: endPrevDate,
|
|
418
|
+
onClick: handleClick,
|
|
419
|
+
onHover: handleHover,
|
|
420
|
+
limitRange: limitRange
|
|
421
|
+
}), /*#__PURE__*/_react.default.createElement(_Calendar.default, {
|
|
422
|
+
date: date2,
|
|
423
|
+
setDate: setDate2,
|
|
424
|
+
allowPrev: !isNearby,
|
|
425
|
+
startDate: startDate,
|
|
426
|
+
endDate: endDate,
|
|
427
|
+
startPrevDate: startPrevDate,
|
|
428
|
+
endPrevDate: endPrevDate,
|
|
429
|
+
onClick: handleClick,
|
|
430
|
+
onHover: handleHover
|
|
431
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
432
|
+
className: "date-picker__footer j46"
|
|
433
|
+
}, !isCompareHidden ? /*#__PURE__*/_react.default.createElement("div", {
|
|
434
|
+
className: "j4"
|
|
435
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
436
|
+
className: "mr5"
|
|
437
|
+
}, /*#__PURE__*/_react.default.createElement(_Switcher.default, {
|
|
438
|
+
dataTest: "datepicker_compare",
|
|
439
|
+
label: txt.labels.compare,
|
|
440
|
+
isSwitchOn: isCompare,
|
|
441
|
+
onChange: function onChange() {
|
|
442
|
+
onChangeCompare(!isCompare);
|
|
443
|
+
setIsCompare(function (state) {
|
|
444
|
+
return !state;
|
|
445
|
+
});
|
|
446
|
+
}
|
|
447
|
+
}))) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null, renderButtons())));
|
|
448
|
+
};
|
|
449
|
+
|
|
450
|
+
var _default = Datepicker;
|
|
451
|
+
exports.default = _default;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.DatepickerTemplate = void 0;
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
|
|
14
|
+
var _yup = require("yup");
|
|
15
|
+
|
|
16
|
+
var _Datepicker = _interopRequireDefault(require("./Datepicker"));
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
22
|
+
global.lng = 'en'; // export default {
|
|
23
|
+
// title: 'Form Elements/Datepicker',
|
|
24
|
+
// component: Datepicker,
|
|
25
|
+
// };
|
|
26
|
+
|
|
27
|
+
var Template = function Template(args) {
|
|
28
|
+
var params = {
|
|
29
|
+
minDate: args === null || args === void 0 ? void 0 : args.minDate,
|
|
30
|
+
maxDate: args === null || args === void 0 ? void 0 : args.maxDate
|
|
31
|
+
};
|
|
32
|
+
return /*#__PURE__*/_react.default.createElement(_Datepicker.default, {
|
|
33
|
+
data: args.date,
|
|
34
|
+
params: params
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
var DatepickerTemplate = Template.bind({});
|
|
39
|
+
exports.DatepickerTemplate = DatepickerTemplate;
|
|
40
|
+
DatepickerTemplate.args = {
|
|
41
|
+
date: '10/14/2021',
|
|
42
|
+
minDate: '10/11/2021',
|
|
43
|
+
maxDate: '10/25/2021'
|
|
44
|
+
};
|