@alfalab/core-components-date-time-input 2.2.0 → 3.0.0
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-27749cf7.d.ts → Component-1ff76732.d.ts} +4 -7
- package/{Component-27749cf7.js → Component-1ff76732.js} +36 -15
- 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-time-input/Component.js +2 -1
- package/components/date-time-input/index.css +8 -8
- package/components/date-time-input/index.d.ts +1 -1
- package/components/date-time-input/index.js +2 -1
- package/{esm/Component-e82a534f.d.ts → cssm/Component-b91f18e8.d.ts} +4 -7
- package/cssm/{Component-d6110aa7.js → Component-b91f18e8.js} +35 -14
- 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-time-input/Component.js +2 -1
- package/cssm/components/date-time-input/index.d.ts +1 -1
- package/cssm/components/date-time-input/index.js +2 -1
- package/cssm/components/date-time-input/index.module.css +2 -2
- package/cssm/desktop.js +2 -1
- package/cssm/index.d.ts +2 -1
- package/cssm/index.js +2 -2
- package/cssm/mobile.js +2 -1
- package/cssm/responsive.js +2 -2
- package/cssm/utils/format.d.ts +3 -2
- package/cssm/utils/format.js +7 -3
- package/cssm/utils/index.js +2 -1
- package/desktop.js +2 -1
- package/{cssm/Component-d6110aa7.d.ts → esm/Component-074b6874.d.ts} +4 -7
- package/esm/{Component-e82a534f.js → Component-074b6874.js} +37 -16
- 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-time-input/Component.js +2 -1
- package/esm/components/date-time-input/index.css +8 -8
- package/esm/components/date-time-input/index.d.ts +1 -1
- package/esm/components/date-time-input/index.js +2 -1
- package/esm/desktop.js +2 -1
- package/esm/index.d.ts +2 -1
- package/esm/index.js +2 -2
- package/esm/mobile.js +2 -1
- package/esm/responsive.js +2 -2
- package/esm/utils/format.d.ts +3 -2
- package/esm/utils/format.js +6 -3
- package/esm/utils/index.js +1 -1
- package/index.d.ts +2 -1
- 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-time-input/Component.d.ts +4 -7
- package/modern/components/date-time-input/Component.js +37 -16
- package/modern/components/date-time-input/index.css +8 -8
- package/modern/components/date-time-input/index.js +1 -0
- package/modern/desktop.js +1 -0
- package/modern/index.d.ts +2 -1
- package/modern/mobile.js +1 -0
- package/modern/utils/format.d.ts +3 -2
- package/modern/utils/format.js +6 -3
- package/modern/utils/index.js +1 -1
- package/package.json +4 -3
- package/responsive.js +2 -2
- package/utils/format.d.ts +3 -2
- package/utils/format.js +7 -3
- package/utils/index.js +2 -1
|
@@ -57,14 +57,14 @@ type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
|
|
|
57
57
|
/**
|
|
58
58
|
* Обработчик изменения значения
|
|
59
59
|
*/
|
|
60
|
-
onChange?: (event: ChangeEvent<HTMLInputElement
|
|
60
|
+
onChange?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
61
61
|
date: Date;
|
|
62
62
|
value: string;
|
|
63
63
|
}) => void;
|
|
64
64
|
/**
|
|
65
65
|
* Обработчик окончания ввода
|
|
66
66
|
*/
|
|
67
|
-
onComplete?: (event: ChangeEvent<HTMLInputElement
|
|
67
|
+
onComplete?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
68
68
|
date: Date;
|
|
69
69
|
value: string;
|
|
70
70
|
}) => void;
|
|
@@ -146,14 +146,14 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
|
|
|
146
146
|
/**
|
|
147
147
|
* Обработчик изменения значения
|
|
148
148
|
*/
|
|
149
|
-
onChange?: ((event: ChangeEvent<HTMLInputElement
|
|
149
|
+
onChange?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
150
150
|
date: Date;
|
|
151
151
|
value: string;
|
|
152
152
|
}) => void) | undefined;
|
|
153
153
|
/**
|
|
154
154
|
* Обработчик окончания ввода
|
|
155
155
|
*/
|
|
156
|
-
onComplete?: ((event: ChangeEvent<HTMLInputElement
|
|
156
|
+
onComplete?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
157
157
|
date: Date;
|
|
158
158
|
value: string;
|
|
159
159
|
}) => void) | undefined;
|
|
@@ -166,9 +166,6 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
|
|
|
166
166
|
*/
|
|
167
167
|
calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
|
|
168
168
|
open: boolean;
|
|
169
|
-
/**
|
|
170
|
-
* Дополнительный класс для поповера
|
|
171
|
-
*/
|
|
172
169
|
title?: string | undefined;
|
|
173
170
|
onClose?: (() => void) | undefined;
|
|
174
171
|
yearsAmount?: number | undefined;
|
|
@@ -7,6 +7,7 @@ var coreComponentsCalendar = require('@alfalab/core-components-calendar');
|
|
|
7
7
|
var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
|
|
8
8
|
var coreComponentsInput = require('@alfalab/core-components-input');
|
|
9
9
|
var coreComponentsPopover = require('@alfalab/core-components-popover');
|
|
10
|
+
var hooks = require('@alfalab/hooks');
|
|
10
11
|
var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
|
|
11
12
|
var utils_format = require('./utils/format.js');
|
|
12
13
|
|
|
@@ -55,7 +56,7 @@ function __rest(s, e) {
|
|
|
55
56
|
return t;
|
|
56
57
|
}
|
|
57
58
|
|
|
58
|
-
var styles = {"component":"date-time-
|
|
59
|
+
var styles = {"component":"date-time-input__component_wum5f","calendarContainer":"date-time-input__calendarContainer_wum5f","calendarResponsive":"date-time-input__calendarResponsive_wum5f","block":"date-time-input__block_wum5f"};
|
|
59
60
|
require('./components/date-time-input/index.css')
|
|
60
61
|
|
|
61
62
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
|
@@ -73,6 +74,10 @@ var DateTimeInput = 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 === propValue ? prevValue : newPropValue); });
|
|
80
|
+
}, [propValue]);
|
|
76
81
|
var checkInputValueIsValid = function (newInputValue) {
|
|
77
82
|
if (!newInputValue || error)
|
|
78
83
|
return false;
|
|
@@ -81,8 +86,23 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
81
86
|
coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
|
|
82
87
|
!offDays.includes(dateValue));
|
|
83
88
|
};
|
|
89
|
+
var setTimeToDate = function () {
|
|
90
|
+
setValue(function (prevValue) {
|
|
91
|
+
var dateWithTime = utils_format.addTimeToDate(prevValue);
|
|
92
|
+
if (dateWithTime !== prevValue && dateWithTime.length === utils_format.DATE_WITH_TIME_LENGTH) {
|
|
93
|
+
onComplete === null || onComplete === void 0 ? void 0 : onComplete(null, {
|
|
94
|
+
date: utils_format.getFullDateTime(dateWithTime),
|
|
95
|
+
value: dateWithTime,
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
return dateWithTime;
|
|
99
|
+
});
|
|
100
|
+
};
|
|
84
101
|
var handleInputWrapperFocus = function (event) {
|
|
85
102
|
if (view === 'desktop') {
|
|
103
|
+
if (picker) {
|
|
104
|
+
setOpen(true);
|
|
105
|
+
}
|
|
86
106
|
if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
|
|
87
107
|
calendarRef.current.focus();
|
|
88
108
|
}
|
|
@@ -93,21 +113,21 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
93
113
|
var target = (event.relatedTarget || document.activeElement);
|
|
94
114
|
if (calendarRef.current && calendarRef.current.contains(target) === false) {
|
|
95
115
|
setOpen(false);
|
|
96
|
-
|
|
116
|
+
setTimeToDate();
|
|
97
117
|
}
|
|
98
118
|
}
|
|
99
119
|
};
|
|
100
120
|
var handleChange = function (event) {
|
|
101
121
|
var newValue = event.target.value;
|
|
102
|
-
if (newValue.length > utils_format.
|
|
122
|
+
if (newValue.length > utils_format.DATE_WITH_TIME_LENGTH)
|
|
103
123
|
return;
|
|
104
124
|
// Позволяем вводить только цифры, точки, запятую, двоеточие и пробел
|
|
105
|
-
if (/[^\d.,
|
|
125
|
+
if (/[^\d., :]/.test(newValue)) {
|
|
106
126
|
return;
|
|
107
127
|
}
|
|
108
128
|
var dots = newValue.match(/\./g);
|
|
109
|
-
var colon = newValue.match(
|
|
110
|
-
var comma = newValue.match(
|
|
129
|
+
var colon = newValue.match(/:/g);
|
|
130
|
+
var comma = newValue.match(/,/g);
|
|
111
131
|
// Не даем вводить больше, чем 2 точки, 1 двоеточие и 1 запятую
|
|
112
132
|
if ((dots && dots.length > 2) ||
|
|
113
133
|
(colon && colon.length > 1) ||
|
|
@@ -128,37 +148,38 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
128
148
|
}
|
|
129
149
|
}
|
|
130
150
|
};
|
|
131
|
-
var
|
|
151
|
+
var handleMobileCalendarClose = function () {
|
|
132
152
|
setOpen(false);
|
|
153
|
+
setTimeToDate();
|
|
133
154
|
};
|
|
134
155
|
var handleClear = function () {
|
|
135
156
|
setValue('');
|
|
136
157
|
};
|
|
137
158
|
var handleCalendarChange = function (date) {
|
|
138
159
|
if (date) {
|
|
139
|
-
|
|
160
|
+
var newValue = utils_format.parseTimestampToDate(date);
|
|
161
|
+
setValue(newValue);
|
|
162
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(null, { date: utils_format.getFullDateTime(newValue), value: newValue });
|
|
140
163
|
}
|
|
141
164
|
};
|
|
142
165
|
var handleCalendarWrapperMouseDown = function (event) {
|
|
143
166
|
// Не дает инпуту терять фокус при выборе даты
|
|
144
167
|
event.preventDefault();
|
|
145
168
|
};
|
|
146
|
-
var handleInputWrapperClick = function () {
|
|
147
|
-
if (view === 'desktop' && !open) {
|
|
148
|
-
setOpen(true);
|
|
149
|
-
}
|
|
150
|
-
};
|
|
151
169
|
var handleIconButtonClick = function () {
|
|
152
170
|
if (!open)
|
|
153
171
|
setOpen(true);
|
|
172
|
+
if (view === 'desktop' && inputRef.current) {
|
|
173
|
+
inputRef.current.focus();
|
|
174
|
+
}
|
|
154
175
|
};
|
|
155
176
|
var renderCalendar = function () { return (
|
|
156
177
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
157
178
|
React__default.default.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
158
|
-
React__default.default.createElement(Calendar, exports.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose:
|
|
179
|
+
React__default.default.createElement(Calendar, exports.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleMobileCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(value) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
|
|
159
180
|
return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className, (_b = {},
|
|
160
181
|
_b[styles.block] = block,
|
|
161
|
-
_b)),
|
|
182
|
+
_b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
|
|
162
183
|
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, error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
|
|
163
184
|
rightAddons,
|
|
164
185
|
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 { DateTimeInputProps } from "./Component-
|
|
2
|
+
import { DateTimeInputProps } from "./Component-1ff76732";
|
|
3
3
|
type DateTimeInputDesktopProps = Omit<DateTimeInputProps, 'view'>;
|
|
4
4
|
declare const DateTimeInputDesktop: FC<DateTimeInputDesktopProps>;
|
|
5
5
|
export { DateTimeInputDesktopProps, DateTimeInputDesktop };
|
package/Component.desktop.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateTimeInput_Component = require('./Component-
|
|
3
|
+
var components_dateTimeInput_Component = require('./Component-1ff76732.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar');
|
|
|
8
8
|
require('@alfalab/core-components-icon-button');
|
|
9
9
|
require('@alfalab/core-components-input');
|
|
10
10
|
require('@alfalab/core-components-popover');
|
|
11
|
+
require('@alfalab/hooks');
|
|
11
12
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
12
13
|
require('./utils/format.js');
|
|
13
14
|
require('date-fns/isValid');
|
package/Component.mobile.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DateTimeInputProps } from "./Component-
|
|
2
|
+
import { DateTimeInputProps } from "./Component-1ff76732";
|
|
3
3
|
type DateTimeInputMobileProps = Omit<DateTimeInputProps, 'view'>;
|
|
4
4
|
declare const DateTimeInputMobile: FC<DateTimeInputMobileProps>;
|
|
5
5
|
export { DateTimeInputMobileProps, DateTimeInputMobile };
|
package/Component.mobile.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateTimeInput_Component = require('./Component-
|
|
3
|
+
var components_dateTimeInput_Component = require('./Component-1ff76732.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var coreComponentsCalendar = require('@alfalab/core-components-calendar');
|
|
6
6
|
require('react-merge-refs');
|
|
@@ -8,6 +8,7 @@ require('classnames');
|
|
|
8
8
|
require('@alfalab/core-components-icon-button');
|
|
9
9
|
require('@alfalab/core-components-input');
|
|
10
10
|
require('@alfalab/core-components-popover');
|
|
11
|
+
require('@alfalab/hooks');
|
|
11
12
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
12
13
|
require('./utils/format.js');
|
|
13
14
|
require('date-fns/isValid');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DateTimeInputProps } from "./Component-
|
|
2
|
+
import { DateTimeInputProps } from "./Component-1ff76732";
|
|
3
3
|
type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view'> & {
|
|
4
4
|
/**
|
|
5
5
|
* Контрольная точка, с нее начинается desktop версия
|
package/Component.responsive.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateTimeInput_Component = require('./Component-
|
|
3
|
+
var components_dateTimeInput_Component = require('./Component-1ff76732.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_dateTimeInput_Component = require('../../Component-
|
|
3
|
+
var components_dateTimeInput_Component = require('../../Component-1ff76732.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar');
|
|
|
8
8
|
require('@alfalab/core-components-icon-button');
|
|
9
9
|
require('@alfalab/core-components-input');
|
|
10
10
|
require('@alfalab/core-components-popover');
|
|
11
|
+
require('@alfalab/hooks');
|
|
11
12
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
12
13
|
require('../../utils/format.js');
|
|
13
14
|
require('date-fns/isValid');
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 9vegz */
|
|
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-time-
|
|
42
|
+
.date-time-input__component_wum5f {
|
|
43
43
|
display: inline-block;
|
|
44
44
|
outline: none;
|
|
45
45
|
position: relative;
|
|
46
46
|
}
|
|
47
|
-
.date-time-
|
|
47
|
+
.date-time-input__calendarContainer_wum5f {
|
|
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-time-
|
|
53
|
+
.date-time-input__calendarContainer_wum5f {
|
|
54
54
|
width: 100%;
|
|
55
55
|
min-width: 288px
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
.date-time-
|
|
58
|
+
.date-time-input__calendarResponsive_wum5f {
|
|
59
59
|
width: var(--calendar-width);
|
|
60
60
|
padding: 0 var(--gap-m);
|
|
61
61
|
}
|
|
62
|
-
.date-time-
|
|
62
|
+
.date-time-input__block_wum5f {
|
|
63
63
|
width: 100%;
|
|
64
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "../../Component-
|
|
1
|
+
export * from "../../Component-1ff76732";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateTimeInput_Component = require('../../Component-
|
|
3
|
+
var components_dateTimeInput_Component = require('../../Component-1ff76732.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar');
|
|
|
8
8
|
require('@alfalab/core-components-icon-button');
|
|
9
9
|
require('@alfalab/core-components-input');
|
|
10
10
|
require('@alfalab/core-components-popover');
|
|
11
|
+
require('@alfalab/hooks');
|
|
11
12
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
12
13
|
require('../../utils/format.js');
|
|
13
14
|
require('date-fns/isValid');
|
|
@@ -57,14 +57,14 @@ type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
|
|
|
57
57
|
/**
|
|
58
58
|
* Обработчик изменения значения
|
|
59
59
|
*/
|
|
60
|
-
onChange?: (event: ChangeEvent<HTMLInputElement
|
|
60
|
+
onChange?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
61
61
|
date: Date;
|
|
62
62
|
value: string;
|
|
63
63
|
}) => void;
|
|
64
64
|
/**
|
|
65
65
|
* Обработчик окончания ввода
|
|
66
66
|
*/
|
|
67
|
-
onComplete?: (event: ChangeEvent<HTMLInputElement
|
|
67
|
+
onComplete?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
68
68
|
date: Date;
|
|
69
69
|
value: string;
|
|
70
70
|
}) => void;
|
|
@@ -146,14 +146,14 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
|
|
|
146
146
|
/**
|
|
147
147
|
* Обработчик изменения значения
|
|
148
148
|
*/
|
|
149
|
-
onChange?: ((event: ChangeEvent<HTMLInputElement
|
|
149
|
+
onChange?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
150
150
|
date: Date;
|
|
151
151
|
value: string;
|
|
152
152
|
}) => void) | undefined;
|
|
153
153
|
/**
|
|
154
154
|
* Обработчик окончания ввода
|
|
155
155
|
*/
|
|
156
|
-
onComplete?: ((event: ChangeEvent<HTMLInputElement
|
|
156
|
+
onComplete?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
157
157
|
date: Date;
|
|
158
158
|
value: string;
|
|
159
159
|
}) => void) | undefined;
|
|
@@ -166,9 +166,6 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
|
|
|
166
166
|
*/
|
|
167
167
|
calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
|
|
168
168
|
open: boolean;
|
|
169
|
-
/**
|
|
170
|
-
* Дополнительный класс для поповера
|
|
171
|
-
*/
|
|
172
169
|
title?: string | undefined;
|
|
173
170
|
onClose?: (() => void) | undefined;
|
|
174
171
|
yearsAmount?: number | undefined;
|
|
@@ -7,6 +7,7 @@ var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
|
|
|
7
7
|
var coreComponentsIconButton = require('@alfalab/core-components-icon-button/cssm');
|
|
8
8
|
var coreComponentsInput = require('@alfalab/core-components-input/cssm');
|
|
9
9
|
var coreComponentsPopover = require('@alfalab/core-components-popover/cssm');
|
|
10
|
+
var hooks = require('@alfalab/hooks');
|
|
10
11
|
var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
|
|
11
12
|
var utils_format = require('./utils/format.js');
|
|
12
13
|
var styles = require('./components/date-time-input/index.module.css');
|
|
@@ -72,6 +73,10 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
72
73
|
React.useEffect(function () {
|
|
73
74
|
setOpen(defaultOpen);
|
|
74
75
|
}, [defaultOpen]);
|
|
76
|
+
hooks.useDidUpdateEffect(function () {
|
|
77
|
+
var newPropValue = propValue || '';
|
|
78
|
+
setValue(function (prevValue) { return (prevValue === propValue ? prevValue : newPropValue); });
|
|
79
|
+
}, [propValue]);
|
|
75
80
|
var checkInputValueIsValid = function (newInputValue) {
|
|
76
81
|
if (!newInputValue || error)
|
|
77
82
|
return false;
|
|
@@ -80,8 +85,23 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
80
85
|
coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
|
|
81
86
|
!offDays.includes(dateValue));
|
|
82
87
|
};
|
|
88
|
+
var setTimeToDate = function () {
|
|
89
|
+
setValue(function (prevValue) {
|
|
90
|
+
var dateWithTime = utils_format.addTimeToDate(prevValue);
|
|
91
|
+
if (dateWithTime !== prevValue && dateWithTime.length === utils_format.DATE_WITH_TIME_LENGTH) {
|
|
92
|
+
onComplete === null || onComplete === void 0 ? void 0 : onComplete(null, {
|
|
93
|
+
date: utils_format.getFullDateTime(dateWithTime),
|
|
94
|
+
value: dateWithTime,
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
return dateWithTime;
|
|
98
|
+
});
|
|
99
|
+
};
|
|
83
100
|
var handleInputWrapperFocus = function (event) {
|
|
84
101
|
if (view === 'desktop') {
|
|
102
|
+
if (picker) {
|
|
103
|
+
setOpen(true);
|
|
104
|
+
}
|
|
85
105
|
if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
|
|
86
106
|
calendarRef.current.focus();
|
|
87
107
|
}
|
|
@@ -92,21 +112,21 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
92
112
|
var target = (event.relatedTarget || document.activeElement);
|
|
93
113
|
if (calendarRef.current && calendarRef.current.contains(target) === false) {
|
|
94
114
|
setOpen(false);
|
|
95
|
-
|
|
115
|
+
setTimeToDate();
|
|
96
116
|
}
|
|
97
117
|
}
|
|
98
118
|
};
|
|
99
119
|
var handleChange = function (event) {
|
|
100
120
|
var newValue = event.target.value;
|
|
101
|
-
if (newValue.length > utils_format.
|
|
121
|
+
if (newValue.length > utils_format.DATE_WITH_TIME_LENGTH)
|
|
102
122
|
return;
|
|
103
123
|
// Позволяем вводить только цифры, точки, запятую, двоеточие и пробел
|
|
104
|
-
if (/[^\d.,
|
|
124
|
+
if (/[^\d., :]/.test(newValue)) {
|
|
105
125
|
return;
|
|
106
126
|
}
|
|
107
127
|
var dots = newValue.match(/\./g);
|
|
108
|
-
var colon = newValue.match(
|
|
109
|
-
var comma = newValue.match(
|
|
128
|
+
var colon = newValue.match(/:/g);
|
|
129
|
+
var comma = newValue.match(/,/g);
|
|
110
130
|
// Не даем вводить больше, чем 2 точки, 1 двоеточие и 1 запятую
|
|
111
131
|
if ((dots && dots.length > 2) ||
|
|
112
132
|
(colon && colon.length > 1) ||
|
|
@@ -127,37 +147,38 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
127
147
|
}
|
|
128
148
|
}
|
|
129
149
|
};
|
|
130
|
-
var
|
|
150
|
+
var handleMobileCalendarClose = function () {
|
|
131
151
|
setOpen(false);
|
|
152
|
+
setTimeToDate();
|
|
132
153
|
};
|
|
133
154
|
var handleClear = function () {
|
|
134
155
|
setValue('');
|
|
135
156
|
};
|
|
136
157
|
var handleCalendarChange = function (date) {
|
|
137
158
|
if (date) {
|
|
138
|
-
|
|
159
|
+
var newValue = utils_format.parseTimestampToDate(date);
|
|
160
|
+
setValue(newValue);
|
|
161
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(null, { date: utils_format.getFullDateTime(newValue), value: newValue });
|
|
139
162
|
}
|
|
140
163
|
};
|
|
141
164
|
var handleCalendarWrapperMouseDown = function (event) {
|
|
142
165
|
// Не дает инпуту терять фокус при выборе даты
|
|
143
166
|
event.preventDefault();
|
|
144
167
|
};
|
|
145
|
-
var handleInputWrapperClick = function () {
|
|
146
|
-
if (view === 'desktop' && !open) {
|
|
147
|
-
setOpen(true);
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
168
|
var handleIconButtonClick = function () {
|
|
151
169
|
if (!open)
|
|
152
170
|
setOpen(true);
|
|
171
|
+
if (view === 'desktop' && inputRef.current) {
|
|
172
|
+
inputRef.current.focus();
|
|
173
|
+
}
|
|
153
174
|
};
|
|
154
175
|
var renderCalendar = function () { return (
|
|
155
176
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
156
177
|
React__default.default.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
157
|
-
React__default.default.createElement(Calendar, exports.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose:
|
|
178
|
+
React__default.default.createElement(Calendar, exports.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleMobileCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(value) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
|
|
158
179
|
return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {},
|
|
159
180
|
_b[styles__default.default.block] = block,
|
|
160
|
-
_b)),
|
|
181
|
+
_b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
|
|
161
182
|
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, error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
|
|
162
183
|
rightAddons,
|
|
163
184
|
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 { DateTimeInputProps } from "./Component-
|
|
2
|
+
import { DateTimeInputProps } from "./Component-b91f18e8";
|
|
3
3
|
type DateTimeInputDesktopProps = Omit<DateTimeInputProps, 'view'>;
|
|
4
4
|
declare const DateTimeInputDesktop: FC<DateTimeInputDesktopProps>;
|
|
5
5
|
export { DateTimeInputDesktopProps, DateTimeInputDesktop };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateTimeInput_Component = require('./Component-
|
|
3
|
+
var components_dateTimeInput_Component = require('./Component-b91f18e8.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar/cssm');
|
|
|
8
8
|
require('@alfalab/core-components-icon-button/cssm');
|
|
9
9
|
require('@alfalab/core-components-input/cssm');
|
|
10
10
|
require('@alfalab/core-components-popover/cssm');
|
|
11
|
+
require('@alfalab/hooks');
|
|
11
12
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
12
13
|
require('./utils/format.js');
|
|
13
14
|
require('date-fns/isValid');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DateTimeInputProps } from "./Component-
|
|
2
|
+
import { DateTimeInputProps } from "./Component-b91f18e8";
|
|
3
3
|
type DateTimeInputMobileProps = Omit<DateTimeInputProps, 'view'>;
|
|
4
4
|
declare const DateTimeInputMobile: FC<DateTimeInputMobileProps>;
|
|
5
5
|
export { DateTimeInputMobileProps, DateTimeInputMobile };
|
package/cssm/Component.mobile.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateTimeInput_Component = require('./Component-
|
|
3
|
+
var components_dateTimeInput_Component = require('./Component-b91f18e8.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
|
|
6
6
|
require('react-merge-refs');
|
|
@@ -8,6 +8,7 @@ require('classnames');
|
|
|
8
8
|
require('@alfalab/core-components-icon-button/cssm');
|
|
9
9
|
require('@alfalab/core-components-input/cssm');
|
|
10
10
|
require('@alfalab/core-components-popover/cssm');
|
|
11
|
+
require('@alfalab/hooks');
|
|
11
12
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
12
13
|
require('./utils/format.js');
|
|
13
14
|
require('date-fns/isValid');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DateTimeInputProps } from "./Component-
|
|
2
|
+
import { DateTimeInputProps } from "./Component-b91f18e8";
|
|
3
3
|
type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view'> & {
|
|
4
4
|
/**
|
|
5
5
|
* Контрольная точка, с нее начинается desktop версия
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateTimeInput_Component = require('./Component-
|
|
3
|
+
var components_dateTimeInput_Component = require('./Component-b91f18e8.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_dateTimeInput_Component = require('../../Component-
|
|
3
|
+
var components_dateTimeInput_Component = require('../../Component-b91f18e8.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar/cssm');
|
|
|
8
8
|
require('@alfalab/core-components-icon-button/cssm');
|
|
9
9
|
require('@alfalab/core-components-input/cssm');
|
|
10
10
|
require('@alfalab/core-components-popover/cssm');
|
|
11
|
+
require('@alfalab/hooks');
|
|
11
12
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
12
13
|
require('../../utils/format.js');
|
|
13
14
|
require('./index.module.css');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "../../Component-
|
|
1
|
+
export * from "../../Component-b91f18e8";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var components_dateTimeInput_Component = require('../../Component-
|
|
3
|
+
var components_dateTimeInput_Component = require('../../Component-b91f18e8.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-merge-refs');
|
|
6
6
|
require('classnames');
|
|
@@ -8,6 +8,7 @@ require('@alfalab/core-components-calendar/cssm');
|
|
|
8
8
|
require('@alfalab/core-components-icon-button/cssm');
|
|
9
9
|
require('@alfalab/core-components-input/cssm');
|
|
10
10
|
require('@alfalab/core-components-popover/cssm');
|
|
11
|
+
require('@alfalab/hooks');
|
|
11
12
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
12
13
|
require('../../utils/format.js');
|
|
13
14
|
require('date-fns/isValid');
|
|
@@ -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-b91f18e8.js');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-merge-refs');
|
|
7
7
|
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/isValid');
|
package/cssm/index.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { DateTimeInputResponsive as DateTimeInput
|
|
1
|
+
export { DateTimeInputResponsive as DateTimeInput } from "./responsive";
|
|
2
|
+
export type { DateTimeInputResponsiveProps as DateTimeInputProps } from "./responsive";
|