@gravity-ui/date-components 2.3.1 → 2.4.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.
|
@@ -4,14 +4,12 @@ exports.RelativeRangeDatePicker = void 0;
|
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
7
|
-
const date_utils_1 = require("@gravity-ui/date-utils");
|
|
8
7
|
const icons_1 = require("@gravity-ui/icons");
|
|
9
8
|
const uikit_1 = require("@gravity-ui/uikit");
|
|
10
9
|
const cn_1 = require("../../utils/cn");
|
|
11
10
|
const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
|
|
12
11
|
const PickerDialog_1 = require("./components/PickerDialog/PickerDialog");
|
|
13
12
|
const useRelativeRangeDatePickerState_1 = require("./hooks/useRelativeRangeDatePickerState");
|
|
14
|
-
const i18n_1 = require("./i18n");
|
|
15
13
|
const utils_1 = require("./utils");
|
|
16
14
|
require("./RelativeRangeDatePicker.css");
|
|
17
15
|
const b = (0, cn_1.block)('relative-range-date-picker');
|
|
@@ -55,35 +53,35 @@ function RelativeRangeDatePicker(props) {
|
|
|
55
53
|
}), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
|
|
56
54
|
const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
|
|
57
55
|
const errorMessage = (_a = props.errorMessage) !== null && _a !== void 0 ? _a : state.errors.join('\n');
|
|
58
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(uikit_1.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
|
|
57
|
+
if (!props.readOnly && !v) {
|
|
58
|
+
state.setValue(null, 'default');
|
|
59
|
+
}
|
|
60
|
+
}, controlProps: {
|
|
61
|
+
'aria-haspopup': 'dialog',
|
|
62
|
+
'aria-expanded': open,
|
|
63
|
+
disabled: isMobile,
|
|
64
|
+
className: b('input', { mobile: isMobile }),
|
|
65
|
+
}, onKeyDown: (e) => {
|
|
66
|
+
if (props.disabled) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|
70
|
+
e.preventDefault();
|
|
71
|
+
setOpen(true);
|
|
72
|
+
}
|
|
73
|
+
}, onFocus: () => {
|
|
74
|
+
if (!isActive) {
|
|
75
|
+
setIsActive(true);
|
|
76
|
+
setOpen(true);
|
|
77
|
+
}
|
|
78
|
+
}, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, extraProps: {
|
|
63
79
|
'aria-haspopup': 'dialog',
|
|
64
80
|
'aria-expanded': open,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|
72
|
-
e.preventDefault();
|
|
73
|
-
setOpen(true);
|
|
74
|
-
}
|
|
75
|
-
}, onFocus: () => {
|
|
76
|
-
if (!isActive) {
|
|
77
|
-
setIsActive(true);
|
|
78
|
-
setOpen(true);
|
|
79
|
-
}
|
|
80
|
-
}, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, extraProps: {
|
|
81
|
-
'aria-haspopup': 'dialog',
|
|
82
|
-
'aria-expanded': open,
|
|
83
|
-
}, onClick: () => {
|
|
84
|
-
setIsActive(true);
|
|
85
|
-
setOpen(!open);
|
|
86
|
-
}, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }) }), isMobile ? ((0, jsx_runtime_1.jsx)("button", { className: b('mobile-trigger', {
|
|
81
|
+
}, onClick: () => {
|
|
82
|
+
setIsActive(true);
|
|
83
|
+
setOpen(!open);
|
|
84
|
+
}, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }), isMobile ? ((0, jsx_runtime_1.jsx)("button", { className: b('mobile-trigger', {
|
|
87
85
|
'has-clear': Boolean(props.hasClear && state.value),
|
|
88
86
|
'has-errors': state.isInvalid && props.errorPlacement === 'inside',
|
|
89
87
|
size: props.size,
|
|
@@ -95,7 +93,3 @@ function RelativeRangeDatePicker(props) {
|
|
|
95
93
|
}, anchorRef: anchorRef, isMobile: isMobile, className: props.className })] })));
|
|
96
94
|
}
|
|
97
95
|
exports.RelativeRangeDatePicker = RelativeRangeDatePicker;
|
|
98
|
-
function ValueLabel({ value, format, timeZone }) {
|
|
99
|
-
var _a, _b, _c, _d;
|
|
100
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: b('value-label-content'), children: [(0, jsx_runtime_1.jsx)("span", { className: b('value-label-item'), children: (_b = (0, date_utils_1.dateTimeParse)((_a = value === null || value === void 0 ? void 0 : value.start) === null || _a === void 0 ? void 0 : _a.value, { timeZone })) === null || _b === void 0 ? void 0 : _b.format(format) }), (0, jsx_runtime_1.jsx)("span", { className: b('value-label-to'), children: (0, i18n_1.i18n)('to') }), (0, jsx_runtime_1.jsx)("span", { className: b('value-label-item'), children: (_d = (0, date_utils_1.dateTimeParse)((_c = value === null || value === void 0 ? void 0 : value.end) === null || _c === void 0 ? void 0 : _c.value, { timeZone, roundUp: true })) === null || _d === void 0 ? void 0 : _d.format(format) }), timeZone && (0, jsx_runtime_1.jsx)("span", { className: b('value-label-tz'), children: timeZone })] }));
|
|
101
|
-
}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { dateTimeParse } from '@gravity-ui/date-utils';
|
|
4
3
|
import { Calendar as CalendarIcon } from '@gravity-ui/icons';
|
|
5
|
-
import { Button, Icon,
|
|
4
|
+
import { Button, Icon, TextInput, useFocusWithin, useMobile } from '@gravity-ui/uikit';
|
|
6
5
|
import { block } from '../../utils/cn';
|
|
7
6
|
import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
|
|
8
7
|
import { PickerDialog } from './components/PickerDialog/PickerDialog';
|
|
9
8
|
import { useRelativeRangeDatePickerState } from './hooks/useRelativeRangeDatePickerState';
|
|
10
|
-
import { i18n } from './i18n';
|
|
11
9
|
import { getDefaultTitle } from './utils';
|
|
12
10
|
import './RelativeRangeDatePicker.css';
|
|
13
11
|
const b = block('relative-range-date-picker');
|
|
@@ -51,35 +49,35 @@ export function RelativeRangeDatePicker(props) {
|
|
|
51
49
|
}), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
|
|
52
50
|
const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
|
|
53
51
|
const errorMessage = (_a = props.errorMessage) !== null && _a !== void 0 ? _a : state.errors.join('\n');
|
|
54
|
-
return (_jsxs("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [_jsx(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
52
|
+
return (_jsxs("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [_jsx(TextInput, { autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
|
|
53
|
+
if (!props.readOnly && !v) {
|
|
54
|
+
state.setValue(null, 'default');
|
|
55
|
+
}
|
|
56
|
+
}, controlProps: {
|
|
57
|
+
'aria-haspopup': 'dialog',
|
|
58
|
+
'aria-expanded': open,
|
|
59
|
+
disabled: isMobile,
|
|
60
|
+
className: b('input', { mobile: isMobile }),
|
|
61
|
+
}, onKeyDown: (e) => {
|
|
62
|
+
if (props.disabled) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|
66
|
+
e.preventDefault();
|
|
67
|
+
setOpen(true);
|
|
68
|
+
}
|
|
69
|
+
}, onFocus: () => {
|
|
70
|
+
if (!isActive) {
|
|
71
|
+
setIsActive(true);
|
|
72
|
+
setOpen(true);
|
|
73
|
+
}
|
|
74
|
+
}, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: _jsx(Button, { view: "flat-secondary", size: getButtonSizeForInput(props.size), disabled: props.disabled, extraProps: {
|
|
59
75
|
'aria-haspopup': 'dialog',
|
|
60
76
|
'aria-expanded': open,
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|
68
|
-
e.preventDefault();
|
|
69
|
-
setOpen(true);
|
|
70
|
-
}
|
|
71
|
-
}, onFocus: () => {
|
|
72
|
-
if (!isActive) {
|
|
73
|
-
setIsActive(true);
|
|
74
|
-
setOpen(true);
|
|
75
|
-
}
|
|
76
|
-
}, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: _jsx(Button, { view: "flat-secondary", size: getButtonSizeForInput(props.size), disabled: props.disabled, extraProps: {
|
|
77
|
-
'aria-haspopup': 'dialog',
|
|
78
|
-
'aria-expanded': open,
|
|
79
|
-
}, onClick: () => {
|
|
80
|
-
setIsActive(true);
|
|
81
|
-
setOpen(!open);
|
|
82
|
-
}, children: _jsx(Icon, { data: CalendarIcon }) }) }) }), isMobile ? (_jsx("button", { className: b('mobile-trigger', {
|
|
77
|
+
}, onClick: () => {
|
|
78
|
+
setIsActive(true);
|
|
79
|
+
setOpen(!open);
|
|
80
|
+
}, children: _jsx(Icon, { data: CalendarIcon }) }) }), isMobile ? (_jsx("button", { className: b('mobile-trigger', {
|
|
83
81
|
'has-clear': Boolean(props.hasClear && state.value),
|
|
84
82
|
'has-errors': state.isInvalid && props.errorPlacement === 'inside',
|
|
85
83
|
size: props.size,
|
|
@@ -90,7 +88,3 @@ export function RelativeRangeDatePicker(props) {
|
|
|
90
88
|
setOpen(false);
|
|
91
89
|
}, anchorRef: anchorRef, isMobile: isMobile, className: props.className })] })));
|
|
92
90
|
}
|
|
93
|
-
function ValueLabel({ value, format, timeZone }) {
|
|
94
|
-
var _a, _b, _c, _d;
|
|
95
|
-
return (_jsxs("div", { className: b('value-label-content'), children: [_jsx("span", { className: b('value-label-item'), children: (_b = dateTimeParse((_a = value === null || value === void 0 ? void 0 : value.start) === null || _a === void 0 ? void 0 : _a.value, { timeZone })) === null || _b === void 0 ? void 0 : _b.format(format) }), _jsx("span", { className: b('value-label-to'), children: i18n('to') }), _jsx("span", { className: b('value-label-item'), children: (_d = dateTimeParse((_c = value === null || value === void 0 ? void 0 : value.end) === null || _c === void 0 ? void 0 : _c.value, { timeZone, roundUp: true })) === null || _d === void 0 ? void 0 : _d.format(format) }), timeZone && _jsx("span", { className: b('value-label-tz'), children: timeZone })] }));
|
|
96
|
-
}
|