@skbkontur/react-ui 6.0.7-b5d2c.0 → 6.0.7
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 +13 -0
- package/components/DateRangePicker/DateRangePickerInput.js +3 -2
- package/components/DateRangePicker/DateRangePickerInput.js.map +1 -1
- package/index.d.ts +0 -1
- package/index.js +0 -1
- package/index.js.map +1 -1
- package/internal/themes/BasicTheme.d.ts +0 -3
- package/internal/themes/BasicTheme.js +0 -33
- package/internal/themes/BasicTheme.js.map +1 -1
- package/package.json +1 -3
- package/components/TimePicker/TimeClockIcon.d.ts +0 -3
- package/components/TimePicker/TimeClockIcon.js +0 -11
- package/components/TimePicker/TimeClockIcon.js.map +0 -1
- package/components/TimePicker/TimeFragmentsView.d.ts +0 -15
- package/components/TimePicker/TimeFragmentsView.js +0 -72
- package/components/TimePicker/TimeFragmentsView.js.map +0 -1
- package/components/TimePicker/TimeFragmentsView.styles.d.ts +0 -12
- package/components/TimePicker/TimeFragmentsView.styles.js +0 -43
- package/components/TimePicker/TimeFragmentsView.styles.js.map +0 -1
- package/components/TimePicker/TimeInput.d.ts +0 -23
- package/components/TimePicker/TimeInput.js +0 -86
- package/components/TimePicker/TimeInput.js.map +0 -1
- package/components/TimePicker/TimePicker.d.ts +0 -27
- package/components/TimePicker/TimePicker.js +0 -351
- package/components/TimePicker/TimePicker.js.map +0 -1
- package/components/TimePicker/TimePicker.styles.d.ts +0 -12
- package/components/TimePicker/TimePicker.styles.js +0 -39
- package/components/TimePicker/TimePicker.styles.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.constants.d.ts +0 -19
- package/components/TimePicker/helpers/TimePicker.constants.js +0 -42
- package/components/TimePicker/helpers/TimePicker.constants.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.editing.d.ts +0 -6
- package/components/TimePicker/helpers/TimePicker.editing.js +0 -77
- package/components/TimePicker/helpers/TimePicker.editing.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.layout.d.ts +0 -7
- package/components/TimePicker/helpers/TimePicker.layout.js +0 -17
- package/components/TimePicker/helpers/TimePicker.layout.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.selection.d.ts +0 -7
- package/components/TimePicker/helpers/TimePicker.selection.js +0 -51
- package/components/TimePicker/helpers/TimePicker.selection.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.shared.d.ts +0 -24
- package/components/TimePicker/helpers/TimePicker.shared.js +0 -50
- package/components/TimePicker/helpers/TimePicker.shared.js.map +0 -1
- package/components/TimePicker/helpers/TimePicker.value.d.ts +0 -10
- package/components/TimePicker/helpers/TimePicker.value.js +0 -47
- package/components/TimePicker/helpers/TimePicker.value.js.map +0 -1
- package/components/TimePicker/helpers/scrollSelectedSlotIntoView.d.ts +0 -1
- package/components/TimePicker/helpers/scrollSelectedSlotIntoView.js +0 -21
- package/components/TimePicker/helpers/scrollSelectedSlotIntoView.js.map +0 -1
- package/components/TimePicker/hooks/useTimePickerDropdown.d.ts +0 -17
- package/components/TimePicker/hooks/useTimePickerDropdown.js +0 -62
- package/components/TimePicker/hooks/useTimePickerDropdown.js.map +0 -1
- package/components/TimePicker/hooks/useTimePickerSelection.d.ts +0 -15
- package/components/TimePicker/hooks/useTimePickerSelection.js +0 -43
- package/components/TimePicker/hooks/useTimePickerSelection.js.map +0 -1
- package/components/TimePicker/hooks/useTimePickerValue.d.ts +0 -18
- package/components/TimePicker/hooks/useTimePickerValue.js +0 -47
- package/components/TimePicker/hooks/useTimePickerValue.js.map +0 -1
- package/components/TimePicker/index.d.ts +0 -2
- package/components/TimePicker/index.js +0 -2
- package/components/TimePicker/index.js.map +0 -1
- package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.d.ts +0 -2
- package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js +0 -20
- package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js.map +0 -1
- package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.d.ts +0 -2
- package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js +0 -20
- package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js.map +0 -1
- package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.d.ts +0 -2
- package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js +0 -20
- package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skbkontur/react-ui",
|
|
3
|
-
"version": "6.0.7
|
|
3
|
+
"version": "6.0.7",
|
|
4
4
|
"description": "UI Components",
|
|
5
5
|
"homepage": "https://tech.skbkontur.ru/kontur-ui",
|
|
6
6
|
"bugs": {
|
|
@@ -146,8 +146,6 @@
|
|
|
146
146
|
"./components/Tabs/Tab": "./components/Tabs/Tab.js",
|
|
147
147
|
"./components/Textarea": "./components/Textarea/index.js",
|
|
148
148
|
"./components/Textarea/Textarea": "./components/Textarea/Textarea.js",
|
|
149
|
-
"./components/TimePicker": "./components/TimePicker/index.js",
|
|
150
|
-
"./components/TimePicker/TimePicker": "./components/TimePicker/TimePicker.js",
|
|
151
149
|
"./components/Toast": "./components/Toast/index.js",
|
|
152
150
|
"./components/Toast/Toast": "./components/Toast/Toast.js",
|
|
153
151
|
"./components/Toast/locale": "./components/Toast/locale/index.js",
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
export declare const TimeClockIcon: import("../../lib/forwardRefAndName.js").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon.js").IconProps, "size"> & {
|
|
2
|
-
size?: import("../../internal/icons2022/BaseIcon.js").IconProps["size"] | import("../../internal/icons2022/iconConstants.js").IconSizeAliases;
|
|
3
|
-
}>;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { iconSizer } from '../../internal/icons2022/iconSizer.js';
|
|
3
|
-
import { TimeClockIcon16Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js';
|
|
4
|
-
import { TimeClockIcon20Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js';
|
|
5
|
-
import { TimeClockIcon24Regular } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js';
|
|
6
|
-
export var TimeClockIcon = iconSizer({
|
|
7
|
-
small: function () { return React.createElement(TimeClockIcon16Light, null); },
|
|
8
|
-
medium: function () { return React.createElement(TimeClockIcon20Light, null); },
|
|
9
|
-
large: function () { return React.createElement(TimeClockIcon24Regular, null); },
|
|
10
|
-
}, 'TimeClockIcon');
|
|
11
|
-
//# sourceMappingURL=TimeClockIcon.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TimeClockIcon.js","sourceRoot":"","sources":["../../../components/TimePicker/TimeClockIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,kEAAkE,CAAC;AAE1G,MAAM,CAAC,IAAM,aAAa,GAAG,SAAS,CACpC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,oBAAoB,OAAG,EAAxB,CAAwB;IACrC,MAAM,EAAE,cAAM,OAAA,oBAAC,oBAAoB,OAAG,EAAxB,CAAwB;IACtC,KAAK,EAAE,cAAM,OAAA,oBAAC,sBAAsB,OAAG,EAA1B,CAA0B;CACxC,EACD,eAAe,CAChB,CAAC","sourcesContent":["import React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer.js';\nimport { TimeClockIcon16Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js';\nimport { TimeClockIcon20Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js';\nimport { TimeClockIcon24Regular } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js';\n\nexport const TimeClockIcon = iconSizer(\n {\n small: () => <TimeClockIcon16Light />,\n medium: () => <TimeClockIcon20Light />,\n large: () => <TimeClockIcon24Regular />,\n },\n 'TimeClockIcon',\n);\n"]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { SizeProp } from '../../lib/types/props.js';
|
|
3
|
-
import type { TimePrecision, TimeSegment } from './helpers/TimePicker.shared.js';
|
|
4
|
-
export interface TimeFragmentsViewRef {
|
|
5
|
-
isFragment(el: HTMLElement | EventTarget | null): boolean;
|
|
6
|
-
getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;
|
|
7
|
-
getRootNode(): HTMLSpanElement | null;
|
|
8
|
-
}
|
|
9
|
-
export interface TimeFragmentsViewProps {
|
|
10
|
-
value: string;
|
|
11
|
-
precision: TimePrecision;
|
|
12
|
-
size: SizeProp;
|
|
13
|
-
onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;
|
|
14
|
-
}
|
|
15
|
-
export declare const TimeFragmentsView: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimeFragmentsViewRef, TimeFragmentsViewProps> & Record<never, never>;
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';
|
|
2
|
-
import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
|
|
3
|
-
import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
|
|
4
|
-
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
|
|
5
|
-
import { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from './helpers/TimePicker.constants.js';
|
|
6
|
-
import { getDisplaySegments, getTimeSegments } from './helpers/TimePicker.shared.js';
|
|
7
|
-
import { getStyles } from './TimeFragmentsView.styles.js';
|
|
8
|
-
var getSeparatorSizeClassName = function (styles, size) {
|
|
9
|
-
switch (size) {
|
|
10
|
-
case 'large':
|
|
11
|
-
return styles.separatorLarge();
|
|
12
|
-
case 'medium':
|
|
13
|
-
return styles.separatorMedium();
|
|
14
|
-
case 'small':
|
|
15
|
-
default:
|
|
16
|
-
return styles.separatorSmall();
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
export var TimeFragmentsView = forwardRefAndName('TimeFragmentsView', function (props, ref) {
|
|
20
|
-
var value = props.value, precision = props.precision, size = props.size, onSelectSegment = props.onSelectSegment;
|
|
21
|
-
var theme = useContext(ThemeContext);
|
|
22
|
-
var cx = useEmotion().cx;
|
|
23
|
-
var styles = useStyles(getStyles);
|
|
24
|
-
var rootRef = useRef(null);
|
|
25
|
-
var rootClassName = cx(styles.root(), styles.selected(theme));
|
|
26
|
-
var maskClassName = styles.mask(theme);
|
|
27
|
-
var separatorSizeClassName = getSeparatorSizeClassName(styles, size);
|
|
28
|
-
var getSegment = useCallback(function (el) {
|
|
29
|
-
var _a;
|
|
30
|
-
var rootNode = rootRef.current;
|
|
31
|
-
if (!rootNode || !el) {
|
|
32
|
-
return null;
|
|
33
|
-
}
|
|
34
|
-
var fragments = Array.from(rootNode.querySelectorAll('[data-fragment]'));
|
|
35
|
-
var segments = getTimeSegments(precision);
|
|
36
|
-
var index = fragments.findIndex(function (fragment) { return fragment === el || fragment.contains(el); });
|
|
37
|
-
return index >= 0 ? ((_a = segments[index]) !== null && _a !== void 0 ? _a : null) : null;
|
|
38
|
-
}, [precision]);
|
|
39
|
-
var isFragment = useCallback(function (el) {
|
|
40
|
-
return getSegment(el) !== null;
|
|
41
|
-
}, [getSegment]);
|
|
42
|
-
useImperativeHandle(ref, function () { return ({
|
|
43
|
-
isFragment: isFragment,
|
|
44
|
-
getSegment: getSegment,
|
|
45
|
-
getRootNode: function () { return rootRef.current; },
|
|
46
|
-
}); }, [getSegment, isFragment]);
|
|
47
|
-
var segments = getTimeSegments(precision);
|
|
48
|
-
var displaySegments = getDisplaySegments(value, precision);
|
|
49
|
-
return (React.createElement("span", { ref: rootRef, className: rootClassName }, value
|
|
50
|
-
? segments.flatMap(function (segment, index) {
|
|
51
|
-
var _a;
|
|
52
|
-
var _b;
|
|
53
|
-
var segmentValue = (_b = displaySegments[index]) !== null && _b !== void 0 ? _b : '';
|
|
54
|
-
var valueMask = Array.from(segmentValue)
|
|
55
|
-
.filter(function (char) { return char !== TIME_PLACEHOLDER_CHAR; })
|
|
56
|
-
.join('');
|
|
57
|
-
var placeholderLength = segmentValue.length - valueMask.length;
|
|
58
|
-
var nodes = [
|
|
59
|
-
React.createElement("span", { key: segment, "data-fragment": "", className: styles.segment(), onMouseUp: function (event) { return onSelectSegment === null || onSelectSegment === void 0 ? void 0 : onSelectSegment(segment, event); } },
|
|
60
|
-
valueMask,
|
|
61
|
-
React.createElement("span", { className: maskClassName }, Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join(''))),
|
|
62
|
-
];
|
|
63
|
-
if (index < segments.length - 1) {
|
|
64
|
-
nodes.push(React.createElement("span", { key: "separator-".concat(index), className: cx(maskClassName, styles.separator(), separatorSizeClassName, (_a = {},
|
|
65
|
-
_a[styles.separatorFilled()] = !segmentValue.includes(TIME_PLACEHOLDER_CHAR),
|
|
66
|
-
_a)) }, TIME_SEPARATOR));
|
|
67
|
-
}
|
|
68
|
-
return nodes;
|
|
69
|
-
})
|
|
70
|
-
: null));
|
|
71
|
-
});
|
|
72
|
-
//# sourceMappingURL=TimeFragmentsView.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TimeFragmentsView.js","sourceRoot":"","sources":["../../../components/TimePicker/TimeFragmentsView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpF,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;AAEjE,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAE1F,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAe1D,IAAM,yBAAyB,GAAG,UAAC,MAAoC,EAAE,IAAc;IACrF,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,OAAO,MAAM,CAAC,cAAc,EAAE,CAAC;QACjC,KAAK,QAAQ;YACX,OAAO,MAAM,CAAC,eAAe,EAAE,CAAC;QAClC,KAAK,OAAO,CAAC;QACb;YACE,OAAO,MAAM,CAAC,cAAc,EAAE,CAAC;IACnC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,iBAAiB,CAChD,mBAAmB,EACnB,UAAC,KAAK,EAAE,GAAG;IACD,IAAA,KAAK,GAAuC,KAAK,MAA5C,EAAE,SAAS,GAA4B,KAAK,UAAjC,EAAE,IAAI,GAAsB,KAAK,KAA3B,EAAE,eAAe,GAAK,KAAK,gBAAV,CAAW;IAE1D,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAE/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAE5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,IAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAE9C,IAAM,aAAa,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAChE,IAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzC,IAAM,sBAAsB,GAAG,yBAAyB,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEvE,IAAM,UAAU,GAAG,WAAW,CAC5B,UAAC,EAAoC;;QACnC,IAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC;QAEjC,IAAI,CAAC,QAAQ,IAAI,CAAC,EAAE,EAAE,CAAC;YACrB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAM,SAAS,GAAsB,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAC9F,IAAM,QAAQ,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;QAE5C,IAAM,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,UAAC,QAAQ,IAAK,OAAA,QAAQ,KAAK,EAAE,IAAI,QAAQ,CAAC,QAAQ,CAAC,EAAqB,CAAC,EAA3D,CAA2D,CAAC,CAAC;QAE7G,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,QAAQ,CAAC,KAAK,CAAC,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACvD,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,IAAM,UAAU,GAAG,WAAW,CAC5B,UAAC,EAAoC;QACnC,OAAO,UAAU,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IACjC,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,mBAAmB,CACjB,GAAG,EACH,cAAM,OAAA,CAAC;QACL,UAAU,YAAA;QACV,UAAU,YAAA;QACV,WAAW,EAAE,cAAM,OAAA,OAAO,CAAC,OAAO,EAAf,CAAe;KACnC,CAAC,EAJI,CAIJ,EACF,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,IAAM,QAAQ,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAC5C,IAAM,eAAe,GAAG,kBAAkB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IAE7D,OAAO,CACL,8BAAM,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,IACzC,KAAK;QACJ,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAC,OAAO,EAAE,KAAK;;;YAC9B,IAAM,YAAY,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,mCAAI,EAAE,CAAC;YAElD,IAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;iBACvC,MAAM,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,KAAK,qBAAqB,EAA9B,CAA8B,CAAC;iBAChD,IAAI,CAAC,EAAE,CAAC,CAAC;YAEZ,IAAM,iBAAiB,GAAG,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC;YAEjE,IAAM,KAAK,GAAG;gBACZ,8BACE,GAAG,EAAE,OAAO,mBACE,EAAE,EAChB,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,EAC3B,SAAS,EAAE,UAAC,KAAK,IAAK,OAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,OAAO,EAAE,KAAK,CAAC,EAAjC,CAAiC;oBAEtD,SAAS;oBACV,8BAAM,SAAS,EAAE,aAAa,IAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAQ,CACjG;aACR,CAAC;YAEF,IAAI,KAAK,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAChC,KAAK,CAAC,IAAI,CACR,8BACE,GAAG,EAAE,oBAAa,KAAK,CAAE,EACzB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,EAAE,sBAAsB;wBACrE,GAAC,MAAM,CAAC,eAAe,EAAE,IAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,qBAAqB,CAAC;4BACzE,IAED,cAAc,CACV,CACR,CAAC;YACJ,CAAC;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CAAC;QACJ,CAAC,CAAC,IAAI,CACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from './helpers/TimePicker.constants.js';\nimport type { TimePrecision, TimeSegment } from './helpers/TimePicker.shared.js';\nimport { getDisplaySegments, getTimeSegments } from './helpers/TimePicker.shared.js';\nimport { getStyles } from './TimeFragmentsView.styles.js';\n\nexport interface TimeFragmentsViewRef {\n isFragment(el: HTMLElement | EventTarget | null): boolean;\n getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n getRootNode(): HTMLSpanElement | null;\n}\n\nexport interface TimeFragmentsViewProps {\n value: string;\n precision: TimePrecision;\n size: SizeProp;\n onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nconst getSeparatorSizeClassName = (styles: ReturnType<typeof getStyles>, size: SizeProp): string => {\n switch (size) {\n case 'large':\n return styles.separatorLarge();\n case 'medium':\n return styles.separatorMedium();\n case 'small':\n default:\n return styles.separatorSmall();\n }\n};\n\nexport const TimeFragmentsView = forwardRefAndName<TimeFragmentsViewRef, TimeFragmentsViewProps>(\n 'TimeFragmentsView',\n (props, ref) => {\n const { value, precision, size, onSelectSegment } = props;\n\n const theme = useContext(ThemeContext);\n\n const { cx } = useEmotion();\n\n const styles = useStyles(getStyles);\n\n const rootRef = useRef<HTMLSpanElement>(null);\n\n const rootClassName = cx(styles.root(), styles.selected(theme));\n const maskClassName = styles.mask(theme);\n const separatorSizeClassName = getSeparatorSizeClassName(styles, size);\n\n const getSegment = useCallback(\n (el: HTMLElement | EventTarget | null): TimeSegment | null => {\n const rootNode = rootRef.current;\n\n if (!rootNode || !el) {\n return null;\n }\n\n const fragments: HTMLSpanElement[] = Array.from(rootNode.querySelectorAll('[data-fragment]'));\n const segments = getTimeSegments(precision);\n\n const index = fragments.findIndex((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n\n return index >= 0 ? (segments[index] ?? null) : null;\n },\n [precision],\n );\n\n const isFragment = useCallback(\n (el: HTMLElement | EventTarget | null): boolean => {\n return getSegment(el) !== null;\n },\n [getSegment],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n isFragment,\n getSegment,\n getRootNode: () => rootRef.current,\n }),\n [getSegment, isFragment],\n );\n\n const segments = getTimeSegments(precision);\n const displaySegments = getDisplaySegments(value, precision);\n\n return (\n <span ref={rootRef} className={rootClassName}>\n {value\n ? segments.flatMap((segment, index) => {\n const segmentValue = displaySegments[index] ?? '';\n\n const valueMask = Array.from(segmentValue)\n .filter((char) => char !== TIME_PLACEHOLDER_CHAR)\n .join('');\n\n const placeholderLength = segmentValue.length - valueMask.length;\n\n const nodes = [\n <span\n key={segment}\n data-fragment=\"\"\n className={styles.segment()}\n onMouseUp={(event) => onSelectSegment?.(segment, event)}\n >\n {valueMask}\n <span className={maskClassName}>{Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join('')}</span>\n </span>,\n ];\n\n if (index < segments.length - 1) {\n nodes.push(\n <span\n key={`separator-${index}`}\n className={cx(maskClassName, styles.separator(), separatorSizeClassName, {\n [styles.separatorFilled()]: !segmentValue.includes(TIME_PLACEHOLDER_CHAR),\n })}\n >\n {TIME_SEPARATOR}\n </span>,\n );\n }\n\n return nodes;\n })\n : null}\n </span>\n );\n },\n);\n"]}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { Theme } from '../../lib/theming/Theme.js';
|
|
2
|
-
export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
|
|
3
|
-
root(): string;
|
|
4
|
-
selected(t: Theme): string;
|
|
5
|
-
segment(): string;
|
|
6
|
-
separator(): string;
|
|
7
|
-
separatorSmall(): string;
|
|
8
|
-
separatorMedium(): string;
|
|
9
|
-
separatorLarge(): string;
|
|
10
|
-
mask(t: Theme): string;
|
|
11
|
-
separatorFilled(): string;
|
|
12
|
-
}>;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
-
return cooked;
|
|
4
|
-
};
|
|
5
|
-
import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
|
|
6
|
-
export var getStyles = memoizeGetStyles(function (_a) {
|
|
7
|
-
var css = _a.css;
|
|
8
|
-
return ({
|
|
9
|
-
root: function () {
|
|
10
|
-
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
|
-
selected: function (t) {
|
|
13
|
-
var getSelection = function (background, color) {
|
|
14
|
-
return (background || color) &&
|
|
15
|
-
"& ::selection {\n background: ".concat(background, ";\n color: ").concat(color, ";\n }");
|
|
16
|
-
};
|
|
17
|
-
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: text;\n ", "\n "], ["\n cursor: text;\n ", "\n "])), getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor));
|
|
18
|
-
},
|
|
19
|
-
segment: function () {
|
|
20
|
-
return css(templateObject_3 || (templateObject_3 = __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 "])));
|
|
21
|
-
},
|
|
22
|
-
separator: function () {
|
|
23
|
-
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: inline-block;\n font-variant-numeric: tabular-nums;\n white-space: pre;\n "], ["\n display: inline-block;\n font-variant-numeric: tabular-nums;\n white-space: pre;\n "])));
|
|
24
|
-
},
|
|
25
|
-
separatorSmall: function () {
|
|
26
|
-
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n vertical-align: 1px;\n margin-left: 1px;\n margin-right: 1px;\n "], ["\n vertical-align: 1px;\n margin-left: 1px;\n margin-right: 1px;\n "])));
|
|
27
|
-
},
|
|
28
|
-
separatorMedium: function () {
|
|
29
|
-
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n vertical-align: 1px;\n margin-left: 2px;\n margin-right: 2px;\n "], ["\n vertical-align: 1px;\n margin-left: 2px;\n margin-right: 2px;\n "])));
|
|
30
|
-
},
|
|
31
|
-
separatorLarge: function () {
|
|
32
|
-
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n vertical-align: 2px;\n margin-left: 2px;\n margin-right: 2px;\n "], ["\n vertical-align: 2px;\n margin-left: 2px;\n margin-right: 2px;\n "])));
|
|
33
|
-
},
|
|
34
|
-
mask: function (t) {
|
|
35
|
-
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), t.inputPlaceholderColor);
|
|
36
|
-
},
|
|
37
|
-
separatorFilled: function () {
|
|
38
|
-
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: inherit;\n "], ["\n color: inherit;\n "])));
|
|
39
|
-
},
|
|
40
|
-
});
|
|
41
|
-
});
|
|
42
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
43
|
-
//# sourceMappingURL=TimeFragmentsView.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TimeFragmentsView.styles.js","sourceRoot":"","sources":["../../../components/TimePicker/TimeFragmentsView.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,EAAwF,QAC3F,KADG,YAAY,CAAC,CAAC,CAAC,iCAAiC,EAAE,CAAC,CAAC,mCAAmC,CAAC,EAC1F;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,uKAAA,oGAIT,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,6KAAA,0GAIT,KAAC;QACJ,CAAC;QAED,cAAc;YACZ,OAAO,GAAG,0JAAA,uFAIT,KAAC;QACJ,CAAC;QAED,eAAe;YACb,OAAO,GAAG,0JAAA,uFAIT,KAAC;QACJ,CAAC;QAED,cAAc;YACZ,OAAO,GAAG,0JAAA,uFAIT,KAAC;QACJ,CAAC;QAED,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,+FAAA,iBACC,EAAuB,SACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QAED,eAAe;YACb,OAAO,GAAG,kGAAA,+BAET,KAAC;QACJ,CAAC;KACF,CAAC;AA1E8D,CA0E9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\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 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.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor)}\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-block;\n font-variant-numeric: tabular-nums;\n white-space: pre;\n `;\n },\n\n separatorSmall() {\n return css`\n vertical-align: 1px;\n margin-left: 1px;\n margin-right: 1px;\n `;\n },\n\n separatorMedium() {\n return css`\n vertical-align: 1px;\n margin-left: 2px;\n margin-right: 2px;\n `;\n },\n\n separatorLarge() {\n return css`\n vertical-align: 2px;\n margin-left: 2px;\n margin-right: 2px;\n `;\n },\n\n mask(t: Theme) {\n return css`\n color: ${t.inputPlaceholderColor};\n `;\n },\n\n separatorFilled() {\n return css`\n color: inherit;\n `;\n },\n}));\n"]}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import type { MouseEventHandler, ReactNode } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { InputProps } from '../Input/index.js';
|
|
4
|
-
import type { TimePrecision, TimeSegment } from './helpers/TimePicker.shared.js';
|
|
5
|
-
export interface TimeInputProps extends Omit<InputProps, 'type' | 'value' | 'onValueChange' | 'rightIcon' | 'inputMode'> {
|
|
6
|
-
precision: TimePrecision;
|
|
7
|
-
rightContent?: ReactNode;
|
|
8
|
-
value: string;
|
|
9
|
-
onRightContentMouseDown?: MouseEventHandler<HTMLSpanElement>;
|
|
10
|
-
onSelectSegment?: (segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>) => void;
|
|
11
|
-
}
|
|
12
|
-
export interface TimeInputRef {
|
|
13
|
-
focus(): void;
|
|
14
|
-
blur(): void;
|
|
15
|
-
blink(): void;
|
|
16
|
-
getNode(): HTMLElement | null;
|
|
17
|
-
isFragment(el: HTMLElement | EventTarget | null): boolean;
|
|
18
|
-
getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;
|
|
19
|
-
selectAll(): void;
|
|
20
|
-
isAllSelected(): boolean;
|
|
21
|
-
selectSegment(segment: TimeSegment): void;
|
|
22
|
-
}
|
|
23
|
-
export declare const TimeInput: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimeInputRef, TimeInputProps> & Record<never, never>;
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import React, { useContext, useImperativeHandle, useRef } from 'react';
|
|
24
|
-
import { InputLikeText } from '../../internal/InputLikeText/index.js';
|
|
25
|
-
import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
|
|
26
|
-
import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
|
|
27
|
-
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
|
|
28
|
-
import { getTimePickerInputWidth } from './helpers/TimePicker.layout.js';
|
|
29
|
-
import { getTimeSegmentSelectionNodeRange } from './helpers/TimePicker.selection.js';
|
|
30
|
-
import { TimeClockIcon } from './TimeClockIcon.js';
|
|
31
|
-
import { TimeFragmentsView } from './TimeFragmentsView.js';
|
|
32
|
-
import { TimePickerDataTids } from './TimePicker.js';
|
|
33
|
-
import { getStyles } from './TimePicker.styles.js';
|
|
34
|
-
export var TimeInput = forwardRefAndName('TimeInput', function (props, ref) {
|
|
35
|
-
var _a;
|
|
36
|
-
var precision = props.precision, rightContent = props.rightContent, onRightContentMouseDown = props.onRightContentMouseDown, onSelectSegment = props.onSelectSegment, _b = props.size, size = _b === void 0 ? 'small' : _b, width = props.width, rest = __rest(props, ["precision", "rightContent", "onRightContentMouseDown", "onSelectSegment", "size", "width"]);
|
|
37
|
-
var theme = useContext(ThemeContext);
|
|
38
|
-
var cx = useEmotion().cx;
|
|
39
|
-
var styles = useStyles(getStyles);
|
|
40
|
-
var inputLikeTextRef = useRef(null);
|
|
41
|
-
var fragmentsViewRef = useRef(null);
|
|
42
|
-
useImperativeHandle(ref, function () { return ({
|
|
43
|
-
focus: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
|
|
44
|
-
blur: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
|
|
45
|
-
blink: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blink(); },
|
|
46
|
-
getNode: function () { var _a, _b; return (_b = (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.getNode()) !== null && _b !== void 0 ? _b : null; },
|
|
47
|
-
isFragment: function (el) { var _a, _b; return (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.isFragment(el)) !== null && _b !== void 0 ? _b : false; },
|
|
48
|
-
getSegment: function (el) { var _a, _b; return (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getSegment(el)) !== null && _b !== void 0 ? _b : null; },
|
|
49
|
-
selectAll: function () {
|
|
50
|
-
var _a, _b, _c;
|
|
51
|
-
var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
|
|
52
|
-
if (!rootNode) {
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
(_c = inputLikeTextRef.current) === null || _c === void 0 ? void 0 : _c.selectInnerNode(rootNode, 0, rootNode.childNodes.length);
|
|
56
|
-
},
|
|
57
|
-
isAllSelected: function () {
|
|
58
|
-
var _a, _b, _c, _d, _e;
|
|
59
|
-
var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
|
|
60
|
-
if (!rootNode) {
|
|
61
|
-
return false;
|
|
62
|
-
}
|
|
63
|
-
var selection = (_d = (_c = rootNode.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.getSelection()) !== null && _d !== void 0 ? _d : null;
|
|
64
|
-
if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
|
|
65
|
-
return false;
|
|
66
|
-
}
|
|
67
|
-
var range = selection.getRangeAt(0);
|
|
68
|
-
var text = (_e = rootNode.textContent) !== null && _e !== void 0 ? _e : '';
|
|
69
|
-
return (range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer));
|
|
70
|
-
},
|
|
71
|
-
selectSegment: function (segment) {
|
|
72
|
-
var _a, _b, _c;
|
|
73
|
-
var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
|
|
74
|
-
if (!rootNode) {
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
var _d = getTimeSegmentSelectionNodeRange(segment, precision), start = _d[0], end = _d[1];
|
|
78
|
-
(_c = inputLikeTextRef.current) === null || _c === void 0 ? void 0 : _c.selectInnerNode(rootNode, start, end);
|
|
79
|
-
},
|
|
80
|
-
}); }, [precision]);
|
|
81
|
-
return (React.createElement(InputLikeText, __assign({ ref: inputLikeTextRef }, rest, { takeContentWidth: true, inputMode: "numeric", size: size, width: width !== null && width !== void 0 ? width : getTimePickerInputWidth(size, precision), value: props.value, rightIcon: React.createElement("span", { "data-tid": TimePickerDataTids.rightContent, className: cx(styles.rightContent(), styles.rightContentInteractive(), (_a = {},
|
|
82
|
-
_a[styles.rightContentDefault(theme)] = !rightContent,
|
|
83
|
-
_a)), onMouseDown: onRightContentMouseDown }, rightContent !== null && rightContent !== void 0 ? rightContent : React.createElement(TimeClockIcon, { size: size })) }),
|
|
84
|
-
React.createElement(TimeFragmentsView, { ref: fragmentsViewRef, value: props.value, precision: precision, size: size, onSelectSegment: onSelectSegment })));
|
|
85
|
-
});
|
|
86
|
-
//# sourceMappingURL=TimeInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../../../components/TimePicker/TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\nimport React, { useContext, useImperativeHandle, useRef } from 'react';\n\nimport { InputLikeText } from '../../internal/InputLikeText/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { InputProps } from '../Input/index.js';\nimport { getTimePickerInputWidth } from './helpers/TimePicker.layout.js';\nimport { getTimeSegmentSelectionNodeRange } from './helpers/TimePicker.selection.js';\nimport type { TimePrecision, TimeSegment } from './helpers/TimePicker.shared.js';\nimport { TimeClockIcon } from './TimeClockIcon.js';\nimport type { TimeFragmentsViewRef } from './TimeFragmentsView.js';\nimport { TimeFragmentsView } from './TimeFragmentsView.js';\nimport { TimePickerDataTids } from './TimePicker.js';\nimport { getStyles } from './TimePicker.styles.js';\n\nexport interface TimeInputProps extends Omit<\n InputProps,\n 'type' | 'value' | 'onValueChange' | 'rightIcon' | 'inputMode'\n> {\n precision: TimePrecision;\n rightContent?: ReactNode;\n value: string;\n onRightContentMouseDown?: MouseEventHandler<HTMLSpanElement>;\n onSelectSegment?: (segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>) => void;\n}\n\nexport interface TimeInputRef {\n focus(): void;\n\n blur(): void;\n\n blink(): void;\n\n getNode(): HTMLElement | null;\n\n isFragment(el: HTMLElement | EventTarget | null): boolean;\n\n getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n\n selectAll(): void;\n\n isAllSelected(): boolean;\n\n selectSegment(segment: TimeSegment): void;\n}\n\nexport const TimeInput = forwardRefAndName<TimeInputRef, TimeInputProps>('TimeInput', (props, ref) => {\n const { precision, rightContent, onRightContentMouseDown, onSelectSegment, size = 'small', width, ...rest } = 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 fragmentsViewRef = useRef<TimeFragmentsViewRef>(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 isFragment: (el) => fragmentsViewRef.current?.isFragment(el) ?? false,\n getSegment: (el) => fragmentsViewRef.current?.getSegment(el) ?? null,\n selectAll: () => {\n const rootNode = fragmentsViewRef.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 = fragmentsViewRef.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 = fragmentsViewRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return;\n }\n\n const [start, end] = getTimeSegmentSelectionNodeRange(segment, precision);\n inputLikeTextRef.current?.selectInnerNode(rootNode, start, end);\n },\n }),\n [precision],\n );\n\n return (\n <InputLikeText\n ref={inputLikeTextRef}\n {...rest}\n takeContentWidth\n inputMode=\"numeric\"\n size={size}\n width={width ?? getTimePickerInputWidth(size, precision)}\n value={props.value}\n rightIcon={\n <span\n data-tid={TimePickerDataTids.rightContent}\n className={cx(styles.rightContent(), styles.rightContentInteractive(), {\n [styles.rightContentDefault(theme)]: !rightContent,\n })}\n onMouseDown={onRightContentMouseDown}\n >\n {rightContent ?? <TimeClockIcon size={size} />}\n </span>\n }\n >\n <TimeFragmentsView\n ref={fragmentsViewRef}\n value={props.value}\n precision={precision}\n size={size}\n onSelectSegment={onSelectSegment}\n />\n </InputLikeText>\n );\n});\n"]}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type { AriaAttributes, ReactNode } from 'react';
|
|
2
|
-
import type { InputProps } from '../Input/index.js';
|
|
3
|
-
import type { TimePrecision, TimeSlot } from './helpers/TimePicker.shared.js';
|
|
4
|
-
export interface TimePickerProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'rightIcon' | 'inputMode'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'> {
|
|
5
|
-
dropdown?: boolean;
|
|
6
|
-
menuPos?: 'top' | 'bottom';
|
|
7
|
-
menuAlign?: 'left' | 'right';
|
|
8
|
-
precision?: TimePrecision;
|
|
9
|
-
slots?: TimeSlot[];
|
|
10
|
-
rightContent?: ReactNode;
|
|
11
|
-
value?: string | null;
|
|
12
|
-
onValueChange?(value: string): void;
|
|
13
|
-
}
|
|
14
|
-
export interface TimePickerRef {
|
|
15
|
-
focus(): void;
|
|
16
|
-
blur(): void;
|
|
17
|
-
getNode(): HTMLElement | null;
|
|
18
|
-
getRootNode(): HTMLElement | null;
|
|
19
|
-
}
|
|
20
|
-
export declare const TimePickerDataTids: {
|
|
21
|
-
readonly root: "TimePicker__root";
|
|
22
|
-
readonly input: "TimePicker__input";
|
|
23
|
-
readonly popup: "TimePicker__popup";
|
|
24
|
-
readonly slot: "TimePicker__slot";
|
|
25
|
-
readonly rightContent: "TimePicker__rightContent";
|
|
26
|
-
};
|
|
27
|
-
export declare const TimePicker: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimePickerRef, TimePickerProps> & Record<never, never>;
|