@skbkontur/react-ui 6.1.7-65057.0 → 6.1.7-8e9d5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/TimePicker/TimePicker.d.ts +36 -29
- package/components/TimePicker/TimePicker.js +234 -132
- package/components/TimePicker/TimePicker.js.map +1 -1
- package/components/TimePicker/TimePicker.styles.d.ts +2 -2
- package/components/TimePicker/TimePicker.styles.js +4 -4
- package/components/TimePicker/TimePicker.styles.js.map +1 -1
- package/components/TimePicker/TimePickerItems.d.ts +5 -1
- package/components/TimePicker/TimePickerItems.js +16 -13
- package/components/TimePicker/TimePickerItems.js.map +1 -1
- package/components/TimePicker/TimePickerMobilePopup.d.ts +5 -2
- package/components/TimePicker/TimePickerMobilePopup.js +3 -3
- package/components/TimePicker/TimePickerMobilePopup.js.map +1 -1
- package/components/TimePicker/TimePickerPopup.d.ts +5 -1
- package/components/TimePicker/TimePickerPopup.js +2 -2
- package/components/TimePicker/TimePickerPopup.js.map +1 -1
- package/components/TimePicker/helpers/TimePicker.constants.d.ts +3 -1
- package/components/TimePicker/helpers/TimePicker.constants.js +3 -7
- package/components/TimePicker/helpers/TimePicker.constants.js.map +1 -1
- package/components/TimePicker/helpers/TimePicker.editing.d.ts +1 -5
- package/components/TimePicker/helpers/TimePicker.editing.js +8 -35
- package/components/TimePicker/helpers/TimePicker.editing.js.map +1 -1
- package/components/TimePicker/helpers/TimePicker.shared.d.ts +15 -24
- package/components/TimePicker/helpers/TimePicker.shared.js +13 -27
- package/components/TimePicker/helpers/TimePicker.shared.js.map +1 -1
- package/components/TimePicker/helpers/TimePicker.value.d.ts +3 -13
- package/components/TimePicker/helpers/TimePicker.value.js +13 -43
- package/components/TimePicker/helpers/TimePicker.value.js.map +1 -1
- package/components/TimePicker/helpers/scrollSelectedItemIntoView.d.ts +2 -0
- package/components/TimePicker/helpers/scrollSelectedItemIntoView.js +2 -0
- package/components/TimePicker/helpers/scrollSelectedItemIntoView.js.map +1 -1
- package/components/TimePicker/helpers/validateTimePicker.js +2 -4
- package/components/TimePicker/helpers/validateTimePicker.js.map +1 -1
- package/components/TimePicker/hooks/useTimePickerDropdown.js +9 -25
- package/components/TimePicker/hooks/useTimePickerDropdown.js.map +1 -1
- package/components/TimePicker/hooks/useTimePickerSource.d.ts +3 -1
- package/components/TimePicker/hooks/useTimePickerSource.js +14 -6
- package/components/TimePicker/hooks/useTimePickerSource.js.map +1 -1
- package/components/TimePicker/hooks/useTimePickerValue.d.ts +9 -4
- package/components/TimePicker/hooks/useTimePickerValue.js +22 -23
- package/components/TimePicker/hooks/useTimePickerValue.js.map +1 -1
- package/components/TimePicker/index.d.ts +1 -1
- package/components/TimePicker/index.js.map +1 -1
- package/components/TimePicker/locale/locales/en.js +2 -0
- package/components/TimePicker/locale/locales/en.js.map +1 -1
- package/components/TimePicker/locale/locales/ru.js +2 -0
- package/components/TimePicker/locale/locales/ru.js.map +1 -1
- package/components/TimePicker/locale/types.d.ts +2 -0
- package/components/TimePicker/locale/types.js.map +1 -1
- package/internal/NativeTimeInput/NativeTimeInput.d.ts +4 -0
- package/internal/NativeTimeInput/NativeTimeInput.js +7 -2
- package/internal/NativeTimeInput/NativeTimeInput.js.map +1 -1
- package/internal/NativeTimeInput/NativeTimeInput.utils.d.ts +2 -0
- package/internal/NativeTimeInput/NativeTimeInput.utils.js +4 -8
- package/internal/NativeTimeInput/NativeTimeInput.utils.js.map +1 -1
- package/internal/TimeInput/TimeFragments.d.ts +0 -1
- package/internal/TimeInput/TimeFragments.js +30 -8
- package/internal/TimeInput/TimeFragments.js.map +1 -1
- package/internal/TimeInput/TimeFragments.styles.d.ts +15 -0
- package/internal/TimeInput/TimeFragments.styles.js +39 -9
- package/internal/TimeInput/TimeFragments.styles.js.map +1 -1
- package/internal/TimeInput/TimeInput.d.ts +0 -1
- package/internal/TimeInput/TimeInput.js +0 -1
- package/internal/TimeInput/TimeInput.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,25 @@
|
|
|
1
1
|
import type { Theme } from '../../lib/theming/Theme.js';
|
|
2
2
|
export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
|
|
3
3
|
root(): string;
|
|
4
|
+
/**
|
|
5
|
+
* Резервируют место под время, когда значения нет: без этого поле с suffix
|
|
6
|
+
* сужается на ширину времени, а при вводе снова расширяется.
|
|
7
|
+
* Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,
|
|
8
|
+
* но не попадает в текст поля и не читается скринридером.
|
|
9
|
+
* Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:
|
|
10
|
+
* по два на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.
|
|
11
|
+
*/
|
|
12
|
+
emptyPlaceholderSmall(t: Theme): string;
|
|
13
|
+
emptyPlaceholderMedium(t: Theme): string;
|
|
14
|
+
emptyPlaceholderLarge(t: Theme): string;
|
|
15
|
+
emptyPlaceholderWithSecondsSmall(t: Theme): string;
|
|
16
|
+
emptyPlaceholderWithSecondsMedium(t: Theme): string;
|
|
17
|
+
emptyPlaceholderWithSecondsLarge(t: Theme): string;
|
|
4
18
|
selected(t: Theme): string;
|
|
5
19
|
mask(t: Theme): string;
|
|
6
20
|
segment(): string;
|
|
7
21
|
separator(): string;
|
|
22
|
+
separatorText(): string;
|
|
8
23
|
separatorSmall(t: Theme): string;
|
|
9
24
|
separatorMedium(t: Theme): string;
|
|
10
25
|
separatorLarge(t: Theme): string;
|
|
@@ -2,6 +2,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
+
import { getEmptyDisplayValue } from '../../components/TimePicker/helpers/TimePicker.value.js';
|
|
5
6
|
import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
|
|
6
7
|
export var getStyles = memoizeGetStyles(function (_a) {
|
|
7
8
|
var css = _a.css;
|
|
@@ -9,35 +10,64 @@ export var getStyles = memoizeGetStyles(function (_a) {
|
|
|
9
10
|
root: function () {
|
|
10
11
|
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: text;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n "], ["\n cursor: text;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n "])));
|
|
11
12
|
},
|
|
13
|
+
/**
|
|
14
|
+
* Резервируют место под время, когда значения нет: без этого поле с suffix
|
|
15
|
+
* сужается на ширину времени, а при вводе снова расширяется.
|
|
16
|
+
* Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,
|
|
17
|
+
* но не попадает в текст поля и не читается скринридером.
|
|
18
|
+
* Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:
|
|
19
|
+
* по два на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.
|
|
20
|
+
*/
|
|
21
|
+
emptyPlaceholderSmall: function (t) {
|
|
22
|
+
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 2);\n }\n "], ["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 2);\n }\n "])), getEmptyDisplayValue('HH:mm'), t.timePickerSeparatorPaddingXSmall);
|
|
23
|
+
},
|
|
24
|
+
emptyPlaceholderMedium: function (t) {
|
|
25
|
+
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 2);\n }\n "], ["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 2);\n }\n "])), getEmptyDisplayValue('HH:mm'), t.timePickerSeparatorPaddingXMedium);
|
|
26
|
+
},
|
|
27
|
+
emptyPlaceholderLarge: function (t) {
|
|
28
|
+
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 2);\n }\n "], ["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 2);\n }\n "])), getEmptyDisplayValue('HH:mm'), t.timePickerSeparatorPaddingXLarge);
|
|
29
|
+
},
|
|
30
|
+
emptyPlaceholderWithSecondsSmall: function (t) {
|
|
31
|
+
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 4);\n }\n "], ["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 4);\n }\n "])), getEmptyDisplayValue('HH:mm:ss'), t.timePickerSeparatorPaddingXSmall);
|
|
32
|
+
},
|
|
33
|
+
emptyPlaceholderWithSecondsMedium: function (t) {
|
|
34
|
+
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 4);\n }\n "], ["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 4);\n }\n "])), getEmptyDisplayValue('HH:mm:ss'), t.timePickerSeparatorPaddingXMedium);
|
|
35
|
+
},
|
|
36
|
+
emptyPlaceholderWithSecondsLarge: function (t) {
|
|
37
|
+
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 4);\n }\n "], ["\n &::before {\n content: '", "';\n visibility: hidden;\n padding-right: calc(", " * 4);\n }\n "])), getEmptyDisplayValue('HH:mm:ss'), t.timePickerSeparatorPaddingXLarge);
|
|
38
|
+
},
|
|
12
39
|
selected: function (t) {
|
|
13
40
|
var getSelection = function (background, color) {
|
|
14
41
|
return (background || color) &&
|
|
15
42
|
"& ::selection {\n background: ".concat(background, ";\n color: ").concat(color, ";\n }");
|
|
16
43
|
};
|
|
17
|
-
return css(
|
|
44
|
+
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n cursor: text;\n ", "\n "], ["\n cursor: text;\n ", "\n "])), getSelection(t.timePickerSelectedBgColor, t.timePickerSelectedTextColor));
|
|
18
45
|
},
|
|
19
46
|
mask: function (t) {
|
|
20
|
-
return css(
|
|
47
|
+
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), t.timePickerMaskColor);
|
|
21
48
|
},
|
|
22
49
|
segment: function () {
|
|
23
|
-
return css(
|
|
50
|
+
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: inline;\n font-variant-numeric: tabular-nums;\n white-space: pre;\n "], ["\n display: inline;\n font-variant-numeric: tabular-nums;\n white-space: pre;\n "])));
|
|
24
51
|
},
|
|
25
52
|
separator: function () {
|
|
26
|
-
return css(
|
|
53
|
+
return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: inline;\n position: relative;\n\n &::before {\n content: ':';\n content: ':' / '';\n position: absolute;\n left: 50%;\n width: 100%;\n transform: translateX(-50%);\n pointer-events: none;\n letter-spacing: normal;\n text-align: center;\n }\n "], ["\n display: inline;\n position: relative;\n\n &::before {\n content: ':';\n content: ':' / '';\n position: absolute;\n left: 50%;\n width: 100%;\n transform: translateX(-50%);\n pointer-events: none;\n letter-spacing: normal;\n text-align: center;\n }\n "])));
|
|
54
|
+
},
|
|
55
|
+
separatorText: function () {
|
|
56
|
+
return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n color: transparent;\n "], ["\n color: transparent;\n "])));
|
|
27
57
|
},
|
|
28
58
|
separatorSmall: function (t) {
|
|
29
|
-
return css(
|
|
59
|
+
return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n letter-spacing: calc(", " * 2);\n\n &::before {\n top: ", ";\n }\n "], ["\n letter-spacing: calc(", " * 2);\n\n &::before {\n top: ", ";\n }\n "])), t.timePickerSeparatorPaddingXSmall, t.timePickerSeparatorOffsetTopSmall);
|
|
30
60
|
},
|
|
31
61
|
separatorMedium: function (t) {
|
|
32
|
-
return css(
|
|
62
|
+
return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n letter-spacing: calc(", " * 2);\n\n &::before {\n top: ", ";\n }\n "], ["\n letter-spacing: calc(", " * 2);\n\n &::before {\n top: ", ";\n }\n "])), t.timePickerSeparatorPaddingXMedium, t.timePickerSeparatorOffsetTopMedium);
|
|
33
63
|
},
|
|
34
64
|
separatorLarge: function (t) {
|
|
35
|
-
return css(
|
|
65
|
+
return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n letter-spacing: calc(", " * 2);\n\n &::before {\n top: ", ";\n }\n "], ["\n letter-spacing: calc(", " * 2);\n\n &::before {\n top: ", ";\n }\n "])), t.timePickerSeparatorPaddingXLarge, t.timePickerSeparatorOffsetTopLarge);
|
|
36
66
|
},
|
|
37
67
|
separatorFilled: function () {
|
|
38
|
-
return css(
|
|
68
|
+
return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n color: inherit;\n "], ["\n color: inherit;\n "])));
|
|
39
69
|
},
|
|
40
70
|
});
|
|
41
71
|
});
|
|
42
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
72
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
|
|
43
73
|
//# sourceMappingURL=TimeFragments.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeFragments.styles.js","sourceRoot":"","sources":["TimeFragments.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,uKAAA,oGAIT,KAAC;QACJ,CAAC;QAED,QAAQ,YAAC,CAAQ;YACf,IAAM,YAAY,GAAG,UAAC,UAAkB,EAAE,KAAa;gBACrD,OAAA,CAAC,UAAU,IAAI,KAAK,CAAC;oBACrB,+CACgB,UAAU,+BACf,KAAK,eACd;YAJF,CAIE,CAAC;YAEL,OAAO,GAAG,4GAAA,+BAEN,EAAwE,QAC3E,KADG,YAAY,CAAC,CAAC,CAAC,yBAAyB,EAAE,CAAC,CAAC,2BAA2B,CAAC,EAC1E;QACJ,CAAC;QAED,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,+FAAA,iBACC,EAAqB,SAC/B,KADU,CAAC,CAAC,mBAAmB,EAC9B;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,
|
|
1
|
+
{"version":3,"file":"TimeFragments.styles.js","sourceRoot":"","sources":["TimeFragments.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { getEmptyDisplayValue } from '../../components/TimePicker/helpers/TimePicker.value.js';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n cursor: text;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n `;\n },\n\n /**\n * Резервируют место под время, когда значения нет: без этого поле с suffix\n * сужается на ширину времени, а при вводе снова расширяется.\n * Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,\n * но не попадает в текст поля и не читается скринридером.\n * Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:\n * по два на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.\n */\n emptyPlaceholderSmall(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXSmall} * 2);\n }\n `;\n },\n\n emptyPlaceholderMedium(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXMedium} * 2);\n }\n `;\n },\n\n emptyPlaceholderLarge(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXLarge} * 2);\n }\n `;\n },\n\n emptyPlaceholderWithSecondsSmall(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm:ss')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXSmall} * 4);\n }\n `;\n },\n\n emptyPlaceholderWithSecondsMedium(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm:ss')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXMedium} * 4);\n }\n `;\n },\n\n emptyPlaceholderWithSecondsLarge(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm:ss')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXLarge} * 4);\n }\n `;\n },\n\n selected(t: Theme) {\n const getSelection = (background: string, color: string) =>\n (background || color) &&\n `& ::selection {\n background: ${background};\n color: ${color};\n }`;\n\n return css`\n cursor: text;\n ${getSelection(t.timePickerSelectedBgColor, t.timePickerSelectedTextColor)}\n `;\n },\n\n mask(t: Theme) {\n return css`\n color: ${t.timePickerMaskColor};\n `;\n },\n\n segment() {\n return css`\n display: inline;\n font-variant-numeric: tabular-nums;\n white-space: pre;\n `;\n },\n\n separator() {\n return css`\n display: inline;\n position: relative;\n\n &::before {\n content: ':';\n content: ':' / '';\n position: absolute;\n left: 50%;\n width: 100%;\n transform: translateX(-50%);\n pointer-events: none;\n letter-spacing: normal;\n text-align: center;\n }\n `;\n },\n\n separatorText() {\n return css`\n color: transparent;\n `;\n },\n\n separatorSmall(t: Theme) {\n return css`\n letter-spacing: calc(${t.timePickerSeparatorPaddingXSmall} * 2);\n\n &::before {\n top: ${t.timePickerSeparatorOffsetTopSmall};\n }\n `;\n },\n\n separatorMedium(t: Theme) {\n return css`\n letter-spacing: calc(${t.timePickerSeparatorPaddingXMedium} * 2);\n\n &::before {\n top: ${t.timePickerSeparatorOffsetTopMedium};\n }\n `;\n },\n\n separatorLarge(t: Theme) {\n return css`\n letter-spacing: calc(${t.timePickerSeparatorPaddingXLarge} * 2);\n\n &::before {\n top: ${t.timePickerSeparatorOffsetTopLarge};\n }\n `;\n },\n\n separatorFilled() {\n return css`\n color: inherit;\n `;\n },\n}));\n"]}
|
|
@@ -5,7 +5,6 @@ export interface TimeInputRef {
|
|
|
5
5
|
focus(): void;
|
|
6
6
|
blur(): void;
|
|
7
7
|
blink(): void;
|
|
8
|
-
isFragment(el: HTMLElement | EventTarget | null): boolean;
|
|
9
8
|
isAllSelected(): boolean;
|
|
10
9
|
getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;
|
|
11
10
|
selectSegment(segment: TimeSegment): void;
|
|
@@ -43,7 +43,6 @@ export var TimeInput = forwardRefAndName('TimeInput', function (props, ref) {
|
|
|
43
43
|
blur: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
|
|
44
44
|
blink: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blink(); },
|
|
45
45
|
getNode: function () { var _a, _b; return (_b = (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.getNode()) !== null && _b !== void 0 ? _b : null; },
|
|
46
|
-
isFragment: function (el) { var _a, _b; return (_b = (_a = fragmentsRef.current) === null || _a === void 0 ? void 0 : _a.isFragment(el)) !== null && _b !== void 0 ? _b : false; },
|
|
47
46
|
getSegment: function (el) { var _a, _b; return (_b = (_a = fragmentsRef.current) === null || _a === void 0 ? void 0 : _a.getSegment(el)) !== null && _b !== void 0 ? _b : null; },
|
|
48
47
|
selectAll: function () {
|
|
49
48
|
var _a, _b, _c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["TimeInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGlF,OAAO,EACL,0BAA0B,EAC1B,yBAAyB,GAC1B,MAAM,0DAA0D,CAAC;AAClE,OAAO,EACL,eAAe,GAGhB,MAAM,0DAA0D,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport type { InputProps } from '../../components/Input/index.js';\nimport {\n getTimePickerInputMinWidth,\n getTimePickerSuffixMargin,\n} from '../../components/TimePicker/helpers/TimePicker.layout.js';\nimport {\n getTimeSegments,\n type TimeFormat,\n type TimeSegment,\n} from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport { TimeClockIcon } from '../../components/TimePicker/TimeClockIcon.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { InputLikeText } from '../InputLikeText/index.js';\nimport type { TimeFragmentsRef } from './TimeFragments.js';\nimport { TimeFragments } from './TimeFragments.js';\nimport { getStyles } from './TimeInput.styles.js';\n\nexport interface TimeInputRef {\n focus(): void;\n blur(): void;\n blink(): void;\n isAllSelected(): boolean;\n getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n selectSegment(segment: TimeSegment): void;\n selectAll(): void;\n getNode(): HTMLElement | null;\n}\n\nexport interface TimeInputProps extends Omit<InputProps, 'type' | 'value' | 'onValueChange' | 'inputMode'> {\n hasDropdown?: boolean;\n format: TimeFormat;\n value: string;\n 'aria-placeholder'?: string;\n onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nexport const TimeInput = forwardRefAndName<TimeInputRef, TimeInputProps>('TimeInput', (props, ref) => {\n const {\n hasDropdown = false,\n size = 'small',\n disabled,\n autoFocus,\n suffix,\n style,\n width,\n corners,\n rightIcon,\n format,\n value,\n onSelectSegment,\n ...rest\n } = props;\n\n const theme = useContext(ThemeContext);\n\n const { cx } = useEmotion();\n\n const styles = useStyles(getStyles);\n\n const inputLikeTextRef = useRef<InputLikeText>(null);\n const fragmentsRef = useRef<TimeFragmentsRef>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputLikeTextRef.current?.focus(),\n blur: () => inputLikeTextRef.current?.blur(),\n blink: () => inputLikeTextRef.current?.blink(),\n getNode: () => inputLikeTextRef.current?.getNode() ?? null,\n getSegment: (el) => fragmentsRef.current?.getSegment(el) ?? null,\n selectAll: () => {\n const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return;\n }\n\n inputLikeTextRef.current?.selectInnerNode(rootNode, 0, rootNode.childNodes.length);\n },\n\n isAllSelected: () => {\n const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return false;\n }\n\n const selection = rootNode.ownerDocument.defaultView?.getSelection() ?? null;\n\n if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {\n return false;\n }\n\n const range = selection.getRangeAt(0);\n const text = rootNode.textContent ?? '';\n\n return (\n range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer)\n );\n },\n\n selectSegment: (segment) => {\n const rootNode = fragmentsRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return;\n }\n\n const segmentIndex = getTimeSegments(format).indexOf(segment);\n const start = segmentIndex < 0 ? 0 : segmentIndex * 2;\n const end = start + 1;\n\n inputLikeTextRef.current?.selectInnerNode(rootNode, start, end);\n },\n }),\n [format],\n );\n\n useEffect(() => {\n if (!autoFocus || disabled) {\n return;\n }\n\n const timer = setTimeout(() => {\n inputLikeTextRef.current?.focus();\n }, 0);\n\n return () => {\n clearTimeout(timer);\n };\n }, []);\n\n const resolvedRightIcon =\n rightIcon === undefined ? (\n <span\n className={cx(styles.rightIcon(), styles.rightIconDefault(theme), {\n [styles.rightIconInteractive()]: hasDropdown && !disabled,\n })}\n >\n <TimeClockIcon size={size} />\n </span>\n ) : (\n rightIcon\n );\n const suffixMarginLeft = getTimePickerSuffixMargin(size, theme);\n const inputMinWidth = getTimePickerInputMinWidth(size, format, resolvedRightIcon !== null, theme);\n\n return (\n <InputLikeText\n ref={inputLikeTextRef}\n {...rest}\n takeContentWidth\n disabled={disabled}\n size={size}\n inputMode={'numeric'}\n width={width ?? 'auto'}\n suffix={suffix && <span style={{ marginLeft: suffixMarginLeft }}>{suffix}</span>}\n style={{ ...style, minWidth: inputMinWidth, ...corners }}\n rightIcon={resolvedRightIcon}\n value={value}\n >\n <TimeFragments ref={fragmentsRef} format={format} size={size} value={value} onSelectSegment={onSelectSegment} />\n </InputLikeText>\n );\n});\n"]}
|