@alfalab/core-components-date-range-input 2.1.2 → 2.1.3
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.d.ts +2 -2
- package/Component.js +12 -21
- package/cssm/Component.d.ts +2 -2
- package/cssm/Component.js +13 -23
- package/cssm/index.js +1 -3
- package/cssm/utils/format.js +6 -13
- package/cssm/utils/index.js +1 -3
- package/esm/Component.d.ts +2 -2
- package/esm/Component.js +3 -3
- package/esm/index.css +6 -6
- package/esm/index.js +1 -1
- package/esm/utils/format.js +3 -3
- package/esm/utils/index.js +1 -1
- package/index.css +6 -6
- package/index.js +1 -3
- package/modern/Component.d.ts +2 -2
- package/modern/Component.js +3 -3
- package/modern/index.css +6 -6
- package/modern/index.js +2 -2
- package/modern/utils/index.js +1 -1
- package/package.json +2 -2
- package/utils/format.js +6 -13
- package/utils/index.js +1 -3
package/Component.d.ts
CHANGED
|
@@ -115,7 +115,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "
|
|
|
115
115
|
dateFrom?: Date;
|
|
116
116
|
dateTo?: Date;
|
|
117
117
|
value: string;
|
|
118
|
-
}, event?:
|
|
118
|
+
}, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
119
119
|
/**
|
|
120
120
|
* Обработчик окончания ввода
|
|
121
121
|
*/
|
|
@@ -123,7 +123,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "
|
|
|
123
123
|
dateFrom: Date;
|
|
124
124
|
dateTo: Date;
|
|
125
125
|
value: string;
|
|
126
|
-
}, event?:
|
|
126
|
+
}, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
127
127
|
/**
|
|
128
128
|
* Компонент календаря
|
|
129
129
|
*/
|
package/Component.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var mergeRefs = require('react-merge-refs');
|
|
7
5
|
var cn = require('classnames');
|
|
@@ -12,15 +10,8 @@ var coreComponentsInput = require('@alfalab/core-components-input');
|
|
|
12
10
|
var coreComponentsPopover = require('@alfalab/core-components-popover');
|
|
13
11
|
var hooks = require('@alfalab/hooks');
|
|
14
12
|
var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
|
|
15
|
-
require('date-fns/parse');
|
|
16
13
|
var utils_format = require('./utils/format.js');
|
|
17
|
-
|
|
18
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
|
-
|
|
20
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
21
|
-
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
22
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
23
|
-
var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultLegacy(dateFnsIsValid);
|
|
14
|
+
require('date-fns/parse');
|
|
24
15
|
|
|
25
16
|
/******************************************************************************
|
|
26
17
|
Copyright (c) Microsoft Corporation.
|
|
@@ -61,11 +52,11 @@ function __rest(s, e) {
|
|
|
61
52
|
return t;
|
|
62
53
|
}
|
|
63
54
|
|
|
64
|
-
var styles = {"component":"date-range-
|
|
55
|
+
var styles = {"component":"date-range-input__component_1akod","calendarContainer":"date-range-input__calendarContainer_1akod","calendarResponsive":"date-range-input__calendarResponsive_1akod","block":"date-range-input__block_1akod"};
|
|
65
56
|
require('./index.css')
|
|
66
57
|
|
|
67
58
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
|
68
|
-
var DateRangeInput =
|
|
59
|
+
var DateRangeInput = React.forwardRef(function (_a, ref) {
|
|
69
60
|
var _b, _c;
|
|
70
61
|
var _d;
|
|
71
62
|
var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, picker = _a.picker, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _f = _a.popoverPosition, popoverPosition = _f === void 0 ? 'bottom-start' : _f, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _g = _a.Calendar, Calendar = _g === void 0 ? coreComponentsCalendar.Calendar : _g, _h = _a.calendarProps, calendarProps = _h === void 0 ? {} : _h, defaultMonth = _a.defaultMonth, _j = _a.minDate, minDate = _j === void 0 ? calendarProps.minDate : _j, _k = _a.maxDate, maxDate = _k === void 0 ? calendarProps.maxDate : _k, _l = _a.offDays, offDays = _l === void 0 ? calendarProps.offDays || [] : _l, _m = _a.events, events = _m === void 0 ? calendarProps.events || [] : _m, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, restProps = __rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "picker", "defaultValue", "value", "onChange", "onComplete", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen"]);
|
|
@@ -147,12 +138,12 @@ var DateRangeInput = React__default['default'].forwardRef(function (_a, ref) {
|
|
|
147
138
|
else if (selectedFrom && selectedTo) {
|
|
148
139
|
setEnd();
|
|
149
140
|
}
|
|
150
|
-
else if (
|
|
141
|
+
else if (dateFnsIsValid(dateFrom) &&
|
|
151
142
|
((_a = dateArr[0]) === null || _a === void 0 ? void 0 : _a.length) === utils_format.DATE_FORMAT.length &&
|
|
152
143
|
dateFrom.getTime() !== selectedFrom) {
|
|
153
144
|
setStart(dateFrom.getTime());
|
|
154
145
|
}
|
|
155
|
-
else if (
|
|
146
|
+
else if (dateFnsIsValid(dateTo) &&
|
|
156
147
|
((_b = dateArr[1]) === null || _b === void 0 ? void 0 : _b.length) === utils_format.DATE_FORMAT.length &&
|
|
157
148
|
dateTo.getTime() !== selectedTo) {
|
|
158
149
|
setEnd(dateTo.getTime());
|
|
@@ -183,7 +174,7 @@ var DateRangeInput = React__default['default'].forwardRef(function (_a, ref) {
|
|
|
183
174
|
};
|
|
184
175
|
React.useEffect(function () {
|
|
185
176
|
if (selectedFrom && selectedTo) {
|
|
186
|
-
setValue(utils_format.parseTimestampToDate(selectedFrom)
|
|
177
|
+
setValue("".concat(utils_format.parseTimestampToDate(selectedFrom), " - ").concat(utils_format.parseTimestampToDate(selectedTo)));
|
|
187
178
|
}
|
|
188
179
|
else if (selectedFrom && value.length < utils_format.DATE_FORMAT.length) {
|
|
189
180
|
setValue(utils_format.parseTimestampToDate(selectedFrom));
|
|
@@ -204,15 +195,15 @@ var DateRangeInput = React__default['default'].forwardRef(function (_a, ref) {
|
|
|
204
195
|
};
|
|
205
196
|
var renderCalendar = function () { return (
|
|
206
197
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
return (
|
|
198
|
+
React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
199
|
+
React.createElement(CalendarComponent, __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
|
+
return (React.createElement("div", { className: cn(styles.component, className, (_b = {},
|
|
210
201
|
_b[styles.block] = block,
|
|
211
202
|
_b)), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
|
|
212
|
-
|
|
203
|
+
React.createElement(coreComponentsInput.Input, __assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
|
|
213
204
|
rightAddons,
|
|
214
|
-
picker && (
|
|
215
|
-
picker && (
|
|
205
|
+
picker && (React.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
|
|
206
|
+
picker && (React.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
|
|
216
207
|
_c[styles.calendarResponsive] = calendarResponsive,
|
|
217
208
|
_c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
|
|
218
209
|
});
|
package/cssm/Component.d.ts
CHANGED
|
@@ -115,7 +115,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "
|
|
|
115
115
|
dateFrom?: Date;
|
|
116
116
|
dateTo?: Date;
|
|
117
117
|
value: string;
|
|
118
|
-
}, event?:
|
|
118
|
+
}, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
119
119
|
/**
|
|
120
120
|
* Обработчик окончания ввода
|
|
121
121
|
*/
|
|
@@ -123,7 +123,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "
|
|
|
123
123
|
dateFrom: Date;
|
|
124
124
|
dateTo: Date;
|
|
125
125
|
value: string;
|
|
126
|
-
}, event?:
|
|
126
|
+
}, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
127
127
|
/**
|
|
128
128
|
* Компонент календаря
|
|
129
129
|
*/
|
package/cssm/Component.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var mergeRefs = require('react-merge-refs');
|
|
7
5
|
var cn = require('classnames');
|
|
@@ -12,17 +10,9 @@ var coreComponentsInput = require('@alfalab/core-components-input/cssm');
|
|
|
12
10
|
var coreComponentsPopover = require('@alfalab/core-components-popover/cssm');
|
|
13
11
|
var hooks = require('@alfalab/hooks');
|
|
14
12
|
var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
|
|
15
|
-
require('date-fns/parse');
|
|
16
13
|
var utils_format = require('./utils/format.js');
|
|
17
14
|
var styles = require('./index.module.css');
|
|
18
|
-
|
|
19
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
-
|
|
21
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
-
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
23
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
24
|
-
var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultLegacy(dateFnsIsValid);
|
|
25
|
-
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
|
|
15
|
+
require('date-fns/parse');
|
|
26
16
|
|
|
27
17
|
/******************************************************************************
|
|
28
18
|
Copyright (c) Microsoft Corporation.
|
|
@@ -64,7 +54,7 @@ function __rest(s, e) {
|
|
|
64
54
|
}
|
|
65
55
|
|
|
66
56
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
|
67
|
-
var DateRangeInput =
|
|
57
|
+
var DateRangeInput = React.forwardRef(function (_a, ref) {
|
|
68
58
|
var _b, _c;
|
|
69
59
|
var _d;
|
|
70
60
|
var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, picker = _a.picker, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _f = _a.popoverPosition, popoverPosition = _f === void 0 ? 'bottom-start' : _f, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _g = _a.Calendar, Calendar = _g === void 0 ? coreComponentsCalendar.Calendar : _g, _h = _a.calendarProps, calendarProps = _h === void 0 ? {} : _h, defaultMonth = _a.defaultMonth, _j = _a.minDate, minDate = _j === void 0 ? calendarProps.minDate : _j, _k = _a.maxDate, maxDate = _k === void 0 ? calendarProps.maxDate : _k, _l = _a.offDays, offDays = _l === void 0 ? calendarProps.offDays || [] : _l, _m = _a.events, events = _m === void 0 ? calendarProps.events || [] : _m, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, restProps = __rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "picker", "defaultValue", "value", "onChange", "onComplete", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen"]);
|
|
@@ -146,12 +136,12 @@ var DateRangeInput = React__default['default'].forwardRef(function (_a, ref) {
|
|
|
146
136
|
else if (selectedFrom && selectedTo) {
|
|
147
137
|
setEnd();
|
|
148
138
|
}
|
|
149
|
-
else if (
|
|
139
|
+
else if (dateFnsIsValid(dateFrom) &&
|
|
150
140
|
((_a = dateArr[0]) === null || _a === void 0 ? void 0 : _a.length) === utils_format.DATE_FORMAT.length &&
|
|
151
141
|
dateFrom.getTime() !== selectedFrom) {
|
|
152
142
|
setStart(dateFrom.getTime());
|
|
153
143
|
}
|
|
154
|
-
else if (
|
|
144
|
+
else if (dateFnsIsValid(dateTo) &&
|
|
155
145
|
((_b = dateArr[1]) === null || _b === void 0 ? void 0 : _b.length) === utils_format.DATE_FORMAT.length &&
|
|
156
146
|
dateTo.getTime() !== selectedTo) {
|
|
157
147
|
setEnd(dateTo.getTime());
|
|
@@ -182,7 +172,7 @@ var DateRangeInput = React__default['default'].forwardRef(function (_a, ref) {
|
|
|
182
172
|
};
|
|
183
173
|
React.useEffect(function () {
|
|
184
174
|
if (selectedFrom && selectedTo) {
|
|
185
|
-
setValue(utils_format.parseTimestampToDate(selectedFrom)
|
|
175
|
+
setValue("".concat(utils_format.parseTimestampToDate(selectedFrom), " - ").concat(utils_format.parseTimestampToDate(selectedTo)));
|
|
186
176
|
}
|
|
187
177
|
else if (selectedFrom && value.length < utils_format.DATE_FORMAT.length) {
|
|
188
178
|
setValue(utils_format.parseTimestampToDate(selectedFrom));
|
|
@@ -203,16 +193,16 @@ var DateRangeInput = React__default['default'].forwardRef(function (_a, ref) {
|
|
|
203
193
|
};
|
|
204
194
|
var renderCalendar = function () { return (
|
|
205
195
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
return (
|
|
209
|
-
_b[
|
|
196
|
+
React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
197
|
+
React.createElement(CalendarComponent, __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 })))); };
|
|
198
|
+
return (React.createElement("div", { className: cn(styles.component, className, (_b = {},
|
|
199
|
+
_b[styles.block] = block,
|
|
210
200
|
_b)), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
|
|
211
|
-
|
|
201
|
+
React.createElement(coreComponentsInput.Input, __assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
|
|
212
202
|
rightAddons,
|
|
213
|
-
picker && (
|
|
214
|
-
picker && (
|
|
215
|
-
_c[
|
|
203
|
+
picker && (React.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
|
|
204
|
+
picker && (React.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
|
|
205
|
+
_c[styles.calendarResponsive] = calendarResponsive,
|
|
216
206
|
_c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
|
|
217
207
|
});
|
|
218
208
|
|
package/cssm/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var Component = require('./Component.js');
|
|
6
4
|
require('react');
|
|
7
5
|
require('react-merge-refs');
|
|
@@ -13,8 +11,8 @@ require('@alfalab/core-components-input/cssm');
|
|
|
13
11
|
require('@alfalab/core-components-popover/cssm');
|
|
14
12
|
require('@alfalab/hooks');
|
|
15
13
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
16
|
-
require('date-fns/parse');
|
|
17
14
|
require('./utils/format.js');
|
|
15
|
+
require('date-fns/parse');
|
|
18
16
|
require('./index.module.css');
|
|
19
17
|
|
|
20
18
|
|
package/cssm/utils/format.js
CHANGED
|
@@ -1,15 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var dateFnsIsValid = require('date-fns/isValid');
|
|
6
4
|
var parse = require('date-fns/parse');
|
|
7
5
|
|
|
8
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
-
|
|
10
|
-
var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultLegacy(dateFnsIsValid);
|
|
11
|
-
var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
|
|
12
|
-
|
|
13
6
|
/* eslint-disable no-useless-escape */
|
|
14
7
|
var DATE_FORMAT = 'dd.MM.yyyy';
|
|
15
8
|
var DATE_MASK = [
|
|
@@ -40,13 +33,13 @@ var DATE_MASK = [
|
|
|
40
33
|
var isCompleteDateInput = function (input) { return input.length === DATE_MASK.length; };
|
|
41
34
|
var parseDateString = function (value, dateFormat) {
|
|
42
35
|
if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
|
|
43
|
-
return
|
|
36
|
+
return parse(value, dateFormat, new Date());
|
|
44
37
|
};
|
|
45
38
|
var isValid = function (inputValue, dateFrom, dateTo) {
|
|
46
39
|
return !inputValue ||
|
|
47
40
|
(isCompleteDateInput(inputValue) &&
|
|
48
|
-
|
|
49
|
-
|
|
41
|
+
dateFnsIsValid(parseDateString(dateFrom)) &&
|
|
42
|
+
dateFnsIsValid(parseDateString(dateTo)));
|
|
50
43
|
};
|
|
51
44
|
var format = function (value) {
|
|
52
45
|
return value
|
|
@@ -81,12 +74,12 @@ var parseTimestampToDate = function (timestamp) {
|
|
|
81
74
|
var month = date.getMonth() + 1;
|
|
82
75
|
var day = date.getDate();
|
|
83
76
|
if (month < 10) {
|
|
84
|
-
month = "0"
|
|
77
|
+
month = "0".concat(month);
|
|
85
78
|
}
|
|
86
79
|
if (day < 10) {
|
|
87
|
-
day = "0"
|
|
80
|
+
day = "0".concat(day);
|
|
88
81
|
}
|
|
89
|
-
return day
|
|
82
|
+
return "".concat(day, ".").concat(month, ".").concat(year);
|
|
90
83
|
};
|
|
91
84
|
|
|
92
85
|
exports.DATE_FORMAT = DATE_FORMAT;
|
package/cssm/utils/index.js
CHANGED
package/esm/Component.d.ts
CHANGED
|
@@ -115,7 +115,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "
|
|
|
115
115
|
dateFrom?: Date;
|
|
116
116
|
dateTo?: Date;
|
|
117
117
|
value: string;
|
|
118
|
-
}, event?:
|
|
118
|
+
}, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
119
119
|
/**
|
|
120
120
|
* Обработчик окончания ввода
|
|
121
121
|
*/
|
|
@@ -123,7 +123,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "
|
|
|
123
123
|
dateFrom: Date;
|
|
124
124
|
dateTo: Date;
|
|
125
125
|
value: string;
|
|
126
|
-
}, event?:
|
|
126
|
+
}, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
127
127
|
/**
|
|
128
128
|
* Компонент календаря
|
|
129
129
|
*/
|
package/esm/Component.js
CHANGED
|
@@ -8,8 +8,8 @@ import { Input } from '@alfalab/core-components-input/esm';
|
|
|
8
8
|
import { Popover } from '@alfalab/core-components-popover/esm';
|
|
9
9
|
import { useMedia } from '@alfalab/hooks';
|
|
10
10
|
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
11
|
-
import 'date-fns/parse';
|
|
12
11
|
import { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } from './utils/format.js';
|
|
12
|
+
import 'date-fns/parse';
|
|
13
13
|
|
|
14
14
|
/******************************************************************************
|
|
15
15
|
Copyright (c) Microsoft Corporation.
|
|
@@ -50,7 +50,7 @@ function __rest(s, e) {
|
|
|
50
50
|
return t;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
var styles = {"component":"date-range-
|
|
53
|
+
var styles = {"component":"date-range-input__component_1akod","calendarContainer":"date-range-input__calendarContainer_1akod","calendarResponsive":"date-range-input__calendarResponsive_1akod","block":"date-range-input__block_1akod"};
|
|
54
54
|
require('./index.css')
|
|
55
55
|
|
|
56
56
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
|
@@ -172,7 +172,7 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
|
|
|
172
172
|
};
|
|
173
173
|
useEffect(function () {
|
|
174
174
|
if (selectedFrom && selectedTo) {
|
|
175
|
-
setValue(parseTimestampToDate(selectedFrom)
|
|
175
|
+
setValue("".concat(parseTimestampToDate(selectedFrom), " - ").concat(parseTimestampToDate(selectedTo)));
|
|
176
176
|
}
|
|
177
177
|
else if (selectedFrom && value.length < DATE_FORMAT.length) {
|
|
178
178
|
setValue(parseTimestampToDate(selectedFrom));
|
package/esm/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 13ivl */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
/* Hard */
|
|
@@ -39,26 +39,26 @@
|
|
|
39
39
|
:root {
|
|
40
40
|
--calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
|
|
41
41
|
}
|
|
42
|
-
.date-range-
|
|
42
|
+
.date-range-input__component_1akod {
|
|
43
43
|
display: inline-block;
|
|
44
44
|
outline: none;
|
|
45
45
|
position: relative;
|
|
46
46
|
}
|
|
47
|
-
.date-range-
|
|
47
|
+
.date-range-input__calendarContainer_1akod {
|
|
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_1akod {
|
|
54
54
|
width: 100%;
|
|
55
55
|
min-width: 288px
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
.date-range-
|
|
58
|
+
.date-range-input__calendarResponsive_1akod {
|
|
59
59
|
width: var(--calendar-width);
|
|
60
60
|
padding: 0 var(--gap-m);
|
|
61
61
|
}
|
|
62
|
-
.date-range-
|
|
62
|
+
.date-range-input__block_1akod {
|
|
63
63
|
width: 100%;
|
|
64
64
|
}
|
package/esm/index.js
CHANGED
package/esm/utils/format.js
CHANGED
|
@@ -72,12 +72,12 @@ var parseTimestampToDate = function (timestamp) {
|
|
|
72
72
|
var month = date.getMonth() + 1;
|
|
73
73
|
var day = date.getDate();
|
|
74
74
|
if (month < 10) {
|
|
75
|
-
month = "0"
|
|
75
|
+
month = "0".concat(month);
|
|
76
76
|
}
|
|
77
77
|
if (day < 10) {
|
|
78
|
-
day = "0"
|
|
78
|
+
day = "0".concat(day);
|
|
79
79
|
}
|
|
80
|
-
return day
|
|
80
|
+
return "".concat(day, ".").concat(month, ".").concat(year);
|
|
81
81
|
};
|
|
82
82
|
|
|
83
83
|
export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate };
|
package/esm/utils/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
+
export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate } from './format.js';
|
|
1
2
|
import 'date-fns/isValid';
|
|
2
3
|
import 'date-fns/parse';
|
|
3
|
-
export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate } from './format.js';
|
package/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 13ivl */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
/* Hard */
|
|
@@ -39,26 +39,26 @@
|
|
|
39
39
|
:root {
|
|
40
40
|
--calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
|
|
41
41
|
}
|
|
42
|
-
.date-range-
|
|
42
|
+
.date-range-input__component_1akod {
|
|
43
43
|
display: inline-block;
|
|
44
44
|
outline: none;
|
|
45
45
|
position: relative;
|
|
46
46
|
}
|
|
47
|
-
.date-range-
|
|
47
|
+
.date-range-input__calendarContainer_1akod {
|
|
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_1akod {
|
|
54
54
|
width: 100%;
|
|
55
55
|
min-width: 288px
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
.date-range-
|
|
58
|
+
.date-range-input__calendarResponsive_1akod {
|
|
59
59
|
width: var(--calendar-width);
|
|
60
60
|
padding: 0 var(--gap-m);
|
|
61
61
|
}
|
|
62
|
-
.date-range-
|
|
62
|
+
.date-range-input__block_1akod {
|
|
63
63
|
width: 100%;
|
|
64
64
|
}
|
package/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var Component = require('./Component.js');
|
|
6
4
|
require('react');
|
|
7
5
|
require('react-merge-refs');
|
|
@@ -13,8 +11,8 @@ require('@alfalab/core-components-input');
|
|
|
13
11
|
require('@alfalab/core-components-popover');
|
|
14
12
|
require('@alfalab/hooks');
|
|
15
13
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
16
|
-
require('date-fns/parse');
|
|
17
14
|
require('./utils/format.js');
|
|
15
|
+
require('date-fns/parse');
|
|
18
16
|
|
|
19
17
|
|
|
20
18
|
|
package/modern/Component.d.ts
CHANGED
|
@@ -115,7 +115,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "
|
|
|
115
115
|
dateFrom?: Date;
|
|
116
116
|
dateTo?: Date;
|
|
117
117
|
value: string;
|
|
118
|
-
}, event?:
|
|
118
|
+
}, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
119
119
|
/**
|
|
120
120
|
* Обработчик окончания ввода
|
|
121
121
|
*/
|
|
@@ -123,7 +123,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "
|
|
|
123
123
|
dateFrom: Date;
|
|
124
124
|
dateTo: Date;
|
|
125
125
|
value: string;
|
|
126
|
-
}, event?:
|
|
126
|
+
}, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
127
127
|
/**
|
|
128
128
|
* Компонент календаря
|
|
129
129
|
*/
|
package/modern/Component.js
CHANGED
|
@@ -2,16 +2,16 @@ import React, { useRef, useState, useEffect } from 'react';
|
|
|
2
2
|
import mergeRefs from 'react-merge-refs';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import dateFnsIsValid from 'date-fns/isValid';
|
|
5
|
-
import {
|
|
5
|
+
import { usePeriod, Calendar, CalendarMobile } from '@alfalab/core-components-calendar/modern';
|
|
6
6
|
import { IconButton } from '@alfalab/core-components-icon-button/modern';
|
|
7
7
|
import { Input } from '@alfalab/core-components-input/modern';
|
|
8
8
|
import { Popover } from '@alfalab/core-components-popover/modern';
|
|
9
9
|
import { useMedia } from '@alfalab/hooks';
|
|
10
10
|
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
11
|
-
import 'date-fns/parse';
|
|
12
11
|
import { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } from './utils/format.js';
|
|
12
|
+
import 'date-fns/parse';
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
const styles = {"component":"date-range-input__component_1akod","calendarContainer":"date-range-input__calendarContainer_1akod","calendarResponsive":"date-range-input__calendarResponsive_1akod","block":"date-range-input__block_1akod"};
|
|
15
15
|
require('./index.css')
|
|
16
16
|
|
|
17
17
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
package/modern/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 13ivl */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
/* Hard */
|
|
@@ -39,26 +39,26 @@
|
|
|
39
39
|
:root {
|
|
40
40
|
--calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
|
|
41
41
|
}
|
|
42
|
-
.date-range-
|
|
42
|
+
.date-range-input__component_1akod {
|
|
43
43
|
display: inline-block;
|
|
44
44
|
outline: none;
|
|
45
45
|
position: relative;
|
|
46
46
|
}
|
|
47
|
-
.date-range-
|
|
47
|
+
.date-range-input__calendarContainer_1akod {
|
|
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_1akod {
|
|
54
54
|
width: 100%;
|
|
55
55
|
min-width: 288px
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
.date-range-
|
|
58
|
+
.date-range-input__calendarResponsive_1akod {
|
|
59
59
|
width: var(--calendar-width);
|
|
60
60
|
padding: 0 var(--gap-m);
|
|
61
61
|
}
|
|
62
|
-
.date-range-
|
|
62
|
+
.date-range-input__block_1akod {
|
|
63
63
|
width: 100%;
|
|
64
64
|
}
|
package/modern/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export { DateRangeInput } from './Component.js';
|
|
1
2
|
import 'react';
|
|
2
3
|
import 'react-merge-refs';
|
|
3
4
|
import 'classnames';
|
|
@@ -8,6 +9,5 @@ import '@alfalab/core-components-input/modern';
|
|
|
8
9
|
import '@alfalab/core-components-popover/modern';
|
|
9
10
|
import '@alfalab/hooks';
|
|
10
11
|
import '@alfalab/icons-glyph/CalendarMIcon';
|
|
11
|
-
import 'date-fns/parse';
|
|
12
12
|
import './utils/format.js';
|
|
13
|
-
|
|
13
|
+
import 'date-fns/parse';
|
package/modern/utils/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
+
export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate } from './format.js';
|
|
1
2
|
import 'date-fns/isValid';
|
|
2
3
|
import 'date-fns/parse';
|
|
3
|
-
export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate } from './format.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-date-range-input",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@alfalab/core-components-input": "^11.1.0",
|
|
19
19
|
"@alfalab/core-components-icon-button": "^6.0.1",
|
|
20
|
-
"@alfalab/core-components-calendar": "^6.1.
|
|
20
|
+
"@alfalab/core-components-calendar": "^6.1.15",
|
|
21
21
|
"@alfalab/core-components-popover": "^6.0.4",
|
|
22
22
|
"classnames": "^2.3.1"
|
|
23
23
|
}
|
package/utils/format.js
CHANGED
|
@@ -1,15 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var dateFnsIsValid = require('date-fns/isValid');
|
|
6
4
|
var parse = require('date-fns/parse');
|
|
7
5
|
|
|
8
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
-
|
|
10
|
-
var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultLegacy(dateFnsIsValid);
|
|
11
|
-
var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
|
|
12
|
-
|
|
13
6
|
/* eslint-disable no-useless-escape */
|
|
14
7
|
var DATE_FORMAT = 'dd.MM.yyyy';
|
|
15
8
|
var DATE_MASK = [
|
|
@@ -40,13 +33,13 @@ var DATE_MASK = [
|
|
|
40
33
|
var isCompleteDateInput = function (input) { return input.length === DATE_MASK.length; };
|
|
41
34
|
var parseDateString = function (value, dateFormat) {
|
|
42
35
|
if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
|
|
43
|
-
return
|
|
36
|
+
return parse(value, dateFormat, new Date());
|
|
44
37
|
};
|
|
45
38
|
var isValid = function (inputValue, dateFrom, dateTo) {
|
|
46
39
|
return !inputValue ||
|
|
47
40
|
(isCompleteDateInput(inputValue) &&
|
|
48
|
-
|
|
49
|
-
|
|
41
|
+
dateFnsIsValid(parseDateString(dateFrom)) &&
|
|
42
|
+
dateFnsIsValid(parseDateString(dateTo)));
|
|
50
43
|
};
|
|
51
44
|
var format = function (value) {
|
|
52
45
|
return value
|
|
@@ -81,12 +74,12 @@ var parseTimestampToDate = function (timestamp) {
|
|
|
81
74
|
var month = date.getMonth() + 1;
|
|
82
75
|
var day = date.getDate();
|
|
83
76
|
if (month < 10) {
|
|
84
|
-
month = "0"
|
|
77
|
+
month = "0".concat(month);
|
|
85
78
|
}
|
|
86
79
|
if (day < 10) {
|
|
87
|
-
day = "0"
|
|
80
|
+
day = "0".concat(day);
|
|
88
81
|
}
|
|
89
|
-
return day
|
|
82
|
+
return "".concat(day, ".").concat(month, ".").concat(year);
|
|
90
83
|
};
|
|
91
84
|
|
|
92
85
|
exports.DATE_FORMAT = DATE_FORMAT;
|
package/utils/index.js
CHANGED