@alfalab/core-components-date-range-input 2.2.1 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{Component-070df1af.d.ts → Component-fd7fd8ef.d.ts} +0 -0
- package/{Component-070df1af.js → Component-fd7fd8ef.js} +42 -29
- package/Component.desktop.d.ts +1 -1
- package/Component.desktop.js +2 -1
- package/Component.mobile.d.ts +1 -1
- package/Component.mobile.js +2 -1
- package/Component.responsive.d.ts +1 -1
- package/Component.responsive.js +1 -1
- package/components/date-range-input/Component.js +2 -1
- package/components/date-range-input/index.css +8 -8
- package/components/date-range-input/index.d.ts +1 -1
- package/components/date-range-input/index.js +2 -1
- package/cssm/{Component-a4cfbf46.d.ts → Component-540e1474.d.ts} +0 -0
- package/cssm/{Component-a4cfbf46.js → Component-540e1474.js} +41 -28
- package/cssm/Component.desktop.d.ts +1 -1
- package/cssm/Component.desktop.js +2 -1
- package/cssm/Component.mobile.d.ts +1 -1
- package/cssm/Component.mobile.js +2 -1
- package/cssm/Component.responsive.d.ts +1 -1
- package/cssm/Component.responsive.js +1 -1
- package/cssm/components/date-range-input/Component.js +2 -1
- package/cssm/components/date-range-input/index.d.ts +1 -1
- package/cssm/components/date-range-input/index.js +2 -1
- package/cssm/components/date-range-input/index.module.css +2 -2
- package/cssm/desktop.js +2 -1
- package/cssm/index.js +2 -2
- package/cssm/mobile.js +2 -1
- package/cssm/responsive.js +2 -2
- package/desktop.js +2 -1
- package/esm/{Component-3d173527.d.ts → Component-550f221e.d.ts} +0 -0
- package/esm/{Component-3d173527.js → Component-550f221e.js} +42 -29
- package/esm/Component.desktop.d.ts +1 -1
- package/esm/Component.desktop.js +2 -1
- package/esm/Component.mobile.d.ts +1 -1
- package/esm/Component.mobile.js +2 -1
- package/esm/Component.responsive.d.ts +1 -1
- package/esm/Component.responsive.js +1 -1
- package/esm/components/date-range-input/Component.js +2 -1
- package/esm/components/date-range-input/index.css +8 -8
- package/esm/components/date-range-input/index.d.ts +1 -1
- package/esm/components/date-range-input/index.js +2 -1
- package/esm/desktop.js +2 -1
- package/esm/index.js +2 -2
- package/esm/mobile.js +2 -1
- package/esm/responsive.js +2 -2
- package/index.js +2 -2
- package/mobile.js +2 -1
- package/modern/Component.desktop.js +1 -0
- package/modern/Component.mobile.js +1 -0
- package/modern/components/date-range-input/Component.js +42 -29
- package/modern/components/date-range-input/index.css +8 -8
- package/modern/components/date-range-input/index.js +1 -0
- package/modern/desktop.js +1 -0
- package/modern/mobile.js +1 -0
- package/package.json +4 -3
- package/responsive.js +2 -2
|
File without changes
|
|
@@ -8,6 +8,7 @@ var coreComponentsCalendar = require('@alfalab/core-components-calendar');
|
|
|
8
8
|
var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
|
|
9
9
|
var coreComponentsInput = require('@alfalab/core-components-input');
|
|
10
10
|
var coreComponentsPopover = require('@alfalab/core-components-popover');
|
|
11
|
+
var hooks = require('@alfalab/hooks');
|
|
11
12
|
var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
|
|
12
13
|
var utils_format = require('./utils/format.js');
|
|
13
14
|
|
|
@@ -57,7 +58,7 @@ function __rest(s, e) {
|
|
|
57
58
|
return t;
|
|
58
59
|
}
|
|
59
60
|
|
|
60
|
-
var styles = {"component":"date-range-
|
|
61
|
+
var styles = {"component":"date-range-input__component_a0llm","calendarContainer":"date-range-input__calendarContainer_a0llm","calendarResponsive":"date-range-input__calendarResponsive_a0llm","block":"date-range-input__block_a0llm"};
|
|
61
62
|
require('./components/date-range-input/index.css')
|
|
62
63
|
|
|
63
64
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
|
@@ -74,6 +75,10 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
74
75
|
React.useEffect(function () {
|
|
75
76
|
setOpen(defaultOpen);
|
|
76
77
|
}, [defaultOpen]);
|
|
78
|
+
hooks.useDidUpdateEffect(function () {
|
|
79
|
+
var newPropValue = propValue || '';
|
|
80
|
+
setValue(function (prevValue) { return (prevValue === newPropValue ? prevValue : newPropValue); });
|
|
81
|
+
}, [propValue]);
|
|
77
82
|
var handlePeriodChange = function (selectedFrom, selectedTo) {
|
|
78
83
|
if (selectedFrom && !selectedTo && value.length === utils_format.DATE_MASK.length) {
|
|
79
84
|
setValue(utils_format.parseTimestampToDate(selectedFrom));
|
|
@@ -82,24 +87,30 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
82
87
|
(selectedFrom === selectedTo && value.length === utils_format.DATE_MASK.length)) {
|
|
83
88
|
setValue('');
|
|
84
89
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
90
|
+
var dateFrom = selectedFrom ? new Date(selectedFrom) : undefined;
|
|
91
|
+
var dateTo = selectedTo ? new Date(selectedTo) : undefined;
|
|
92
|
+
var newValue = [selectedFrom, selectedTo].filter(Boolean)
|
|
93
|
+
.map(function (timestamp) { return utils_format.parseTimestampToDate(timestamp); })
|
|
94
|
+
.join(' - ');
|
|
95
|
+
onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
96
|
+
dateFrom: dateFrom,
|
|
97
|
+
dateTo: dateTo,
|
|
98
|
+
value: newValue,
|
|
99
|
+
});
|
|
100
|
+
if (dateFrom && dateTo) {
|
|
101
|
+
onComplete === null || onComplete === void 0 ? void 0 : onComplete({
|
|
102
|
+
dateFrom: dateFrom,
|
|
103
|
+
dateTo: dateTo,
|
|
104
|
+
value: newValue,
|
|
97
105
|
});
|
|
98
106
|
}
|
|
99
107
|
};
|
|
100
108
|
var _s = coreComponentsCalendar.usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _s.selectedFrom, selectedTo = _s.selectedTo, updatePeriod = _s.updatePeriod, resetPeriod = _s.resetPeriod, setStart = _s.setStart, setEnd = _s.setEnd;
|
|
101
109
|
var handleInputWrapperFocus = function (event) {
|
|
102
110
|
if (view === 'desktop') {
|
|
111
|
+
if (picker) {
|
|
112
|
+
setOpen(true);
|
|
113
|
+
}
|
|
103
114
|
if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
|
|
104
115
|
calendarRef.current.focus();
|
|
105
116
|
}
|
|
@@ -119,7 +130,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
119
130
|
if (newValue.length > utils_format.DATE_MASK.length)
|
|
120
131
|
return;
|
|
121
132
|
// Позволяем вводить только цифры, точки, дефис и пробелы
|
|
122
|
-
if (/[^\d.
|
|
133
|
+
if (/[^\d. -]/.test(newValue)) {
|
|
123
134
|
return;
|
|
124
135
|
}
|
|
125
136
|
var dots = newValue.match(/\./g);
|
|
@@ -130,33 +141,37 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
130
141
|
}
|
|
131
142
|
var formattedValue = utils_format.format(newValue);
|
|
132
143
|
var dateArr = formattedValue.split(' - ');
|
|
133
|
-
var dateFrom = utils_format.parseDateString(dateArr[0]);
|
|
134
|
-
var dateTo = utils_format.parseDateString(dateArr[1]);
|
|
135
|
-
if (
|
|
144
|
+
var dateFrom = dateArr[0] ? utils_format.parseDateString(dateArr[0]) : undefined;
|
|
145
|
+
var dateTo = dateArr[1] ? utils_format.parseDateString(dateArr[1]) : undefined;
|
|
146
|
+
if (!dateFrom && !dateTo) {
|
|
147
|
+
resetPeriod();
|
|
148
|
+
}
|
|
149
|
+
else if (selectedFrom && formattedValue.length < utils_format.DATE_FORMAT.length) {
|
|
136
150
|
setStart();
|
|
137
151
|
}
|
|
138
152
|
else if (selectedFrom && selectedTo) {
|
|
139
153
|
setEnd();
|
|
140
154
|
}
|
|
141
|
-
else if (
|
|
155
|
+
else if (dateFrom &&
|
|
156
|
+
dateFnsIsValid__default.default(dateFrom) &&
|
|
142
157
|
((_a = dateArr[0]) === null || _a === void 0 ? void 0 : _a.length) === utils_format.DATE_FORMAT.length &&
|
|
143
158
|
dateFrom.getTime() !== selectedFrom) {
|
|
144
159
|
setStart(dateFrom.getTime());
|
|
145
160
|
}
|
|
146
|
-
else if (
|
|
161
|
+
else if (dateTo &&
|
|
162
|
+
dateFnsIsValid__default.default(dateTo) &&
|
|
147
163
|
((_b = dateArr[1]) === null || _b === void 0 ? void 0 : _b.length) === utils_format.DATE_FORMAT.length &&
|
|
148
164
|
dateTo.getTime() !== selectedTo) {
|
|
149
165
|
setEnd(dateTo.getTime());
|
|
150
166
|
}
|
|
151
167
|
setValue(formattedValue);
|
|
152
|
-
|
|
153
|
-
onChange({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
|
|
168
|
+
onChange === null || onChange === void 0 ? void 0 : onChange({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
|
|
154
169
|
if (utils_format.isCompleteDateInput(formattedValue)) {
|
|
155
170
|
var valid = utils_format.isValid(formattedValue, dateArr[0], dateArr[1]);
|
|
156
171
|
if (!valid)
|
|
157
172
|
return;
|
|
158
|
-
if (
|
|
159
|
-
onComplete({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
|
|
173
|
+
if (dateFrom && dateTo) {
|
|
174
|
+
onComplete === null || onComplete === void 0 ? void 0 : onComplete({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
|
|
160
175
|
}
|
|
161
176
|
}
|
|
162
177
|
};
|
|
@@ -184,14 +199,12 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
184
199
|
// Не дает инпуту терять фокус при выборе даты
|
|
185
200
|
event.preventDefault();
|
|
186
201
|
};
|
|
187
|
-
var handleInputWrapperClick = function () {
|
|
188
|
-
if (view === 'desktop' && !open) {
|
|
189
|
-
setOpen(true);
|
|
190
|
-
}
|
|
191
|
-
};
|
|
192
202
|
var handleIconButtonClick = function () {
|
|
193
203
|
if (!open)
|
|
194
204
|
setOpen(true);
|
|
205
|
+
if (view === 'desktop' && inputRef.current) {
|
|
206
|
+
inputRef.current.focus();
|
|
207
|
+
}
|
|
195
208
|
};
|
|
196
209
|
var renderCalendar = function () { return (
|
|
197
210
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
@@ -199,7 +212,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
199
212
|
React__default.default.createElement(Calendar, exports.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
|
|
200
213
|
return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className, (_b = {},
|
|
201
214
|
_b[styles.block] = block,
|
|
202
|
-
_b)),
|
|
215
|
+
_b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
|
|
203
216
|
React__default.default.createElement(coreComponentsInput.Input, exports.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
|
|
204
217
|
rightAddons,
|
|
205
218
|
picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
|
package/Component.desktop.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DateRangeInputProps } from "./Component-
|
|
2
|
+
import { DateRangeInputProps } from "./Component-fd7fd8ef";
|
|
3
3
|
type DateRangeInputDesktopProps = Omit<DateRangeInputProps, 'view'>;
|
|
4
4
|
declare const DateRangeInputDesktop: FC<DateRangeInputDesktopProps>;
|
|
5
5
|
export { DateRangeInputDesktopProps, DateRangeInputDesktop };
|
package/Component.desktop.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateRangeInput_Component = require('./Component-
|
|
3
|
+
var components_dateRangeInput_Component = require('./Component-fd7fd8ef.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -9,6 +9,7 @@ require('@alfalab/core-components-calendar');
|
|
|
9
9
|
require('@alfalab/core-components-icon-button');
|
|
10
10
|
require('@alfalab/core-components-input');
|
|
11
11
|
require('@alfalab/core-components-popover');
|
|
12
|
+
require('@alfalab/hooks');
|
|
12
13
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
13
14
|
require('./utils/format.js');
|
|
14
15
|
require('date-fns/parse');
|
package/Component.mobile.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DateRangeInputProps } from "./Component-
|
|
2
|
+
import { DateRangeInputProps } from "./Component-fd7fd8ef";
|
|
3
3
|
type DateRangeInputMobileProps = Omit<DateRangeInputProps, 'view'>;
|
|
4
4
|
declare const DateRangeInputMobile: FC<DateRangeInputMobileProps>;
|
|
5
5
|
export { DateRangeInputMobileProps, DateRangeInputMobile };
|
package/Component.mobile.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateRangeInput_Component = require('./Component-
|
|
3
|
+
var components_dateRangeInput_Component = require('./Component-fd7fd8ef.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var coreComponentsCalendar = require('@alfalab/core-components-calendar');
|
|
6
6
|
require('react-merge-refs');
|
|
@@ -9,6 +9,7 @@ require('date-fns/isValid');
|
|
|
9
9
|
require('@alfalab/core-components-icon-button');
|
|
10
10
|
require('@alfalab/core-components-input');
|
|
11
11
|
require('@alfalab/core-components-popover');
|
|
12
|
+
require('@alfalab/hooks');
|
|
12
13
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
13
14
|
require('./utils/format.js');
|
|
14
15
|
require('date-fns/parse');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DateRangeInputProps } from "./Component-
|
|
2
|
+
import { DateRangeInputProps } from "./Component-fd7fd8ef";
|
|
3
3
|
type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view'> & {
|
|
4
4
|
/**
|
|
5
5
|
* Контрольная точка, с нее начинается desktop версия
|
package/Component.responsive.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateRangeInput_Component = require('./Component-
|
|
3
|
+
var components_dateRangeInput_Component = require('./Component-fd7fd8ef.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var hooks = require('@alfalab/hooks');
|
|
6
6
|
var Component_desktop = require('./Component.desktop.js');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateRangeInput_Component = require('../../Component-
|
|
3
|
+
var components_dateRangeInput_Component = require('../../Component-fd7fd8ef.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -9,6 +9,7 @@ require('@alfalab/core-components-calendar');
|
|
|
9
9
|
require('@alfalab/core-components-icon-button');
|
|
10
10
|
require('@alfalab/core-components-input');
|
|
11
11
|
require('@alfalab/core-components-popover');
|
|
12
|
+
require('@alfalab/hooks');
|
|
12
13
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
13
14
|
require('../../utils/format.js');
|
|
14
15
|
require('date-fns/parse');
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: lj7cp */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
/* Hard */
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
--gap-m: 16px;
|
|
12
12
|
}
|
|
13
13
|
:root {
|
|
14
|
-
--border-radius-
|
|
14
|
+
--border-radius-m: 8px;
|
|
15
15
|
}
|
|
16
16
|
:root {
|
|
17
17
|
--calendar-width: 344px;
|
|
@@ -37,28 +37,28 @@
|
|
|
37
37
|
/* marker */
|
|
38
38
|
}
|
|
39
39
|
:root {
|
|
40
|
-
--calendar-popover-border-radius:
|
|
40
|
+
--calendar-popover-border-radius: var(--border-radius-m);
|
|
41
41
|
}
|
|
42
|
-
.date-range-
|
|
42
|
+
.date-range-input__component_a0llm {
|
|
43
43
|
display: inline-block;
|
|
44
44
|
outline: none;
|
|
45
45
|
position: relative;
|
|
46
46
|
}
|
|
47
|
-
.date-range-
|
|
47
|
+
.date-range-input__calendarContainer_a0llm {
|
|
48
48
|
display: inline-block;
|
|
49
49
|
box-sizing: border-box;
|
|
50
50
|
border-radius: var(--calendar-popover-border-radius)
|
|
51
51
|
}
|
|
52
52
|
@media (max-width: 374px) {
|
|
53
|
-
.date-range-
|
|
53
|
+
.date-range-input__calendarContainer_a0llm {
|
|
54
54
|
width: 100%;
|
|
55
55
|
min-width: 288px
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
.date-range-
|
|
58
|
+
.date-range-input__calendarResponsive_a0llm {
|
|
59
59
|
width: var(--calendar-width);
|
|
60
60
|
padding: 0 var(--gap-m);
|
|
61
61
|
}
|
|
62
|
-
.date-range-
|
|
62
|
+
.date-range-input__block_a0llm {
|
|
63
63
|
width: 100%;
|
|
64
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "../../Component-
|
|
1
|
+
export * from "../../Component-fd7fd8ef";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateRangeInput_Component = require('../../Component-
|
|
3
|
+
var components_dateRangeInput_Component = require('../../Component-fd7fd8ef.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -9,6 +9,7 @@ require('@alfalab/core-components-calendar');
|
|
|
9
9
|
require('@alfalab/core-components-icon-button');
|
|
10
10
|
require('@alfalab/core-components-input');
|
|
11
11
|
require('@alfalab/core-components-popover');
|
|
12
|
+
require('@alfalab/hooks');
|
|
12
13
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
13
14
|
require('../../utils/format.js');
|
|
14
15
|
require('date-fns/parse');
|
|
File without changes
|
|
@@ -8,6 +8,7 @@ var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
|
|
|
8
8
|
var coreComponentsIconButton = require('@alfalab/core-components-icon-button/cssm');
|
|
9
9
|
var coreComponentsInput = require('@alfalab/core-components-input/cssm');
|
|
10
10
|
var coreComponentsPopover = require('@alfalab/core-components-popover/cssm');
|
|
11
|
+
var hooks = require('@alfalab/hooks');
|
|
11
12
|
var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
|
|
12
13
|
var utils_format = require('./utils/format.js');
|
|
13
14
|
var styles = require('./components/date-range-input/index.module.css');
|
|
@@ -73,6 +74,10 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
73
74
|
React.useEffect(function () {
|
|
74
75
|
setOpen(defaultOpen);
|
|
75
76
|
}, [defaultOpen]);
|
|
77
|
+
hooks.useDidUpdateEffect(function () {
|
|
78
|
+
var newPropValue = propValue || '';
|
|
79
|
+
setValue(function (prevValue) { return (prevValue === newPropValue ? prevValue : newPropValue); });
|
|
80
|
+
}, [propValue]);
|
|
76
81
|
var handlePeriodChange = function (selectedFrom, selectedTo) {
|
|
77
82
|
if (selectedFrom && !selectedTo && value.length === utils_format.DATE_MASK.length) {
|
|
78
83
|
setValue(utils_format.parseTimestampToDate(selectedFrom));
|
|
@@ -81,24 +86,30 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
81
86
|
(selectedFrom === selectedTo && value.length === utils_format.DATE_MASK.length)) {
|
|
82
87
|
setValue('');
|
|
83
88
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
89
|
+
var dateFrom = selectedFrom ? new Date(selectedFrom) : undefined;
|
|
90
|
+
var dateTo = selectedTo ? new Date(selectedTo) : undefined;
|
|
91
|
+
var newValue = [selectedFrom, selectedTo].filter(Boolean)
|
|
92
|
+
.map(function (timestamp) { return utils_format.parseTimestampToDate(timestamp); })
|
|
93
|
+
.join(' - ');
|
|
94
|
+
onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
95
|
+
dateFrom: dateFrom,
|
|
96
|
+
dateTo: dateTo,
|
|
97
|
+
value: newValue,
|
|
98
|
+
});
|
|
99
|
+
if (dateFrom && dateTo) {
|
|
100
|
+
onComplete === null || onComplete === void 0 ? void 0 : onComplete({
|
|
101
|
+
dateFrom: dateFrom,
|
|
102
|
+
dateTo: dateTo,
|
|
103
|
+
value: newValue,
|
|
96
104
|
});
|
|
97
105
|
}
|
|
98
106
|
};
|
|
99
107
|
var _s = coreComponentsCalendar.usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _s.selectedFrom, selectedTo = _s.selectedTo, updatePeriod = _s.updatePeriod, resetPeriod = _s.resetPeriod, setStart = _s.setStart, setEnd = _s.setEnd;
|
|
100
108
|
var handleInputWrapperFocus = function (event) {
|
|
101
109
|
if (view === 'desktop') {
|
|
110
|
+
if (picker) {
|
|
111
|
+
setOpen(true);
|
|
112
|
+
}
|
|
102
113
|
if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
|
|
103
114
|
calendarRef.current.focus();
|
|
104
115
|
}
|
|
@@ -118,7 +129,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
118
129
|
if (newValue.length > utils_format.DATE_MASK.length)
|
|
119
130
|
return;
|
|
120
131
|
// Позволяем вводить только цифры, точки, дефис и пробелы
|
|
121
|
-
if (/[^\d.
|
|
132
|
+
if (/[^\d. -]/.test(newValue)) {
|
|
122
133
|
return;
|
|
123
134
|
}
|
|
124
135
|
var dots = newValue.match(/\./g);
|
|
@@ -129,33 +140,37 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
129
140
|
}
|
|
130
141
|
var formattedValue = utils_format.format(newValue);
|
|
131
142
|
var dateArr = formattedValue.split(' - ');
|
|
132
|
-
var dateFrom = utils_format.parseDateString(dateArr[0]);
|
|
133
|
-
var dateTo = utils_format.parseDateString(dateArr[1]);
|
|
134
|
-
if (
|
|
143
|
+
var dateFrom = dateArr[0] ? utils_format.parseDateString(dateArr[0]) : undefined;
|
|
144
|
+
var dateTo = dateArr[1] ? utils_format.parseDateString(dateArr[1]) : undefined;
|
|
145
|
+
if (!dateFrom && !dateTo) {
|
|
146
|
+
resetPeriod();
|
|
147
|
+
}
|
|
148
|
+
else if (selectedFrom && formattedValue.length < utils_format.DATE_FORMAT.length) {
|
|
135
149
|
setStart();
|
|
136
150
|
}
|
|
137
151
|
else if (selectedFrom && selectedTo) {
|
|
138
152
|
setEnd();
|
|
139
153
|
}
|
|
140
|
-
else if (
|
|
154
|
+
else if (dateFrom &&
|
|
155
|
+
dateFnsIsValid__default.default(dateFrom) &&
|
|
141
156
|
((_a = dateArr[0]) === null || _a === void 0 ? void 0 : _a.length) === utils_format.DATE_FORMAT.length &&
|
|
142
157
|
dateFrom.getTime() !== selectedFrom) {
|
|
143
158
|
setStart(dateFrom.getTime());
|
|
144
159
|
}
|
|
145
|
-
else if (
|
|
160
|
+
else if (dateTo &&
|
|
161
|
+
dateFnsIsValid__default.default(dateTo) &&
|
|
146
162
|
((_b = dateArr[1]) === null || _b === void 0 ? void 0 : _b.length) === utils_format.DATE_FORMAT.length &&
|
|
147
163
|
dateTo.getTime() !== selectedTo) {
|
|
148
164
|
setEnd(dateTo.getTime());
|
|
149
165
|
}
|
|
150
166
|
setValue(formattedValue);
|
|
151
|
-
|
|
152
|
-
onChange({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
|
|
167
|
+
onChange === null || onChange === void 0 ? void 0 : onChange({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
|
|
153
168
|
if (utils_format.isCompleteDateInput(formattedValue)) {
|
|
154
169
|
var valid = utils_format.isValid(formattedValue, dateArr[0], dateArr[1]);
|
|
155
170
|
if (!valid)
|
|
156
171
|
return;
|
|
157
|
-
if (
|
|
158
|
-
onComplete({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
|
|
172
|
+
if (dateFrom && dateTo) {
|
|
173
|
+
onComplete === null || onComplete === void 0 ? void 0 : onComplete({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
|
|
159
174
|
}
|
|
160
175
|
}
|
|
161
176
|
};
|
|
@@ -183,14 +198,12 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
183
198
|
// Не дает инпуту терять фокус при выборе даты
|
|
184
199
|
event.preventDefault();
|
|
185
200
|
};
|
|
186
|
-
var handleInputWrapperClick = function () {
|
|
187
|
-
if (view === 'desktop' && !open) {
|
|
188
|
-
setOpen(true);
|
|
189
|
-
}
|
|
190
|
-
};
|
|
191
201
|
var handleIconButtonClick = function () {
|
|
192
202
|
if (!open)
|
|
193
203
|
setOpen(true);
|
|
204
|
+
if (view === 'desktop' && inputRef.current) {
|
|
205
|
+
inputRef.current.focus();
|
|
206
|
+
}
|
|
194
207
|
};
|
|
195
208
|
var renderCalendar = function () { return (
|
|
196
209
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
@@ -198,7 +211,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
198
211
|
React__default.default.createElement(Calendar, exports.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
|
|
199
212
|
return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {},
|
|
200
213
|
_b[styles__default.default.block] = block,
|
|
201
|
-
_b)),
|
|
214
|
+
_b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
|
|
202
215
|
React__default.default.createElement(coreComponentsInput.Input, exports.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
|
|
203
216
|
rightAddons,
|
|
204
217
|
picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DateRangeInputProps } from "./Component-
|
|
2
|
+
import { DateRangeInputProps } from "./Component-540e1474";
|
|
3
3
|
type DateRangeInputDesktopProps = Omit<DateRangeInputProps, 'view'>;
|
|
4
4
|
declare const DateRangeInputDesktop: FC<DateRangeInputDesktopProps>;
|
|
5
5
|
export { DateRangeInputDesktopProps, DateRangeInputDesktop };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateRangeInput_Component = require('./Component-
|
|
3
|
+
var components_dateRangeInput_Component = require('./Component-540e1474.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -9,6 +9,7 @@ require('@alfalab/core-components-calendar/cssm');
|
|
|
9
9
|
require('@alfalab/core-components-icon-button/cssm');
|
|
10
10
|
require('@alfalab/core-components-input/cssm');
|
|
11
11
|
require('@alfalab/core-components-popover/cssm');
|
|
12
|
+
require('@alfalab/hooks');
|
|
12
13
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
13
14
|
require('./utils/format.js');
|
|
14
15
|
require('date-fns/parse');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DateRangeInputProps } from "./Component-
|
|
2
|
+
import { DateRangeInputProps } from "./Component-540e1474";
|
|
3
3
|
type DateRangeInputMobileProps = Omit<DateRangeInputProps, 'view'>;
|
|
4
4
|
declare const DateRangeInputMobile: FC<DateRangeInputMobileProps>;
|
|
5
5
|
export { DateRangeInputMobileProps, DateRangeInputMobile };
|
package/cssm/Component.mobile.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateRangeInput_Component = require('./Component-
|
|
3
|
+
var components_dateRangeInput_Component = require('./Component-540e1474.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
|
|
6
6
|
require('react-merge-refs');
|
|
@@ -9,6 +9,7 @@ require('date-fns/isValid');
|
|
|
9
9
|
require('@alfalab/core-components-icon-button/cssm');
|
|
10
10
|
require('@alfalab/core-components-input/cssm');
|
|
11
11
|
require('@alfalab/core-components-popover/cssm');
|
|
12
|
+
require('@alfalab/hooks');
|
|
12
13
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
13
14
|
require('./utils/format.js');
|
|
14
15
|
require('date-fns/parse');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DateRangeInputProps } from "./Component-
|
|
2
|
+
import { DateRangeInputProps } from "./Component-540e1474";
|
|
3
3
|
type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view'> & {
|
|
4
4
|
/**
|
|
5
5
|
* Контрольная точка, с нее начинается desktop версия
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateRangeInput_Component = require('./Component-
|
|
3
|
+
var components_dateRangeInput_Component = require('./Component-540e1474.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var hooks = require('@alfalab/hooks');
|
|
6
6
|
var Component_desktop = require('./Component.desktop.js');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateRangeInput_Component = require('../../Component-
|
|
3
|
+
var components_dateRangeInput_Component = require('../../Component-540e1474.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -9,6 +9,7 @@ require('@alfalab/core-components-calendar/cssm');
|
|
|
9
9
|
require('@alfalab/core-components-icon-button/cssm');
|
|
10
10
|
require('@alfalab/core-components-input/cssm');
|
|
11
11
|
require('@alfalab/core-components-popover/cssm');
|
|
12
|
+
require('@alfalab/hooks');
|
|
12
13
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
13
14
|
require('../../utils/format.js');
|
|
14
15
|
require('./index.module.css');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "../../Component-
|
|
1
|
+
export * from "../../Component-540e1474";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateRangeInput_Component = require('../../Component-
|
|
3
|
+
var components_dateRangeInput_Component = require('../../Component-540e1474.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -9,6 +9,7 @@ require('@alfalab/core-components-calendar/cssm');
|
|
|
9
9
|
require('@alfalab/core-components-icon-button/cssm');
|
|
10
10
|
require('@alfalab/core-components-input/cssm');
|
|
11
11
|
require('@alfalab/core-components-popover/cssm');
|
|
12
|
+
require('@alfalab/hooks');
|
|
12
13
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
13
14
|
require('../../utils/format.js');
|
|
14
15
|
require('date-fns/parse');
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
--gap-m: 16px;
|
|
11
11
|
}
|
|
12
12
|
:root {
|
|
13
|
-
--border-radius-
|
|
13
|
+
--border-radius-m: 8px;
|
|
14
14
|
}
|
|
15
15
|
:root {
|
|
16
16
|
--calendar-width: 344px;
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
/* marker */
|
|
37
37
|
}
|
|
38
38
|
:root {
|
|
39
|
-
--calendar-popover-border-radius:
|
|
39
|
+
--calendar-popover-border-radius: var(--border-radius-m);
|
|
40
40
|
}
|
|
41
41
|
.component {
|
|
42
42
|
display: inline-block;
|
package/cssm/desktop.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var Component_desktop = require('./Component.desktop.js');
|
|
4
|
-
require('./Component-
|
|
4
|
+
require('./Component-540e1474.js');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-merge-refs');
|
|
7
7
|
require('classnames');
|
|
@@ -10,6 +10,7 @@ require('@alfalab/core-components-calendar/cssm');
|
|
|
10
10
|
require('@alfalab/core-components-icon-button/cssm');
|
|
11
11
|
require('@alfalab/core-components-input/cssm');
|
|
12
12
|
require('@alfalab/core-components-popover/cssm');
|
|
13
|
+
require('@alfalab/hooks');
|
|
13
14
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
14
15
|
require('./utils/format.js');
|
|
15
16
|
require('date-fns/parse');
|
package/cssm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var Component_responsive = require('./Component.responsive.js');
|
|
4
|
-
require('./Component-
|
|
4
|
+
require('./Component-540e1474.js');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-merge-refs');
|
|
7
7
|
require('classnames');
|
|
@@ -10,11 +10,11 @@ require('@alfalab/core-components-calendar/cssm');
|
|
|
10
10
|
require('@alfalab/core-components-icon-button/cssm');
|
|
11
11
|
require('@alfalab/core-components-input/cssm');
|
|
12
12
|
require('@alfalab/core-components-popover/cssm');
|
|
13
|
+
require('@alfalab/hooks');
|
|
13
14
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
14
15
|
require('./utils/format.js');
|
|
15
16
|
require('date-fns/parse');
|
|
16
17
|
require('./components/date-range-input/index.module.css');
|
|
17
|
-
require('@alfalab/hooks');
|
|
18
18
|
require('./Component.desktop.js');
|
|
19
19
|
require('./Component.mobile.js');
|
|
20
20
|
|
package/cssm/mobile.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var Component_mobile = require('./Component.mobile.js');
|
|
4
|
-
require('./Component-
|
|
4
|
+
require('./Component-540e1474.js');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-merge-refs');
|
|
7
7
|
require('classnames');
|
|
@@ -10,6 +10,7 @@ require('@alfalab/core-components-calendar/cssm');
|
|
|
10
10
|
require('@alfalab/core-components-icon-button/cssm');
|
|
11
11
|
require('@alfalab/core-components-input/cssm');
|
|
12
12
|
require('@alfalab/core-components-popover/cssm');
|
|
13
|
+
require('@alfalab/hooks');
|
|
13
14
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
14
15
|
require('./utils/format.js');
|
|
15
16
|
require('date-fns/parse');
|