intelicoreact 0.0.92 → 0.0.95
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/Dropdown/Dropdown.stories.js +1 -1
- package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js +1 -1
- package/dist/Atomic/FormElements/Dropdown/components/{Loader.scss → DropdownLoader.scss} +0 -0
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +35 -6
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.scss +23 -0
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +28 -6
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +20 -9
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +7 -5
- package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +29 -24
- package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +13 -7
- package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.js +427 -0
- package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.scss +120 -0
- package/dist/{Molecular/Datepicker/Datepicker.stories.js → Atomic/FormElements/MobileCalendar/MobileCalendar.stories.js} +33 -21
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +11 -8
- package/dist/Atomic/UI/Calendar/Calendar.js +23 -22
- package/dist/Atomic/UI/Calendar/Calendar.scss +23 -23
- package/dist/Functions/customEventListener.js +66 -0
- package/package.json +1 -1
- package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +1 -1
- package/src/Atomic/FormElements/Dropdown/components/DropdownLoader.js +1 -1
- package/src/Atomic/FormElements/Dropdown/components/{Loader.scss → DropdownLoader.scss} +0 -0
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +58 -5
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.scss +23 -0
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +16 -6
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +57 -22
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +10 -8
- package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +391 -392
- package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +11 -3
- package/src/Atomic/FormElements/MobileCalendar/MobileCalendar.js +315 -0
- package/src/Atomic/FormElements/MobileCalendar/MobileCalendar.scss +120 -0
- package/src/Atomic/FormElements/MobileCalendar/MobileCalendar.stories.js +30 -0
- package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +132 -126
- package/src/Atomic/UI/Calendar/Calendar.js +35 -23
- package/src/Atomic/UI/Calendar/Calendar.scss +23 -23
- package/src/Functions/customEventListener.js +58 -0
- package/src/Functions/useMouseUpOutside.js +14 -0
- package/dist/Functions/useToggle.js +0 -40
- package/dist/Functions/utils.js +0 -66
- package/dist/Molecular/Datepicker/Datepicker.js +0 -451
- package/dist/Molecular/Datepicker/Datepicker.scss +0 -8
- package/dist/Molecular/Datepicker/components/Calendar.js +0 -156
- package/dist/Molecular/FormElements/FormElement.js +0 -40
- package/dist/Molecular/FormElements/FormElement.scss +0 -8
- package/dist/Molecular/FormElements/FormElement.stories.js +0 -73
- package/dist/index.js +0 -15
- package/dist/scss/_fonts.scss +0 -109
- package/dist/scss/_vars.scss +0 -48
- package/dist/scss/main.scss +0 -40
|
@@ -1,451 +0,0 @@
|
|
|
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;
|
|
@@ -1,156 +0,0 @@
|
|
|
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 _classnames = _interopRequireDefault(require("classnames"));
|
|
17
|
-
|
|
18
|
-
var _moment = _interopRequireDefault(require("moment"));
|
|
19
|
-
|
|
20
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
-
|
|
22
|
-
var Icon = _interopRequireWildcard(require("react-feather"));
|
|
23
|
-
|
|
24
|
-
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); }
|
|
25
|
-
|
|
26
|
-
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; }
|
|
27
|
-
|
|
28
|
-
var Calendar = function Calendar(props) {
|
|
29
|
-
var date = props.date,
|
|
30
|
-
setDate = props.setDate,
|
|
31
|
-
startDate = props.startDate,
|
|
32
|
-
endDate = props.endDate,
|
|
33
|
-
_props$allowPrev = props.allowPrev,
|
|
34
|
-
allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
|
|
35
|
-
_props$allowNext = props.allowNext,
|
|
36
|
-
allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
|
|
37
|
-
onClick = props.onClick,
|
|
38
|
-
onHover = props.onHover,
|
|
39
|
-
startPrevDate = props.startPrevDate,
|
|
40
|
-
endPrevDate = props.endPrevDate,
|
|
41
|
-
limitRange = props.limitRange;
|
|
42
|
-
|
|
43
|
-
var _useState = (0, _react.useState)({}),
|
|
44
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
45
|
-
days = _useState2[0],
|
|
46
|
-
setDays = _useState2[1];
|
|
47
|
-
|
|
48
|
-
var title = (0, _react.useMemo)(function () {
|
|
49
|
-
return "".concat((0, _moment.default)(date).format('MMM'), " ").concat((0, _moment.default)(date).format('YYYY'));
|
|
50
|
-
}, [date]);
|
|
51
|
-
(0, _react.useEffect)(function () {
|
|
52
|
-
var result = {};
|
|
53
|
-
var day = (0, _moment.default)(date).startOf('month');
|
|
54
|
-
var daysInMonth = day.daysInMonth();
|
|
55
|
-
|
|
56
|
-
for (var d = 0; d < daysInMonth; d += 1) {
|
|
57
|
-
var week = day.week();
|
|
58
|
-
if (day.month() === 11 && week === 1) week = 53;
|
|
59
|
-
if (day.month() === 0 && week === 53) week = 0;
|
|
60
|
-
|
|
61
|
-
if (!Object.prototype.hasOwnProperty.call(result, week)) {
|
|
62
|
-
result[week] = {};
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
result[week][day.weekday()] = {
|
|
66
|
-
date: day.toDate()
|
|
67
|
-
};
|
|
68
|
-
day.add(1, 'd');
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
setDays(result);
|
|
72
|
-
}, [date]);
|
|
73
|
-
|
|
74
|
-
var renderDay = function renderDay(week, dayOfWeek) {
|
|
75
|
-
var day = days[week][dayOfWeek];
|
|
76
|
-
var isFutureDay = day && (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
|
|
77
|
-
var isPastDay = limitRange ? day && (0, _moment.default)(day.date).isBefore((0, _moment.default)().subtract(limitRange, 'days'), 'day') : null;
|
|
78
|
-
var isRangeEnd = day && ((0, _moment.default)(day.date).isSame(startDate, 'day') || (0, _moment.default)(day.date).isSame((0, _moment.default)(endDate).subtract(1, 'hour'), 'day'));
|
|
79
|
-
var isRangeInside = day && startDate && endDate && (0, _moment.default)(day.date).isAfter(startDate, 'day') && (0, _moment.default)(day.date).isBefore((0, _moment.default)(endDate).subtract(1, 'hour'), 'day');
|
|
80
|
-
var isPrevRangeEnd = day && ((0, _moment.default)(day.date).isSame(startPrevDate, 'day') || (0, _moment.default)(day.date).isSame((0, _moment.default)(endPrevDate).subtract(1, 'day'), 'day'));
|
|
81
|
-
var isPrevRangeInside = day && startPrevDate && endPrevDate && (0, _moment.default)(day.date).isAfter(startPrevDate, 'day') && (0, _moment.default)(day.date).isBefore((0, _moment.default)(endPrevDate).subtract(1, 'day'), 'day');
|
|
82
|
-
var classNames = (0, _classnames.default)('calendar__day', {
|
|
83
|
-
'calendar__day--clickable': day
|
|
84
|
-
}, {
|
|
85
|
-
'calendar__day--disabled': isFutureDay
|
|
86
|
-
}, {
|
|
87
|
-
'calendar__day--disabled': isPastDay
|
|
88
|
-
}, {
|
|
89
|
-
'calendar__day--range-end': isRangeEnd
|
|
90
|
-
}, {
|
|
91
|
-
'calendar__day--range-inside': isRangeInside
|
|
92
|
-
}, {
|
|
93
|
-
'calendar__day--prev-range-end': isPrevRangeEnd
|
|
94
|
-
}, {
|
|
95
|
-
'calendar__day--prev-range-inside': isPrevRangeInside
|
|
96
|
-
});
|
|
97
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
98
|
-
key: "".concat(week, "_").concat(dayOfWeek),
|
|
99
|
-
className: classNames,
|
|
100
|
-
onClick: day && !isFutureDay ? function () {
|
|
101
|
-
return onClick(day.date);
|
|
102
|
-
} : null,
|
|
103
|
-
onMouseOver: day && !isFutureDay ? function () {
|
|
104
|
-
return onHover(day.date);
|
|
105
|
-
} : null,
|
|
106
|
-
onMouseLeave: function onMouseLeave() {
|
|
107
|
-
return onHover(null);
|
|
108
|
-
}
|
|
109
|
-
}, day && day.date.getDate());
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
var handlePrev = function handlePrev() {
|
|
113
|
-
setDate((0, _moment.default)(date).subtract(1, 'month').toDate());
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
var handleNext = function handleNext() {
|
|
117
|
-
setDate((0, _moment.default)(date).add(1, 'month').toDate());
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
121
|
-
className: "calendar"
|
|
122
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
123
|
-
className: "calendar-header"
|
|
124
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
125
|
-
className: "calendar-header__prev"
|
|
126
|
-
}, allowPrev && /*#__PURE__*/_react.default.createElement("div", {
|
|
127
|
-
onClick: handlePrev
|
|
128
|
-
}, /*#__PURE__*/_react.default.createElement(Icon.ChevronLeft, {
|
|
129
|
-
size: 16
|
|
130
|
-
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
131
|
-
className: "calendar-header__title"
|
|
132
|
-
}, title), /*#__PURE__*/_react.default.createElement("div", {
|
|
133
|
-
className: "calendar-header__next"
|
|
134
|
-
}, allowNext && /*#__PURE__*/_react.default.createElement("div", {
|
|
135
|
-
onClick: handleNext
|
|
136
|
-
}, /*#__PURE__*/_react.default.createElement(Icon.ChevronRight, {
|
|
137
|
-
size: 16
|
|
138
|
-
})))), /*#__PURE__*/_react.default.createElement("div", {
|
|
139
|
-
className: "calendar__week"
|
|
140
|
-
}, (0, _toConsumableArray2.default)(Array(7).keys()).map(function (dayOfWeek) {
|
|
141
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
142
|
-
key: "day-of-week_".concat(dayOfWeek),
|
|
143
|
-
className: "calendar__day calendar__day--title"
|
|
144
|
-
}, (0, _moment.default)().weekday(dayOfWeek).format('dd').charAt(0));
|
|
145
|
-
})), Object.keys(days).map(function (week, index) {
|
|
146
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
147
|
-
key: "week_".concat(index),
|
|
148
|
-
className: "calendar__week"
|
|
149
|
-
}, (0, _toConsumableArray2.default)(Array(7).keys()).map(function (dayOfWeek) {
|
|
150
|
-
return renderDay(week, dayOfWeek);
|
|
151
|
-
}));
|
|
152
|
-
}));
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
var _default = Calendar;
|
|
156
|
-
exports.default = _default;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
-
|
|
14
|
-
var _Label = _interopRequireDefault(require("../../Atomic/FormElements/Label/Label"));
|
|
15
|
-
|
|
16
|
-
require("./FormElement.scss");
|
|
17
|
-
|
|
18
|
-
var RC = 'form-element';
|
|
19
|
-
|
|
20
|
-
var FormElement = function FormElement(_ref) {
|
|
21
|
-
var label = _ref.label,
|
|
22
|
-
required = _ref.required,
|
|
23
|
-
children = _ref.children,
|
|
24
|
-
error = _ref.error,
|
|
25
|
-
className = _ref.className,
|
|
26
|
-
hint = _ref.hint;
|
|
27
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
28
|
-
className: (0, _classnames.default)(className, RC)
|
|
29
|
-
}, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
30
|
-
className: "".concat(RC, "__label"),
|
|
31
|
-
label: label,
|
|
32
|
-
hint: hint,
|
|
33
|
-
isRequired: required
|
|
34
|
-
}), children, error && /*#__PURE__*/_react.default.createElement("span", {
|
|
35
|
-
className: "".concat(RC, "__error")
|
|
36
|
-
}, error));
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
var _default = FormElement;
|
|
40
|
-
exports.default = _default;
|