@semcore/date-picker 16.2.4 → 17.0.0-prerelease.18
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/CHANGELOG.md +6 -0
- package/lib/cjs/DatePicker.js +116 -139
- package/lib/cjs/DatePicker.js.map +1 -1
- package/lib/cjs/DateRangeComparator.js +144 -149
- package/lib/cjs/DateRangeComparator.js.map +1 -1
- package/lib/cjs/DateRangePicker.js +86 -101
- package/lib/cjs/DateRangePicker.js.map +1 -1
- package/lib/cjs/MonthDateRangeComparator.js +173 -180
- package/lib/cjs/MonthDateRangeComparator.js.map +1 -1
- package/lib/cjs/MonthPicker.js +70 -87
- package/lib/cjs/MonthPicker.js.map +1 -1
- package/lib/cjs/MonthRangePicker.js +96 -111
- package/lib/cjs/MonthRangePicker.js.map +1 -1
- package/lib/cjs/components/ButtonTrigger.js +12 -11
- package/lib/cjs/components/ButtonTrigger.js.map +1 -1
- package/lib/cjs/components/Calendar.js +409 -466
- package/lib/cjs/components/Calendar.js.map +1 -1
- package/lib/cjs/components/DateRangeComparatorAbstract.js +574 -626
- package/lib/cjs/components/DateRangeComparatorAbstract.js.map +1 -1
- package/lib/cjs/components/InputTrigger.js +585 -677
- package/lib/cjs/components/InputTrigger.js.map +1 -1
- package/lib/cjs/components/PickerAbstract.js +254 -273
- package/lib/cjs/components/PickerAbstract.js.map +1 -1
- package/lib/cjs/components/RangePickerAbstract.js +407 -439
- package/lib/cjs/components/RangePickerAbstract.js.map +1 -1
- package/lib/cjs/components/index.js +92 -102
- package/lib/cjs/components/index.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +15 -15
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js +17 -17
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/cjs/utils/cronTabScheduler.js +13 -22
- package/lib/cjs/utils/cronTabScheduler.js.map +1 -1
- package/lib/cjs/utils/datesIntersects.js +12 -19
- package/lib/cjs/utils/datesIntersects.js.map +1 -1
- package/lib/cjs/utils/formatDate.js +11 -9
- package/lib/cjs/utils/formatDate.js.map +1 -1
- package/lib/cjs/utils/includesDate.js +11 -16
- package/lib/cjs/utils/includesDate.js.map +1 -1
- package/lib/cjs/utils/isBetweenPlugin.js +6 -6
- package/lib/cjs/utils/isBetweenPlugin.js.map +1 -1
- package/lib/cjs/utils/shortDateRangeFormat.js +29 -33
- package/lib/cjs/utils/shortDateRangeFormat.js.map +1 -1
- package/lib/es6/DatePicker.js +117 -141
- package/lib/es6/DatePicker.js.map +1 -1
- package/lib/es6/DateRangeComparator.js +130 -135
- package/lib/es6/DateRangeComparator.js.map +1 -1
- package/lib/es6/DateRangePicker.js +87 -102
- package/lib/es6/DateRangePicker.js.map +1 -1
- package/lib/es6/MonthDateRangeComparator.js +159 -166
- package/lib/es6/MonthDateRangeComparator.js.map +1 -1
- package/lib/es6/MonthPicker.js +72 -89
- package/lib/es6/MonthPicker.js.map +1 -1
- package/lib/es6/MonthRangePicker.js +97 -112
- package/lib/es6/MonthRangePicker.js.map +1 -1
- package/lib/es6/components/ButtonTrigger.js +4 -3
- package/lib/es6/components/ButtonTrigger.js.map +1 -1
- package/lib/es6/components/Calendar.js +400 -457
- package/lib/es6/components/Calendar.js.map +1 -1
- package/lib/es6/components/DateRangeComparatorAbstract.js +552 -604
- package/lib/es6/components/DateRangeComparatorAbstract.js.map +1 -1
- package/lib/es6/components/InputTrigger.js +568 -660
- package/lib/es6/components/InputTrigger.js.map +1 -1
- package/lib/es6/components/PickerAbstract.js +246 -265
- package/lib/es6/components/PickerAbstract.js.map +1 -1
- package/lib/es6/components/RangePickerAbstract.js +397 -429
- package/lib/es6/components/RangePickerAbstract.js.map +1 -1
- package/lib/es6/components/index.js +74 -85
- package/lib/es6/components/index.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/translations/__intergalactic-dynamic-locales.js +16 -16
- package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/es6/utils/cronTabScheduler.js +13 -21
- package/lib/es6/utils/cronTabScheduler.js.map +1 -1
- package/lib/es6/utils/datesIntersects.js +10 -18
- package/lib/es6/utils/datesIntersects.js.map +1 -1
- package/lib/es6/utils/formatDate.js +6 -6
- package/lib/es6/utils/formatDate.js.map +1 -1
- package/lib/es6/utils/includesDate.js +10 -15
- package/lib/es6/utils/includesDate.js.map +1 -1
- package/lib/es6/utils/isBetweenPlugin.js +4 -4
- package/lib/es6/utils/isBetweenPlugin.js.map +1 -1
- package/lib/es6/utils/shortDateRangeFormat.js +27 -31
- package/lib/es6/utils/shortDateRangeFormat.js.map +1 -1
- package/lib/esm/DatePicker.mjs +109 -114
- package/lib/esm/DateRangeComparator.mjs +112 -105
- package/lib/esm/DateRangePicker.mjs +76 -80
- package/lib/esm/MonthDateRangeComparator.mjs +141 -134
- package/lib/esm/MonthPicker.mjs +65 -70
- package/lib/esm/MonthRangePicker.mjs +86 -88
- package/lib/esm/components/ButtonTrigger.mjs +4 -3
- package/lib/esm/components/Calendar.mjs +397 -423
- package/lib/esm/components/DateRangeComparatorAbstract.mjs +559 -516
- package/lib/esm/components/InputTrigger.mjs +550 -557
- package/lib/esm/components/PickerAbstract.mjs +249 -244
- package/lib/esm/components/RangePickerAbstract.mjs +400 -384
- package/lib/esm/components/index.mjs +73 -69
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +1 -1
- package/lib/esm/utils/cronTabScheduler.mjs +13 -18
- package/lib/esm/utils/datesIntersects.mjs +10 -14
- package/lib/esm/utils/formatDate.mjs +6 -6
- package/lib/esm/utils/includesDate.mjs +10 -13
- package/lib/esm/utils/isBetweenPlugin.mjs +4 -4
- package/lib/esm/utils/shortDateRangeFormat.mjs +27 -27
- package/lib/types/index.d.ts +2 -44
- package/package.json +16 -17
|
@@ -1,215 +1,209 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
|
|
3
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
4
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
5
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
6
|
-
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
7
|
-
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
8
|
-
import _callSuper from "@babel/runtime/helpers/esm/callSuper";
|
|
9
|
-
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
10
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
11
|
-
import { createComponent, sstyled, assignProps
|
|
3
|
+
import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
|
|
4
|
+
import { Box, Flex, NeighborLocation } from "@semcore/base-components";
|
|
12
5
|
import BaseTrigger from "@semcore/base-trigger";
|
|
13
6
|
import assignProps$1 from "@semcore/core/lib/utils/assignProps";
|
|
14
7
|
import useEnhancedEffect from "@semcore/core/lib/utils/use/useEnhancedEffect";
|
|
15
|
-
import { Box, Flex } from "@semcore/flex-box";
|
|
16
8
|
import Calendar from "@semcore/icon/Calendar/m";
|
|
17
9
|
import InputMask from "@semcore/input-mask";
|
|
18
|
-
import NeighborLocation from "@semcore/neighbor-location";
|
|
19
10
|
import Tooltip from "@semcore/tooltip";
|
|
20
11
|
import dayjs from "dayjs";
|
|
21
12
|
import React from "react";
|
|
22
13
|
import { datesIntersects } from "../utils/datesIntersects.mjs";
|
|
23
14
|
import { includesDate } from "../utils/includesDate.mjs";
|
|
24
|
-
var _excluded = ["children", "id", "role", "aria-haspopup", "aria-label", "style"], _excluded2 = ["children", "id", "role", "aria-haspopup", "aria-label", "style"], _excluded3 = ["value", "onChange", "onDisplayedPeriodChange", "locale", "w", "ariaHasPopup", "showError"], _excluded4 = ["value", "locale", "onDisplayedPeriodChange", "ariaHasPopup", "showError"], _excluded5 = ["value", "locale", "onDisplayedPeriodChange", "ariaHasPopup", "inputId", "showError"], _excluded6 = ["date", "onDateChange", "onDisplayedPeriodChange", "locale", "styles", "parts", "disabledDates", "forwardRef", "placeholders", "labelPrefix", "onMaskPipeBlock", "containerFocused", "animationsDisabled", "getI18nText", "inputId", "inputRole", "__excludeProps", "Root"];
|
|
25
15
|
/*!__reshadow-styles__:"../style/date-picker.shadow.css"*/
|
|
26
|
-
|
|
16
|
+
const style = (
|
|
27
17
|
/*__reshadow_css_start__*/
|
|
28
18
|
(sstyled.insert(
|
|
29
19
|
/*__inner_css_start__*/
|
|
30
|
-
".
|
|
20
|
+
".___SPopper_9ubmf_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_9ubmf_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_9ubmf_gg_:active,.___SPopper_9ubmf_gg_:focus{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_9ubmf_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SHeader_9ubmf_gg_,.___STitle_9ubmf_gg_{display:flex;align-items:center}.___STitle_9ubmf_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_9ubmf_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_9ubmf_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_9ubmf_gg_ .___SInner_9ubmf_gg_{justify-content:flex-start}.___SInputMask_9ubmf_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal;padding-right:var(--intergalactic-spacing-2x, 8px);transition:width calc(var(--intergalactic-duration-medium, 300)*1ms) ease,min-width calc(var(--intergalactic-duration-medium, 300)*1ms) ease}.___SInputMask_9ubmf_gg_.__animationsDisabled_9ubmf_gg_{transition:none}.___SInputMask_9ubmf_gg_ .___SValue_9ubmf_gg_{letter-spacing:0}.___SInputMask_9ubmf_gg_ .___SValue_9ubmf_gg_:focus{outline:0}.___SIndicator_9ubmf_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_9ubmf_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_9ubmf_gg_._range_value_9ubmf_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_9ubmf_gg_._range_compare_9ubmf_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_9ubmf_gg_.__disabled_9ubmf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_9ubmf_gg_{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.___SMask_9ubmf_gg_{letter-spacing:0;white-space:nowrap;overflow:hidden}.___SDateRange_9ubmf_gg_ .___SMask_9ubmf_gg_,.___SDateRange_9ubmf_gg_ .___SValue_9ubmf_gg_,.___SSingleDateInput_9ubmf_gg_ .___SMask_9ubmf_gg_,.___SSingleDateInput_9ubmf_gg_ .___SValue_9ubmf_gg_{opacity:0}.___SSingleDateInput_9ubmf_gg_:focus-within .___SHumanizedDate_9ubmf_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_9ubmf_gg_:focus-within .___SMask_9ubmf_gg_,.___SSingleDateInput_9ubmf_gg_:focus-within .___SValue_9ubmf_gg_{opacity:1}.___SDateRange_9ubmf_gg_:focus-within .___SHumanizedDate_9ubmf_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_9ubmf_gg_:focus-within .___SMask_9ubmf_gg_,.___SDateRange_9ubmf_gg_:focus-within .___SValue_9ubmf_gg_{opacity:1}.___SInputMask_9ubmf_gg_.__noHumanizedDate_9ubmf_gg_ .___SMask_9ubmf_gg_,.___SInputMask_9ubmf_gg_.__noHumanizedDate_9ubmf_gg_ .___SValue_9ubmf_gg_{opacity:1}.___SDateRange_9ubmf_gg_ .___SInputMask_9ubmf_gg_:focus-within .___SMask_9ubmf_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_9ubmf_gg_:focus-within .___SRangeSep_9ubmf_gg_,.___SRangeSep_9ubmf_gg_.__fulfilled_9ubmf_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_9ubmf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_9ubmf_gg_,.___SRangeComparatorHeader_9ubmf_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_9ubmf_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_9ubmf_gg_,.___SPeriodsList_9ubmf_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_9ubmf_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SCompareToggle_9ubmf_gg_{white-space:nowrap}@media (prefers-reduced-motion){.___SInputMask_9ubmf_gg_{transition:none}}",
|
|
31
21
|
/*__inner_css_end__*/
|
|
32
|
-
"
|
|
22
|
+
"9ubmf_gg_"
|
|
33
23
|
), /*__reshadow_css_end__*/
|
|
34
24
|
{
|
|
35
|
-
"__SHeader": "
|
|
36
|
-
"__STitle": "
|
|
37
|
-
"__SToday": "
|
|
38
|
-
"__SPeriod": "
|
|
39
|
-
"__SButton": "
|
|
40
|
-
"__SInner": "
|
|
41
|
-
"__SInputMask": "
|
|
42
|
-
"_animationsDisabled": "
|
|
43
|
-
"__SIndicator": "
|
|
44
|
-
"__SRangeIndicator": "
|
|
45
|
-
"_range_value": "
|
|
46
|
-
"_range_compare": "
|
|
47
|
-
"_disabled": "
|
|
48
|
-
"__SHumanizedDate": "
|
|
49
|
-
"__SMask": "
|
|
50
|
-
"__SSingleDateInput": "
|
|
51
|
-
"__SValue": "
|
|
52
|
-
"__SDateRange": "
|
|
53
|
-
"_noHumanizedDate": "
|
|
54
|
-
"__SRangeSep": "
|
|
55
|
-
"_fulfilled": "
|
|
56
|
-
"__SRangeComparatorHeader": "
|
|
57
|
-
"__SRangeCalendar": "
|
|
58
|
-
"__SFooter": "
|
|
59
|
-
"__SPeriodsList": "
|
|
60
|
-
"__STooltip": "
|
|
61
|
-
"__SCompareToggle": "
|
|
62
|
-
"__SPopper": "
|
|
25
|
+
"__SHeader": "___SHeader_9ubmf_gg_",
|
|
26
|
+
"__STitle": "___STitle_9ubmf_gg_",
|
|
27
|
+
"__SToday": "___SToday_9ubmf_gg_",
|
|
28
|
+
"__SPeriod": "___SPeriod_9ubmf_gg_",
|
|
29
|
+
"__SButton": "___SButton_9ubmf_gg_",
|
|
30
|
+
"__SInner": "___SInner_9ubmf_gg_",
|
|
31
|
+
"__SInputMask": "___SInputMask_9ubmf_gg_",
|
|
32
|
+
"_animationsDisabled": "__animationsDisabled_9ubmf_gg_",
|
|
33
|
+
"__SIndicator": "___SIndicator_9ubmf_gg_",
|
|
34
|
+
"__SRangeIndicator": "___SRangeIndicator_9ubmf_gg_",
|
|
35
|
+
"_range_value": "_range_value_9ubmf_gg_",
|
|
36
|
+
"_range_compare": "_range_compare_9ubmf_gg_",
|
|
37
|
+
"_disabled": "__disabled_9ubmf_gg_",
|
|
38
|
+
"__SHumanizedDate": "___SHumanizedDate_9ubmf_gg_",
|
|
39
|
+
"__SMask": "___SMask_9ubmf_gg_",
|
|
40
|
+
"__SSingleDateInput": "___SSingleDateInput_9ubmf_gg_",
|
|
41
|
+
"__SValue": "___SValue_9ubmf_gg_",
|
|
42
|
+
"__SDateRange": "___SDateRange_9ubmf_gg_",
|
|
43
|
+
"_noHumanizedDate": "__noHumanizedDate_9ubmf_gg_",
|
|
44
|
+
"__SRangeSep": "___SRangeSep_9ubmf_gg_",
|
|
45
|
+
"_fulfilled": "__fulfilled_9ubmf_gg_",
|
|
46
|
+
"__SRangeComparatorHeader": "___SRangeComparatorHeader_9ubmf_gg_",
|
|
47
|
+
"__SRangeCalendar": "___SRangeCalendar_9ubmf_gg_",
|
|
48
|
+
"__SFooter": "___SFooter_9ubmf_gg_",
|
|
49
|
+
"__SPeriodsList": "___SPeriodsList_9ubmf_gg_",
|
|
50
|
+
"__STooltip": "___STooltip_9ubmf_gg_",
|
|
51
|
+
"__SCompareToggle": "___SCompareToggle_9ubmf_gg_",
|
|
52
|
+
"__SPopper": "___SPopper_9ubmf_gg_"
|
|
63
53
|
})
|
|
64
54
|
);
|
|
65
|
-
|
|
55
|
+
const defaultAllowedParts = {
|
|
66
56
|
year: true,
|
|
67
57
|
month: true,
|
|
68
58
|
day: true
|
|
69
59
|
};
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
60
|
+
const exampleDate = new Date(2e3, 4, 29);
|
|
61
|
+
class InputTriggerRoot extends Component {
|
|
62
|
+
getSingleDateInputProps() {
|
|
63
|
+
const {
|
|
64
|
+
children: _children,
|
|
65
|
+
id,
|
|
66
|
+
role: _role,
|
|
67
|
+
"aria-haspopup": ariaHasPopup,
|
|
68
|
+
// 'aria-expanded': ariaExpanded,
|
|
69
|
+
"aria-label": _ariaLabel,
|
|
70
|
+
style: _style,
|
|
71
|
+
...otherProps
|
|
72
|
+
} = this.asProps;
|
|
73
|
+
return {
|
|
74
|
+
...otherProps,
|
|
75
|
+
ariaHasPopup,
|
|
76
|
+
inputId: id
|
|
77
|
+
};
|
|
75
78
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
var otherProps = _objectWithoutProperties(_this$asProps2, _excluded2);
|
|
104
|
-
return _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
105
|
-
ariaHasPopup,
|
|
106
|
-
inputId: id
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
}, {
|
|
110
|
-
key: "render",
|
|
111
|
-
value: function render() {
|
|
112
|
-
var _ref = this.asProps, _ref8;
|
|
113
|
-
var SInputTrigger = Box;
|
|
114
|
-
var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, style2 = _this$asProps3.style, getI18nText = _this$asProps3.getI18nText;
|
|
115
|
-
return _ref8 = sstyled(style2), /* @__PURE__ */ React.createElement(SInputTrigger, _ref8.cn("SInputTrigger", _objectSpread({}, assignProps({
|
|
79
|
+
getDateRangeProps() {
|
|
80
|
+
const {
|
|
81
|
+
children: _children,
|
|
82
|
+
id,
|
|
83
|
+
role: _rolw,
|
|
84
|
+
"aria-haspopup": ariaHasPopup,
|
|
85
|
+
"aria-label": _ariaLabel,
|
|
86
|
+
// 'aria-expanded': ariaExpanded,
|
|
87
|
+
style: _style,
|
|
88
|
+
...otherProps
|
|
89
|
+
} = this.asProps;
|
|
90
|
+
return {
|
|
91
|
+
...otherProps,
|
|
92
|
+
ariaHasPopup,
|
|
93
|
+
inputId: id
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
render() {
|
|
97
|
+
var _ref = this.asProps, _ref8;
|
|
98
|
+
const SInputTrigger = Box;
|
|
99
|
+
const {
|
|
100
|
+
Children,
|
|
101
|
+
style: style2,
|
|
102
|
+
getI18nText
|
|
103
|
+
} = this.asProps;
|
|
104
|
+
return _ref8 = sstyled(style2), /* @__PURE__ */ React.createElement(SInputTrigger, _ref8.cn("SInputTrigger", {
|
|
105
|
+
...assignProps({
|
|
116
106
|
"aria-label": getI18nText("input"),
|
|
117
107
|
"__excludeProps": ["onChange", "value", "role", "id"]
|
|
118
|
-
}, _ref)
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
108
|
+
}, _ref)
|
|
109
|
+
}), /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {})));
|
|
110
|
+
}
|
|
111
|
+
}
|
|
122
112
|
_defineProperty(InputTriggerRoot, "displayName", "InputTrigger");
|
|
123
113
|
_defineProperty(InputTriggerRoot, "style", style);
|
|
124
114
|
_defineProperty(InputTriggerRoot, "defaultProps", {
|
|
125
115
|
duration: 300,
|
|
126
116
|
popoverVisible: true
|
|
127
117
|
});
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
133
|
-
args[_key] = arguments[_key];
|
|
134
|
-
}
|
|
135
|
-
_this = _callSuper(this, SingleDateInputRoot2, [].concat(args));
|
|
136
|
-
_defineProperty(_this, "state", {
|
|
118
|
+
class SingleDateInputRoot extends Component {
|
|
119
|
+
constructor(...args) {
|
|
120
|
+
super(...args);
|
|
121
|
+
_defineProperty(this, "state", {
|
|
137
122
|
errorText: null,
|
|
138
123
|
showError: false,
|
|
139
124
|
focused: false
|
|
140
125
|
});
|
|
141
|
-
_defineProperty(
|
|
142
|
-
|
|
126
|
+
_defineProperty(this, "handleFocus", () => {
|
|
127
|
+
this.setState({
|
|
143
128
|
focused: true
|
|
144
129
|
});
|
|
145
130
|
});
|
|
146
|
-
_defineProperty(
|
|
147
|
-
|
|
131
|
+
_defineProperty(this, "handleBlur", () => {
|
|
132
|
+
this.setState({
|
|
148
133
|
focused: false
|
|
149
134
|
});
|
|
150
135
|
});
|
|
151
|
-
_defineProperty(
|
|
152
|
-
if (value ===
|
|
153
|
-
|
|
136
|
+
_defineProperty(this, "handleInputMaskPipeBlock", (value) => {
|
|
137
|
+
if (value === this.asProps.disabledDateInputAttempt) return;
|
|
138
|
+
this.handlers.disabledDateInputAttempt(value);
|
|
154
139
|
});
|
|
155
|
-
return _this;
|
|
156
140
|
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
if (errorText === void 0) {
|
|
169
|
-
var key = "unavailableDate";
|
|
170
|
-
if (_this2.asProps.parts && !_this2.asProps.parts.day) {
|
|
171
|
-
key = "unavailableMonth";
|
|
172
|
-
}
|
|
173
|
-
errorText = _this2.asProps.getI18nText(key);
|
|
174
|
-
}
|
|
175
|
-
if (typeof errorText === "function") {
|
|
176
|
-
errorText = errorText(date);
|
|
141
|
+
uncontrolledProps() {
|
|
142
|
+
return {
|
|
143
|
+
disabledDateInputAttempt: [null, (date) => {
|
|
144
|
+
let errorText = this.state.errorText;
|
|
145
|
+
let showError = false;
|
|
146
|
+
if (date !== null) {
|
|
147
|
+
errorText = this.asProps.disabledErrorText;
|
|
148
|
+
if (errorText === void 0) {
|
|
149
|
+
let key = "unavailableDate";
|
|
150
|
+
if (this.asProps.parts && !this.asProps.parts.day) {
|
|
151
|
+
key = "unavailableMonth";
|
|
177
152
|
}
|
|
178
|
-
|
|
153
|
+
errorText = this.asProps.getI18nText(key);
|
|
179
154
|
}
|
|
180
|
-
|
|
181
|
-
errorText
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
155
|
+
if (typeof errorText === "function") {
|
|
156
|
+
errorText = errorText(date);
|
|
157
|
+
}
|
|
158
|
+
showError = this.asProps.disabledErrorText !== null;
|
|
159
|
+
}
|
|
160
|
+
this.setState({
|
|
161
|
+
errorText,
|
|
162
|
+
showError
|
|
163
|
+
});
|
|
164
|
+
}]
|
|
165
|
+
};
|
|
166
|
+
}
|
|
167
|
+
getMaskedInputProps() {
|
|
168
|
+
const {
|
|
169
|
+
value,
|
|
170
|
+
onChange,
|
|
171
|
+
onDisplayedPeriodChange,
|
|
172
|
+
locale,
|
|
173
|
+
w: _w,
|
|
174
|
+
ariaHasPopup: _ariaHasPopup,
|
|
175
|
+
showError: _showError,
|
|
176
|
+
...otherProps
|
|
177
|
+
} = this.asProps;
|
|
178
|
+
return {
|
|
179
|
+
"date": value,
|
|
180
|
+
"onDateChange": onChange,
|
|
181
|
+
onDisplayedPeriodChange,
|
|
182
|
+
locale,
|
|
183
|
+
"aria-haspopup": "true",
|
|
184
|
+
"onMaskPipeBlock": this.handleInputMaskPipeBlock,
|
|
185
|
+
...otherProps
|
|
186
|
+
};
|
|
187
|
+
}
|
|
188
|
+
render() {
|
|
189
|
+
var _ref2 = this.asProps, _ref9;
|
|
190
|
+
const {
|
|
191
|
+
Children,
|
|
192
|
+
forwardRef,
|
|
193
|
+
styles,
|
|
194
|
+
state,
|
|
195
|
+
showError: showErrorProps,
|
|
196
|
+
popoverVisible
|
|
197
|
+
} = this.asProps;
|
|
198
|
+
const {
|
|
199
|
+
errorText,
|
|
200
|
+
showError: showErrorState,
|
|
201
|
+
focused
|
|
202
|
+
} = this.state;
|
|
203
|
+
const showError = showErrorState && showErrorProps;
|
|
204
|
+
const SSingleDateInput = InputMask;
|
|
205
|
+
return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SSingleDateInput, _ref9.cn("SSingleDateInput", {
|
|
206
|
+
...assignProps({
|
|
213
207
|
"tag": Tooltip,
|
|
214
208
|
"placement": "top-start",
|
|
215
209
|
"title": errorText,
|
|
@@ -220,229 +214,236 @@ var SingleDateInputRoot = /* @__PURE__ */ (function(_Component2) {
|
|
|
220
214
|
"onFocus": this.handleFocus,
|
|
221
215
|
"onBlur": this.handleBlur,
|
|
222
216
|
"__excludeProps": ["onChange", "style", "aria-expanded"]
|
|
223
|
-
}, _ref2)
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
}
|
|
217
|
+
}, _ref2)
|
|
218
|
+
}), /* @__PURE__ */ React.createElement(NeighborLocation, _ref9.cn("NeighborLocation", {}), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {}))));
|
|
219
|
+
}
|
|
220
|
+
}
|
|
227
221
|
_defineProperty(SingleDateInputRoot, "displayName", "SingleDateInput");
|
|
228
222
|
_defineProperty(SingleDateInputRoot, "style", style);
|
|
229
223
|
_defineProperty(SingleDateInputRoot, "defaultProps", {
|
|
230
|
-
children:
|
|
231
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SingleDateInput.Indicator, null), /* @__PURE__ */ React.createElement(SingleDateInput.MaskedInput, null));
|
|
232
|
-
},
|
|
224
|
+
children: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SingleDateInput.Indicator, null), /* @__PURE__ */ React.createElement(SingleDateInput.MaskedInput, null)),
|
|
233
225
|
defaultDisabledDateInputAttempt: false,
|
|
234
226
|
showError: true
|
|
235
227
|
});
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
241
|
-
args[_key2] = arguments[_key2];
|
|
242
|
-
}
|
|
243
|
-
_this3 = _callSuper(this, DateRangeRoot2, [].concat(args));
|
|
244
|
-
_defineProperty(_this3, "state", {
|
|
228
|
+
class DateRangeRoot extends Component {
|
|
229
|
+
constructor(...args) {
|
|
230
|
+
super(...args);
|
|
231
|
+
_defineProperty(this, "state", {
|
|
245
232
|
containerFocused: false,
|
|
246
233
|
errorText: null,
|
|
247
234
|
showError: false,
|
|
248
235
|
lastChangedInput: "from"
|
|
249
236
|
});
|
|
250
|
-
_defineProperty(
|
|
251
|
-
_defineProperty(
|
|
252
|
-
_defineProperty(
|
|
253
|
-
var
|
|
254
|
-
|
|
255
|
-
|
|
237
|
+
_defineProperty(this, "fromRef", /* @__PURE__ */ React.createRef());
|
|
238
|
+
_defineProperty(this, "toRef", /* @__PURE__ */ React.createRef());
|
|
239
|
+
_defineProperty(this, "handleFromChange", (value, event) => {
|
|
240
|
+
var _a, _b;
|
|
241
|
+
const {
|
|
242
|
+
onChange
|
|
243
|
+
} = this.asProps;
|
|
244
|
+
const prevValue = [((_a = this.asProps.value) == null ? void 0 : _a[0]) ?? null, ((_b = this.asProps.value) == null ? void 0 : _b[1]) ?? null];
|
|
256
245
|
onChange([value, prevValue[1]], event);
|
|
257
246
|
if (value) {
|
|
258
|
-
if (!
|
|
259
|
-
|
|
260
|
-
setTimeout(
|
|
261
|
-
if (!
|
|
262
|
-
|
|
247
|
+
if (!this.toRef.current) return;
|
|
248
|
+
this.toRef.current.focus();
|
|
249
|
+
setTimeout(() => {
|
|
250
|
+
if (!this.toRef.current) return;
|
|
251
|
+
this.toRef.current.setSelectionRange(0, 0);
|
|
263
252
|
}, 0);
|
|
264
253
|
}
|
|
265
254
|
});
|
|
266
|
-
_defineProperty(
|
|
267
|
-
var
|
|
268
|
-
|
|
269
|
-
|
|
255
|
+
_defineProperty(this, "handleToChange", (value, event) => {
|
|
256
|
+
var _a, _b;
|
|
257
|
+
const {
|
|
258
|
+
onChange
|
|
259
|
+
} = this.asProps;
|
|
260
|
+
const prevValue = [((_a = this.asProps.value) == null ? void 0 : _a[0]) ?? null, ((_b = this.asProps.value) == null ? void 0 : _b[1]) ?? null];
|
|
270
261
|
onChange([prevValue[0], value], event);
|
|
271
262
|
});
|
|
272
|
-
_defineProperty(
|
|
273
|
-
if (!
|
|
274
|
-
if (!
|
|
275
|
-
|
|
263
|
+
_defineProperty(this, "handleFromKeydown", (event) => {
|
|
264
|
+
if (!this.toRef.current) return;
|
|
265
|
+
if (!this.fromRef.current) return;
|
|
266
|
+
this.setState({
|
|
276
267
|
lastChangedInput: "from"
|
|
277
268
|
});
|
|
278
|
-
if (event.key === "ArrowRight" &&
|
|
279
|
-
|
|
280
|
-
setTimeout(
|
|
281
|
-
|
|
269
|
+
if (event.key === "ArrowRight" && this.fromRef.current.selectionStart === this.fromRef.current.value.length && this.fromRef.current.selectionEnd === this.fromRef.current.value.length) {
|
|
270
|
+
this.toRef.current.focus();
|
|
271
|
+
setTimeout(() => {
|
|
272
|
+
this.toRef.current.setSelectionRange(0, 0);
|
|
282
273
|
}, 0);
|
|
283
274
|
}
|
|
284
275
|
});
|
|
285
|
-
_defineProperty(
|
|
286
|
-
if (!
|
|
287
|
-
if (!
|
|
288
|
-
|
|
276
|
+
_defineProperty(this, "handleToKeydown", (event) => {
|
|
277
|
+
if (!this.toRef.current) return;
|
|
278
|
+
if (!this.fromRef.current) return;
|
|
279
|
+
this.setState({
|
|
289
280
|
lastChangedInput: "to"
|
|
290
281
|
});
|
|
291
|
-
if (event.key === "Backspace" && !
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
setTimeout(
|
|
295
|
-
|
|
282
|
+
if (event.key === "Backspace" && !this.toRef.current.value) {
|
|
283
|
+
const value = this.fromRef.current.value;
|
|
284
|
+
this.fromRef.current.focus();
|
|
285
|
+
setTimeout(() => {
|
|
286
|
+
this.fromRef.current.setSelectionRange(value.length, value.length);
|
|
296
287
|
}, 0);
|
|
297
288
|
}
|
|
298
|
-
if (event.key === "ArrowLeft" &&
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
setTimeout(
|
|
302
|
-
|
|
289
|
+
if (event.key === "ArrowLeft" && this.toRef.current.selectionStart === 0 && this.toRef.current.selectionEnd === 0) {
|
|
290
|
+
const value = this.fromRef.current.value;
|
|
291
|
+
this.fromRef.current.focus();
|
|
292
|
+
setTimeout(() => {
|
|
293
|
+
this.fromRef.current.setSelectionRange(value.length, value.length);
|
|
303
294
|
}, 0);
|
|
304
295
|
}
|
|
305
296
|
});
|
|
306
|
-
_defineProperty(
|
|
307
|
-
if (value ===
|
|
308
|
-
|
|
297
|
+
_defineProperty(this, "handleInputMaskPipeBlock", (value) => {
|
|
298
|
+
if (value === this.asProps.disabledDateInputAttempt) return;
|
|
299
|
+
this.handlers.disabledDateInputAttempt(value);
|
|
309
300
|
});
|
|
310
|
-
_defineProperty(
|
|
311
|
-
|
|
301
|
+
_defineProperty(this, "handleFocus", () => {
|
|
302
|
+
this.setState({
|
|
312
303
|
containerFocused: true
|
|
313
304
|
});
|
|
314
305
|
});
|
|
315
|
-
_defineProperty(
|
|
316
|
-
|
|
306
|
+
_defineProperty(this, "handleBlur", () => {
|
|
307
|
+
this.setState({
|
|
317
308
|
containerFocused: false
|
|
318
309
|
});
|
|
319
310
|
});
|
|
320
|
-
_defineProperty(
|
|
321
|
-
|
|
322
|
-
|
|
311
|
+
_defineProperty(this, "updateDisabledDateInputAttempt", (value) => {
|
|
312
|
+
const {
|
|
313
|
+
disabledDates
|
|
314
|
+
} = this.asProps;
|
|
315
|
+
let invalid = false;
|
|
323
316
|
if (value) {
|
|
324
|
-
if (value[0] && value[1]) invalid = disabledDates.some(datesIntersects([value[0], value[1]],
|
|
325
|
-
else if (value[0]) invalid = disabledDates.some(includesDate(dayjs(value[0]),
|
|
326
|
-
else if (value[1]) invalid = disabledDates.some(includesDate(dayjs(value[1]),
|
|
317
|
+
if (value[0] && value[1]) invalid = disabledDates.some(datesIntersects([value[0], value[1]], this.asProps.unit));
|
|
318
|
+
else if (value[0]) invalid = disabledDates.some(includesDate(dayjs(value[0]), this.asProps.unit));
|
|
319
|
+
else if (value[1]) invalid = disabledDates.some(includesDate(dayjs(value[1]), this.asProps.unit));
|
|
327
320
|
}
|
|
328
321
|
if (invalid) {
|
|
329
|
-
|
|
330
|
-
setTimeout(
|
|
331
|
-
if (value ===
|
|
332
|
-
|
|
322
|
+
const invalidValue = this.state.lastChangedInput === "to" ? value[1] : value[0];
|
|
323
|
+
setTimeout(() => {
|
|
324
|
+
if (value === this.asProps.disabledDateInputAttempt) return;
|
|
325
|
+
this.handlers.disabledDateInputAttempt(invalidValue);
|
|
333
326
|
}, 0);
|
|
334
327
|
}
|
|
335
328
|
});
|
|
336
|
-
return _this3;
|
|
337
329
|
}
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
if (errorText === void 0) {
|
|
350
|
-
var key = "unavailableDate";
|
|
351
|
-
if (_this4.asProps.parts && !_this4.asProps.parts.day) {
|
|
352
|
-
key = "unavailableMonth";
|
|
353
|
-
}
|
|
354
|
-
if (_this4.state.lastChangedInput === "to") {
|
|
355
|
-
key = "unavailableEndDate";
|
|
356
|
-
if (_this4.asProps.parts && !_this4.asProps.parts.day) {
|
|
357
|
-
key = "unavailableEndMonth";
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
errorText = _this4.asProps.getI18nText(key);
|
|
330
|
+
uncontrolledProps() {
|
|
331
|
+
return {
|
|
332
|
+
disabledDateInputAttempt: [null, (date) => {
|
|
333
|
+
let errorText = this.state.errorText;
|
|
334
|
+
let showError = false;
|
|
335
|
+
if (date !== null) {
|
|
336
|
+
errorText = this.asProps.disabledErrorText;
|
|
337
|
+
if (errorText === void 0) {
|
|
338
|
+
let key = "unavailableDate";
|
|
339
|
+
if (this.asProps.parts && !this.asProps.parts.day) {
|
|
340
|
+
key = "unavailableMonth";
|
|
361
341
|
}
|
|
362
|
-
if (
|
|
363
|
-
|
|
342
|
+
if (this.state.lastChangedInput === "to") {
|
|
343
|
+
key = "unavailableEndDate";
|
|
344
|
+
if (this.asProps.parts && !this.asProps.parts.day) {
|
|
345
|
+
key = "unavailableEndMonth";
|
|
346
|
+
}
|
|
364
347
|
}
|
|
365
|
-
|
|
348
|
+
errorText = this.asProps.getI18nText(key);
|
|
366
349
|
}
|
|
367
|
-
|
|
368
|
-
errorText
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
350
|
+
if (typeof errorText === "function") {
|
|
351
|
+
errorText = errorText(date);
|
|
352
|
+
}
|
|
353
|
+
showError = this.asProps.disabledErrorText !== null;
|
|
354
|
+
}
|
|
355
|
+
this.setState({
|
|
356
|
+
errorText,
|
|
357
|
+
showError
|
|
358
|
+
});
|
|
359
|
+
}]
|
|
360
|
+
};
|
|
361
|
+
}
|
|
362
|
+
getFromMaskedInputProps() {
|
|
363
|
+
const {
|
|
364
|
+
value,
|
|
365
|
+
locale,
|
|
366
|
+
onDisplayedPeriodChange,
|
|
367
|
+
ariaHasPopup,
|
|
368
|
+
showError: _showError,
|
|
369
|
+
...otherProps
|
|
370
|
+
} = this.asProps;
|
|
371
|
+
return assignProps$1({
|
|
372
|
+
"ref": this.fromRef,
|
|
373
|
+
"date": value == null ? void 0 : value[0],
|
|
374
|
+
"onDateChange": this.handleFromChange,
|
|
375
|
+
"onKeyDown": this.handleFromKeydown,
|
|
376
|
+
locale,
|
|
377
|
+
"flex": 1,
|
|
378
|
+
onDisplayedPeriodChange,
|
|
379
|
+
"aria-haspopup": ariaHasPopup,
|
|
380
|
+
"onMaskPipeBlock": this.handleInputMaskPipeBlock,
|
|
381
|
+
"containerFocused": this.state.containerFocused
|
|
382
|
+
}, otherProps);
|
|
383
|
+
}
|
|
384
|
+
getToMaskedInputProps() {
|
|
385
|
+
const {
|
|
386
|
+
value,
|
|
387
|
+
locale,
|
|
388
|
+
onDisplayedPeriodChange,
|
|
389
|
+
ariaHasPopup,
|
|
390
|
+
inputId: _inputId,
|
|
391
|
+
showError: _showError,
|
|
392
|
+
...otherProps
|
|
393
|
+
} = this.asProps;
|
|
394
|
+
const ariaLabel = this.asProps.getI18nText("toDate", {
|
|
395
|
+
date: this.asProps.getI18nText("input")
|
|
396
|
+
});
|
|
397
|
+
return assignProps$1({
|
|
398
|
+
"ref": this.toRef,
|
|
399
|
+
"date": value == null ? void 0 : value[1],
|
|
400
|
+
"onDateChange": this.handleToChange,
|
|
401
|
+
"onKeyDown": this.handleToKeydown,
|
|
402
|
+
locale,
|
|
403
|
+
"flex": 1,
|
|
404
|
+
onDisplayedPeriodChange,
|
|
405
|
+
"aria-label": ariaLabel,
|
|
406
|
+
"aria-haspopup": ariaHasPopup,
|
|
407
|
+
"onMaskPipeBlock": this.handleInputMaskPipeBlock,
|
|
408
|
+
"containerFocused": this.state.containerFocused
|
|
409
|
+
}, otherProps);
|
|
410
|
+
}
|
|
411
|
+
getRangeSepProps() {
|
|
412
|
+
const {
|
|
413
|
+
value
|
|
414
|
+
} = this.asProps;
|
|
415
|
+
return {
|
|
416
|
+
fulfilled: !!(value && (value[0] || value[1]))
|
|
417
|
+
};
|
|
418
|
+
}
|
|
419
|
+
componentDidUpdate(prevProps) {
|
|
420
|
+
if (prevProps.value !== this.asProps.value) {
|
|
435
421
|
this.updateDisabledDateInputAttempt(this.asProps.value);
|
|
436
422
|
}
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
value
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
423
|
+
}
|
|
424
|
+
componentDidMount() {
|
|
425
|
+
this.updateDisabledDateInputAttempt(this.asProps.value);
|
|
426
|
+
}
|
|
427
|
+
render() {
|
|
428
|
+
var _ref3 = this.asProps, _ref0;
|
|
429
|
+
const SDateRange = InputMask;
|
|
430
|
+
const {
|
|
431
|
+
Children,
|
|
432
|
+
styles,
|
|
433
|
+
w,
|
|
434
|
+
state,
|
|
435
|
+
showError: showErrorProps,
|
|
436
|
+
popoverVisible
|
|
437
|
+
} = this.asProps;
|
|
438
|
+
const {
|
|
439
|
+
errorText,
|
|
440
|
+
lastChangedInput,
|
|
441
|
+
showError: showErrorState,
|
|
442
|
+
containerFocused
|
|
443
|
+
} = this.state;
|
|
444
|
+
const showError = showErrorState && showErrorProps;
|
|
445
|
+
return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(SDateRange, _ref0.cn("SDateRange", {
|
|
446
|
+
...assignProps({
|
|
446
447
|
"tag": Tooltip,
|
|
447
448
|
"ignorePortalsStacking": true,
|
|
448
449
|
"placement": lastChangedInput === "to" ? "top-end" : "top-start",
|
|
@@ -454,64 +455,90 @@ var DateRangeRoot = /* @__PURE__ */ (function(_Component3) {
|
|
|
454
455
|
"w": w,
|
|
455
456
|
"onFocus": this.handleFocus,
|
|
456
457
|
"onBlur": this.handleBlur
|
|
457
|
-
}, _ref3)
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
}
|
|
458
|
+
}, _ref3)
|
|
459
|
+
}), /* @__PURE__ */ React.createElement(Children, _ref0.cn("Children", {})));
|
|
460
|
+
}
|
|
461
|
+
}
|
|
461
462
|
_defineProperty(DateRangeRoot, "displayName", "DateRange");
|
|
462
463
|
_defineProperty(DateRangeRoot, "style", style);
|
|
463
464
|
_defineProperty(DateRangeRoot, "defaultProps", {
|
|
464
|
-
children:
|
|
465
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DateRange.Indicator, null), /* @__PURE__ */ React.createElement(DateRange.FromMaskedInput, null), /* @__PURE__ */ React.createElement(DateRange.RangeSep, null), /* @__PURE__ */ React.createElement(DateRange.ToMaskedInput, null));
|
|
466
|
-
},
|
|
465
|
+
children: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DateRange.Indicator, null), /* @__PURE__ */ React.createElement(DateRange.FromMaskedInput, null), /* @__PURE__ */ React.createElement(DateRange.RangeSep, null), /* @__PURE__ */ React.createElement(DateRange.ToMaskedInput, null)),
|
|
467
466
|
defaultDisabledDateInputAttempt: false,
|
|
468
467
|
showError: true
|
|
469
468
|
});
|
|
470
469
|
function FromMaskedInput(props) {
|
|
471
470
|
var _ref4 = arguments[0], _ref1;
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
471
|
+
const SFromMaskedInput = MaskedInput;
|
|
472
|
+
const {
|
|
473
|
+
getI18nText
|
|
474
|
+
} = props;
|
|
475
|
+
return _ref1 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SFromMaskedInput, _ref1.cn("SFromMaskedInput", {
|
|
476
|
+
...assignProps({
|
|
477
|
+
"labelPrefix": getI18nText("fromDatePlaceholder")
|
|
478
|
+
}, _ref4)
|
|
479
|
+
}));
|
|
477
480
|
}
|
|
478
481
|
function ToMaskedInput(props) {
|
|
479
482
|
var _ref5 = arguments[0], _ref10;
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
483
|
+
const SToMaskedInput = MaskedInput;
|
|
484
|
+
const {
|
|
485
|
+
getI18nText
|
|
486
|
+
} = props;
|
|
487
|
+
return _ref10 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SToMaskedInput, _ref10.cn("SToMaskedInput", {
|
|
488
|
+
...assignProps({
|
|
489
|
+
"labelPrefix": getI18nText("toDatePlaceholder")
|
|
490
|
+
}, _ref5)
|
|
491
|
+
}));
|
|
485
492
|
}
|
|
486
493
|
function Indicator(props) {
|
|
487
494
|
var _ref6 = arguments[0], _ref11;
|
|
488
|
-
|
|
489
|
-
return _ref11 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SIndicator, _ref11.cn("SIndicator",
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
495
|
+
const SIndicator = InputMask.Addon;
|
|
496
|
+
return _ref11 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SIndicator, _ref11.cn("SIndicator", {
|
|
497
|
+
...assignProps({
|
|
498
|
+
"tag": Calendar,
|
|
499
|
+
"aria-hidden": "true",
|
|
500
|
+
"tabIndex": -1
|
|
501
|
+
}, _ref6)
|
|
502
|
+
}));
|
|
494
503
|
}
|
|
495
504
|
function RangeSep(props) {
|
|
496
505
|
var _ref7 = arguments[0], _ref12;
|
|
497
|
-
|
|
498
|
-
return _ref12 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SRangeSep, _ref12.cn("SRangeSep",
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
506
|
+
const SRangeSep = InputMask.Addon;
|
|
507
|
+
return _ref12 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SRangeSep, _ref12.cn("SRangeSep", {
|
|
508
|
+
...assignProps({
|
|
509
|
+
"tag": Flex,
|
|
510
|
+
"alignItems": "center",
|
|
511
|
+
"justifyContent": "center",
|
|
512
|
+
"pl": 0,
|
|
513
|
+
"flex": "0"
|
|
514
|
+
}, _ref7)
|
|
515
|
+
}), "–");
|
|
505
516
|
}
|
|
506
|
-
function MaskedInput(
|
|
517
|
+
function MaskedInput({
|
|
518
|
+
date: outerValue,
|
|
519
|
+
onDateChange,
|
|
520
|
+
onDisplayedPeriodChange,
|
|
521
|
+
locale,
|
|
522
|
+
styles,
|
|
523
|
+
parts: allowedParts = defaultAllowedParts,
|
|
524
|
+
disabledDates,
|
|
525
|
+
forwardRef,
|
|
526
|
+
placeholders: providedPlaceholders,
|
|
527
|
+
labelPrefix = "Date",
|
|
528
|
+
onMaskPipeBlock,
|
|
529
|
+
containerFocused,
|
|
530
|
+
animationsDisabled,
|
|
531
|
+
getI18nText,
|
|
532
|
+
inputId,
|
|
533
|
+
inputRole = "combobox",
|
|
534
|
+
__excludeProps,
|
|
535
|
+
Root: _root,
|
|
536
|
+
...otherProps
|
|
537
|
+
}) {
|
|
507
538
|
var _ref13;
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
var otherProps = _objectWithoutProperties(_ref14, _excluded6);
|
|
512
|
-
var ref = React.useRef();
|
|
513
|
-
var _React$useState = React.useState(void 0), _React$useState2 = _slicedToArray(_React$useState, 2), width = _React$useState2[0], setWidth = _React$useState2[1];
|
|
514
|
-
var placeholders = React.useMemo(function() {
|
|
539
|
+
const ref = React.useRef();
|
|
540
|
+
const [width, setWidth] = React.useState(void 0);
|
|
541
|
+
const placeholders = React.useMemo(() => {
|
|
515
542
|
if (providedPlaceholders) return providedPlaceholders;
|
|
516
543
|
return {
|
|
517
544
|
year: getI18nText("placeholder-years"),
|
|
@@ -523,46 +550,41 @@ function MaskedInput(_ref14) {
|
|
|
523
550
|
console.error({
|
|
524
551
|
placeholders
|
|
525
552
|
});
|
|
526
|
-
throw new Error(
|
|
553
|
+
throw new Error(`InputTrigger placeholder prop should contain fields year, month and day each one with string value of single character length. [see above what was received] (${placeholders})`, placeholders);
|
|
527
554
|
}
|
|
528
|
-
|
|
529
|
-
|
|
555
|
+
const {
|
|
556
|
+
sep,
|
|
557
|
+
order
|
|
558
|
+
} = React.useMemo(() => {
|
|
559
|
+
const options = {
|
|
530
560
|
year: "numeric",
|
|
531
561
|
month: "numeric",
|
|
532
562
|
day: "numeric"
|
|
533
563
|
};
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
}
|
|
545
|
-
if (order2.length < 3 && ["day", "month", "year"].includes(part.type) && allowedParts[part.type]) {
|
|
546
|
-
order2.push(part.type);
|
|
547
|
-
}
|
|
564
|
+
const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
|
|
565
|
+
let sep2 = void 0;
|
|
566
|
+
const order2 = [];
|
|
567
|
+
const parts = dateTimeFormat.formatToParts(exampleDate);
|
|
568
|
+
for (const part of parts) {
|
|
569
|
+
if (!sep2 && part.type === "literal") {
|
|
570
|
+
sep2 = part.value;
|
|
571
|
+
}
|
|
572
|
+
if (order2.length < 3 && ["day", "month", "year"].includes(part.type) && allowedParts[part.type]) {
|
|
573
|
+
order2.push(part.type);
|
|
548
574
|
}
|
|
549
|
-
} catch (err) {
|
|
550
|
-
_iterator.e(err);
|
|
551
|
-
} finally {
|
|
552
|
-
_iterator.f();
|
|
553
575
|
}
|
|
554
|
-
sep2 = sep2
|
|
576
|
+
sep2 = sep2 ?? " ";
|
|
555
577
|
return {
|
|
556
578
|
sep: sep2,
|
|
557
579
|
order: order2
|
|
558
580
|
};
|
|
559
|
-
}, [locale, allowedParts])
|
|
560
|
-
|
|
561
|
-
|
|
581
|
+
}, [locale, allowedParts]);
|
|
582
|
+
const outer = React.useMemo(() => {
|
|
583
|
+
let outerDate = outerValue;
|
|
562
584
|
if (typeof outerValue === "number" || typeof outerValue === "string") {
|
|
563
585
|
outerDate = new Date(outerValue);
|
|
564
586
|
}
|
|
565
|
-
|
|
587
|
+
const validDate = outerDate && outerDate instanceof Date && !Number.isNaN(outerDate.getTime());
|
|
566
588
|
if (!validDate) return null;
|
|
567
589
|
return {
|
|
568
590
|
year: outerDate.getFullYear().toString().padStart(4, "0"),
|
|
@@ -570,82 +592,68 @@ function MaskedInput(_ref14) {
|
|
|
570
592
|
day: outerDate.getDate().toString().padStart(2, "0")
|
|
571
593
|
};
|
|
572
594
|
}, [outerValue]);
|
|
573
|
-
|
|
595
|
+
const stringifyValue = React.useCallback((value2) => {
|
|
574
596
|
if (!value2) return null;
|
|
575
597
|
if (!value2.year && !value2.month && !value2.day) return null;
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
if (part === "year" && value2.year) result.push(value2.year);
|
|
583
|
-
if (part === "month" && value2.month) result.push(value2.month);
|
|
584
|
-
if (part === "day" && value2.day) result.push(value2.day);
|
|
585
|
-
}
|
|
586
|
-
} catch (err) {
|
|
587
|
-
_iterator2.e(err);
|
|
588
|
-
} finally {
|
|
589
|
-
_iterator2.f();
|
|
598
|
+
const result = [];
|
|
599
|
+
for (const part of order) {
|
|
600
|
+
if (!allowedParts[part]) continue;
|
|
601
|
+
if (part === "year" && value2.year) result.push(value2.year);
|
|
602
|
+
if (part === "month" && value2.month) result.push(value2.month);
|
|
603
|
+
if (part === "day" && value2.day) result.push(value2.day);
|
|
590
604
|
}
|
|
591
605
|
return result.join(sep);
|
|
592
606
|
}, [order, allowedParts]);
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
var _lastKnownOuterValue$, _lastKnownOuterValue$2, _lastKnownOuterValue$3;
|
|
600
|
-
if (((_lastKnownOuterValue$ = lastKnownOuterValue.current) === null || _lastKnownOuterValue$ === void 0 ? void 0 : _lastKnownOuterValue$.day) !== (outer === null || outer === void 0 ? void 0 : outer.day) || ((_lastKnownOuterValue$2 = lastKnownOuterValue.current) === null || _lastKnownOuterValue$2 === void 0 ? void 0 : _lastKnownOuterValue$2.month) !== (outer === null || outer === void 0 ? void 0 : outer.month) || ((_lastKnownOuterValue$3 = lastKnownOuterValue.current) === null || _lastKnownOuterValue$3 === void 0 ? void 0 : _lastKnownOuterValue$3.year) !== (outer === null || outer === void 0 ? void 0 : outer.year)) {
|
|
607
|
+
const [internalValue, setInternalValue] = React.useState(outer);
|
|
608
|
+
const value = React.useMemo(() => stringifyValue(internalValue), [stringifyValue, internalValue]);
|
|
609
|
+
const lastKnownOuterValue = React.useRef(outer);
|
|
610
|
+
React.useEffect(() => {
|
|
611
|
+
var _a, _b, _c;
|
|
612
|
+
if (((_a = lastKnownOuterValue.current) == null ? void 0 : _a.day) !== (outer == null ? void 0 : outer.day) || ((_b = lastKnownOuterValue.current) == null ? void 0 : _b.month) !== (outer == null ? void 0 : outer.month) || ((_c = lastKnownOuterValue.current) == null ? void 0 : _c.year) !== (outer == null ? void 0 : outer.year)) {
|
|
601
613
|
setInternalValue(outer);
|
|
602
614
|
}
|
|
603
615
|
lastKnownOuterValue.current = outer;
|
|
604
616
|
}, [outer, setInternalValue]);
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
for (
|
|
617
|
+
const pipeMask = React.useCallback((value2) => {
|
|
618
|
+
let placeholdersOnly = true;
|
|
619
|
+
for (let i = 0; i < value2.length; i++) {
|
|
608
620
|
if (value2[i] !== "_" && value2[i] !== sep) {
|
|
609
621
|
placeholdersOnly = false;
|
|
610
622
|
break;
|
|
611
623
|
}
|
|
612
624
|
}
|
|
613
625
|
if (placeholdersOnly) {
|
|
614
|
-
onMaskPipeBlock
|
|
626
|
+
onMaskPipeBlock == null ? void 0 : onMaskPipeBlock(null);
|
|
615
627
|
return "";
|
|
616
628
|
}
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
if (part2 === "year" && allowedParts.year) offset += 4;
|
|
625
|
-
if (part2 === "month" && allowedParts.month) offset += 2;
|
|
626
|
-
if (part2 === "day" && allowedParts.day) offset += 2;
|
|
627
|
-
}
|
|
628
|
-
} catch (err) {
|
|
629
|
-
_iterator3.e(err);
|
|
630
|
-
} finally {
|
|
631
|
-
_iterator3.f();
|
|
629
|
+
const getOffsetTo = (partName) => {
|
|
630
|
+
const partsBefore = order.slice(0, order.indexOf(partName));
|
|
631
|
+
let offset = 0;
|
|
632
|
+
for (const part of partsBefore) {
|
|
633
|
+
if (part === "year" && allowedParts.year) offset += 4;
|
|
634
|
+
if (part === "month" && allowedParts.month) offset += 2;
|
|
635
|
+
if (part === "day" && allowedParts.day) offset += 2;
|
|
632
636
|
}
|
|
633
637
|
offset += partsBefore.length * sep.length;
|
|
634
638
|
return offset;
|
|
635
639
|
};
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
for (
|
|
640
|
+
const indexesOfPipedChars = [];
|
|
641
|
+
const parsed = {};
|
|
642
|
+
const parts = value2.split(sep);
|
|
643
|
+
for (const partName in placeholders) {
|
|
640
644
|
parsed[partName] = placeholders[partName];
|
|
641
645
|
}
|
|
642
|
-
for (
|
|
643
|
-
parsed[order[
|
|
646
|
+
for (let i = 0; i < order.length; i++) {
|
|
647
|
+
parsed[order[i]] = parts[i];
|
|
644
648
|
}
|
|
645
|
-
|
|
649
|
+
let {
|
|
650
|
+
year,
|
|
651
|
+
month,
|
|
652
|
+
day
|
|
653
|
+
} = parsed;
|
|
646
654
|
if (allowedParts.month) {
|
|
647
655
|
if (month[0] !== "_" && Number.parseInt(month[0], 10) > 1) {
|
|
648
|
-
month =
|
|
656
|
+
month = `0${month[0]}`;
|
|
649
657
|
indexesOfPipedChars.push(getOffsetTo("month"));
|
|
650
658
|
}
|
|
651
659
|
if (month === "00") month = "01";
|
|
@@ -653,86 +661,76 @@ function MaskedInput(_ref14) {
|
|
|
653
661
|
}
|
|
654
662
|
if (allowedParts.day) {
|
|
655
663
|
if (day[0] !== "_" && Number.parseInt(day[0], 10) > 3) {
|
|
656
|
-
day =
|
|
664
|
+
day = `0${day[0]}`;
|
|
657
665
|
indexesOfPipedChars.push(getOffsetTo("day"));
|
|
658
666
|
}
|
|
659
667
|
if (day === "00") day = "01";
|
|
660
668
|
if (day[0] !== "_" && day[1] !== "_" && Number.parseInt(day, 10) > 31) return false;
|
|
661
669
|
}
|
|
662
|
-
year = year.split("").map(
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
return _char3 === "_" ? placeholders.day : _char3;
|
|
670
|
-
}).join("");
|
|
671
|
-
var yearFulfilled = !allowedParts.year || year && year.length >= 4 && !year.includes(placeholders.year);
|
|
672
|
-
var monthFulfilled = !allowedParts.month || month && month.length === 2 && !month.includes(placeholders.month);
|
|
673
|
-
var dayFulfilled = !allowedParts.day || day && day.length === 2 && !day.includes(placeholders.day);
|
|
674
|
-
var fulfilled = yearFulfilled && monthFulfilled && dayFulfilled;
|
|
670
|
+
year = year.split("").map((char) => char === "_" ? placeholders.year : char).join("");
|
|
671
|
+
month = month.split("").map((char) => char === "_" ? placeholders.month : char).join("");
|
|
672
|
+
day = day.split("").map((char) => char === "_" ? placeholders.day : char).join("");
|
|
673
|
+
const yearFulfilled = !allowedParts.year || year && year.length >= 4 && !year.includes(placeholders.year);
|
|
674
|
+
const monthFulfilled = !allowedParts.month || month && month.length === 2 && !month.includes(placeholders.month);
|
|
675
|
+
const dayFulfilled = !allowedParts.day || day && day.length === 2 && !day.includes(placeholders.day);
|
|
676
|
+
const fulfilled = yearFulfilled && monthFulfilled && dayFulfilled;
|
|
675
677
|
if (fulfilled) {
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
678
|
+
const date = new Date(0, 0, 0, 0, 0, 0, 0);
|
|
679
|
+
const yearParsed = allowedParts.year ? Number.parseInt(year, 10) : 0;
|
|
680
|
+
const monthParsed = allowedParts.month ? Number.parseInt(month, 10) - 1 : 0;
|
|
681
|
+
const dayParsed = allowedParts.day ? Number.parseInt(day, 10) : 1;
|
|
680
682
|
date.setFullYear(yearParsed, monthParsed, dayParsed);
|
|
681
|
-
if (disabledDates
|
|
682
|
-
onMaskPipeBlock
|
|
683
|
+
if (disabledDates == null ? void 0 : disabledDates.some(includesDate(dayjs(date), "date"))) {
|
|
684
|
+
onMaskPipeBlock == null ? void 0 : onMaskPipeBlock(date);
|
|
683
685
|
return false;
|
|
684
686
|
}
|
|
685
687
|
if (allowedParts.day) {
|
|
686
688
|
if (date.getDate() !== Number.parseInt(day, 10)) {
|
|
687
|
-
onMaskPipeBlock
|
|
689
|
+
onMaskPipeBlock == null ? void 0 : onMaskPipeBlock(date);
|
|
688
690
|
return false;
|
|
689
691
|
}
|
|
690
692
|
}
|
|
691
693
|
}
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
if (part === "year") result.push(year);
|
|
698
|
-
if (part === "month") result.push(month);
|
|
699
|
-
if (part === "day") result.push(day);
|
|
700
|
-
}
|
|
701
|
-
} catch (err) {
|
|
702
|
-
_iterator4.e(err);
|
|
703
|
-
} finally {
|
|
704
|
-
_iterator4.f();
|
|
694
|
+
const result = [];
|
|
695
|
+
for (const part of order) {
|
|
696
|
+
if (part === "year") result.push(year);
|
|
697
|
+
if (part === "month") result.push(month);
|
|
698
|
+
if (part === "day") result.push(day);
|
|
705
699
|
}
|
|
706
|
-
onMaskPipeBlock
|
|
700
|
+
onMaskPipeBlock == null ? void 0 : onMaskPipeBlock(null);
|
|
707
701
|
return {
|
|
708
702
|
value: result.join(sep),
|
|
709
703
|
indexesOfPipedChars
|
|
710
704
|
};
|
|
711
705
|
}, [placeholders, sep, order, allowedParts, disabledDates, onMaskPipeBlock]);
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
for (
|
|
706
|
+
const handleChange = React.useCallback((value2) => {
|
|
707
|
+
const parsed = {};
|
|
708
|
+
for (const partName in placeholders) {
|
|
715
709
|
parsed[partName] = placeholders[partName];
|
|
716
710
|
}
|
|
717
|
-
|
|
718
|
-
for (
|
|
711
|
+
const parts = value2.split(sep);
|
|
712
|
+
for (let i = 0; i < order.length; i++) {
|
|
719
713
|
parsed[order[i]] = parts[i];
|
|
720
714
|
}
|
|
721
|
-
|
|
715
|
+
const {
|
|
716
|
+
year,
|
|
717
|
+
month,
|
|
718
|
+
day
|
|
719
|
+
} = parsed;
|
|
722
720
|
setInternalValue({
|
|
723
721
|
year,
|
|
724
722
|
month,
|
|
725
723
|
day
|
|
726
724
|
});
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
725
|
+
const yearFulfilled = !allowedParts.year || year && year.length >= 4 && !year.includes(placeholders.year);
|
|
726
|
+
const monthFulfilled = !allowedParts.month || month && month.length === 2 && !month.includes(placeholders.month);
|
|
727
|
+
const dayFulfilled = !allowedParts.day || day && day.length === 2 && !day.includes(placeholders.day);
|
|
728
|
+
const fulfilled = yearFulfilled && monthFulfilled && dayFulfilled;
|
|
731
729
|
if (fulfilled) {
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
730
|
+
const date = new Date(0, 0, 0, 0, 0, 0, 0);
|
|
731
|
+
const yearParsed = allowedParts.year ? Number.parseInt(year, 10) : 0;
|
|
732
|
+
const monthParsed = allowedParts.month ? Number.parseInt(month, 10) - 1 : 0;
|
|
733
|
+
const dayParsed = allowedParts.day ? Number.parseInt(day, 10) : 1;
|
|
736
734
|
date.setFullYear(yearParsed, monthParsed, dayParsed);
|
|
737
735
|
onDateChange(date);
|
|
738
736
|
lastKnownOuterValue.current = {
|
|
@@ -747,43 +745,40 @@ function MaskedInput(_ref14) {
|
|
|
747
745
|
lastKnownOuterValue.current = null;
|
|
748
746
|
}
|
|
749
747
|
if (yearFulfilled && allowedParts.year) {
|
|
750
|
-
|
|
751
|
-
|
|
748
|
+
const date = new Date(0, 0, 0, 0, 0, 0, 0);
|
|
749
|
+
date.setFullYear(Number.parseInt(year, 10));
|
|
752
750
|
if (monthFulfilled && allowedParts.month) {
|
|
753
|
-
|
|
751
|
+
date.setMonth(Number.parseInt(month, 10) - 1);
|
|
754
752
|
}
|
|
755
|
-
onDisplayedPeriodChange(
|
|
753
|
+
onDisplayedPeriodChange(date);
|
|
756
754
|
}
|
|
757
755
|
}, [onDateChange, setInternalValue, placeholders, onDisplayedPeriodChange, order, allowedParts]);
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
if (part === "year") result.push(placeholders.year + placeholders.year + placeholders.year + placeholders.year);
|
|
765
|
-
if (part === "month") result.push(placeholders.month + placeholders.month);
|
|
766
|
-
if (part === "day") result.push(placeholders.day + placeholders.day);
|
|
767
|
-
}
|
|
768
|
-
} catch (err) {
|
|
769
|
-
_iterator5.e(err);
|
|
770
|
-
} finally {
|
|
771
|
-
_iterator5.f();
|
|
756
|
+
const mask = React.useMemo(() => {
|
|
757
|
+
const result = [];
|
|
758
|
+
for (const part of order) {
|
|
759
|
+
if (part === "year") result.push(placeholders.year + placeholders.year + placeholders.year + placeholders.year);
|
|
760
|
+
if (part === "month") result.push(placeholders.month + placeholders.month);
|
|
761
|
+
if (part === "day") result.push(placeholders.day + placeholders.day);
|
|
772
762
|
}
|
|
773
763
|
return result.join(sep);
|
|
774
764
|
}, [sep, order, placeholders]);
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
765
|
+
const aliases = React.useMemo(() => ({
|
|
766
|
+
[placeholders.year]: /\d/,
|
|
767
|
+
[placeholders.month]: /\d/,
|
|
768
|
+
[placeholders.day]: /\d/
|
|
769
|
+
}), [placeholders]);
|
|
770
|
+
const maskOnlySymbols = React.useMemo(() => ({
|
|
771
|
+
[placeholders.year]: true,
|
|
772
|
+
[placeholders.month]: true,
|
|
773
|
+
[placeholders.day]: true,
|
|
774
|
+
[sep]: true
|
|
775
|
+
}), [sep, placeholders]);
|
|
776
|
+
const humanizedDate = React.useMemo(() => {
|
|
777
|
+
let outerDate = outerValue;
|
|
783
778
|
if (typeof outerValue === "number" || typeof outerValue === "string") {
|
|
784
779
|
outerDate = new Date(outerValue);
|
|
785
780
|
}
|
|
786
|
-
|
|
781
|
+
const validDate = outerDate && outerDate instanceof Date && !Number.isNaN(outerDate.getTime());
|
|
787
782
|
if (!validDate) return null;
|
|
788
783
|
return new Intl.DateTimeFormat(locale, {
|
|
789
784
|
year: allowedParts.year ? "numeric" : void 0,
|
|
@@ -791,50 +786,48 @@ function MaskedInput(_ref14) {
|
|
|
791
786
|
day: allowedParts.day ? "numeric" : void 0
|
|
792
787
|
}).format(outerDate);
|
|
793
788
|
}, [outerValue, locale, allowedParts]);
|
|
794
|
-
useEnhancedEffect(
|
|
789
|
+
useEnhancedEffect(() => {
|
|
795
790
|
if (!ref.current) return;
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
for (
|
|
802
|
-
|
|
803
|
-
measureSpan.style[_style2] = computedStyle[_style2];
|
|
791
|
+
const stringsToMeasure = humanizedDate ? [humanizedDate, mask] : [mask];
|
|
792
|
+
const widths = [];
|
|
793
|
+
const measureSpan = document.createElement("span");
|
|
794
|
+
const computedStyle = window.getComputedStyle(ref.current);
|
|
795
|
+
const typographyRelatedStyles = ["height", "font-size", "font-family", "font-weight", "font-style", "line-height", "letter-spacing", "text-transform", "word-spacing"];
|
|
796
|
+
for (const style2 of typographyRelatedStyles) {
|
|
797
|
+
measureSpan.style[style2] = computedStyle[style2];
|
|
804
798
|
}
|
|
805
799
|
measureSpan.style.position = "absolute";
|
|
806
800
|
measureSpan.style.visibility = "hidden";
|
|
807
801
|
document.body.appendChild(measureSpan);
|
|
808
|
-
for (
|
|
809
|
-
var string = _stringsToMeasure[_i3];
|
|
802
|
+
for (const string of stringsToMeasure) {
|
|
810
803
|
measureSpan.innerHTML = string;
|
|
811
804
|
widths.push(measureSpan.offsetWidth);
|
|
812
805
|
}
|
|
813
806
|
measureSpan.remove();
|
|
814
|
-
|
|
807
|
+
const maxWidth = Math.max(...widths);
|
|
815
808
|
setWidth(maxWidth);
|
|
816
809
|
}, [locale, humanizedDate, allowedParts, mask]);
|
|
817
|
-
|
|
818
|
-
|
|
810
|
+
const SHumanizedDate = "div";
|
|
811
|
+
const handleInputRef = React.useCallback((node) => {
|
|
819
812
|
ref.current = node;
|
|
820
813
|
if (!node || node.tagName !== "INPUT") return;
|
|
821
814
|
if (typeof forwardRef === "function") forwardRef(node);
|
|
822
815
|
else forwardRef.current = node;
|
|
823
816
|
}, [forwardRef]);
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
var
|
|
829
|
-
(
|
|
817
|
+
const [appliedWidth, setAppliedWidth] = React.useState(width);
|
|
818
|
+
const [innerFocused, setInnerFocused] = React.useState(false);
|
|
819
|
+
const focused = containerFocused ?? innerFocused;
|
|
820
|
+
const handleFocus = React.useCallback((event) => {
|
|
821
|
+
var _a;
|
|
822
|
+
(_a = otherProps.onFocus) == null ? void 0 : _a.call(otherProps, event);
|
|
830
823
|
setInnerFocused(true);
|
|
831
824
|
}, []);
|
|
832
|
-
|
|
833
|
-
var
|
|
834
|
-
(
|
|
825
|
+
const handleBlur = React.useCallback((event) => {
|
|
826
|
+
var _a;
|
|
827
|
+
(_a = otherProps.onBlur) == null ? void 0 : _a.call(otherProps, event);
|
|
835
828
|
setInnerFocused(false);
|
|
836
829
|
}, []);
|
|
837
|
-
useEnhancedEffect(
|
|
830
|
+
useEnhancedEffect(() => {
|
|
838
831
|
if (focused) return;
|
|
839
832
|
setAppliedWidth(width);
|
|
840
833
|
}, [width, focused]);
|
|
@@ -854,7 +847,7 @@ function MaskedInput(_ref14) {
|
|
|
854
847
|
focused,
|
|
855
848
|
ref: handleInputRef,
|
|
856
849
|
pipe: pipeMask,
|
|
857
|
-
value: value
|
|
850
|
+
value: value ?? "",
|
|
858
851
|
onChange: handleChange,
|
|
859
852
|
noHumanizedDate: !humanizedDate,
|
|
860
853
|
animationsDisabled,
|
|
@@ -862,17 +855,17 @@ function MaskedInput(_ref14) {
|
|
|
862
855
|
inputMode: "numeric"
|
|
863
856
|
}), humanizedDate && /* @__PURE__ */ React.createElement(SHumanizedDate, _ref13.cn("SHumanizedDate", {}), humanizedDate));
|
|
864
857
|
}
|
|
865
|
-
|
|
858
|
+
const SingleDateInput = createComponent(SingleDateInputRoot, {
|
|
866
859
|
Indicator,
|
|
867
860
|
MaskedInput
|
|
868
861
|
});
|
|
869
|
-
|
|
862
|
+
const DateRange = createComponent(DateRangeRoot, {
|
|
870
863
|
Indicator,
|
|
871
864
|
RangeSep,
|
|
872
865
|
FromMaskedInput,
|
|
873
866
|
ToMaskedInput
|
|
874
867
|
});
|
|
875
|
-
|
|
868
|
+
const InputTrigger = createComponent(InputTriggerRoot, {
|
|
876
869
|
Addon: BaseTrigger.Addon,
|
|
877
870
|
SingleDateInput,
|
|
878
871
|
DateRange
|