intelicoreact 1.2.50 → 1.2.51
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.js +15 -10
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +1 -0
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +40 -8
- package/dist/Atomic/FormElements/InputDateRange/components/DateInput.js +113 -0
- package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +292 -214
- package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +6 -5
- package/dist/Atomic/FormElements/InputDateRange/dependencies.js +7 -1
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +1 -1
- package/package.json +1 -1
|
@@ -79,12 +79,13 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
79
79
|
_ref$noOptionsText = _ref.noOptionsText,
|
|
80
80
|
noOptionsText = _ref$noOptionsText === void 0 ? 'No options available' : _ref$noOptionsText,
|
|
81
81
|
_ref$attributesOfNati = _ref.attributesOfNativeInput,
|
|
82
|
-
attributesOfNativeInput = _ref$attributesOfNati === void 0 ? {} : _ref$attributesOfNati
|
|
82
|
+
attributesOfNativeInput = _ref$attributesOfNati === void 0 ? {} : _ref$attributesOfNati,
|
|
83
|
+
isDoNotPullOutListOfMainContainer = _ref.isDoNotPullOutListOfMainContainer;
|
|
83
84
|
|
|
84
85
|
var _useIsMobile = (0, _useIsMobile2.default)(),
|
|
85
86
|
isMobile = _useIsMobile.isMobile;
|
|
86
87
|
|
|
87
|
-
var dropdownId =
|
|
88
|
+
var dropdownId = id || fieldKey;
|
|
88
89
|
|
|
89
90
|
var _useState = (0, _react.useState)(false),
|
|
90
91
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -309,6 +310,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
309
310
|
var getParentNode = function getParentNode() {
|
|
310
311
|
var _document$querySelect;
|
|
311
312
|
|
|
313
|
+
if (isDoNotPullOutListOfMainContainer) return dropdownRef.current;
|
|
312
314
|
return (_document$querySelect = document.querySelector('div#root')) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('div#app');
|
|
313
315
|
};
|
|
314
316
|
|
|
@@ -362,18 +364,19 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
362
364
|
var newData = (0, _toConsumableArray2.default)(data);
|
|
363
365
|
|
|
364
366
|
if (sortAlphabetical) {
|
|
365
|
-
var
|
|
366
|
-
|
|
367
|
-
newData = [].concat((0, _toConsumableArray2.default)((_newData = newData) === null || _newData === void 0 ? void 0 : _newData.filter(function (_ref4) {
|
|
367
|
+
var openModalOption = newData.filter(function (_ref4) {
|
|
368
368
|
var value = _ref4.value;
|
|
369
369
|
return value === 'open_modal';
|
|
370
|
-
})
|
|
370
|
+
});
|
|
371
|
+
var emptyOption = newData.filter(function (_ref5) {
|
|
371
372
|
var value = _ref5.value;
|
|
372
373
|
return value === '';
|
|
373
|
-
})
|
|
374
|
+
});
|
|
375
|
+
var restOfOptions = newData.filter(function (_ref6) {
|
|
374
376
|
var value = _ref6.value;
|
|
375
377
|
return value !== 'open_modal' && value !== '';
|
|
376
|
-
}).sort(_utils.compareAlphabetical)
|
|
378
|
+
}).sort(_utils.compareAlphabetical);
|
|
379
|
+
newData = [].concat((0, _toConsumableArray2.default)(openModalOption), (0, _toConsumableArray2.default)(emptyOption), (0, _toConsumableArray2.default)(restOfOptions)).map(function (item) {
|
|
377
380
|
if (item !== null && item !== void 0 && item.items) {
|
|
378
381
|
item.items = (0, _toConsumableArray2.default)(item.items).sort(_utils.compareAlphabetical);
|
|
379
382
|
}
|
|
@@ -472,8 +475,10 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
472
475
|
|
|
473
476
|
var closeList = isOpen ? handleClickOutside : function () {};
|
|
474
477
|
(0, _react.useEffect)(function () {
|
|
475
|
-
|
|
476
|
-
|
|
478
|
+
if (!isDoNotPullOutListOfMainContainer || dropdownRef.current) {
|
|
479
|
+
initListContainer();
|
|
480
|
+
}
|
|
481
|
+
}, [isDoNotPullOutListOfMainContainer, dropdownRef.current]);
|
|
477
482
|
(0, _react.useLayoutEffect)(function () {
|
|
478
483
|
var _getListContainer2;
|
|
479
484
|
|
|
@@ -236,6 +236,7 @@ var InputDateRange = function InputDateRange(props) {
|
|
|
236
236
|
disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY || !isDontLimitFuture && (formatedMaxDate ? (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).endOf('day').subtract((0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).diff(actualValues === null || actualValues === void 0 ? void 0 : actualValues.start, 'hours'), 'hours').isAfter(momentMaxDate.startOf('day')) : (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).add((0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).diff(actualValues === null || actualValues === void 0 ? void 0 : actualValues.start, 'hours'), 'hours').isAfter((0, _momentTimezone.default)().add(1, 'day').startOf('day'))),
|
|
237
237
|
isAlt: isAltArrows
|
|
238
238
|
}))), isToggled && !isUseAbs && /*#__PURE__*/_react.default.createElement(_OpenedPart.default, (0, _extends2.default)({}, props, {
|
|
239
|
+
mainId: id,
|
|
239
240
|
testId: testId,
|
|
240
241
|
ref: internalContainerRef,
|
|
241
242
|
actualValues: actualValues,
|
|
@@ -328,7 +328,7 @@
|
|
|
328
328
|
|
|
329
329
|
& > div:not(.date-picker__inputs-separator) {
|
|
330
330
|
box-sizing: border-box;
|
|
331
|
-
width:
|
|
331
|
+
width: 100px;
|
|
332
332
|
min-height: 100%;
|
|
333
333
|
margin-right: 9px;
|
|
334
334
|
|
|
@@ -368,20 +368,48 @@
|
|
|
368
368
|
|
|
369
369
|
&__date-input {
|
|
370
370
|
box-sizing: border-box;
|
|
371
|
-
width: fit-content;
|
|
372
|
-
height: fit-content;
|
|
373
|
-
padding: 3px 10px;
|
|
374
|
-
|
|
375
|
-
letter-spacing: inherit;
|
|
376
371
|
|
|
372
|
+
padding: 3px 10px;
|
|
373
|
+
|
|
377
374
|
color: inherit;
|
|
375
|
+
background-color: #FFF;
|
|
378
376
|
border-radius: var(--border-radius);
|
|
379
|
-
|
|
377
|
+
|
|
380
378
|
font-family: var(--font-family);
|
|
381
379
|
font-size: var(--font-size);
|
|
382
380
|
font-weight: 300;
|
|
383
381
|
font-style: normal;
|
|
384
|
-
line-height: var(--input-height);
|
|
382
|
+
line-height: calc(var(--input-height) / 2);
|
|
383
|
+
letter-spacing: inherit;
|
|
384
|
+
|
|
385
|
+
&-interactive {
|
|
386
|
+
// &.input-mask3_wrapper>div {
|
|
387
|
+
// width: 100%;
|
|
388
|
+
// height: 100%;
|
|
389
|
+
// padding: 0;
|
|
390
|
+
// border: none;
|
|
391
|
+
// font-size: 12px;
|
|
392
|
+
// }
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
&-emulation {
|
|
396
|
+
display: flex;
|
|
397
|
+
flex-flow: row nowrap;
|
|
398
|
+
justify-content: flex-start;
|
|
399
|
+
align-items: center;
|
|
400
|
+
padding: 3px 10px;
|
|
401
|
+
|
|
402
|
+
width: 100%;
|
|
403
|
+
height: 100%;
|
|
404
|
+
background-color: #FFF;
|
|
405
|
+
|
|
406
|
+
cursor: pointer;
|
|
407
|
+
|
|
408
|
+
&_disabled {
|
|
409
|
+
pointer-events: none;
|
|
410
|
+
cursor: auto;
|
|
411
|
+
}
|
|
412
|
+
}
|
|
385
413
|
}
|
|
386
414
|
|
|
387
415
|
&__hour-select-input {
|
|
@@ -408,6 +436,10 @@
|
|
|
408
436
|
font-weight: inherit;
|
|
409
437
|
font-style: inherit;
|
|
410
438
|
line-height: inherit;
|
|
439
|
+
|
|
440
|
+
& > .text {
|
|
441
|
+
padding: 0;
|
|
442
|
+
}
|
|
411
443
|
}
|
|
412
444
|
|
|
413
445
|
& .dropdown__list-item {
|
|
@@ -0,0 +1,113 @@
|
|
|
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
|
|
16
|
+
var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
|
|
17
|
+
|
|
18
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
|
+
|
|
20
|
+
var _mobileKeyboardTypesPresets = require("../../../../Functions/presets/mobileKeyboardTypesPresets");
|
|
21
|
+
|
|
22
|
+
var _Input = _interopRequireDefault(require("../../Input/Input"));
|
|
23
|
+
|
|
24
|
+
// import InputMask3 from '../../InputMask3/InputMask3';
|
|
25
|
+
var handleDateInputOnChange = function handleDateInputOnChange(value) {
|
|
26
|
+
var replace = function replace(val) {
|
|
27
|
+
return val === null || val === void 0 ? void 0 : val.replace(/[^0-9\/]/g, '');
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
var input = replace(value);
|
|
31
|
+
var lastSymbol = input ? input.slice(-1) : '';
|
|
32
|
+
var previousValue = input ? input.slice(0, input.length - 1) : '';
|
|
33
|
+
if (value.length > 10 || lastSymbol === '/') return previousValue;
|
|
34
|
+
return previousValue.length === 2 || previousValue.length === 5 ? previousValue + '/' + lastSymbol : input;
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
var DateInput = function DateInput(props, ref) {
|
|
38
|
+
var RC = props.RC,
|
|
39
|
+
className = props.className,
|
|
40
|
+
testId = props.testId,
|
|
41
|
+
isFocused = props.isFocused,
|
|
42
|
+
disabled = props.disabled,
|
|
43
|
+
value = props.value,
|
|
44
|
+
_props$valueParseForm = props.valueParseFormat,
|
|
45
|
+
valueParseFormat = _props$valueParseForm === void 0 ? 'MM/DD/YYYY' : _props$valueParseForm,
|
|
46
|
+
date = props.date,
|
|
47
|
+
prepareDate = props.prepareDate,
|
|
48
|
+
_onChange = props.onChange,
|
|
49
|
+
onFocus = props.onFocus,
|
|
50
|
+
onBlur = props.onBlur,
|
|
51
|
+
onKeyUp = props.onKeyUp;
|
|
52
|
+
|
|
53
|
+
var preparedDate = function () {
|
|
54
|
+
var _prepareDate, _output$toString;
|
|
55
|
+
|
|
56
|
+
var prepareDateDefault = function prepareDateDefault(date) {
|
|
57
|
+
return (0, _momentTimezone.default)(date).format('ll');
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
var output = (_prepareDate = prepareDate === null || prepareDate === void 0 ? void 0 : prepareDate(date)) !== null && _prepareDate !== void 0 ? _prepareDate : prepareDateDefault(date);
|
|
61
|
+
return ((output === null || output === void 0 ? void 0 : (_output$toString = output.toString) === null || _output$toString === void 0 ? void 0 : _output$toString.call(output).toLowerCase()) || '') !== 'invalid date' ? output : '';
|
|
62
|
+
}();
|
|
63
|
+
|
|
64
|
+
return isFocused ? /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
|
|
65
|
+
ref: ref,
|
|
66
|
+
testId: testId,
|
|
67
|
+
className: (0, _classnames.default)(className, "".concat(RC, "-interactive")),
|
|
68
|
+
value: value,
|
|
69
|
+
disabled: disabled,
|
|
70
|
+
onChange: function onChange(value) {
|
|
71
|
+
return _onChange(handleDateInputOnChange(value));
|
|
72
|
+
},
|
|
73
|
+
onBlur: onBlur,
|
|
74
|
+
onKeyUp: onKeyUp
|
|
75
|
+
}, _mobileKeyboardTypesPresets.NUMERIC_KEYBOARD)) : /*#__PURE__*/_react.default.createElement("div", {
|
|
76
|
+
className: (0, _classnames.default)(className, "".concat(RC, "-emulation"), (0, _defineProperty2.default)({}, "".concat(RC, "-emulation_disabled"), disabled)),
|
|
77
|
+
onClick: disabled ? null : function () {
|
|
78
|
+
return onFocus();
|
|
79
|
+
}
|
|
80
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
81
|
+
className: (0, _classnames.default)('')
|
|
82
|
+
}, preparedDate)); // return isFocused ? (
|
|
83
|
+
// <InputMask3
|
|
84
|
+
// ref={ref}
|
|
85
|
+
// testId={testId}
|
|
86
|
+
// className={cn(className, `${RC}-interactive`)}
|
|
87
|
+
// value={value}
|
|
88
|
+
// disabled={disabled}
|
|
89
|
+
// onChange={onChange}
|
|
90
|
+
// onBlur={onBlur}
|
|
91
|
+
// onKeyUp={onKeyUp}
|
|
92
|
+
// maskPattern="DD/DD/DDDD"
|
|
93
|
+
// maskPatternPlaceholder="MM/DD/YYYY"
|
|
94
|
+
// usePatternPlaceholder
|
|
95
|
+
// isNumericMobileKeyboard
|
|
96
|
+
// blinkErrors
|
|
97
|
+
// showErrors={false}
|
|
98
|
+
// autocomplete="bday"
|
|
99
|
+
// focusSelector="input"
|
|
100
|
+
// />
|
|
101
|
+
// ) : (
|
|
102
|
+
// <div
|
|
103
|
+
// className={cn(className, `${RC}-emulation`, {[`${RC}-emulation_disabled`]: disabled})}
|
|
104
|
+
// onClick={disabled ? null : () => onFocus()}
|
|
105
|
+
// >
|
|
106
|
+
// <span className={cn('')}>{preparedDate}</span>
|
|
107
|
+
// </div>
|
|
108
|
+
// );
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
var _default = /*#__PURE__*/_react.default.forwardRef(DateInput);
|
|
112
|
+
|
|
113
|
+
exports.default = _default;
|
|
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports.default = void 0;
|
|
11
11
|
|
|
12
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
12
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
15
13
|
|
|
16
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
@@ -23,11 +21,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
23
21
|
|
|
24
22
|
var _dependencies = require("../dependencies");
|
|
25
23
|
|
|
26
|
-
var _mobileKeyboardTypesPresets = require("../../../../Functions/presets/mobileKeyboardTypesPresets");
|
|
27
|
-
|
|
28
24
|
var _Dropdown = _interopRequireDefault(require("../../Dropdown/Dropdown"));
|
|
29
25
|
|
|
30
|
-
var
|
|
26
|
+
var _DateInput = _interopRequireDefault(require("./DateInput"));
|
|
31
27
|
|
|
32
28
|
var _Button = _interopRequireDefault(require("../../../UI/Button/Button"));
|
|
33
29
|
|
|
@@ -39,20 +35,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
39
35
|
|
|
40
36
|
// eslint-disable-next-line no-unused-vars
|
|
41
37
|
// import Switcher from '../../Switcher/Switcher';
|
|
42
|
-
var
|
|
43
|
-
|
|
38
|
+
var outsideScope = {
|
|
39
|
+
handleHoverTimerId: null
|
|
44
40
|
};
|
|
45
41
|
|
|
46
|
-
var
|
|
47
|
-
|
|
48
|
-
return val === null || val === void 0 ? void 0 : val.replace(/[^0-9\/]/g, '');
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
var input = replace(value);
|
|
52
|
-
var lastSymbol = input ? input.slice(-1) : '';
|
|
53
|
-
var previousValue = input ? input.slice(0, input.length - 1) : '';
|
|
54
|
-
if (value.length > 10 || lastSymbol === '/') return previousValue;
|
|
55
|
-
return previousValue.length === 2 || previousValue.length === 5 ? previousValue + '/' + lastSymbol : input;
|
|
42
|
+
var padTime = function padTime(time) {
|
|
43
|
+
return "".concat(time.toString().padStart(2, '0'), ":00");
|
|
56
44
|
};
|
|
57
45
|
|
|
58
46
|
var Datepicker = function Datepicker(props) {
|
|
@@ -77,8 +65,8 @@ var Datepicker = function Datepicker(props) {
|
|
|
77
65
|
momentMinDate = props.momentMinDate,
|
|
78
66
|
momentMaxDate = props.momentMaxDate,
|
|
79
67
|
isDontLimitFuture = props.isDontLimitFuture,
|
|
80
|
-
|
|
81
|
-
|
|
68
|
+
testId = props.testId,
|
|
69
|
+
mainId = props.mainId;
|
|
82
70
|
var _values$start = values.start,
|
|
83
71
|
start = _values$start === void 0 ? null : _values$start,
|
|
84
72
|
_values$end = values.end,
|
|
@@ -88,71 +76,74 @@ var Datepicker = function Datepicker(props) {
|
|
|
88
76
|
var startDateInputRef = (0, _react.useRef)(null);
|
|
89
77
|
var endDateInputRef = (0, _react.useRef)(null);
|
|
90
78
|
|
|
91
|
-
var _useState = (0, _react.useState)(start),
|
|
79
|
+
var _useState = (0, _react.useState)((0, _momentTimezone.default)(start)),
|
|
92
80
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
93
81
|
startDate = _useState2[0],
|
|
94
82
|
setStartDate = _useState2[1];
|
|
95
83
|
|
|
96
|
-
var _useState3 = (0, _react.useState)(end),
|
|
84
|
+
var _useState3 = (0, _react.useState)((0, _momentTimezone.default)(end)),
|
|
97
85
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
98
86
|
endDate = _useState4[0],
|
|
99
87
|
setEndDate = _useState4[1];
|
|
100
88
|
|
|
101
89
|
var dateInterval = getSelectedMode({
|
|
102
|
-
start: startDate,
|
|
103
|
-
end: endDate
|
|
90
|
+
start: startDate.format('YYYY-MM-DDTHH:mm'),
|
|
91
|
+
end: endDate.format('YYYY-MM-DDTHH:mm')
|
|
104
92
|
});
|
|
105
93
|
|
|
106
|
-
var _useState5 = (0, _react.useState)(
|
|
94
|
+
var _useState5 = (0, _react.useState)(null),
|
|
107
95
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
108
96
|
startDateInput = _useState6[0],
|
|
109
97
|
setStartDateInput = _useState6[1];
|
|
110
98
|
|
|
111
|
-
var _useState7 = (0, _react.useState)(
|
|
99
|
+
var _useState7 = (0, _react.useState)(null),
|
|
112
100
|
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
113
101
|
endDateInput = _useState8[0],
|
|
114
102
|
setEndDateInput = _useState8[1];
|
|
115
103
|
|
|
116
|
-
var _useState9 = (0, _react.useState)(
|
|
104
|
+
var _useState9 = (0, _react.useState)(false),
|
|
117
105
|
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
118
|
-
|
|
119
|
-
|
|
106
|
+
isStartFocused = _useState10[0],
|
|
107
|
+
setIsStartFocused = _useState10[1];
|
|
120
108
|
|
|
121
|
-
var _useState11 = (0, _react.useState)(
|
|
109
|
+
var _useState11 = (0, _react.useState)(false),
|
|
122
110
|
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
111
|
+
isEndFocused = _useState12[0],
|
|
112
|
+
setIsEndFocused = _useState12[1];
|
|
126
113
|
|
|
127
|
-
var _useState13 = (0, _react.useState)(
|
|
114
|
+
var _useState13 = (0, _react.useState)(start ? (0, _momentTimezone.default)(start).hour() : 0),
|
|
128
115
|
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
|
129
|
-
|
|
130
|
-
|
|
116
|
+
startHour = _useState14[0],
|
|
117
|
+
setStartHour = _useState14[1];
|
|
131
118
|
|
|
132
|
-
var _useState15 = (0, _react.useState)(
|
|
119
|
+
var _useState15 = (0, _react.useState)(end ? (0, _momentTimezone.default)(end).hour() : 0),
|
|
133
120
|
_useState16 = (0, _slicedToArray2.default)(_useState15, 2),
|
|
134
|
-
|
|
135
|
-
|
|
121
|
+
endHour = _useState16[0],
|
|
122
|
+
setEndHour = _useState16[1]; // eslint-disable-next-line no-unused-vars
|
|
136
123
|
|
|
137
|
-
|
|
124
|
+
|
|
125
|
+
var _useState17 = (0, _react.useState)(compare),
|
|
138
126
|
_useState18 = (0, _slicedToArray2.default)(_useState17, 2),
|
|
139
|
-
|
|
140
|
-
|
|
127
|
+
isCompare = _useState18[0],
|
|
128
|
+
setIsCompare = _useState18[1];
|
|
141
129
|
|
|
142
|
-
var _useState19 = (0, _react.useState)(
|
|
130
|
+
var _useState19 = (0, _react.useState)(start ? (0, _momentTimezone.default)(start) : (0, _momentTimezone.default)().subtract(1, 'month')),
|
|
143
131
|
_useState20 = (0, _slicedToArray2.default)(_useState19, 2),
|
|
144
|
-
|
|
145
|
-
|
|
132
|
+
date1 = _useState20[0],
|
|
133
|
+
setDate1 = _useState20[1];
|
|
146
134
|
|
|
147
|
-
var _useState21 = (0, _react.useState)(
|
|
135
|
+
var _useState21 = (0, _react.useState)(end ? (0, _momentTimezone.default)(end) : (0, _momentTimezone.default)()),
|
|
148
136
|
_useState22 = (0, _slicedToArray2.default)(_useState21, 2),
|
|
149
|
-
|
|
150
|
-
|
|
137
|
+
date2 = _useState22[0],
|
|
138
|
+
setDate2 = _useState22[1];
|
|
151
139
|
|
|
152
140
|
var _useState23 = (0, _react.useState)(null),
|
|
153
141
|
_useState24 = (0, _slicedToArray2.default)(_useState23, 2),
|
|
154
142
|
hoverStatus = _useState24[0],
|
|
155
|
-
setHoverStatus = _useState24[1];
|
|
143
|
+
setHoverStatus = _useState24[1]; // ********************
|
|
144
|
+
// Constants
|
|
145
|
+
// ********************
|
|
146
|
+
|
|
156
147
|
|
|
157
148
|
var isNearby = (0, _react.useMemo)(function () {
|
|
158
149
|
return (0, _momentTimezone.default)(date2).subtract(1, 'month').isSame((0, _momentTimezone.default)(date1), 'month');
|
|
@@ -160,36 +151,7 @@ var Datepicker = function Datepicker(props) {
|
|
|
160
151
|
var isPreviousPeriodShowed = (0, _react.useMemo)(function () {
|
|
161
152
|
return isCompare && !isCompareHidden && startDate && endDate;
|
|
162
153
|
}, [startDate, endDate, isCompare]);
|
|
163
|
-
|
|
164
|
-
var setInterval = function setInterval() {
|
|
165
|
-
setActiveInterval((0, _dependencies.getActualDateRange)({
|
|
166
|
-
start: startDate,
|
|
167
|
-
end: endDate
|
|
168
|
-
}).intervalKey);
|
|
169
|
-
};
|
|
170
|
-
|
|
171
154
|
var prevEndHour = (0, _react.useRef)(endHour);
|
|
172
|
-
|
|
173
|
-
var getStartHourItems = function getStartHourItems() {
|
|
174
|
-
return (0, _toConsumableArray2.default)(Array(24).keys()).map(function (hour) {
|
|
175
|
-
return {
|
|
176
|
-
label: padTime(hour),
|
|
177
|
-
value: hour,
|
|
178
|
-
disabled: (0, _momentTimezone.default)(startDate).isSame(endDate, 'day') && endHour <= hour
|
|
179
|
-
};
|
|
180
|
-
});
|
|
181
|
-
};
|
|
182
|
-
|
|
183
|
-
var getEndHourItems = function getEndHourItems() {
|
|
184
|
-
return (0, _toConsumableArray2.default)(Array(24).keys()).map(function (hour) {
|
|
185
|
-
return {
|
|
186
|
-
label: padTime(hour + 1),
|
|
187
|
-
value: hour === 23 ? 0 : hour + 1,
|
|
188
|
-
disabled: ((0, _momentTimezone.default)(startDate).isSame(endDate, 'day') || (0, _momentTimezone.default)(startDate).isSame((0, _momentTimezone.default)(endDate).subtract(1, 'days'), 'day') && endHour === 0) && hour < startHour
|
|
189
|
-
};
|
|
190
|
-
});
|
|
191
|
-
};
|
|
192
|
-
|
|
193
155
|
var startPrevDate = (0, _react.useMemo)(function () {
|
|
194
156
|
if (isPreviousPeriodShowed) {
|
|
195
157
|
var intervalHoursCount = (0, _momentTimezone.default)(endDate).diff(startDate, 'hours');
|
|
@@ -205,78 +167,61 @@ var Datepicker = function Datepicker(props) {
|
|
|
205
167
|
if (isCompare && !isCompareHidden && startDate && endDate) {
|
|
206
168
|
return "".concat((0, _momentTimezone.default)(startPrevDate).format('ll'), " (").concat((0, _momentTimezone.default)(startPrevDate).format('HH:mm'), ") - ").concat((0, _momentTimezone.default)(endPrevDate).format('ll'), " (").concat((0, _momentTimezone.default)(endPrevDate).format('HH:mm'), ")");
|
|
207
169
|
} else return '';
|
|
208
|
-
}, [startDate, endDate, isCompare]);
|
|
170
|
+
}, [startDate, endDate, isCompare]); // ********************
|
|
171
|
+
// Methods
|
|
172
|
+
// ********************
|
|
209
173
|
|
|
210
|
-
var
|
|
211
|
-
|
|
174
|
+
var getCorrectedDateForDateInput = function getCorrectedDateForDateInput(key, date) {
|
|
175
|
+
if (key === 'startDateInput') return (0, _momentTimezone.default)(date);
|
|
176
|
+
return (0, _momentTimezone.default)(date).subtract(1, 'm');
|
|
212
177
|
};
|
|
213
178
|
|
|
214
|
-
var
|
|
215
|
-
|
|
179
|
+
var setInterval = function setInterval() {
|
|
180
|
+
setActiveInterval((0, _dependencies.getActualDateRange)({
|
|
181
|
+
start: startDate,
|
|
182
|
+
end: endDate
|
|
183
|
+
}).intervalKey);
|
|
216
184
|
};
|
|
217
185
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
setDate1((0, _momentTimezone.default)(endDate).subtract(1, 'd'));
|
|
222
|
-
}
|
|
223
|
-
}, [startDate]);
|
|
224
|
-
(0, _react.useEffect)(function () {
|
|
225
|
-
if ((0, _momentTimezone.default)(endDate).isSameOrBefore(startDate)) {
|
|
226
|
-
setEndDate((0, _momentTimezone.default)(startDate).add(1, 'd').toDate());
|
|
227
|
-
setDate2((0, _momentTimezone.default)(startDate).add(1, 'd'));
|
|
228
|
-
}
|
|
229
|
-
}, [endDate]);
|
|
230
|
-
(0, _react.useEffect)(function () {
|
|
231
|
-
setStartDateInput(startDate);
|
|
232
|
-
setEndDateInput(endDate);
|
|
186
|
+
var subtractDay = function subtractDay(date) {
|
|
187
|
+
return endHour === 0 ? (0, _momentTimezone.default)(date).subtract(1, 'days') : (0, _momentTimezone.default)(date);
|
|
188
|
+
};
|
|
233
189
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
190
|
+
var addDay = function addDay(date) {
|
|
191
|
+
return endHour === 0 ? (0, _momentTimezone.default)(date).add(1, 'days') : (0, _momentTimezone.default)(date);
|
|
192
|
+
}; // ********************
|
|
193
|
+
// Handlers
|
|
194
|
+
// ********************
|
|
238
195
|
|
|
239
|
-
setInterval();
|
|
240
|
-
}, [startDate, endDate]);
|
|
241
|
-
(0, _react.useEffect)(function () {
|
|
242
|
-
if ((0, _momentTimezone.default)(date1).isSameOrAfter((0, _momentTimezone.default)(date2), 'month')) {
|
|
243
|
-
setDate1((0, _momentTimezone.default)(date2).subtract(1, 'month'));
|
|
244
|
-
}
|
|
245
|
-
}, [date1, date2]);
|
|
246
|
-
(0, _react.useEffect)(function () {
|
|
247
|
-
onChangeInterval(dateInterval);
|
|
248
|
-
}, [dateInterval]);
|
|
249
196
|
|
|
250
197
|
var handleClick = function handleClick(date) {
|
|
251
198
|
prevEndHour.current = 0;
|
|
252
199
|
|
|
253
200
|
if (!startDate || startDate && endDate && !((0, _momentTimezone.default)(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0)) {
|
|
254
|
-
setStartDate((0, _momentTimezone.default)(date).startOf('day')
|
|
255
|
-
setEndDate((0, _momentTimezone.default)(date).add(1, 'd').startOf('day')
|
|
201
|
+
setStartDate((0, _momentTimezone.default)(date).startOf('day'));
|
|
202
|
+
setEndDate((0, _momentTimezone.default)(date).add(1, 'd').startOf('day'));
|
|
256
203
|
setStartHour(0);
|
|
257
204
|
setEndHour(0);
|
|
258
205
|
} else if ((0, _momentTimezone.default)(date).isBefore((0, _momentTimezone.default)(startDate), 'day')) {
|
|
259
|
-
setEndDate((0, _momentTimezone.default)(startDate).add(1, 'd').startOf('day')
|
|
260
|
-
setStartDate((0, _momentTimezone.default)(date).set('hour', parseInt(startHour, 10))
|
|
206
|
+
setEndDate((0, _momentTimezone.default)(startDate).add(1, 'd').startOf('day'));
|
|
207
|
+
setStartDate((0, _momentTimezone.default)(date).set('hour', parseInt(startHour, 10)));
|
|
261
208
|
} else if ((0, _momentTimezone.default)(date).isAfter((0, _momentTimezone.default)(startDate), 'day')) {
|
|
262
|
-
setEndDate((0, _momentTimezone.default)(date).add(1, 'd').startOf('day')
|
|
209
|
+
setEndDate((0, _momentTimezone.default)(date).add(1, 'd').startOf('day'));
|
|
263
210
|
}
|
|
264
211
|
|
|
265
212
|
setHoverStatus(null);
|
|
266
213
|
};
|
|
267
214
|
|
|
268
|
-
var timerId;
|
|
269
|
-
|
|
270
215
|
var handleHover = function handleHover(date) {
|
|
216
|
+
if (outsideScope.handleHoverTimerId) clearTimeout(outsideScope.handleHoverTimerId);
|
|
217
|
+
|
|
271
218
|
if (!date) {
|
|
272
|
-
|
|
219
|
+
outsideScope.handleHoverTimerId = setTimeout(function () {
|
|
273
220
|
setHoverStatus(null);
|
|
274
221
|
}, 400);
|
|
275
222
|
return;
|
|
276
223
|
}
|
|
277
224
|
|
|
278
|
-
if (timerId) clearTimeout(timerId);
|
|
279
|
-
|
|
280
225
|
if ((0, _momentTimezone.default)(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0) {
|
|
281
226
|
if ((0, _momentTimezone.default)(date).isAfter((0, _momentTimezone.default)(startDate), 'day')) setHoverStatus('end');else if ((0, _momentTimezone.default)(date).isBefore((0, _momentTimezone.default)(startDate), 'day')) setHoverStatus('start');else setHoverStatus(null);
|
|
282
227
|
} else {
|
|
@@ -286,7 +231,7 @@ var Datepicker = function Datepicker(props) {
|
|
|
286
231
|
|
|
287
232
|
var handleChangeStartHour = function handleChangeStartHour(val) {
|
|
288
233
|
setStartHour(+val);
|
|
289
|
-
setStartDate((0, _momentTimezone.default)(startDate || (0, _momentTimezone.default)()).set('hour', +val)
|
|
234
|
+
setStartDate((0, _momentTimezone.default)(startDate || (0, _momentTimezone.default)()).set('hour', +val));
|
|
290
235
|
};
|
|
291
236
|
|
|
292
237
|
var handleChangeEndHour = function handleChangeEndHour(val) {
|
|
@@ -303,7 +248,164 @@ var Datepicker = function Datepicker(props) {
|
|
|
303
248
|
}
|
|
304
249
|
|
|
305
250
|
prevEndHour.current = newHour;
|
|
306
|
-
setEndDate((0, _momentTimezone.default)(newEndDate).set('hour', newHour)
|
|
251
|
+
setEndDate((0, _momentTimezone.default)(newEndDate).set('hour', newHour));
|
|
252
|
+
}; // const doBlur = (type, e) => {
|
|
253
|
+
// const executor = type === 'start' ? setIsStartFocused : setIsEndFocused;
|
|
254
|
+
// e.target.blur();
|
|
255
|
+
// executor(false);
|
|
256
|
+
// };
|
|
257
|
+
// const handleStartDateBlur = e => {
|
|
258
|
+
// let newDate;
|
|
259
|
+
// if (!moment(startDateInput).isValid()) {
|
|
260
|
+
// newDate = moment(startDate);
|
|
261
|
+
// } else {
|
|
262
|
+
// if (minDate && moment(startDateInput).isBefore(minDate)) newDate = momentMinDate;
|
|
263
|
+
// else if (!isDontLimitFuture) {
|
|
264
|
+
// const edge = maxDate ? momentMaxDate : moment().add(1, 'day').startOf('day');
|
|
265
|
+
// if (moment(startDateInput).isAfter(edge)) newDate = edge;
|
|
266
|
+
// else newDate = moment(startDateInput);
|
|
267
|
+
// } else newDate = moment(startDateInput);
|
|
268
|
+
// }
|
|
269
|
+
// setStartDateInput(newDate.format(format));
|
|
270
|
+
// setStartDate(newDate.set('hour', parseInt(startHour, 10)).toDate());
|
|
271
|
+
// doBlur('start', e);
|
|
272
|
+
// setDate1(
|
|
273
|
+
// moment(newDate).isSameOrAfter(moment(date2), 'month') ? moment(date2).subtract(1, 'month') : moment(newDate),
|
|
274
|
+
// );
|
|
275
|
+
// };
|
|
276
|
+
// const handleEndDateBlur = e => {
|
|
277
|
+
// let newDate;
|
|
278
|
+
// if (!moment(endDateInput).isValid()) {
|
|
279
|
+
// newDate = moment(endDate);
|
|
280
|
+
// } else {
|
|
281
|
+
// if (minDate && moment(endDateInput).isBefore(minDate)) newDate = momentMinDate;
|
|
282
|
+
// else if (!isDontLimitFuture) {
|
|
283
|
+
// const edge = maxDate ? momentMaxDate : moment().endOf('day');
|
|
284
|
+
// if (moment(endDateInput).isAfter(edge)) newDate = maxDate ? edge : edge.startOf('day');
|
|
285
|
+
// else newDate = moment(startDateInput);
|
|
286
|
+
// } else newDate = moment(startDateInput);
|
|
287
|
+
// }
|
|
288
|
+
// setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
|
|
289
|
+
// setEndDateInput(newDate.format(format));
|
|
290
|
+
// doBlur('end', e);
|
|
291
|
+
// setDate2(newDate);
|
|
292
|
+
// };
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
var handleDateInputFocus = function handleDateInputFocus(key, e) {
|
|
296
|
+
var changeFlag = key === 'startDateInput' ? setIsStartFocused : setIsEndFocused;
|
|
297
|
+
var set = key === 'startDateInput' ? setStartDateInput : setEndDateInput;
|
|
298
|
+
var date = key === 'startDateInput' ? startDate : endDate;
|
|
299
|
+
changeFlag(true);
|
|
300
|
+
set(getCorrectedDateForDateInput(key, date).format('L'));
|
|
301
|
+
setTimeout(function () {
|
|
302
|
+
var _e$target;
|
|
303
|
+
|
|
304
|
+
var defaultTarget = key === 'startDateInput' ? startDateInputRef.current : endDateInputRef.current;
|
|
305
|
+
var target = (_e$target = e === null || e === void 0 ? void 0 : e.target) !== null && _e$target !== void 0 ? _e$target : defaultTarget;
|
|
306
|
+
target.select(); //? Для инпут-маск, почему-то нужно пропустить 2 эвентлупа
|
|
307
|
+
// setTimeout(() => {
|
|
308
|
+
// target.select();
|
|
309
|
+
// }, 0);
|
|
310
|
+
}, 0);
|
|
311
|
+
};
|
|
312
|
+
|
|
313
|
+
var doBlur = function doBlur(type, e) {
|
|
314
|
+
var executor = type === 'startDateInput' ? setIsStartFocused : setIsEndFocused;
|
|
315
|
+
e.target.blur();
|
|
316
|
+
executor(false);
|
|
317
|
+
};
|
|
318
|
+
|
|
319
|
+
var processOverflow = function processOverflow(newDateAsString, valueForRollback, key) {
|
|
320
|
+
var newDateAsMomentObj = (0, _momentTimezone.default)(newDateAsString, 'MM/DD/YYYY'); // console.log('processOverflow - newDateAsString - ', newDateAsString);
|
|
321
|
+
// console.log('processOverflow - valueForRollback - ', valueForRollback);
|
|
322
|
+
// console.log('----------');
|
|
323
|
+
// console.log('processOverflow - minDate - ', minDate);
|
|
324
|
+
// console.log('processOverflow - maxDate - ', maxDate);
|
|
325
|
+
// console.log('----------');
|
|
326
|
+
// console.log('processOverflow - momentMinDate - ', momentMinDate);
|
|
327
|
+
// console.log('processOverflow - momentMaxDate - ', momentMaxDate);
|
|
328
|
+
// console.log('----------');
|
|
329
|
+
// console.log('processOverflow - newDateAsMomentObj - ', newDateAsMomentObj);
|
|
330
|
+
// console.log('*********');
|
|
331
|
+
//? Если значение не валидно...
|
|
332
|
+
|
|
333
|
+
if (!newDateAsMomentObj.isValid()) {
|
|
334
|
+
//? ... то откатываем к дате до набора руками
|
|
335
|
+
return valueForRollback;
|
|
336
|
+
} else {
|
|
337
|
+
var beforeOfFuture = (0, _momentTimezone.default)().endOf('day');
|
|
338
|
+
var hour = key === 'startDateInput' ? startHour : endHour;
|
|
339
|
+
var output; //? Если есть минимальная дата и введенная меньше минимальной, то ставим минимальную
|
|
340
|
+
|
|
341
|
+
if (minDate && newDateAsMomentObj.isBefore(momentMinDate)) output = momentMinDate; //? Если есть максимальная дата и введенная больше максимальной, то ставим максимальную
|
|
342
|
+
else if (maxDate && newDateAsMomentObj.isAfter(momentMaxDate)) output = momentMaxDate; //? Если нет установки не ограничивать дату по будущему...
|
|
343
|
+
else if (!isDontLimitFuture && newDateAsMomentObj.isAfter(beforeOfFuture)) {
|
|
344
|
+
output = beforeOfFuture.startOf('day');
|
|
345
|
+
} else output = newDateAsMomentObj; // if (key === 'startDateInput') {
|
|
346
|
+
// console.log('endDate - ', endDate.format('YYYY-MM-DDTHH:mm'));
|
|
347
|
+
// console.log('endDate.subtract(1, d) - ', endDate.subtract(1, 'd').format('YYYY-MM-DDTHH:mm'));
|
|
348
|
+
// if (output.isAfter(endDate.subtract(1, 'd'))) output = endDate.subtract(1, 'd');
|
|
349
|
+
// }
|
|
350
|
+
|
|
351
|
+
if (key === 'endDateInput') {
|
|
352
|
+
// console.log('startDate - ', startDate.format('YYYY-MM-DDTHH:mm'));
|
|
353
|
+
// if (output.isBefore(startDate)) output = startDate.add(1, 'd');
|
|
354
|
+
output = addDay(output);
|
|
355
|
+
} // console.log('output - ', output.format('YYYY-MM-DDTHH:mm'));
|
|
356
|
+
// console.log('************');
|
|
357
|
+
|
|
358
|
+
|
|
359
|
+
return output.set('hour', parseInt(hour, 10));
|
|
360
|
+
}
|
|
361
|
+
};
|
|
362
|
+
|
|
363
|
+
var handleDateInputBlur = function handleDateInputBlur(key, e) {
|
|
364
|
+
var _e$target$value, _e$target2;
|
|
365
|
+
|
|
366
|
+
var reserveValue = key === 'startDateInput' ? startDateInput : endDateInput;
|
|
367
|
+
var valueForRollback = key === 'startDateInput' ? startDate : endDate;
|
|
368
|
+
var execute = key === 'startDateInput' ? setStartDate : setEndDate;
|
|
369
|
+
var executeForCalendar = key === 'startDateInput' ? setDate1 : setDate2;
|
|
370
|
+
|
|
371
|
+
var prepareValueForCalendar = function prepareValueForCalendar(newDate) {
|
|
372
|
+
if (key === 'endDateInput') return newDate;
|
|
373
|
+
return (0, _momentTimezone.default)(newDate).isSameOrAfter((0, _momentTimezone.default)(date2), 'month') ? (0, _momentTimezone.default)(date2).subtract(1, 'month') : (0, _momentTimezone.default)(newDate);
|
|
374
|
+
};
|
|
375
|
+
|
|
376
|
+
var newDateValue = (_e$target$value = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value) !== null && _e$target$value !== void 0 ? _e$target$value : reserveValue;
|
|
377
|
+
var processedNewDate = processOverflow(newDateValue, valueForRollback, key);
|
|
378
|
+
execute(processedNewDate);
|
|
379
|
+
executeForCalendar(prepareValueForCalendar(processedNewDate));
|
|
380
|
+
doBlur(key, e);
|
|
381
|
+
};
|
|
382
|
+
|
|
383
|
+
var handleKeyPressed = function handleKeyPressed(code, e, type) {
|
|
384
|
+
if (code === 13) handleDateInputBlur(type, e);
|
|
385
|
+
if (code === 27) doBlur(type, e);
|
|
386
|
+
}; // ********************
|
|
387
|
+
// Render Functions
|
|
388
|
+
// ********************
|
|
389
|
+
|
|
390
|
+
|
|
391
|
+
var getStartHourItems = function getStartHourItems() {
|
|
392
|
+
return (0, _toConsumableArray2.default)(Array(24).keys()).map(function (hour) {
|
|
393
|
+
return {
|
|
394
|
+
label: padTime(hour),
|
|
395
|
+
value: hour,
|
|
396
|
+
disabled: (0, _momentTimezone.default)(startDate).isSame(endDate, 'day') && endHour <= hour
|
|
397
|
+
};
|
|
398
|
+
});
|
|
399
|
+
};
|
|
400
|
+
|
|
401
|
+
var getEndHourItems = function getEndHourItems() {
|
|
402
|
+
return (0, _toConsumableArray2.default)(Array(24).keys()).map(function (hour) {
|
|
403
|
+
return {
|
|
404
|
+
label: padTime(hour + 1),
|
|
405
|
+
value: hour === 23 ? 0 : hour + 1,
|
|
406
|
+
disabled: ((0, _momentTimezone.default)(startDate).isSame(endDate, 'day') || (0, _momentTimezone.default)(startDate).isSame((0, _momentTimezone.default)(endDate).subtract(1, 'days'), 'day') && endHour === 0) && hour < startHour
|
|
407
|
+
};
|
|
408
|
+
});
|
|
307
409
|
};
|
|
308
410
|
|
|
309
411
|
var renderButtons = function renderButtons() {
|
|
@@ -335,97 +437,67 @@ var Datepicker = function Datepicker(props) {
|
|
|
335
437
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, txt.labels.previousPeriod, ": ", /*#__PURE__*/_react.default.createElement("span", {
|
|
336
438
|
className: "date-picker__previous-period-interval"
|
|
337
439
|
}, title));
|
|
338
|
-
};
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
var executor = type === 'start' ? setIsStartFocused : setIsEndFocused;
|
|
342
|
-
e.target.blur();
|
|
343
|
-
executor(false);
|
|
344
|
-
};
|
|
345
|
-
|
|
346
|
-
var handleStartDateFocus = function handleStartDateFocus(e) {
|
|
347
|
-
setIsStartFocused(true);
|
|
348
|
-
setStartDateInput((0, _momentTimezone.default)(startDate).format('L'));
|
|
349
|
-
setTimeout(function () {
|
|
350
|
-
return e.target.select();
|
|
351
|
-
}, 0);
|
|
352
|
-
};
|
|
440
|
+
}; // ********************
|
|
441
|
+
// useEffects
|
|
442
|
+
// ********************
|
|
353
443
|
|
|
354
|
-
var handleStartDateBlur = function handleStartDateBlur(e) {
|
|
355
|
-
var newDate;
|
|
356
444
|
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
var edge = maxDate ? momentMaxDate : (0, _momentTimezone.default)().add(1, 'day').startOf('day');
|
|
362
|
-
if ((0, _momentTimezone.default)(startDateInput).isAfter(edge)) newDate = edge;else newDate = (0, _momentTimezone.default)(startDateInput);
|
|
363
|
-
} else newDate = (0, _momentTimezone.default)(startDateInput);
|
|
445
|
+
(0, _react.useEffect)(function () {
|
|
446
|
+
if ((0, _momentTimezone.default)(startDate).isSameOrAfter(endDate)) {
|
|
447
|
+
setStartDate((0, _momentTimezone.default)(endDate).subtract(1, 'd'));
|
|
448
|
+
setDate1((0, _momentTimezone.default)(endDate).subtract(1, 'd'));
|
|
364
449
|
}
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
return e.target.select();
|
|
377
|
-
}, 0);
|
|
378
|
-
};
|
|
379
|
-
|
|
380
|
-
var handleEndDateBlur = function handleEndDateBlur(e) {
|
|
381
|
-
var newDate;
|
|
382
|
-
|
|
383
|
-
if (!(0, _momentTimezone.default)(endDateInput).isValid()) {
|
|
384
|
-
newDate = (0, _momentTimezone.default)(endDate);
|
|
385
|
-
} else {
|
|
386
|
-
if (minDate && (0, _momentTimezone.default)(endDateInput).isBefore(minDate)) newDate = momentMinDate;else if (!isDontLimitFuture) {
|
|
387
|
-
var edge = maxDate ? momentMaxDate : (0, _momentTimezone.default)().endOf('day');
|
|
388
|
-
if ((0, _momentTimezone.default)(endDateInput).isAfter(edge)) newDate = maxDate ? edge : edge.startOf('day');else newDate = (0, _momentTimezone.default)(startDateInput);
|
|
389
|
-
} else newDate = (0, _momentTimezone.default)(startDateInput);
|
|
450
|
+
}, [startDate]);
|
|
451
|
+
(0, _react.useEffect)(function () {
|
|
452
|
+
if ((0, _momentTimezone.default)(endDate).isSameOrBefore(startDate)) {
|
|
453
|
+
setEndDate((0, _momentTimezone.default)(startDate).add(1, 'd'));
|
|
454
|
+
setDate2((0, _momentTimezone.default)(startDate).add(1, 'd'));
|
|
455
|
+
}
|
|
456
|
+
}, [endDate]);
|
|
457
|
+
(0, _react.useEffect)(function () {
|
|
458
|
+
if ((0, _momentTimezone.default)(startDate).isBefore((0, _momentTimezone.default)(endDate), 'month')) {
|
|
459
|
+
setDate1((0, _momentTimezone.default)(startDate));
|
|
460
|
+
setDate2((0, _momentTimezone.default)(endDate));
|
|
390
461
|
}
|
|
391
462
|
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
};
|
|
402
|
-
|
|
403
|
-
var startDateValue = startDate ? (0, _momentTimezone.default)(startDate).format('ll') : '';
|
|
404
|
-
var endDateValue = endDate ? (0, _momentTimezone.default)(endDate).subtract(1, 'm').format('ll') : '';
|
|
463
|
+
setInterval();
|
|
464
|
+
}, [startDate, endDate]);
|
|
465
|
+
(0, _react.useEffect)(function () {
|
|
466
|
+
if ((0, _momentTimezone.default)(date1).isSameOrAfter((0, _momentTimezone.default)(date2), 'month')) {
|
|
467
|
+
setDate1((0, _momentTimezone.default)(date2).subtract(1, 'month'));
|
|
468
|
+
}
|
|
469
|
+
}, [date1, date2]);
|
|
470
|
+
(0, _react.useEffect)(function () {
|
|
471
|
+
onChangeInterval(dateInterval);
|
|
472
|
+
}, [dateInterval]);
|
|
405
473
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
406
474
|
className: (0, _classnames.default)('date-picker', className)
|
|
407
475
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
408
476
|
className: "date-picker__header"
|
|
409
477
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
410
478
|
className: "date-picker__inputs-block"
|
|
411
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
},
|
|
420
|
-
onFocus: handleStartDateFocus,
|
|
479
|
+
}, /*#__PURE__*/_react.default.createElement(_DateInput.default, {
|
|
480
|
+
ref: startDateInputRef,
|
|
481
|
+
testId: "datepicker-".concat(testId, "_start-date-input"),
|
|
482
|
+
RC: "date-picker__date-input",
|
|
483
|
+
className: (0, _classnames.default)('date-picker__date-input'),
|
|
484
|
+
isFocused: isStartFocused,
|
|
485
|
+
value: startDateInput,
|
|
486
|
+
date: getCorrectedDateForDateInput('startDateInput', startDate),
|
|
421
487
|
disabled: !startDate,
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
return
|
|
488
|
+
onChange: setStartDateInput,
|
|
489
|
+
onFocus: function onFocus(e) {
|
|
490
|
+
return handleDateInputFocus('startDateInput', e);
|
|
491
|
+
},
|
|
492
|
+
onBlur: function onBlur(e) {
|
|
493
|
+
return handleDateInputBlur('startDateInput', e);
|
|
425
494
|
},
|
|
426
|
-
|
|
427
|
-
|
|
495
|
+
onKeyUp: function onKeyUp(code, e) {
|
|
496
|
+
return handleKeyPressed(code, e, 'startDateInput');
|
|
497
|
+
}
|
|
498
|
+
}), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
428
499
|
testId: testId,
|
|
500
|
+
id: "datepicker-id-".concat(mainId, "_start-hour-select-input"),
|
|
429
501
|
dataTest: "datepicker_start-hour-select-input",
|
|
430
502
|
className: (0, _classnames.default)('date-picker__hour-select-input'),
|
|
431
503
|
onChange: function onChange(value) {
|
|
@@ -434,27 +506,32 @@ var Datepicker = function Datepicker(props) {
|
|
|
434
506
|
value: startHour,
|
|
435
507
|
options: getStartHourItems(),
|
|
436
508
|
disabled: !startDate,
|
|
509
|
+
isDoNotPullOutListOfMainContainer: true,
|
|
437
510
|
short: true
|
|
438
511
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
439
512
|
className: "date-picker__inputs-separator date-picker__header--gray"
|
|
440
|
-
}, "\u2014"), /*#__PURE__*/_react.default.createElement(
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
513
|
+
}, "\u2014"), /*#__PURE__*/_react.default.createElement(_DateInput.default, {
|
|
514
|
+
ref: endDateInputRef,
|
|
515
|
+
testId: "datepicker-".concat(testId, "_start-date-input"),
|
|
516
|
+
RC: "date-picker__date-input",
|
|
517
|
+
className: (0, _classnames.default)('date-picker__date-input'),
|
|
518
|
+
isFocused: isEndFocused,
|
|
519
|
+
value: endDateInput,
|
|
520
|
+
date: getCorrectedDateForDateInput('endDateInput', endDate),
|
|
446
521
|
disabled: !endDate,
|
|
447
|
-
onChange:
|
|
448
|
-
|
|
522
|
+
onChange: setEndDateInput,
|
|
523
|
+
onFocus: function onFocus(e) {
|
|
524
|
+
return handleDateInputFocus('endDateInput', e);
|
|
449
525
|
},
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
onKeyUp: function onKeyUp(code, e) {
|
|
453
|
-
return handleKeyPressed(code, e, 'end');
|
|
526
|
+
onBlur: function onBlur(e) {
|
|
527
|
+
return handleDateInputBlur('endDateInput', e);
|
|
454
528
|
},
|
|
455
|
-
|
|
456
|
-
|
|
529
|
+
onKeyUp: function onKeyUp(code, e) {
|
|
530
|
+
return handleKeyPressed(code, e, 'endDateInput');
|
|
531
|
+
}
|
|
532
|
+
}), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
457
533
|
testId: testId,
|
|
534
|
+
id: "datepicker-id-".concat(mainId, "_end-hour-select-input"),
|
|
458
535
|
dataTest: "datepicker_end-hour-select-input",
|
|
459
536
|
className: (0, _classnames.default)('date-picker__hour-select-input'),
|
|
460
537
|
onChange: function onChange(value) {
|
|
@@ -463,6 +540,7 @@ var Datepicker = function Datepicker(props) {
|
|
|
463
540
|
value: endHour,
|
|
464
541
|
options: getEndHourItems(),
|
|
465
542
|
disabled: !endDate,
|
|
543
|
+
isDoNotPullOutListOfMainContainer: true,
|
|
466
544
|
short: true
|
|
467
545
|
})), isCompare && !isCompareHidden && startDate && endDate && /*#__PURE__*/_react.default.createElement("div", {
|
|
468
546
|
className: "date-picker__previous-period"
|
|
@@ -39,7 +39,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
39
39
|
|
|
40
40
|
var classNames = require('classnames');
|
|
41
41
|
|
|
42
|
-
var OpenedPart =
|
|
42
|
+
var OpenedPart = function OpenedPart(props, ref) {
|
|
43
43
|
var txt = props.txt,
|
|
44
44
|
buttonsTypes = props.buttonsTypes,
|
|
45
45
|
actualValues = props.actualValues,
|
|
@@ -63,11 +63,11 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
63
63
|
isShortWeekNames = props.isShortWeekNames,
|
|
64
64
|
minDate = props.minDate,
|
|
65
65
|
maxDate = props.maxDate,
|
|
66
|
-
format = props.format,
|
|
67
66
|
momentMinDate = props.momentMinDate,
|
|
68
67
|
momentMaxDate = props.momentMaxDate,
|
|
69
68
|
isDontLimitFuture = props.isDontLimitFuture,
|
|
70
69
|
isListTop = props.isListTop,
|
|
70
|
+
mainId = props.mainId,
|
|
71
71
|
testId = props.testId;
|
|
72
72
|
|
|
73
73
|
var boxRef = (0, _react.useRef)();
|
|
@@ -150,6 +150,7 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
150
150
|
disabled: item === _dependencies.CUSTOM_INTERVAL_KEY || minDate && ((_intervals$item3 = _dependencies.INTERVALS[item]) === null || _intervals$item3 === void 0 ? void 0 : (_intervals$item3$star = _intervals$item3.start) === null || _intervals$item3$star === void 0 ? void 0 : (_intervals$item3$star2 = _intervals$item3$star.call(_intervals$item3)) === null || _intervals$item3$star2 === void 0 ? void 0 : (_intervals$item3$star3 = _intervals$item3$star2.isBefore) === null || _intervals$item3$star3 === void 0 ? void 0 : _intervals$item3$star3.call(_intervals$item3$star2, momentMinDate))
|
|
151
151
|
});
|
|
152
152
|
})), !isCompact && /*#__PURE__*/_react.default.createElement(_Datepicker.default, {
|
|
153
|
+
mainId: mainId,
|
|
153
154
|
testId: testId,
|
|
154
155
|
className: (0, _classnames.default)('opened-part__date-picker'),
|
|
155
156
|
buttonsTypes: buttonsTypes,
|
|
@@ -175,12 +176,12 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
175
176
|
isShortWeekNames: isShortWeekNames,
|
|
176
177
|
minDate: minDate,
|
|
177
178
|
maxDate: maxDate,
|
|
178
|
-
format: format,
|
|
179
179
|
momentMinDate: momentMinDate,
|
|
180
180
|
momentMaxDate: momentMaxDate,
|
|
181
181
|
isDontLimitFuture: isDontLimitFuture
|
|
182
182
|
})));
|
|
183
|
-
}
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
var _default = /*#__PURE__*/_react.default.forwardRef(OpenedPart);
|
|
184
186
|
|
|
185
|
-
var _default = OpenedPart;
|
|
186
187
|
exports.default = _default;
|
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.getActualDateRange = exports.CUSTOM_INTERVAL_KEY_TEXT = exports.CUSTOM_INTERVAL_KEY = exports.ALL_TIME_KEY = exports.INTERVALS = exports.useToggle = exports.useClickOutside = void 0;
|
|
10
|
+
exports.getActualDateRange = exports.CUSTOM_INTERVAL_KEY_TEXT = exports.CUSTOM_INTERVAL_KEY = exports.ALL_TIME_KEY = exports.INTERVALS = exports.useToggle = exports.useClickOutside = exports.getIsDateValid = void 0;
|
|
11
11
|
|
|
12
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
13
|
|
|
@@ -27,6 +27,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
27
27
|
|
|
28
28
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
29
29
|
|
|
30
|
+
var getIsDateValid = function getIsDateValid(date) {
|
|
31
|
+
return (0, _momentTimezone.default)(date).isValid();
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
exports.getIsDateValid = getIsDateValid;
|
|
35
|
+
|
|
30
36
|
var useClickOutside = function useClickOutside(hideComponent, additionalComponent) {
|
|
31
37
|
var ref = (0, _react.useRef)(null);
|
|
32
38
|
|
|
@@ -95,7 +95,7 @@ var RangeCalendar = function RangeCalendar(props) {
|
|
|
95
95
|
var classNames = (0, _classnames.default)('range-calendar__day', {
|
|
96
96
|
'range-calendar__day--clickable': day
|
|
97
97
|
}, {
|
|
98
|
-
'range-calendar__day--disabled': isPastDay || minDate && (0, _momentTimezone.default)(day === null || day === void 0 ? void 0 : day.date).isBefore(
|
|
98
|
+
'range-calendar__day--disabled': isPastDay || minDate && (0, _momentTimezone.default)(day === null || day === void 0 ? void 0 : day.date).isBefore(momentMinDate, 'day') || !isDontLimitFuture && (maxDate ? (0, _momentTimezone.default)(day === null || day === void 0 ? void 0 : day.date).isAfter(momentMaxDate) : isFutureDay)
|
|
99
99
|
}, {
|
|
100
100
|
'range-calendar__day--range-start': isRangeStart
|
|
101
101
|
}, {
|