@alfalab/core-components-calendar-input 8.2.28 → 8.3.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/components/calendar-input/Component.d.ts +31 -1
- package/components/calendar-input/Component.js +49 -35
- package/components/calendar-input/index.css +11 -11
- package/cssm/components/calendar-input/Component.d.ts +31 -1
- package/cssm/components/calendar-input/Component.js +48 -34
- package/esm/components/calendar-input/Component.d.ts +31 -1
- package/esm/components/calendar-input/Component.js +52 -38
- package/esm/components/calendar-input/index.css +11 -11
- package/modern/components/calendar-input/Component.d.ts +31 -1
- package/modern/components/calendar-input/Component.js +50 -36
- package/modern/components/calendar-input/index.css +11 -11
- package/package.json +4 -7
- package/send-stats.js +0 -82
|
@@ -88,6 +88,14 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
|
|
|
88
88
|
* Обработчик изменения календаря
|
|
89
89
|
*/
|
|
90
90
|
onCalendarChange?: CalendarProps['onChange'];
|
|
91
|
+
/**
|
|
92
|
+
* Обработчик открытия календаря
|
|
93
|
+
*/
|
|
94
|
+
onCalendarOpen?: () => void;
|
|
95
|
+
/**
|
|
96
|
+
* Обработчик закрытия календаря
|
|
97
|
+
*/
|
|
98
|
+
onCalendarClose?: () => void;
|
|
91
99
|
/**
|
|
92
100
|
* Позиционирование поповера с календарем
|
|
93
101
|
*/
|
|
@@ -104,6 +112,10 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
|
|
|
104
112
|
* Отображение компонента в мобильном или десктопном виде
|
|
105
113
|
*/
|
|
106
114
|
view?: 'desktop' | 'mobile';
|
|
115
|
+
/**
|
|
116
|
+
* Запретить ввод с клавиатуры
|
|
117
|
+
*/
|
|
118
|
+
disableUserInput?: boolean;
|
|
107
119
|
};
|
|
108
120
|
declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps, "onChange" | "mobileMode"> & {
|
|
109
121
|
/**
|
|
@@ -124,7 +136,13 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
124
136
|
calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
|
|
125
137
|
open: boolean;
|
|
126
138
|
title?: string | undefined;
|
|
127
|
-
onClose?: (() => void) | undefined;
|
|
139
|
+
onClose?: (() => void) | undefined; /**
|
|
140
|
+
* Начальное значение инпута
|
|
141
|
+
*/
|
|
142
|
+
onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) => void) | undefined;
|
|
143
|
+
/**
|
|
144
|
+
* Месяц в календаре по умолчанию (timestamp)
|
|
145
|
+
*/
|
|
128
146
|
yearsAmount?: number | undefined;
|
|
129
147
|
hasHeader?: boolean | undefined;
|
|
130
148
|
allowSelectionFromEmptyRange?: boolean | undefined;
|
|
@@ -196,6 +214,14 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
196
214
|
* Обработчик изменения календаря
|
|
197
215
|
*/
|
|
198
216
|
onCalendarChange?: CalendarProps['onChange'];
|
|
217
|
+
/**
|
|
218
|
+
* Обработчик открытия календаря
|
|
219
|
+
*/
|
|
220
|
+
onCalendarOpen?: (() => void) | undefined;
|
|
221
|
+
/**
|
|
222
|
+
* Обработчик закрытия календаря
|
|
223
|
+
*/
|
|
224
|
+
onCalendarClose?: (() => void) | undefined;
|
|
199
225
|
/**
|
|
200
226
|
* Позиционирование поповера с календарем
|
|
201
227
|
*/
|
|
@@ -212,5 +238,9 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
212
238
|
* Отображение компонента в мобильном или десктопном виде
|
|
213
239
|
*/
|
|
214
240
|
view?: "mobile" | "desktop" | undefined;
|
|
241
|
+
/**
|
|
242
|
+
* Запретить ввод с клавиатуры
|
|
243
|
+
*/
|
|
244
|
+
disableUserInput?: boolean | undefined;
|
|
215
245
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
216
246
|
export { CalendarInputProps, CalendarInput };
|
|
@@ -21,22 +21,22 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
21
21
|
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
22
22
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
23
23
|
|
|
24
|
-
var styles = {"component":"calendar-
|
|
24
|
+
var styles = {"component":"calendar-input__component_nt1fu","block":"calendar-input__block_nt1fu","calendarContainer":"calendar-input__calendarContainer_nt1fu","calendarResponsive":"calendar-input__calendarResponsive_nt1fu","calendarIcon":"calendar-input__calendarIcon_nt1fu","nativeInput":"calendar-input__nativeInput_nt1fu"};
|
|
25
25
|
require('./index.css')
|
|
26
26
|
|
|
27
27
|
var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
28
28
|
var _b, _c;
|
|
29
29
|
var _d;
|
|
30
|
-
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className
|
|
30
|
+
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, _f = _a.defaultOpen, defaultOpen = _f === void 0 ? false : _f, defaultMonth = _a.defaultMonth, _g = _a.defaultValue, defaultValue = _g === void 0 ? '' : _g, _h = _a.calendarPosition, calendarPosition = _h === void 0 ? 'popover' : _h, value = _a.value, dataTestId = _a.dataTestId, _j = _a.calendarProps, calendarProps = _j === void 0 ? {} : _j, _k = _a.minDate, minDate = _k === void 0 ? calendarProps.minDate : _k, _l = _a.maxDate, maxDate = _l === void 0 ? calendarProps.maxDate : _l, _m = _a.offDays, offDays = _m === void 0 ? calendarProps.offDays || [] : _m, _o = _a.events, events = _o === void 0 ? calendarProps.events || [] : _o, preventFlip = _a.preventFlip, _p = _a.mobileMode, mobileMode = _p === void 0 ? 'popover' : _p, _q = _a.wrapperRef, wrapperRef = _q === void 0 ? null : _q, disabled = _a.disabled, _r = _a.onChange, onChange = _r === void 0 ? function () { return null; } : _r, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, onCalendarOpen = _a.onCalendarOpen, onCalendarClose = _a.onCalendarClose, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _s = _a.disableUserInput, disableUserInput = _s === void 0 ? false : _s, _t = _a.Calendar, Calendar = _t === void 0 ? coreComponentsCalendar.Calendar : _t, _u = _a.popoverPosition, popoverPosition = _u === void 0 ? 'bottom-start' : _u, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, _v = _a.view, view = _v === void 0 ? 'desktop' : _v, restProps = tslib.__rest(_a, ["block", "className", "inputClassName", "popoverClassName", "defaultOpen", "defaultMonth", "defaultValue", "calendarPosition", "value", "dataTestId", "calendarProps", "minDate", "maxDate", "offDays", "events", "preventFlip", "mobileMode", "wrapperRef", "disabled", "onChange", "onInputChange", "onCalendarChange", "onCalendarOpen", "onCalendarClose", "onKeyDown", "readOnly", "disableUserInput", "Calendar", "popoverPosition", "zIndexPopover", "useAnchorWidth", "rightAddons", "error", "view"]);
|
|
31
31
|
var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
|
|
32
32
|
var shouldRenderNative = utils.SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
|
|
33
33
|
var shouldRenderOnlyInput = mobileMode === 'input';
|
|
34
34
|
var shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
|
|
35
35
|
var shouldRenderPopover = calendarPosition === 'popover' && !shouldRenderNative && !shouldRenderOnlyInput;
|
|
36
|
-
var
|
|
37
|
-
var
|
|
36
|
+
var _w = React.useState(false), open = _w[0], setOpen = _w[1];
|
|
37
|
+
var _x = React.useState(value || defaultValue), inputValue = _x[0], setInputValue = _x[1];
|
|
38
38
|
var calendarValue = inputValue ? coreComponentsDateInput.parseDateString(inputValue).getTime() : undefined;
|
|
39
|
-
var checkInputValueIsValid =
|
|
39
|
+
var checkInputValueIsValid = function (newInputValue) {
|
|
40
40
|
if (!newInputValue)
|
|
41
41
|
return false;
|
|
42
42
|
var dateValue = coreComponentsDateInput.parseDateString(newInputValue).getTime();
|
|
@@ -44,47 +44,64 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
|
44
44
|
coreComponentsDateInput.isCompleteDateInput(newInputValue) &&
|
|
45
45
|
coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
|
|
46
46
|
!offDays.includes(dateValue));
|
|
47
|
-
}
|
|
47
|
+
};
|
|
48
48
|
var inputDisabled = disabled || readOnly;
|
|
49
49
|
var inputWrapperRef = React.useRef(null);
|
|
50
50
|
var calendarRef = React.useRef(null);
|
|
51
|
-
var
|
|
51
|
+
var openCalendar = function () {
|
|
52
|
+
setOpen(true);
|
|
53
|
+
onCalendarOpen === null || onCalendarOpen === void 0 ? void 0 : onCalendarOpen();
|
|
54
|
+
};
|
|
55
|
+
var closeCalendar = function () {
|
|
56
|
+
setOpen(false);
|
|
57
|
+
onCalendarClose === null || onCalendarClose === void 0 ? void 0 : onCalendarClose();
|
|
58
|
+
};
|
|
59
|
+
var handleKeyDown = function (event) {
|
|
52
60
|
if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
|
|
53
|
-
|
|
61
|
+
if (open) {
|
|
62
|
+
closeCalendar();
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
openCalendar();
|
|
66
|
+
}
|
|
54
67
|
}
|
|
55
68
|
if (event.key === 'Escape') {
|
|
56
|
-
|
|
69
|
+
closeCalendar();
|
|
57
70
|
}
|
|
58
|
-
}
|
|
59
|
-
var handleClick =
|
|
71
|
+
};
|
|
72
|
+
var handleClick = function () {
|
|
60
73
|
if (!open)
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
var handleFocus =
|
|
74
|
+
openCalendar();
|
|
75
|
+
};
|
|
76
|
+
var handleFocus = function (event) {
|
|
64
77
|
if (view === 'desktop') {
|
|
65
|
-
|
|
78
|
+
openCalendar();
|
|
66
79
|
if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
|
|
67
80
|
calendarRef.current.focus();
|
|
68
81
|
}
|
|
69
82
|
}
|
|
70
|
-
}
|
|
71
|
-
var handleBlur =
|
|
83
|
+
};
|
|
84
|
+
var handleBlur = function (event) {
|
|
72
85
|
if (view === 'desktop') {
|
|
73
86
|
var target = (event.relatedTarget || document.activeElement);
|
|
74
87
|
if (calendarRef.current && calendarRef.current.contains(target) === false) {
|
|
75
|
-
|
|
88
|
+
closeCalendar();
|
|
76
89
|
}
|
|
77
90
|
}
|
|
78
|
-
}
|
|
79
|
-
var handleInputKeyDown =
|
|
91
|
+
};
|
|
92
|
+
var handleInputKeyDown = function (event) {
|
|
93
|
+
var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
|
|
94
|
+
if (disableUserInput && !isCopy) {
|
|
95
|
+
event.preventDefault();
|
|
96
|
+
}
|
|
80
97
|
if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
|
|
81
98
|
event.preventDefault();
|
|
82
99
|
calendarRef.current.focus();
|
|
83
100
|
}
|
|
84
101
|
if (onKeyDown)
|
|
85
102
|
onKeyDown(event);
|
|
86
|
-
}
|
|
87
|
-
var changeHandler =
|
|
103
|
+
};
|
|
104
|
+
var changeHandler = function (event, newValue, newDate, initiator, shouldChange) {
|
|
88
105
|
if (initiator === void 0) { initiator = 'input'; }
|
|
89
106
|
if (shouldChange === void 0) { shouldChange = true; }
|
|
90
107
|
if (initiator === 'input' && event && onInputChange) {
|
|
@@ -97,25 +114,22 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
|
97
114
|
if (shouldChange) {
|
|
98
115
|
onChange(event, { date: newDate, value: newValue });
|
|
99
116
|
}
|
|
100
|
-
}
|
|
101
|
-
var handleInputChange =
|
|
117
|
+
};
|
|
118
|
+
var handleInputChange = function (event, payload) {
|
|
102
119
|
changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
|
|
103
|
-
}
|
|
104
|
-
var handleCalendarChange =
|
|
120
|
+
};
|
|
121
|
+
var handleCalendarChange = function (date) {
|
|
105
122
|
if (date) {
|
|
106
123
|
changeHandler(null, coreComponentsDateInput.formatDate(date), new Date(date), 'calendar');
|
|
107
124
|
}
|
|
108
125
|
if (view === 'desktop') {
|
|
109
|
-
|
|
126
|
+
closeCalendar();
|
|
110
127
|
}
|
|
111
|
-
}
|
|
112
|
-
var handleCalendarWrapperMouseDown =
|
|
128
|
+
};
|
|
129
|
+
var handleCalendarWrapperMouseDown = function (event) {
|
|
113
130
|
// Не дает инпуту терять фокус при выборе даты
|
|
114
131
|
event.preventDefault();
|
|
115
|
-
}
|
|
116
|
-
var handleCalendarClose = React.useCallback(function () {
|
|
117
|
-
setOpen(false);
|
|
118
|
-
}, []);
|
|
132
|
+
};
|
|
119
133
|
React.useEffect(function () {
|
|
120
134
|
setOpen(defaultOpen);
|
|
121
135
|
}, [defaultOpen]);
|
|
@@ -127,13 +141,13 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
|
127
141
|
var renderCalendar = function () { return (
|
|
128
142
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
129
143
|
React__default.default.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
130
|
-
React__default.default.createElement(Calendar, tslib.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose:
|
|
144
|
+
React__default.default.createElement(Calendar, tslib.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: closeCalendar, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
|
|
131
145
|
return (
|
|
132
146
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
133
147
|
React__default.default.createElement("div", { className: cn__default.default(styles.component, className, (_b = {},
|
|
134
148
|
_b[styles.block] = block,
|
|
135
149
|
_b)), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
|
|
136
|
-
React__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__assign({}, restProps, { ref: ref, wrapperRef: mergeRefs__default.default([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
|
|
150
|
+
React__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__assign({}, restProps, { ref: ref, wrapperRef: mergeRefs__default.default([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, inputClassName: inputClassName, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
|
|
137
151
|
rightAddons,
|
|
138
152
|
shouldRenderPopover && (React__default.default.createElement(CalendarMIcon.CalendarMIcon, { className: styles.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
|
|
139
153
|
shouldRenderStatic && renderCalendar(),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1314w */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-border-secondary: #e9e9eb;
|
|
@@ -43,31 +43,31 @@
|
|
|
43
43
|
} :root {
|
|
44
44
|
--calendar-input-icon-color: var(--color-light-graphic-primary);
|
|
45
45
|
--calendar-input-popover-border-radius: var(--border-radius-m);
|
|
46
|
-
} .calendar-
|
|
46
|
+
} .calendar-input__component_nt1fu {
|
|
47
47
|
display: inline-block;
|
|
48
48
|
outline: none;
|
|
49
49
|
position: relative;
|
|
50
|
-
} .calendar-
|
|
50
|
+
} .calendar-input__block_nt1fu {
|
|
51
51
|
width: 100%;
|
|
52
|
-
} .calendar-
|
|
52
|
+
} .calendar-input__calendarContainer_nt1fu {
|
|
53
53
|
display: inline-block;
|
|
54
54
|
box-sizing: border-box;
|
|
55
55
|
border-radius: var(--calendar-input-popover-border-radius);
|
|
56
56
|
border: 1px solid var(--color-light-border-secondary)
|
|
57
|
-
} @media (max-width: 374px) { .calendar-
|
|
57
|
+
} @media (max-width: 374px) { .calendar-input__calendarContainer_nt1fu {
|
|
58
58
|
width: 100%;
|
|
59
59
|
min-width: 288px
|
|
60
60
|
}
|
|
61
|
-
} .calendar-
|
|
61
|
+
} .calendar-input__calendarResponsive_nt1fu {
|
|
62
62
|
width: var(--calendar-width);
|
|
63
|
-
} .calendar-
|
|
63
|
+
} .calendar-input__calendarIcon_nt1fu {
|
|
64
64
|
width: 24px;
|
|
65
65
|
height: 24px;
|
|
66
66
|
display: block;
|
|
67
67
|
color: var(--calendar-input-icon-color)
|
|
68
|
-
} .calendar-
|
|
68
|
+
} .calendar-input__calendarIcon_nt1fu:not(:only-child) {
|
|
69
69
|
margin-right: var(--gap-2xs);
|
|
70
|
-
} .calendar-
|
|
70
|
+
} .calendar-input__nativeInput_nt1fu {
|
|
71
71
|
opacity: 0;
|
|
72
72
|
position: absolute;
|
|
73
73
|
top: 0;
|
|
@@ -77,8 +77,8 @@
|
|
|
77
77
|
-webkit-appearance: none;
|
|
78
78
|
appearance: none;
|
|
79
79
|
z-index: 1
|
|
80
|
-
} .calendar-
|
|
80
|
+
} .calendar-input__nativeInput_nt1fu::-webkit-calendar-picker-indicator {
|
|
81
81
|
display: none;
|
|
82
|
-
} .calendar-
|
|
82
|
+
} .calendar-input__nativeInput_nt1fu::-webkit-inner-spin-button {
|
|
83
83
|
display: none;
|
|
84
84
|
}
|
|
@@ -88,6 +88,14 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
|
|
|
88
88
|
* Обработчик изменения календаря
|
|
89
89
|
*/
|
|
90
90
|
onCalendarChange?: CalendarProps['onChange'];
|
|
91
|
+
/**
|
|
92
|
+
* Обработчик открытия календаря
|
|
93
|
+
*/
|
|
94
|
+
onCalendarOpen?: () => void;
|
|
95
|
+
/**
|
|
96
|
+
* Обработчик закрытия календаря
|
|
97
|
+
*/
|
|
98
|
+
onCalendarClose?: () => void;
|
|
91
99
|
/**
|
|
92
100
|
* Позиционирование поповера с календарем
|
|
93
101
|
*/
|
|
@@ -104,6 +112,10 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
|
|
|
104
112
|
* Отображение компонента в мобильном или десктопном виде
|
|
105
113
|
*/
|
|
106
114
|
view?: 'desktop' | 'mobile';
|
|
115
|
+
/**
|
|
116
|
+
* Запретить ввод с клавиатуры
|
|
117
|
+
*/
|
|
118
|
+
disableUserInput?: boolean;
|
|
107
119
|
};
|
|
108
120
|
declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps, "onChange" | "mobileMode"> & {
|
|
109
121
|
/**
|
|
@@ -124,7 +136,13 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
124
136
|
calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
|
|
125
137
|
open: boolean;
|
|
126
138
|
title?: string | undefined;
|
|
127
|
-
onClose?: (() => void) | undefined;
|
|
139
|
+
onClose?: (() => void) | undefined; /**
|
|
140
|
+
* Начальное значение инпута
|
|
141
|
+
*/
|
|
142
|
+
onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) => void) | undefined;
|
|
143
|
+
/**
|
|
144
|
+
* Месяц в календаре по умолчанию (timestamp)
|
|
145
|
+
*/
|
|
128
146
|
yearsAmount?: number | undefined;
|
|
129
147
|
hasHeader?: boolean | undefined;
|
|
130
148
|
allowSelectionFromEmptyRange?: boolean | undefined;
|
|
@@ -196,6 +214,14 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
196
214
|
* Обработчик изменения календаря
|
|
197
215
|
*/
|
|
198
216
|
onCalendarChange?: CalendarProps['onChange'];
|
|
217
|
+
/**
|
|
218
|
+
* Обработчик открытия календаря
|
|
219
|
+
*/
|
|
220
|
+
onCalendarOpen?: (() => void) | undefined;
|
|
221
|
+
/**
|
|
222
|
+
* Обработчик закрытия календаря
|
|
223
|
+
*/
|
|
224
|
+
onCalendarClose?: (() => void) | undefined;
|
|
199
225
|
/**
|
|
200
226
|
* Позиционирование поповера с календарем
|
|
201
227
|
*/
|
|
@@ -212,5 +238,9 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
212
238
|
* Отображение компонента в мобильном или десктопном виде
|
|
213
239
|
*/
|
|
214
240
|
view?: "mobile" | "desktop" | undefined;
|
|
241
|
+
/**
|
|
242
|
+
* Запретить ввод с клавиатуры
|
|
243
|
+
*/
|
|
244
|
+
disableUserInput?: boolean | undefined;
|
|
215
245
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
216
246
|
export { CalendarInputProps, CalendarInput };
|
|
@@ -26,16 +26,16 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
|
26
26
|
var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
27
27
|
var _b, _c;
|
|
28
28
|
var _d;
|
|
29
|
-
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className
|
|
29
|
+
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, _f = _a.defaultOpen, defaultOpen = _f === void 0 ? false : _f, defaultMonth = _a.defaultMonth, _g = _a.defaultValue, defaultValue = _g === void 0 ? '' : _g, _h = _a.calendarPosition, calendarPosition = _h === void 0 ? 'popover' : _h, value = _a.value, dataTestId = _a.dataTestId, _j = _a.calendarProps, calendarProps = _j === void 0 ? {} : _j, _k = _a.minDate, minDate = _k === void 0 ? calendarProps.minDate : _k, _l = _a.maxDate, maxDate = _l === void 0 ? calendarProps.maxDate : _l, _m = _a.offDays, offDays = _m === void 0 ? calendarProps.offDays || [] : _m, _o = _a.events, events = _o === void 0 ? calendarProps.events || [] : _o, preventFlip = _a.preventFlip, _p = _a.mobileMode, mobileMode = _p === void 0 ? 'popover' : _p, _q = _a.wrapperRef, wrapperRef = _q === void 0 ? null : _q, disabled = _a.disabled, _r = _a.onChange, onChange = _r === void 0 ? function () { return null; } : _r, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, onCalendarOpen = _a.onCalendarOpen, onCalendarClose = _a.onCalendarClose, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _s = _a.disableUserInput, disableUserInput = _s === void 0 ? false : _s, _t = _a.Calendar, Calendar = _t === void 0 ? coreComponentsCalendar.Calendar : _t, _u = _a.popoverPosition, popoverPosition = _u === void 0 ? 'bottom-start' : _u, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, _v = _a.view, view = _v === void 0 ? 'desktop' : _v, restProps = tslib.__rest(_a, ["block", "className", "inputClassName", "popoverClassName", "defaultOpen", "defaultMonth", "defaultValue", "calendarPosition", "value", "dataTestId", "calendarProps", "minDate", "maxDate", "offDays", "events", "preventFlip", "mobileMode", "wrapperRef", "disabled", "onChange", "onInputChange", "onCalendarChange", "onCalendarOpen", "onCalendarClose", "onKeyDown", "readOnly", "disableUserInput", "Calendar", "popoverPosition", "zIndexPopover", "useAnchorWidth", "rightAddons", "error", "view"]);
|
|
30
30
|
var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
|
|
31
31
|
var shouldRenderNative = utils.SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
|
|
32
32
|
var shouldRenderOnlyInput = mobileMode === 'input';
|
|
33
33
|
var shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
|
|
34
34
|
var shouldRenderPopover = calendarPosition === 'popover' && !shouldRenderNative && !shouldRenderOnlyInput;
|
|
35
|
-
var
|
|
36
|
-
var
|
|
35
|
+
var _w = React.useState(false), open = _w[0], setOpen = _w[1];
|
|
36
|
+
var _x = React.useState(value || defaultValue), inputValue = _x[0], setInputValue = _x[1];
|
|
37
37
|
var calendarValue = inputValue ? coreComponentsDateInput.parseDateString(inputValue).getTime() : undefined;
|
|
38
|
-
var checkInputValueIsValid =
|
|
38
|
+
var checkInputValueIsValid = function (newInputValue) {
|
|
39
39
|
if (!newInputValue)
|
|
40
40
|
return false;
|
|
41
41
|
var dateValue = coreComponentsDateInput.parseDateString(newInputValue).getTime();
|
|
@@ -43,47 +43,64 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
|
43
43
|
coreComponentsDateInput.isCompleteDateInput(newInputValue) &&
|
|
44
44
|
coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
|
|
45
45
|
!offDays.includes(dateValue));
|
|
46
|
-
}
|
|
46
|
+
};
|
|
47
47
|
var inputDisabled = disabled || readOnly;
|
|
48
48
|
var inputWrapperRef = React.useRef(null);
|
|
49
49
|
var calendarRef = React.useRef(null);
|
|
50
|
-
var
|
|
50
|
+
var openCalendar = function () {
|
|
51
|
+
setOpen(true);
|
|
52
|
+
onCalendarOpen === null || onCalendarOpen === void 0 ? void 0 : onCalendarOpen();
|
|
53
|
+
};
|
|
54
|
+
var closeCalendar = function () {
|
|
55
|
+
setOpen(false);
|
|
56
|
+
onCalendarClose === null || onCalendarClose === void 0 ? void 0 : onCalendarClose();
|
|
57
|
+
};
|
|
58
|
+
var handleKeyDown = function (event) {
|
|
51
59
|
if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
|
|
52
|
-
|
|
60
|
+
if (open) {
|
|
61
|
+
closeCalendar();
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
openCalendar();
|
|
65
|
+
}
|
|
53
66
|
}
|
|
54
67
|
if (event.key === 'Escape') {
|
|
55
|
-
|
|
68
|
+
closeCalendar();
|
|
56
69
|
}
|
|
57
|
-
}
|
|
58
|
-
var handleClick =
|
|
70
|
+
};
|
|
71
|
+
var handleClick = function () {
|
|
59
72
|
if (!open)
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
var handleFocus =
|
|
73
|
+
openCalendar();
|
|
74
|
+
};
|
|
75
|
+
var handleFocus = function (event) {
|
|
63
76
|
if (view === 'desktop') {
|
|
64
|
-
|
|
77
|
+
openCalendar();
|
|
65
78
|
if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
|
|
66
79
|
calendarRef.current.focus();
|
|
67
80
|
}
|
|
68
81
|
}
|
|
69
|
-
}
|
|
70
|
-
var handleBlur =
|
|
82
|
+
};
|
|
83
|
+
var handleBlur = function (event) {
|
|
71
84
|
if (view === 'desktop') {
|
|
72
85
|
var target = (event.relatedTarget || document.activeElement);
|
|
73
86
|
if (calendarRef.current && calendarRef.current.contains(target) === false) {
|
|
74
|
-
|
|
87
|
+
closeCalendar();
|
|
75
88
|
}
|
|
76
89
|
}
|
|
77
|
-
}
|
|
78
|
-
var handleInputKeyDown =
|
|
90
|
+
};
|
|
91
|
+
var handleInputKeyDown = function (event) {
|
|
92
|
+
var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
|
|
93
|
+
if (disableUserInput && !isCopy) {
|
|
94
|
+
event.preventDefault();
|
|
95
|
+
}
|
|
79
96
|
if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
|
|
80
97
|
event.preventDefault();
|
|
81
98
|
calendarRef.current.focus();
|
|
82
99
|
}
|
|
83
100
|
if (onKeyDown)
|
|
84
101
|
onKeyDown(event);
|
|
85
|
-
}
|
|
86
|
-
var changeHandler =
|
|
102
|
+
};
|
|
103
|
+
var changeHandler = function (event, newValue, newDate, initiator, shouldChange) {
|
|
87
104
|
if (initiator === void 0) { initiator = 'input'; }
|
|
88
105
|
if (shouldChange === void 0) { shouldChange = true; }
|
|
89
106
|
if (initiator === 'input' && event && onInputChange) {
|
|
@@ -96,25 +113,22 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
|
96
113
|
if (shouldChange) {
|
|
97
114
|
onChange(event, { date: newDate, value: newValue });
|
|
98
115
|
}
|
|
99
|
-
}
|
|
100
|
-
var handleInputChange =
|
|
116
|
+
};
|
|
117
|
+
var handleInputChange = function (event, payload) {
|
|
101
118
|
changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
|
|
102
|
-
}
|
|
103
|
-
var handleCalendarChange =
|
|
119
|
+
};
|
|
120
|
+
var handleCalendarChange = function (date) {
|
|
104
121
|
if (date) {
|
|
105
122
|
changeHandler(null, coreComponentsDateInput.formatDate(date), new Date(date), 'calendar');
|
|
106
123
|
}
|
|
107
124
|
if (view === 'desktop') {
|
|
108
|
-
|
|
125
|
+
closeCalendar();
|
|
109
126
|
}
|
|
110
|
-
}
|
|
111
|
-
var handleCalendarWrapperMouseDown =
|
|
127
|
+
};
|
|
128
|
+
var handleCalendarWrapperMouseDown = function (event) {
|
|
112
129
|
// Не дает инпуту терять фокус при выборе даты
|
|
113
130
|
event.preventDefault();
|
|
114
|
-
}
|
|
115
|
-
var handleCalendarClose = React.useCallback(function () {
|
|
116
|
-
setOpen(false);
|
|
117
|
-
}, []);
|
|
131
|
+
};
|
|
118
132
|
React.useEffect(function () {
|
|
119
133
|
setOpen(defaultOpen);
|
|
120
134
|
}, [defaultOpen]);
|
|
@@ -126,13 +140,13 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
|
126
140
|
var renderCalendar = function () { return (
|
|
127
141
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
128
142
|
React__default.default.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
129
|
-
React__default.default.createElement(Calendar, tslib.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose:
|
|
143
|
+
React__default.default.createElement(Calendar, tslib.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: closeCalendar, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
|
|
130
144
|
return (
|
|
131
145
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
132
146
|
React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {},
|
|
133
147
|
_b[styles__default.default.block] = block,
|
|
134
148
|
_b)), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
|
|
135
|
-
React__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__assign({}, restProps, { ref: ref, wrapperRef: mergeRefs__default.default([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
|
|
149
|
+
React__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__assign({}, restProps, { ref: ref, wrapperRef: mergeRefs__default.default([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, inputClassName: inputClassName, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
|
|
136
150
|
rightAddons,
|
|
137
151
|
shouldRenderPopover && (React__default.default.createElement(CalendarMIcon.CalendarMIcon, { className: styles__default.default.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
|
|
138
152
|
shouldRenderStatic && renderCalendar(),
|
|
@@ -88,6 +88,14 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
|
|
|
88
88
|
* Обработчик изменения календаря
|
|
89
89
|
*/
|
|
90
90
|
onCalendarChange?: CalendarProps['onChange'];
|
|
91
|
+
/**
|
|
92
|
+
* Обработчик открытия календаря
|
|
93
|
+
*/
|
|
94
|
+
onCalendarOpen?: () => void;
|
|
95
|
+
/**
|
|
96
|
+
* Обработчик закрытия календаря
|
|
97
|
+
*/
|
|
98
|
+
onCalendarClose?: () => void;
|
|
91
99
|
/**
|
|
92
100
|
* Позиционирование поповера с календарем
|
|
93
101
|
*/
|
|
@@ -104,6 +112,10 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
|
|
|
104
112
|
* Отображение компонента в мобильном или десктопном виде
|
|
105
113
|
*/
|
|
106
114
|
view?: 'desktop' | 'mobile';
|
|
115
|
+
/**
|
|
116
|
+
* Запретить ввод с клавиатуры
|
|
117
|
+
*/
|
|
118
|
+
disableUserInput?: boolean;
|
|
107
119
|
};
|
|
108
120
|
declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps, "onChange" | "mobileMode"> & {
|
|
109
121
|
/**
|
|
@@ -124,7 +136,13 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
124
136
|
calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
|
|
125
137
|
open: boolean;
|
|
126
138
|
title?: string | undefined;
|
|
127
|
-
onClose?: (() => void) | undefined;
|
|
139
|
+
onClose?: (() => void) | undefined; /**
|
|
140
|
+
* Начальное значение инпута
|
|
141
|
+
*/
|
|
142
|
+
onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) => void) | undefined;
|
|
143
|
+
/**
|
|
144
|
+
* Месяц в календаре по умолчанию (timestamp)
|
|
145
|
+
*/
|
|
128
146
|
yearsAmount?: number | undefined;
|
|
129
147
|
hasHeader?: boolean | undefined;
|
|
130
148
|
allowSelectionFromEmptyRange?: boolean | undefined;
|
|
@@ -196,6 +214,14 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
196
214
|
* Обработчик изменения календаря
|
|
197
215
|
*/
|
|
198
216
|
onCalendarChange?: CalendarProps['onChange'];
|
|
217
|
+
/**
|
|
218
|
+
* Обработчик открытия календаря
|
|
219
|
+
*/
|
|
220
|
+
onCalendarOpen?: (() => void) | undefined;
|
|
221
|
+
/**
|
|
222
|
+
* Обработчик закрытия календаря
|
|
223
|
+
*/
|
|
224
|
+
onCalendarClose?: (() => void) | undefined;
|
|
199
225
|
/**
|
|
200
226
|
* Позиционирование поповера с календарем
|
|
201
227
|
*/
|
|
@@ -212,5 +238,9 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
212
238
|
* Отображение компонента в мобильном или десктопном виде
|
|
213
239
|
*/
|
|
214
240
|
view?: "mobile" | "desktop" | undefined;
|
|
241
|
+
/**
|
|
242
|
+
* Запретить ввод с клавиатуры
|
|
243
|
+
*/
|
|
244
|
+
disableUserInput?: boolean | undefined;
|
|
215
245
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
216
246
|
export { CalendarInputProps, CalendarInput };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { __rest, __assign } from 'tslib';
|
|
2
|
-
import React, { forwardRef, useState,
|
|
2
|
+
import React, { forwardRef, useState, useRef, useEffect } from 'react';
|
|
3
3
|
import mergeRefs from 'react-merge-refs';
|
|
4
4
|
import cn from 'classnames';
|
|
5
|
-
import {
|
|
6
|
-
import { parseDateString, isCompleteDateInput, formatDate
|
|
5
|
+
import { Calendar, dateInLimits } from '@alfalab/core-components-calendar/esm';
|
|
6
|
+
import { parseDateString, DateInput, isCompleteDateInput, formatDate } from '@alfalab/core-components-date-input/esm';
|
|
7
7
|
import { Popover } from '@alfalab/core-components-popover/esm';
|
|
8
8
|
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
9
9
|
import { SUPPORTS_INPUT_TYPE_DATE } from '../../utils.js';
|
|
@@ -11,22 +11,22 @@ import 'date-fns/format';
|
|
|
11
11
|
import 'date-fns/isSameDay';
|
|
12
12
|
import 'date-fns/parse';
|
|
13
13
|
|
|
14
|
-
var styles = {"component":"calendar-
|
|
14
|
+
var styles = {"component":"calendar-input__component_nt1fu","block":"calendar-input__block_nt1fu","calendarContainer":"calendar-input__calendarContainer_nt1fu","calendarResponsive":"calendar-input__calendarResponsive_nt1fu","calendarIcon":"calendar-input__calendarIcon_nt1fu","nativeInput":"calendar-input__nativeInput_nt1fu"};
|
|
15
15
|
require('./index.css')
|
|
16
16
|
|
|
17
17
|
var CalendarInput = forwardRef(function (_a, ref) {
|
|
18
18
|
var _b, _c;
|
|
19
19
|
var _d;
|
|
20
|
-
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className
|
|
20
|
+
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, _f = _a.defaultOpen, defaultOpen = _f === void 0 ? false : _f, defaultMonth = _a.defaultMonth, _g = _a.defaultValue, defaultValue = _g === void 0 ? '' : _g, _h = _a.calendarPosition, calendarPosition = _h === void 0 ? 'popover' : _h, value = _a.value, dataTestId = _a.dataTestId, _j = _a.calendarProps, calendarProps = _j === void 0 ? {} : _j, _k = _a.minDate, minDate = _k === void 0 ? calendarProps.minDate : _k, _l = _a.maxDate, maxDate = _l === void 0 ? calendarProps.maxDate : _l, _m = _a.offDays, offDays = _m === void 0 ? calendarProps.offDays || [] : _m, _o = _a.events, events = _o === void 0 ? calendarProps.events || [] : _o, preventFlip = _a.preventFlip, _p = _a.mobileMode, mobileMode = _p === void 0 ? 'popover' : _p, _q = _a.wrapperRef, wrapperRef = _q === void 0 ? null : _q, disabled = _a.disabled, _r = _a.onChange, onChange = _r === void 0 ? function () { return null; } : _r, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, onCalendarOpen = _a.onCalendarOpen, onCalendarClose = _a.onCalendarClose, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _s = _a.disableUserInput, disableUserInput = _s === void 0 ? false : _s, _t = _a.Calendar, Calendar$1 = _t === void 0 ? Calendar : _t, _u = _a.popoverPosition, popoverPosition = _u === void 0 ? 'bottom-start' : _u, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, _v = _a.view, view = _v === void 0 ? 'desktop' : _v, restProps = __rest(_a, ["block", "className", "inputClassName", "popoverClassName", "defaultOpen", "defaultMonth", "defaultValue", "calendarPosition", "value", "dataTestId", "calendarProps", "minDate", "maxDate", "offDays", "events", "preventFlip", "mobileMode", "wrapperRef", "disabled", "onChange", "onInputChange", "onCalendarChange", "onCalendarOpen", "onCalendarClose", "onKeyDown", "readOnly", "disableUserInput", "Calendar", "popoverPosition", "zIndexPopover", "useAnchorWidth", "rightAddons", "error", "view"]);
|
|
21
21
|
var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
|
|
22
22
|
var shouldRenderNative = SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
|
|
23
23
|
var shouldRenderOnlyInput = mobileMode === 'input';
|
|
24
24
|
var shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
|
|
25
25
|
var shouldRenderPopover = calendarPosition === 'popover' && !shouldRenderNative && !shouldRenderOnlyInput;
|
|
26
|
-
var
|
|
27
|
-
var
|
|
26
|
+
var _w = useState(false), open = _w[0], setOpen = _w[1];
|
|
27
|
+
var _x = useState(value || defaultValue), inputValue = _x[0], setInputValue = _x[1];
|
|
28
28
|
var calendarValue = inputValue ? parseDateString(inputValue).getTime() : undefined;
|
|
29
|
-
var checkInputValueIsValid =
|
|
29
|
+
var checkInputValueIsValid = function (newInputValue) {
|
|
30
30
|
if (!newInputValue)
|
|
31
31
|
return false;
|
|
32
32
|
var dateValue = parseDateString(newInputValue).getTime();
|
|
@@ -34,47 +34,64 @@ var CalendarInput = forwardRef(function (_a, ref) {
|
|
|
34
34
|
isCompleteDateInput(newInputValue) &&
|
|
35
35
|
dateInLimits(dateValue, minDate, maxDate) &&
|
|
36
36
|
!offDays.includes(dateValue));
|
|
37
|
-
}
|
|
37
|
+
};
|
|
38
38
|
var inputDisabled = disabled || readOnly;
|
|
39
39
|
var inputWrapperRef = useRef(null);
|
|
40
40
|
var calendarRef = useRef(null);
|
|
41
|
-
var
|
|
41
|
+
var openCalendar = function () {
|
|
42
|
+
setOpen(true);
|
|
43
|
+
onCalendarOpen === null || onCalendarOpen === void 0 ? void 0 : onCalendarOpen();
|
|
44
|
+
};
|
|
45
|
+
var closeCalendar = function () {
|
|
46
|
+
setOpen(false);
|
|
47
|
+
onCalendarClose === null || onCalendarClose === void 0 ? void 0 : onCalendarClose();
|
|
48
|
+
};
|
|
49
|
+
var handleKeyDown = function (event) {
|
|
42
50
|
if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
|
|
43
|
-
|
|
51
|
+
if (open) {
|
|
52
|
+
closeCalendar();
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
openCalendar();
|
|
56
|
+
}
|
|
44
57
|
}
|
|
45
58
|
if (event.key === 'Escape') {
|
|
46
|
-
|
|
59
|
+
closeCalendar();
|
|
47
60
|
}
|
|
48
|
-
}
|
|
49
|
-
var handleClick =
|
|
61
|
+
};
|
|
62
|
+
var handleClick = function () {
|
|
50
63
|
if (!open)
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
var handleFocus =
|
|
64
|
+
openCalendar();
|
|
65
|
+
};
|
|
66
|
+
var handleFocus = function (event) {
|
|
54
67
|
if (view === 'desktop') {
|
|
55
|
-
|
|
68
|
+
openCalendar();
|
|
56
69
|
if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
|
|
57
70
|
calendarRef.current.focus();
|
|
58
71
|
}
|
|
59
72
|
}
|
|
60
|
-
}
|
|
61
|
-
var handleBlur =
|
|
73
|
+
};
|
|
74
|
+
var handleBlur = function (event) {
|
|
62
75
|
if (view === 'desktop') {
|
|
63
76
|
var target = (event.relatedTarget || document.activeElement);
|
|
64
77
|
if (calendarRef.current && calendarRef.current.contains(target) === false) {
|
|
65
|
-
|
|
78
|
+
closeCalendar();
|
|
66
79
|
}
|
|
67
80
|
}
|
|
68
|
-
}
|
|
69
|
-
var handleInputKeyDown =
|
|
81
|
+
};
|
|
82
|
+
var handleInputKeyDown = function (event) {
|
|
83
|
+
var isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
|
|
84
|
+
if (disableUserInput && !isCopy) {
|
|
85
|
+
event.preventDefault();
|
|
86
|
+
}
|
|
70
87
|
if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
|
|
71
88
|
event.preventDefault();
|
|
72
89
|
calendarRef.current.focus();
|
|
73
90
|
}
|
|
74
91
|
if (onKeyDown)
|
|
75
92
|
onKeyDown(event);
|
|
76
|
-
}
|
|
77
|
-
var changeHandler =
|
|
93
|
+
};
|
|
94
|
+
var changeHandler = function (event, newValue, newDate, initiator, shouldChange) {
|
|
78
95
|
if (initiator === void 0) { initiator = 'input'; }
|
|
79
96
|
if (shouldChange === void 0) { shouldChange = true; }
|
|
80
97
|
if (initiator === 'input' && event && onInputChange) {
|
|
@@ -87,25 +104,22 @@ var CalendarInput = forwardRef(function (_a, ref) {
|
|
|
87
104
|
if (shouldChange) {
|
|
88
105
|
onChange(event, { date: newDate, value: newValue });
|
|
89
106
|
}
|
|
90
|
-
}
|
|
91
|
-
var handleInputChange =
|
|
107
|
+
};
|
|
108
|
+
var handleInputChange = function (event, payload) {
|
|
92
109
|
changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
|
|
93
|
-
}
|
|
94
|
-
var handleCalendarChange =
|
|
110
|
+
};
|
|
111
|
+
var handleCalendarChange = function (date) {
|
|
95
112
|
if (date) {
|
|
96
113
|
changeHandler(null, formatDate(date), new Date(date), 'calendar');
|
|
97
114
|
}
|
|
98
115
|
if (view === 'desktop') {
|
|
99
|
-
|
|
116
|
+
closeCalendar();
|
|
100
117
|
}
|
|
101
|
-
}
|
|
102
|
-
var handleCalendarWrapperMouseDown =
|
|
118
|
+
};
|
|
119
|
+
var handleCalendarWrapperMouseDown = function (event) {
|
|
103
120
|
// Не дает инпуту терять фокус при выборе даты
|
|
104
121
|
event.preventDefault();
|
|
105
|
-
}
|
|
106
|
-
var handleCalendarClose = useCallback(function () {
|
|
107
|
-
setOpen(false);
|
|
108
|
-
}, []);
|
|
122
|
+
};
|
|
109
123
|
useEffect(function () {
|
|
110
124
|
setOpen(defaultOpen);
|
|
111
125
|
}, [defaultOpen]);
|
|
@@ -117,13 +131,13 @@ var CalendarInput = forwardRef(function (_a, ref) {
|
|
|
117
131
|
var renderCalendar = function () { return (
|
|
118
132
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
119
133
|
React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
120
|
-
React.createElement(Calendar$1, __assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose:
|
|
134
|
+
React.createElement(Calendar$1, __assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: closeCalendar, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
|
|
121
135
|
return (
|
|
122
136
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
123
137
|
React.createElement("div", { className: cn(styles.component, className, (_b = {},
|
|
124
138
|
_b[styles.block] = block,
|
|
125
139
|
_b)), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
|
|
126
|
-
React.createElement(DateInput, __assign({}, restProps, { ref: ref, wrapperRef: mergeRefs([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React.createElement(React.Fragment, null,
|
|
140
|
+
React.createElement(DateInput, __assign({}, restProps, { ref: ref, wrapperRef: mergeRefs([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, inputClassName: inputClassName, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React.createElement(React.Fragment, null,
|
|
127
141
|
rightAddons,
|
|
128
142
|
shouldRenderPopover && (React.createElement(CalendarMIcon, { className: styles.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
|
|
129
143
|
shouldRenderStatic && renderCalendar(),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1314w */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-border-secondary: #e9e9eb;
|
|
@@ -43,31 +43,31 @@
|
|
|
43
43
|
} :root {
|
|
44
44
|
--calendar-input-icon-color: var(--color-light-graphic-primary);
|
|
45
45
|
--calendar-input-popover-border-radius: var(--border-radius-m);
|
|
46
|
-
} .calendar-
|
|
46
|
+
} .calendar-input__component_nt1fu {
|
|
47
47
|
display: inline-block;
|
|
48
48
|
outline: none;
|
|
49
49
|
position: relative;
|
|
50
|
-
} .calendar-
|
|
50
|
+
} .calendar-input__block_nt1fu {
|
|
51
51
|
width: 100%;
|
|
52
|
-
} .calendar-
|
|
52
|
+
} .calendar-input__calendarContainer_nt1fu {
|
|
53
53
|
display: inline-block;
|
|
54
54
|
box-sizing: border-box;
|
|
55
55
|
border-radius: var(--calendar-input-popover-border-radius);
|
|
56
56
|
border: 1px solid var(--color-light-border-secondary)
|
|
57
|
-
} @media (max-width: 374px) { .calendar-
|
|
57
|
+
} @media (max-width: 374px) { .calendar-input__calendarContainer_nt1fu {
|
|
58
58
|
width: 100%;
|
|
59
59
|
min-width: 288px
|
|
60
60
|
}
|
|
61
|
-
} .calendar-
|
|
61
|
+
} .calendar-input__calendarResponsive_nt1fu {
|
|
62
62
|
width: var(--calendar-width);
|
|
63
|
-
} .calendar-
|
|
63
|
+
} .calendar-input__calendarIcon_nt1fu {
|
|
64
64
|
width: 24px;
|
|
65
65
|
height: 24px;
|
|
66
66
|
display: block;
|
|
67
67
|
color: var(--calendar-input-icon-color)
|
|
68
|
-
} .calendar-
|
|
68
|
+
} .calendar-input__calendarIcon_nt1fu:not(:only-child) {
|
|
69
69
|
margin-right: var(--gap-2xs);
|
|
70
|
-
} .calendar-
|
|
70
|
+
} .calendar-input__nativeInput_nt1fu {
|
|
71
71
|
opacity: 0;
|
|
72
72
|
position: absolute;
|
|
73
73
|
top: 0;
|
|
@@ -77,8 +77,8 @@
|
|
|
77
77
|
-webkit-appearance: none;
|
|
78
78
|
appearance: none;
|
|
79
79
|
z-index: 1
|
|
80
|
-
} .calendar-
|
|
80
|
+
} .calendar-input__nativeInput_nt1fu::-webkit-calendar-picker-indicator {
|
|
81
81
|
display: none;
|
|
82
|
-
} .calendar-
|
|
82
|
+
} .calendar-input__nativeInput_nt1fu::-webkit-inner-spin-button {
|
|
83
83
|
display: none;
|
|
84
84
|
}
|
|
@@ -88,6 +88,14 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
|
|
|
88
88
|
* Обработчик изменения календаря
|
|
89
89
|
*/
|
|
90
90
|
onCalendarChange?: CalendarProps['onChange'];
|
|
91
|
+
/**
|
|
92
|
+
* Обработчик открытия календаря
|
|
93
|
+
*/
|
|
94
|
+
onCalendarOpen?: () => void;
|
|
95
|
+
/**
|
|
96
|
+
* Обработчик закрытия календаря
|
|
97
|
+
*/
|
|
98
|
+
onCalendarClose?: () => void;
|
|
91
99
|
/**
|
|
92
100
|
* Позиционирование поповера с календарем
|
|
93
101
|
*/
|
|
@@ -104,6 +112,10 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
|
|
|
104
112
|
* Отображение компонента в мобильном или десктопном виде
|
|
105
113
|
*/
|
|
106
114
|
view?: 'desktop' | 'mobile';
|
|
115
|
+
/**
|
|
116
|
+
* Запретить ввод с клавиатуры
|
|
117
|
+
*/
|
|
118
|
+
disableUserInput?: boolean;
|
|
107
119
|
};
|
|
108
120
|
declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps, "onChange" | "mobileMode"> & {
|
|
109
121
|
/**
|
|
@@ -124,7 +136,13 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
124
136
|
calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
|
|
125
137
|
open: boolean;
|
|
126
138
|
title?: string | undefined;
|
|
127
|
-
onClose?: (() => void) | undefined;
|
|
139
|
+
onClose?: (() => void) | undefined; /**
|
|
140
|
+
* Начальное значение инпута
|
|
141
|
+
*/
|
|
142
|
+
onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) => void) | undefined;
|
|
143
|
+
/**
|
|
144
|
+
* Месяц в календаре по умолчанию (timestamp)
|
|
145
|
+
*/
|
|
128
146
|
yearsAmount?: number | undefined;
|
|
129
147
|
hasHeader?: boolean | undefined;
|
|
130
148
|
allowSelectionFromEmptyRange?: boolean | undefined;
|
|
@@ -196,6 +214,14 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
196
214
|
* Обработчик изменения календаря
|
|
197
215
|
*/
|
|
198
216
|
onCalendarChange?: CalendarProps['onChange'];
|
|
217
|
+
/**
|
|
218
|
+
* Обработчик открытия календаря
|
|
219
|
+
*/
|
|
220
|
+
onCalendarOpen?: (() => void) | undefined;
|
|
221
|
+
/**
|
|
222
|
+
* Обработчик закрытия календаря
|
|
223
|
+
*/
|
|
224
|
+
onCalendarClose?: (() => void) | undefined;
|
|
199
225
|
/**
|
|
200
226
|
* Позиционирование поповера с календарем
|
|
201
227
|
*/
|
|
@@ -212,5 +238,9 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps
|
|
|
212
238
|
* Отображение компонента в мобильном или десктопном виде
|
|
213
239
|
*/
|
|
214
240
|
view?: "mobile" | "desktop" | undefined;
|
|
241
|
+
/**
|
|
242
|
+
* Запретить ввод с клавиатуры
|
|
243
|
+
*/
|
|
244
|
+
disableUserInput?: boolean | undefined;
|
|
215
245
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
216
246
|
export { CalendarInputProps, CalendarInput };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React, { forwardRef, useState,
|
|
1
|
+
import React, { forwardRef, useState, useRef, useEffect } from 'react';
|
|
2
2
|
import mergeRefs from 'react-merge-refs';
|
|
3
3
|
import cn from 'classnames';
|
|
4
|
-
import {
|
|
5
|
-
import { parseDateString, isCompleteDateInput, formatDate
|
|
4
|
+
import { Calendar, dateInLimits } from '@alfalab/core-components-calendar/modern';
|
|
5
|
+
import { parseDateString, DateInput, isCompleteDateInput, formatDate } from '@alfalab/core-components-date-input/modern';
|
|
6
6
|
import { Popover } from '@alfalab/core-components-popover/modern';
|
|
7
7
|
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
8
8
|
import { SUPPORTS_INPUT_TYPE_DATE } from '../../utils.js';
|
|
@@ -10,10 +10,10 @@ import 'date-fns/format';
|
|
|
10
10
|
import 'date-fns/isSameDay';
|
|
11
11
|
import 'date-fns/parse';
|
|
12
12
|
|
|
13
|
-
const styles = {"component":"calendar-
|
|
13
|
+
const styles = {"component":"calendar-input__component_nt1fu","block":"calendar-input__block_nt1fu","calendarContainer":"calendar-input__calendarContainer_nt1fu","calendarResponsive":"calendar-input__calendarResponsive_nt1fu","calendarIcon":"calendar-input__calendarIcon_nt1fu","nativeInput":"calendar-input__nativeInput_nt1fu"};
|
|
14
14
|
require('./index.css')
|
|
15
15
|
|
|
16
|
-
const CalendarInput = forwardRef(({ block = false, className, inputClassName, popoverClassName, defaultOpen = false, defaultMonth, defaultValue = '', calendarPosition = 'popover', value, dataTestId, calendarProps = {}, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], preventFlip, mobileMode = 'popover', wrapperRef = null, disabled, onChange = () => null, onInputChange, onCalendarChange, onKeyDown, readOnly, Calendar: Calendar$1 = Calendar, popoverPosition = 'bottom-start', zIndexPopover, useAnchorWidth, rightAddons, error, view = 'desktop', ...restProps }, ref) => {
|
|
16
|
+
const CalendarInput = forwardRef(({ block = false, className, inputClassName, popoverClassName, defaultOpen = false, defaultMonth, defaultValue = '', calendarPosition = 'popover', value, dataTestId, calendarProps = {}, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], preventFlip, mobileMode = 'popover', wrapperRef = null, disabled, onChange = () => null, onInputChange, onCalendarChange, onCalendarOpen, onCalendarClose, onKeyDown, readOnly, disableUserInput = false, Calendar: Calendar$1 = Calendar, popoverPosition = 'bottom-start', zIndexPopover, useAnchorWidth, rightAddons, error, view = 'desktop', ...restProps }, ref) => {
|
|
17
17
|
const calendarResponsive = calendarProps?.responsive ?? true;
|
|
18
18
|
const shouldRenderNative = SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
|
|
19
19
|
const shouldRenderOnlyInput = mobileMode === 'input';
|
|
@@ -22,7 +22,7 @@ const CalendarInput = forwardRef(({ block = false, className, inputClassName, po
|
|
|
22
22
|
const [open, setOpen] = useState(false);
|
|
23
23
|
const [inputValue, setInputValue] = useState(value || defaultValue);
|
|
24
24
|
const calendarValue = inputValue ? parseDateString(inputValue).getTime() : undefined;
|
|
25
|
-
const checkInputValueIsValid =
|
|
25
|
+
const checkInputValueIsValid = (newInputValue) => {
|
|
26
26
|
if (!newInputValue)
|
|
27
27
|
return false;
|
|
28
28
|
const dateValue = parseDateString(newInputValue).getTime();
|
|
@@ -30,47 +30,64 @@ const CalendarInput = forwardRef(({ block = false, className, inputClassName, po
|
|
|
30
30
|
isCompleteDateInput(newInputValue) &&
|
|
31
31
|
dateInLimits(dateValue, minDate, maxDate) &&
|
|
32
32
|
!offDays.includes(dateValue));
|
|
33
|
-
}
|
|
33
|
+
};
|
|
34
34
|
const inputDisabled = disabled || readOnly;
|
|
35
35
|
const inputWrapperRef = useRef(null);
|
|
36
36
|
const calendarRef = useRef(null);
|
|
37
|
-
const
|
|
37
|
+
const openCalendar = () => {
|
|
38
|
+
setOpen(true);
|
|
39
|
+
onCalendarOpen?.();
|
|
40
|
+
};
|
|
41
|
+
const closeCalendar = () => {
|
|
42
|
+
setOpen(false);
|
|
43
|
+
onCalendarClose?.();
|
|
44
|
+
};
|
|
45
|
+
const handleKeyDown = (event) => {
|
|
38
46
|
if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
|
|
39
|
-
|
|
47
|
+
if (open) {
|
|
48
|
+
closeCalendar();
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
openCalendar();
|
|
52
|
+
}
|
|
40
53
|
}
|
|
41
54
|
if (event.key === 'Escape') {
|
|
42
|
-
|
|
55
|
+
closeCalendar();
|
|
43
56
|
}
|
|
44
|
-
}
|
|
45
|
-
const handleClick =
|
|
57
|
+
};
|
|
58
|
+
const handleClick = () => {
|
|
46
59
|
if (!open)
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
const handleFocus =
|
|
60
|
+
openCalendar();
|
|
61
|
+
};
|
|
62
|
+
const handleFocus = (event) => {
|
|
50
63
|
if (view === 'desktop') {
|
|
51
|
-
|
|
64
|
+
openCalendar();
|
|
52
65
|
if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
|
|
53
66
|
calendarRef.current.focus();
|
|
54
67
|
}
|
|
55
68
|
}
|
|
56
|
-
}
|
|
57
|
-
const handleBlur =
|
|
69
|
+
};
|
|
70
|
+
const handleBlur = (event) => {
|
|
58
71
|
if (view === 'desktop') {
|
|
59
72
|
const target = (event.relatedTarget || document.activeElement);
|
|
60
73
|
if (calendarRef.current && calendarRef.current.contains(target) === false) {
|
|
61
|
-
|
|
74
|
+
closeCalendar();
|
|
62
75
|
}
|
|
63
76
|
}
|
|
64
|
-
}
|
|
65
|
-
const handleInputKeyDown =
|
|
77
|
+
};
|
|
78
|
+
const handleInputKeyDown = (event) => {
|
|
79
|
+
const isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
|
|
80
|
+
if (disableUserInput && !isCopy) {
|
|
81
|
+
event.preventDefault();
|
|
82
|
+
}
|
|
66
83
|
if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
|
|
67
84
|
event.preventDefault();
|
|
68
85
|
calendarRef.current.focus();
|
|
69
86
|
}
|
|
70
87
|
if (onKeyDown)
|
|
71
88
|
onKeyDown(event);
|
|
72
|
-
}
|
|
73
|
-
const changeHandler =
|
|
89
|
+
};
|
|
90
|
+
const changeHandler = (event, newValue, newDate, initiator = 'input', shouldChange = true) => {
|
|
74
91
|
if (initiator === 'input' && event && onInputChange) {
|
|
75
92
|
onInputChange(event, { value: newValue, date: newDate });
|
|
76
93
|
}
|
|
@@ -81,25 +98,22 @@ const CalendarInput = forwardRef(({ block = false, className, inputClassName, po
|
|
|
81
98
|
if (shouldChange) {
|
|
82
99
|
onChange(event, { date: newDate, value: newValue });
|
|
83
100
|
}
|
|
84
|
-
}
|
|
85
|
-
const handleInputChange =
|
|
101
|
+
};
|
|
102
|
+
const handleInputChange = (event, payload) => {
|
|
86
103
|
changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
|
|
87
|
-
}
|
|
88
|
-
const handleCalendarChange =
|
|
104
|
+
};
|
|
105
|
+
const handleCalendarChange = (date) => {
|
|
89
106
|
if (date) {
|
|
90
107
|
changeHandler(null, formatDate(date), new Date(date), 'calendar');
|
|
91
108
|
}
|
|
92
109
|
if (view === 'desktop') {
|
|
93
|
-
|
|
110
|
+
closeCalendar();
|
|
94
111
|
}
|
|
95
|
-
}
|
|
96
|
-
const handleCalendarWrapperMouseDown =
|
|
112
|
+
};
|
|
113
|
+
const handleCalendarWrapperMouseDown = (event) => {
|
|
97
114
|
// Не дает инпуту терять фокус при выборе даты
|
|
98
115
|
event.preventDefault();
|
|
99
|
-
}
|
|
100
|
-
const handleCalendarClose = useCallback(() => {
|
|
101
|
-
setOpen(false);
|
|
102
|
-
}, []);
|
|
116
|
+
};
|
|
103
117
|
useEffect(() => {
|
|
104
118
|
setOpen(defaultOpen);
|
|
105
119
|
}, [defaultOpen]);
|
|
@@ -111,13 +125,13 @@ const CalendarInput = forwardRef(({ block = false, className, inputClassName, po
|
|
|
111
125
|
const renderCalendar = () => (
|
|
112
126
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
113
127
|
React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
114
|
-
React.createElement(Calendar$1, { ...calendarProps, responsive: calendarResponsive, open: open, onClose:
|
|
128
|
+
React.createElement(Calendar$1, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: closeCalendar, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })));
|
|
115
129
|
return (
|
|
116
130
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
117
131
|
React.createElement("div", { className: cn(styles.component, className, {
|
|
118
132
|
[styles.block]: block,
|
|
119
133
|
}), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
|
|
120
|
-
React.createElement(DateInput, { ...restProps, ref: ref, wrapperRef: mergeRefs([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React.createElement(React.Fragment, null,
|
|
134
|
+
React.createElement(DateInput, { ...restProps, ref: ref, wrapperRef: mergeRefs([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, inputClassName: inputClassName, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React.createElement(React.Fragment, null,
|
|
121
135
|
rightAddons,
|
|
122
136
|
shouldRenderPopover && (React.createElement(CalendarMIcon, { className: styles.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true }),
|
|
123
137
|
shouldRenderStatic && renderCalendar(),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1314w */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-border-secondary: #e9e9eb;
|
|
@@ -43,31 +43,31 @@
|
|
|
43
43
|
} :root {
|
|
44
44
|
--calendar-input-icon-color: var(--color-light-graphic-primary);
|
|
45
45
|
--calendar-input-popover-border-radius: var(--border-radius-m);
|
|
46
|
-
} .calendar-
|
|
46
|
+
} .calendar-input__component_nt1fu {
|
|
47
47
|
display: inline-block;
|
|
48
48
|
outline: none;
|
|
49
49
|
position: relative;
|
|
50
|
-
} .calendar-
|
|
50
|
+
} .calendar-input__block_nt1fu {
|
|
51
51
|
width: 100%;
|
|
52
|
-
} .calendar-
|
|
52
|
+
} .calendar-input__calendarContainer_nt1fu {
|
|
53
53
|
display: inline-block;
|
|
54
54
|
box-sizing: border-box;
|
|
55
55
|
border-radius: var(--calendar-input-popover-border-radius);
|
|
56
56
|
border: 1px solid var(--color-light-border-secondary)
|
|
57
|
-
} @media (max-width: 374px) { .calendar-
|
|
57
|
+
} @media (max-width: 374px) { .calendar-input__calendarContainer_nt1fu {
|
|
58
58
|
width: 100%;
|
|
59
59
|
min-width: 288px
|
|
60
60
|
}
|
|
61
|
-
} .calendar-
|
|
61
|
+
} .calendar-input__calendarResponsive_nt1fu {
|
|
62
62
|
width: var(--calendar-width);
|
|
63
|
-
} .calendar-
|
|
63
|
+
} .calendar-input__calendarIcon_nt1fu {
|
|
64
64
|
width: 24px;
|
|
65
65
|
height: 24px;
|
|
66
66
|
display: block;
|
|
67
67
|
color: var(--calendar-input-icon-color)
|
|
68
|
-
} .calendar-
|
|
68
|
+
} .calendar-input__calendarIcon_nt1fu:not(:only-child) {
|
|
69
69
|
margin-right: var(--gap-2xs);
|
|
70
|
-
} .calendar-
|
|
70
|
+
} .calendar-input__nativeInput_nt1fu {
|
|
71
71
|
opacity: 0;
|
|
72
72
|
position: absolute;
|
|
73
73
|
top: 0;
|
|
@@ -77,8 +77,8 @@
|
|
|
77
77
|
-webkit-appearance: none;
|
|
78
78
|
appearance: none;
|
|
79
79
|
z-index: 1
|
|
80
|
-
} .calendar-
|
|
80
|
+
} .calendar-input__nativeInput_nt1fu::-webkit-calendar-picker-indicator {
|
|
81
81
|
display: none;
|
|
82
|
-
} .calendar-
|
|
82
|
+
} .calendar-input__nativeInput_nt1fu::-webkit-inner-spin-button {
|
|
83
83
|
display: none;
|
|
84
84
|
}
|
package/package.json
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-calendar-input",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.3.0",
|
|
4
4
|
"description": "Calendar input component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "index.js",
|
|
8
8
|
"module": "./esm/index.js",
|
|
9
|
-
"scripts": {
|
|
10
|
-
"postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
|
|
11
|
-
},
|
|
12
9
|
"publishConfig": {
|
|
13
10
|
"access": "public",
|
|
14
11
|
"directory": "dist"
|
|
@@ -18,9 +15,9 @@
|
|
|
18
15
|
"react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
19
16
|
},
|
|
20
17
|
"dependencies": {
|
|
21
|
-
"@alfalab/core-components-calendar": "^6.
|
|
22
|
-
"@alfalab/core-components-date-input": "^4.2.
|
|
23
|
-
"@alfalab/core-components-popover": "^6.0.
|
|
18
|
+
"@alfalab/core-components-calendar": "^6.6.1",
|
|
19
|
+
"@alfalab/core-components-date-input": "^4.2.10",
|
|
20
|
+
"@alfalab/core-components-popover": "^6.0.9",
|
|
24
21
|
"@alfalab/hooks": "^1.13.0",
|
|
25
22
|
"classnames": "^2.3.1",
|
|
26
23
|
"date-fns": "^2.16.1",
|
package/send-stats.js
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
const http = require('http');
|
|
2
|
-
const fs = require('fs');
|
|
3
|
-
const { promisify } = require('util');
|
|
4
|
-
const path = require('path');
|
|
5
|
-
|
|
6
|
-
const readFile = promisify(fs.readFile);
|
|
7
|
-
|
|
8
|
-
async function main() {
|
|
9
|
-
const remoteHost = process.env.NIS_HOST || 'digital';
|
|
10
|
-
const remotePort = process.env.NIS_PORT || 80;
|
|
11
|
-
const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
|
|
12
|
-
|
|
13
|
-
try {
|
|
14
|
-
const [_, node, os, arch] =
|
|
15
|
-
/node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
|
|
16
|
-
const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
|
|
17
|
-
const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
|
|
18
|
-
|
|
19
|
-
let ownPackageJson, packageJson;
|
|
20
|
-
|
|
21
|
-
try {
|
|
22
|
-
const result = await Promise.all([
|
|
23
|
-
readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
|
|
24
|
-
readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
|
|
25
|
-
]);
|
|
26
|
-
|
|
27
|
-
ownPackageJson = JSON.parse(result[0]);
|
|
28
|
-
packageJson = JSON.parse(result[1]);
|
|
29
|
-
} catch (err) {
|
|
30
|
-
ownPackageJson = '';
|
|
31
|
-
packageJson = '';
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
const data = {
|
|
35
|
-
node,
|
|
36
|
-
npm,
|
|
37
|
-
yarn,
|
|
38
|
-
os,
|
|
39
|
-
arch,
|
|
40
|
-
ownPackageJson: JSON.stringify(ownPackageJson),
|
|
41
|
-
packageJson: JSON.stringify(packageJson),
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
const body = JSON.stringify(data);
|
|
45
|
-
|
|
46
|
-
const options = {
|
|
47
|
-
host: remoteHost,
|
|
48
|
-
port: remotePort,
|
|
49
|
-
path: remotePath,
|
|
50
|
-
method: 'POST',
|
|
51
|
-
headers: {
|
|
52
|
-
'Content-Type': 'application/json',
|
|
53
|
-
'Content-Length': body.length,
|
|
54
|
-
},
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
return new Promise((resolve, reject) => {
|
|
58
|
-
const req = http.request(options, (res) => {
|
|
59
|
-
res.on('end', () => {
|
|
60
|
-
resolve();
|
|
61
|
-
});
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
req.on('error', () => {
|
|
65
|
-
reject();
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
req.write(body);
|
|
69
|
-
req.end();
|
|
70
|
-
});
|
|
71
|
-
} catch (error) {
|
|
72
|
-
throw error;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
main()
|
|
77
|
-
.then(() => {
|
|
78
|
-
process.exit(0);
|
|
79
|
-
})
|
|
80
|
-
.catch(() => {
|
|
81
|
-
process.exit(0);
|
|
82
|
-
});
|