@alfalab/core-components-calendar-input 8.1.1 → 8.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Component.js +9 -17
- package/cssm/Component.js +11 -20
- package/cssm/index.js +2 -4
- package/cssm/utils.js +5 -13
- package/esm/Component.js +3 -3
- package/esm/index.css +11 -11
- package/esm/index.js +1 -1
- package/esm/utils.js +2 -2
- package/index.css +11 -11
- package/index.js +1 -3
- package/modern/Component.js +3 -3
- package/modern/index.css +11 -11
- package/modern/index.js +2 -2
- package/modern/utils.js +2 -2
- package/package.json +2 -2
- package/utils.js +5 -13
package/Component.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var mergeRefs = require('react-merge-refs');
|
|
7
5
|
var cn = require('classnames');
|
|
@@ -10,16 +8,10 @@ var coreComponentsDateInput = require('@alfalab/core-components-date-input');
|
|
|
10
8
|
var coreComponentsPopover = require('@alfalab/core-components-popover');
|
|
11
9
|
var hooks = require('@alfalab/hooks');
|
|
12
10
|
var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
|
|
11
|
+
var utils = require('./utils.js');
|
|
13
12
|
require('date-fns/format');
|
|
14
13
|
require('date-fns/isSameDay');
|
|
15
14
|
require('date-fns/parse');
|
|
16
|
-
var utils = require('./utils.js');
|
|
17
|
-
|
|
18
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
|
-
|
|
20
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
21
|
-
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
22
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
23
15
|
|
|
24
16
|
/******************************************************************************
|
|
25
17
|
Copyright (c) Microsoft Corporation.
|
|
@@ -60,13 +52,13 @@ function __rest(s, e) {
|
|
|
60
52
|
return t;
|
|
61
53
|
}
|
|
62
54
|
|
|
63
|
-
var styles = {"component":"calendar-
|
|
55
|
+
var styles = {"component":"calendar-input__component_k71na","block":"calendar-input__block_k71na","calendarContainer":"calendar-input__calendarContainer_k71na","calendarResponsive":"calendar-input__calendarResponsive_k71na","calendarIcon":"calendar-input__calendarIcon_k71na","nativeInput":"calendar-input__nativeInput_k71na"};
|
|
64
56
|
require('./index.css')
|
|
65
57
|
|
|
66
58
|
var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
67
59
|
var _b, _c;
|
|
68
60
|
var _d;
|
|
69
|
-
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className
|
|
61
|
+
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className; _a.inputClassName; var 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, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _s = _a.Calendar, Calendar = _s === void 0 ? coreComponentsCalendar.Calendar : _s, _t = _a.popoverPosition, popoverPosition = _t === void 0 ? 'bottom-start' : _t, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, 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", "onKeyDown", "readOnly", "Calendar", "popoverPosition", "zIndexPopover", "useAnchorWidth", "rightAddons", "error"]);
|
|
70
62
|
var view = hooks.useMedia([
|
|
71
63
|
['mobile', '(max-width: 1023px)'],
|
|
72
64
|
['desktop', '(min-width: 1024px)'],
|
|
@@ -170,18 +162,18 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
|
170
162
|
}, [value]);
|
|
171
163
|
var renderCalendar = function () { return (
|
|
172
164
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
173
|
-
|
|
174
|
-
|
|
165
|
+
React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
166
|
+
React.createElement(CalendarComponent, __assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
|
|
175
167
|
return (
|
|
176
168
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
177
|
-
|
|
169
|
+
React.createElement("div", { className: cn(styles.component, className, (_b = {},
|
|
178
170
|
_b[styles.block] = block,
|
|
179
171
|
_b)), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
|
|
180
|
-
|
|
172
|
+
React.createElement(coreComponentsDateInput.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,
|
|
181
173
|
rightAddons,
|
|
182
|
-
shouldRenderPopover && (
|
|
174
|
+
shouldRenderPopover && (React.createElement(CalendarMIcon.CalendarMIcon, { className: styles.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
|
|
183
175
|
shouldRenderStatic && renderCalendar(),
|
|
184
|
-
shouldRenderPopover && (
|
|
176
|
+
shouldRenderPopover && (React.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
|
|
185
177
|
_c[styles.calendarResponsive] = calendarResponsive,
|
|
186
178
|
_c)), className: popoverClassName, position: popoverPosition, offset: [0, 4], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
|
|
187
179
|
});
|
package/cssm/Component.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var mergeRefs = require('react-merge-refs');
|
|
7
5
|
var cn = require('classnames');
|
|
@@ -10,18 +8,11 @@ var coreComponentsDateInput = require('@alfalab/core-components-date-input/cssm'
|
|
|
10
8
|
var coreComponentsPopover = require('@alfalab/core-components-popover/cssm');
|
|
11
9
|
var hooks = require('@alfalab/hooks');
|
|
12
10
|
var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
|
|
11
|
+
var utils = require('./utils.js');
|
|
12
|
+
var styles = require('./index.module.css');
|
|
13
13
|
require('date-fns/format');
|
|
14
14
|
require('date-fns/isSameDay');
|
|
15
15
|
require('date-fns/parse');
|
|
16
|
-
var utils = require('./utils.js');
|
|
17
|
-
var styles = require('./index.module.css');
|
|
18
|
-
|
|
19
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
-
|
|
21
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
-
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
23
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
24
|
-
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
|
|
25
16
|
|
|
26
17
|
/******************************************************************************
|
|
27
18
|
Copyright (c) Microsoft Corporation.
|
|
@@ -65,7 +56,7 @@ function __rest(s, e) {
|
|
|
65
56
|
var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
66
57
|
var _b, _c;
|
|
67
58
|
var _d;
|
|
68
|
-
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className
|
|
59
|
+
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className; _a.inputClassName; var 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, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _s = _a.Calendar, Calendar = _s === void 0 ? coreComponentsCalendar.Calendar : _s, _t = _a.popoverPosition, popoverPosition = _t === void 0 ? 'bottom-start' : _t, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, 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", "onKeyDown", "readOnly", "Calendar", "popoverPosition", "zIndexPopover", "useAnchorWidth", "rightAddons", "error"]);
|
|
69
60
|
var view = hooks.useMedia([
|
|
70
61
|
['mobile', '(max-width: 1023px)'],
|
|
71
62
|
['desktop', '(min-width: 1024px)'],
|
|
@@ -169,19 +160,19 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
|
|
|
169
160
|
}, [value]);
|
|
170
161
|
var renderCalendar = function () { return (
|
|
171
162
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
172
|
-
|
|
173
|
-
|
|
163
|
+
React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
164
|
+
React.createElement(CalendarComponent, __assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
|
|
174
165
|
return (
|
|
175
166
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
176
|
-
|
|
177
|
-
_b[
|
|
167
|
+
React.createElement("div", { className: cn(styles.component, className, (_b = {},
|
|
168
|
+
_b[styles.block] = block,
|
|
178
169
|
_b)), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
|
|
179
|
-
|
|
170
|
+
React.createElement(coreComponentsDateInput.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,
|
|
180
171
|
rightAddons,
|
|
181
|
-
shouldRenderPopover && (
|
|
172
|
+
shouldRenderPopover && (React.createElement(CalendarMIcon.CalendarMIcon, { className: styles.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
|
|
182
173
|
shouldRenderStatic && renderCalendar(),
|
|
183
|
-
shouldRenderPopover && (
|
|
184
|
-
_c[
|
|
174
|
+
shouldRenderPopover && (React.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
|
|
175
|
+
_c[styles.calendarResponsive] = calendarResponsive,
|
|
185
176
|
_c)), className: popoverClassName, position: popoverPosition, offset: [0, 4], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
|
|
186
177
|
});
|
|
187
178
|
|
package/cssm/index.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var Component = require('./Component.js');
|
|
4
|
+
var utils = require('./utils.js');
|
|
6
5
|
require('react');
|
|
7
6
|
require('react-merge-refs');
|
|
8
7
|
require('classnames');
|
|
@@ -11,11 +10,10 @@ require('@alfalab/core-components-date-input/cssm');
|
|
|
11
10
|
require('@alfalab/core-components-popover/cssm');
|
|
12
11
|
require('@alfalab/hooks');
|
|
13
12
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
13
|
+
require('./index.module.css');
|
|
14
14
|
require('date-fns/format');
|
|
15
15
|
require('date-fns/isSameDay');
|
|
16
16
|
require('date-fns/parse');
|
|
17
|
-
var utils = require('./utils.js');
|
|
18
|
-
require('./index.module.css');
|
|
19
17
|
|
|
20
18
|
|
|
21
19
|
|
package/cssm/utils.js
CHANGED
|
@@ -1,18 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
|
|
6
|
-
var coreComponentsDateInput = require('@alfalab/core-components-date-input/cssm');
|
|
7
3
|
var format = require('date-fns/format');
|
|
8
4
|
var isSameDay = require('date-fns/isSameDay');
|
|
9
5
|
var parse = require('date-fns/parse');
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var format__default = /*#__PURE__*/_interopDefaultLegacy(format);
|
|
14
|
-
var isSameDay__default = /*#__PURE__*/_interopDefaultLegacy(isSameDay);
|
|
15
|
-
var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
|
|
6
|
+
var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
|
|
7
|
+
var coreComponentsDateInput = require('@alfalab/core-components-date-input/cssm');
|
|
16
8
|
|
|
17
9
|
var DATE_FORMAT = 'dd.MM.yyyy';
|
|
18
10
|
var NATIVE_DATE_FORMAT = 'yyyy-MM-dd';
|
|
@@ -21,11 +13,11 @@ var IS_BROWSER = typeof window !== 'undefined';
|
|
|
21
13
|
var SUPPORTS_INPUT_TYPE_DATE = IS_BROWSER && isInputDateSupported();
|
|
22
14
|
var formatDate = function (date, dateFormat) {
|
|
23
15
|
if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
|
|
24
|
-
return
|
|
16
|
+
return format(date, dateFormat);
|
|
25
17
|
};
|
|
26
18
|
var parseDateString = function (value, dateFormat) {
|
|
27
19
|
if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
|
|
28
|
-
return
|
|
20
|
+
return parse(value, dateFormat, new Date());
|
|
29
21
|
};
|
|
30
22
|
/**
|
|
31
23
|
* Возвращает `true`, если поддерживается `input[type="date"]`
|
|
@@ -45,7 +37,7 @@ var isValidInputValue = function (newInputValue, minDate, maxDate, offDays) {
|
|
|
45
37
|
return Boolean(dateValue &&
|
|
46
38
|
coreComponentsDateInput.isCompleteDateInput(newInputValue) &&
|
|
47
39
|
coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
|
|
48
|
-
!offDays.some(function (offDay) { return
|
|
40
|
+
!offDays.some(function (offDay) { return isSameDay(offDay, dateValue); }));
|
|
49
41
|
};
|
|
50
42
|
|
|
51
43
|
exports.DATE_FORMAT = DATE_FORMAT;
|
package/esm/Component.js
CHANGED
|
@@ -6,10 +6,10 @@ import { parseDateString, isCompleteDateInput, formatDate, DateInput } from '@al
|
|
|
6
6
|
import { Popover } from '@alfalab/core-components-popover/esm';
|
|
7
7
|
import { useMedia } from '@alfalab/hooks';
|
|
8
8
|
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
9
|
+
import { SUPPORTS_INPUT_TYPE_DATE } from './utils.js';
|
|
9
10
|
import 'date-fns/format';
|
|
10
11
|
import 'date-fns/isSameDay';
|
|
11
12
|
import 'date-fns/parse';
|
|
12
|
-
import { SUPPORTS_INPUT_TYPE_DATE } from './utils.js';
|
|
13
13
|
|
|
14
14
|
/******************************************************************************
|
|
15
15
|
Copyright (c) Microsoft Corporation.
|
|
@@ -50,13 +50,13 @@ function __rest(s, e) {
|
|
|
50
50
|
return t;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
var styles = {"component":"calendar-
|
|
53
|
+
var styles = {"component":"calendar-input__component_k71na","block":"calendar-input__block_k71na","calendarContainer":"calendar-input__calendarContainer_k71na","calendarResponsive":"calendar-input__calendarResponsive_k71na","calendarIcon":"calendar-input__calendarIcon_k71na","nativeInput":"calendar-input__nativeInput_k71na"};
|
|
54
54
|
require('./index.css')
|
|
55
55
|
|
|
56
56
|
var CalendarInput = forwardRef(function (_a, ref) {
|
|
57
57
|
var _b, _c;
|
|
58
58
|
var _d;
|
|
59
|
-
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className
|
|
59
|
+
var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className; _a.inputClassName; var 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, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _s = _a.Calendar, Calendar$1 = _s === void 0 ? Calendar : _s, _t = _a.popoverPosition, popoverPosition = _t === void 0 ? 'bottom-start' : _t, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, 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", "onKeyDown", "readOnly", "Calendar", "popoverPosition", "zIndexPopover", "useAnchorWidth", "rightAddons", "error"]);
|
|
60
60
|
var view = useMedia([
|
|
61
61
|
['mobile', '(max-width: 1023px)'],
|
|
62
62
|
['desktop', '(min-width: 1024px)'],
|
package/esm/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: jwioz */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-graphic-primary: #0b1f35;
|
|
4
4
|
}
|
|
@@ -44,39 +44,39 @@
|
|
|
44
44
|
--calendar-input-icon-color: var(--color-light-graphic-primary);
|
|
45
45
|
--calendar-input-popover-border-radius: var(--border-radius-m);
|
|
46
46
|
}
|
|
47
|
-
.calendar-
|
|
47
|
+
.calendar-input__component_k71na {
|
|
48
48
|
display: inline-block;
|
|
49
49
|
outline: none;
|
|
50
50
|
position: relative;
|
|
51
51
|
}
|
|
52
|
-
.calendar-
|
|
52
|
+
.calendar-input__block_k71na {
|
|
53
53
|
width: 100%;
|
|
54
54
|
}
|
|
55
|
-
.calendar-
|
|
55
|
+
.calendar-input__calendarContainer_k71na {
|
|
56
56
|
display: inline-block;
|
|
57
57
|
box-sizing: border-box;
|
|
58
58
|
border-radius: var(--calendar-input-popover-border-radius)
|
|
59
59
|
}
|
|
60
60
|
@media (max-width: 374px) {
|
|
61
|
-
.calendar-
|
|
61
|
+
.calendar-input__calendarContainer_k71na {
|
|
62
62
|
width: 100%;
|
|
63
63
|
min-width: 288px
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
|
-
.calendar-
|
|
66
|
+
.calendar-input__calendarResponsive_k71na {
|
|
67
67
|
width: var(--calendar-width);
|
|
68
68
|
padding: 0 var(--gap-m);
|
|
69
69
|
}
|
|
70
|
-
.calendar-
|
|
70
|
+
.calendar-input__calendarIcon_k71na {
|
|
71
71
|
width: 24px;
|
|
72
72
|
height: 24px;
|
|
73
73
|
display: block;
|
|
74
74
|
color: var(--calendar-input-icon-color)
|
|
75
75
|
}
|
|
76
|
-
.calendar-
|
|
76
|
+
.calendar-input__calendarIcon_k71na:not(:only-child) {
|
|
77
77
|
margin-right: var(--gap-2xs);
|
|
78
78
|
}
|
|
79
|
-
.calendar-
|
|
79
|
+
.calendar-input__nativeInput_k71na {
|
|
80
80
|
opacity: 0;
|
|
81
81
|
position: absolute;
|
|
82
82
|
top: 0;
|
|
@@ -87,9 +87,9 @@
|
|
|
87
87
|
appearance: none;
|
|
88
88
|
z-index: 1
|
|
89
89
|
}
|
|
90
|
-
.calendar-
|
|
90
|
+
.calendar-input__nativeInput_k71na::-webkit-calendar-picker-indicator {
|
|
91
91
|
display: none;
|
|
92
92
|
}
|
|
93
|
-
.calendar-
|
|
93
|
+
.calendar-input__nativeInput_k71na::-webkit-inner-spin-button {
|
|
94
94
|
display: none;
|
|
95
95
|
}
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { CalendarInput } from './Component.js';
|
|
2
|
+
export { DATE_FORMAT, DATE_MASK, IS_BROWSER, NATIVE_DATE_FORMAT, SUPPORTS_INPUT_TYPE_DATE, formatDate, isInputDateSupported, isValidInputValue, parseDateString } from './utils.js';
|
|
2
3
|
import 'react';
|
|
3
4
|
import 'react-merge-refs';
|
|
4
5
|
import 'classnames';
|
|
@@ -10,4 +11,3 @@ import '@alfalab/icons-glyph/CalendarMIcon';
|
|
|
10
11
|
import 'date-fns/format';
|
|
11
12
|
import 'date-fns/isSameDay';
|
|
12
13
|
import 'date-fns/parse';
|
|
13
|
-
export { DATE_FORMAT, DATE_MASK, IS_BROWSER, NATIVE_DATE_FORMAT, SUPPORTS_INPUT_TYPE_DATE, formatDate, isInputDateSupported, isValidInputValue, parseDateString } from './utils.js';
|
package/esm/utils.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { dateInLimits } from '@alfalab/core-components-calendar/esm';
|
|
2
|
-
import { isCompleteDateInput } from '@alfalab/core-components-date-input/esm';
|
|
3
1
|
import format from 'date-fns/format';
|
|
4
2
|
import isSameDay from 'date-fns/isSameDay';
|
|
5
3
|
import parse from 'date-fns/parse';
|
|
4
|
+
import { dateInLimits } from '@alfalab/core-components-calendar/esm';
|
|
5
|
+
import { isCompleteDateInput } from '@alfalab/core-components-date-input/esm';
|
|
6
6
|
|
|
7
7
|
var DATE_FORMAT = 'dd.MM.yyyy';
|
|
8
8
|
var NATIVE_DATE_FORMAT = 'yyyy-MM-dd';
|
package/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: jwioz */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-graphic-primary: #0b1f35;
|
|
4
4
|
}
|
|
@@ -44,39 +44,39 @@
|
|
|
44
44
|
--calendar-input-icon-color: var(--color-light-graphic-primary);
|
|
45
45
|
--calendar-input-popover-border-radius: var(--border-radius-m);
|
|
46
46
|
}
|
|
47
|
-
.calendar-
|
|
47
|
+
.calendar-input__component_k71na {
|
|
48
48
|
display: inline-block;
|
|
49
49
|
outline: none;
|
|
50
50
|
position: relative;
|
|
51
51
|
}
|
|
52
|
-
.calendar-
|
|
52
|
+
.calendar-input__block_k71na {
|
|
53
53
|
width: 100%;
|
|
54
54
|
}
|
|
55
|
-
.calendar-
|
|
55
|
+
.calendar-input__calendarContainer_k71na {
|
|
56
56
|
display: inline-block;
|
|
57
57
|
box-sizing: border-box;
|
|
58
58
|
border-radius: var(--calendar-input-popover-border-radius)
|
|
59
59
|
}
|
|
60
60
|
@media (max-width: 374px) {
|
|
61
|
-
.calendar-
|
|
61
|
+
.calendar-input__calendarContainer_k71na {
|
|
62
62
|
width: 100%;
|
|
63
63
|
min-width: 288px
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
|
-
.calendar-
|
|
66
|
+
.calendar-input__calendarResponsive_k71na {
|
|
67
67
|
width: var(--calendar-width);
|
|
68
68
|
padding: 0 var(--gap-m);
|
|
69
69
|
}
|
|
70
|
-
.calendar-
|
|
70
|
+
.calendar-input__calendarIcon_k71na {
|
|
71
71
|
width: 24px;
|
|
72
72
|
height: 24px;
|
|
73
73
|
display: block;
|
|
74
74
|
color: var(--calendar-input-icon-color)
|
|
75
75
|
}
|
|
76
|
-
.calendar-
|
|
76
|
+
.calendar-input__calendarIcon_k71na:not(:only-child) {
|
|
77
77
|
margin-right: var(--gap-2xs);
|
|
78
78
|
}
|
|
79
|
-
.calendar-
|
|
79
|
+
.calendar-input__nativeInput_k71na {
|
|
80
80
|
opacity: 0;
|
|
81
81
|
position: absolute;
|
|
82
82
|
top: 0;
|
|
@@ -87,9 +87,9 @@
|
|
|
87
87
|
appearance: none;
|
|
88
88
|
z-index: 1
|
|
89
89
|
}
|
|
90
|
-
.calendar-
|
|
90
|
+
.calendar-input__nativeInput_k71na::-webkit-calendar-picker-indicator {
|
|
91
91
|
display: none;
|
|
92
92
|
}
|
|
93
|
-
.calendar-
|
|
93
|
+
.calendar-input__nativeInput_k71na::-webkit-inner-spin-button {
|
|
94
94
|
display: none;
|
|
95
95
|
}
|
package/index.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var Component = require('./Component.js');
|
|
4
|
+
var utils = require('./utils.js');
|
|
6
5
|
require('react');
|
|
7
6
|
require('react-merge-refs');
|
|
8
7
|
require('classnames');
|
|
@@ -14,7 +13,6 @@ require('@alfalab/icons-glyph/CalendarMIcon');
|
|
|
14
13
|
require('date-fns/format');
|
|
15
14
|
require('date-fns/isSameDay');
|
|
16
15
|
require('date-fns/parse');
|
|
17
|
-
var utils = require('./utils.js');
|
|
18
16
|
|
|
19
17
|
|
|
20
18
|
|
package/modern/Component.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import React, { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
|
|
2
2
|
import mergeRefs from 'react-merge-refs';
|
|
3
3
|
import cn from 'classnames';
|
|
4
|
-
import {
|
|
4
|
+
import { dateInLimits, Calendar, CalendarMobile } from '@alfalab/core-components-calendar/modern';
|
|
5
5
|
import { parseDateString, isCompleteDateInput, formatDate, DateInput } from '@alfalab/core-components-date-input/modern';
|
|
6
6
|
import { Popover } from '@alfalab/core-components-popover/modern';
|
|
7
7
|
import { useMedia } from '@alfalab/hooks';
|
|
8
8
|
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
9
|
+
import { SUPPORTS_INPUT_TYPE_DATE } from './utils.js';
|
|
9
10
|
import 'date-fns/format';
|
|
10
11
|
import 'date-fns/isSameDay';
|
|
11
12
|
import 'date-fns/parse';
|
|
12
|
-
import { SUPPORTS_INPUT_TYPE_DATE } from './utils.js';
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
const styles = {"component":"calendar-input__component_k71na","block":"calendar-input__block_k71na","calendarContainer":"calendar-input__calendarContainer_k71na","calendarResponsive":"calendar-input__calendarResponsive_k71na","calendarIcon":"calendar-input__calendarIcon_k71na","nativeInput":"calendar-input__nativeInput_k71na"};
|
|
15
15
|
require('./index.css')
|
|
16
16
|
|
|
17
17
|
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, ...restProps }, ref) => {
|
package/modern/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: jwioz */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-graphic-primary: #0b1f35;
|
|
4
4
|
}
|
|
@@ -44,39 +44,39 @@
|
|
|
44
44
|
--calendar-input-icon-color: var(--color-light-graphic-primary);
|
|
45
45
|
--calendar-input-popover-border-radius: var(--border-radius-m);
|
|
46
46
|
}
|
|
47
|
-
.calendar-
|
|
47
|
+
.calendar-input__component_k71na {
|
|
48
48
|
display: inline-block;
|
|
49
49
|
outline: none;
|
|
50
50
|
position: relative;
|
|
51
51
|
}
|
|
52
|
-
.calendar-
|
|
52
|
+
.calendar-input__block_k71na {
|
|
53
53
|
width: 100%;
|
|
54
54
|
}
|
|
55
|
-
.calendar-
|
|
55
|
+
.calendar-input__calendarContainer_k71na {
|
|
56
56
|
display: inline-block;
|
|
57
57
|
box-sizing: border-box;
|
|
58
58
|
border-radius: var(--calendar-input-popover-border-radius)
|
|
59
59
|
}
|
|
60
60
|
@media (max-width: 374px) {
|
|
61
|
-
.calendar-
|
|
61
|
+
.calendar-input__calendarContainer_k71na {
|
|
62
62
|
width: 100%;
|
|
63
63
|
min-width: 288px
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
|
-
.calendar-
|
|
66
|
+
.calendar-input__calendarResponsive_k71na {
|
|
67
67
|
width: var(--calendar-width);
|
|
68
68
|
padding: 0 var(--gap-m);
|
|
69
69
|
}
|
|
70
|
-
.calendar-
|
|
70
|
+
.calendar-input__calendarIcon_k71na {
|
|
71
71
|
width: 24px;
|
|
72
72
|
height: 24px;
|
|
73
73
|
display: block;
|
|
74
74
|
color: var(--calendar-input-icon-color)
|
|
75
75
|
}
|
|
76
|
-
.calendar-
|
|
76
|
+
.calendar-input__calendarIcon_k71na:not(:only-child) {
|
|
77
77
|
margin-right: var(--gap-2xs);
|
|
78
78
|
}
|
|
79
|
-
.calendar-
|
|
79
|
+
.calendar-input__nativeInput_k71na {
|
|
80
80
|
opacity: 0;
|
|
81
81
|
position: absolute;
|
|
82
82
|
top: 0;
|
|
@@ -87,9 +87,9 @@
|
|
|
87
87
|
appearance: none;
|
|
88
88
|
z-index: 1
|
|
89
89
|
}
|
|
90
|
-
.calendar-
|
|
90
|
+
.calendar-input__nativeInput_k71na::-webkit-calendar-picker-indicator {
|
|
91
91
|
display: none;
|
|
92
92
|
}
|
|
93
|
-
.calendar-
|
|
93
|
+
.calendar-input__nativeInput_k71na::-webkit-inner-spin-button {
|
|
94
94
|
display: none;
|
|
95
95
|
}
|
package/modern/index.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { CalendarInput } from './Component.js';
|
|
2
|
+
export { DATE_FORMAT, DATE_MASK, IS_BROWSER, NATIVE_DATE_FORMAT, SUPPORTS_INPUT_TYPE_DATE, formatDate, isInputDateSupported, isValidInputValue, parseDateString } from './utils.js';
|
|
1
3
|
import 'react';
|
|
2
4
|
import 'react-merge-refs';
|
|
3
5
|
import 'classnames';
|
|
@@ -9,5 +11,3 @@ import '@alfalab/icons-glyph/CalendarMIcon';
|
|
|
9
11
|
import 'date-fns/format';
|
|
10
12
|
import 'date-fns/isSameDay';
|
|
11
13
|
import 'date-fns/parse';
|
|
12
|
-
export { DATE_FORMAT, DATE_MASK, IS_BROWSER, NATIVE_DATE_FORMAT, SUPPORTS_INPUT_TYPE_DATE, formatDate, isInputDateSupported, isValidInputValue, parseDateString } from './utils.js';
|
|
13
|
-
export { CalendarInput } from './Component.js';
|
package/modern/utils.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { dateInLimits } from '@alfalab/core-components-calendar/modern';
|
|
2
|
-
import { isCompleteDateInput } from '@alfalab/core-components-date-input/modern';
|
|
3
1
|
import format from 'date-fns/format';
|
|
4
2
|
import isSameDay from 'date-fns/isSameDay';
|
|
5
3
|
import parse from 'date-fns/parse';
|
|
4
|
+
import { dateInLimits } from '@alfalab/core-components-calendar/modern';
|
|
5
|
+
import { isCompleteDateInput } from '@alfalab/core-components-date-input/modern';
|
|
6
6
|
|
|
7
7
|
const DATE_FORMAT = 'dd.MM.yyyy';
|
|
8
8
|
const NATIVE_DATE_FORMAT = 'yyyy-MM-dd';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-calendar-input",
|
|
3
|
-
"version": "8.1.
|
|
3
|
+
"version": "8.1.3",
|
|
4
4
|
"description": "Calendar input component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@alfalab/core-components-calendar": "^6.1.
|
|
21
|
+
"@alfalab/core-components-calendar": "^6.1.15",
|
|
22
22
|
"@alfalab/core-components-date-input": "^4.1.0",
|
|
23
23
|
"@alfalab/core-components-popover": "^6.0.4",
|
|
24
24
|
"@alfalab/hooks": "^1.7.0",
|
package/utils.js
CHANGED
|
@@ -1,18 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var coreComponentsCalendar = require('@alfalab/core-components-calendar');
|
|
6
|
-
var coreComponentsDateInput = require('@alfalab/core-components-date-input');
|
|
7
3
|
var format = require('date-fns/format');
|
|
8
4
|
var isSameDay = require('date-fns/isSameDay');
|
|
9
5
|
var parse = require('date-fns/parse');
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var format__default = /*#__PURE__*/_interopDefaultLegacy(format);
|
|
14
|
-
var isSameDay__default = /*#__PURE__*/_interopDefaultLegacy(isSameDay);
|
|
15
|
-
var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
|
|
6
|
+
var coreComponentsCalendar = require('@alfalab/core-components-calendar');
|
|
7
|
+
var coreComponentsDateInput = require('@alfalab/core-components-date-input');
|
|
16
8
|
|
|
17
9
|
var DATE_FORMAT = 'dd.MM.yyyy';
|
|
18
10
|
var NATIVE_DATE_FORMAT = 'yyyy-MM-dd';
|
|
@@ -21,11 +13,11 @@ var IS_BROWSER = typeof window !== 'undefined';
|
|
|
21
13
|
var SUPPORTS_INPUT_TYPE_DATE = IS_BROWSER && isInputDateSupported();
|
|
22
14
|
var formatDate = function (date, dateFormat) {
|
|
23
15
|
if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
|
|
24
|
-
return
|
|
16
|
+
return format(date, dateFormat);
|
|
25
17
|
};
|
|
26
18
|
var parseDateString = function (value, dateFormat) {
|
|
27
19
|
if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
|
|
28
|
-
return
|
|
20
|
+
return parse(value, dateFormat, new Date());
|
|
29
21
|
};
|
|
30
22
|
/**
|
|
31
23
|
* Возвращает `true`, если поддерживается `input[type="date"]`
|
|
@@ -45,7 +37,7 @@ var isValidInputValue = function (newInputValue, minDate, maxDate, offDays) {
|
|
|
45
37
|
return Boolean(dateValue &&
|
|
46
38
|
coreComponentsDateInput.isCompleteDateInput(newInputValue) &&
|
|
47
39
|
coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
|
|
48
|
-
!offDays.some(function (offDay) { return
|
|
40
|
+
!offDays.some(function (offDay) { return isSameDay(offDay, dateValue); }));
|
|
49
41
|
};
|
|
50
42
|
|
|
51
43
|
exports.DATE_FORMAT = DATE_FORMAT;
|