@gravity-ui/date-components 1.1.0 → 1.2.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/dist/cjs/components/Calendar/Calendar.css +37 -37
- package/dist/cjs/components/Calendar/Calendar.js +2 -4
- package/dist/cjs/components/Calendar/CalendarBase.js +2 -4
- package/dist/cjs/components/Calendar/RangeCalendar.js +2 -4
- package/dist/cjs/components/Calendar/hooks/useCalendarCellProps.js +2 -4
- package/dist/cjs/components/Calendar/hooks/useCalendarGridProps.js +11 -0
- package/dist/cjs/components/Calendar/hooks/useCalendarProps.js +2 -4
- package/dist/cjs/components/Calendar/hooks/useCalendarState.js +2 -4
- package/dist/cjs/components/Calendar/hooks/useRangeCalendarState.js +13 -21
- package/dist/cjs/components/Calendar/i18n/index.js +3 -5
- package/dist/cjs/components/Calendar/index.js +8 -21
- package/dist/cjs/components/DateField/DateField.js +3 -16
- package/dist/cjs/components/DateField/hooks/useDateFieldProps.js +25 -20
- package/dist/cjs/components/DateField/hooks/useDateFieldState.js +23 -167
- package/dist/cjs/components/DateField/i18n/index.js +3 -5
- package/dist/cjs/components/DateField/index.js +4 -17
- package/dist/cjs/components/DateField/utils.d.ts +14 -3
- package/dist/cjs/components/DateField/utils.js +172 -3
- package/dist/cjs/components/DatePicker/DatePicker.css +6 -0
- package/dist/cjs/components/DatePicker/DatePicker.d.ts +2 -2
- package/dist/cjs/components/DatePicker/DatePicker.js +8 -48
- package/dist/cjs/components/DatePicker/hooks/useDatePickerProps.d.ts +20 -0
- package/dist/cjs/components/DatePicker/hooks/useDatePickerProps.js +121 -0
- package/dist/cjs/components/DatePicker/hooks/useDatePickerState.d.ts +4 -5
- package/dist/cjs/components/DatePicker/hooks/useDatePickerState.js +17 -4
- package/dist/cjs/components/DatePicker/i18n/index.js +3 -5
- package/dist/cjs/components/DatePicker/index.d.ts +1 -0
- package/dist/cjs/components/DatePicker/index.js +4 -16
- package/dist/cjs/components/RelativeDateField/RelativeDateField.js +2 -4
- package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldProps.js +2 -4
- package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldState.js +2 -4
- package/dist/cjs/components/RelativeDateField/index.js +4 -17
- package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.css +1 -0
- package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.js +2 -4
- package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js +32 -43
- package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerState.js +2 -4
- package/dist/cjs/components/RelativeDatePicker/i18n/index.js +3 -5
- package/dist/cjs/components/RelativeDatePicker/index.js +4 -17
- package/dist/cjs/components/hooks/useControlledState.js +2 -4
- package/dist/cjs/components/index.js +6 -19
- package/dist/cjs/index.js +2 -15
- package/dist/esm/components/Calendar/Calendar.css +37 -37
- package/dist/esm/components/Calendar/hooks/useCalendarGridProps.js +11 -0
- package/dist/esm/components/Calendar/hooks/useRangeCalendarState.js +11 -16
- package/dist/esm/components/DateField/DateField.js +1 -11
- package/dist/esm/components/DateField/hooks/useDateFieldProps.js +24 -17
- package/dist/esm/components/DateField/hooks/useDateFieldState.js +19 -161
- package/dist/esm/components/DateField/utils.d.ts +14 -3
- package/dist/esm/components/DateField/utils.js +165 -2
- package/dist/esm/components/DatePicker/DatePicker.css +6 -0
- package/dist/esm/components/DatePicker/DatePicker.d.ts +2 -2
- package/dist/esm/components/DatePicker/DatePicker.js +9 -46
- package/dist/esm/components/DatePicker/hooks/useDatePickerProps.d.ts +20 -0
- package/dist/esm/components/DatePicker/hooks/useDatePickerProps.js +117 -0
- package/dist/esm/components/DatePicker/hooks/useDatePickerState.d.ts +4 -5
- package/dist/esm/components/DatePicker/hooks/useDatePickerState.js +15 -0
- package/dist/esm/components/DatePicker/index.d.ts +1 -0
- package/dist/esm/components/DatePicker/index.js +1 -0
- package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.css +1 -0
- package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js +30 -38
- package/package.json +37 -33
- package/dist/cjs/components/DatePicker/DesktopCalendar.d.ts +0 -17
- package/dist/cjs/components/DatePicker/DesktopCalendar.js +0 -65
- package/dist/esm/components/DatePicker/DesktopCalendar.d.ts +0 -17
- package/dist/esm/components/DatePicker/DesktopCalendar.js +0 -57
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useDatePickerProps = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
|
+
const uikit_1 = require("@gravity-ui/uikit");
|
|
7
|
+
const DateField_1 = require("../../DateField");
|
|
8
|
+
const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput");
|
|
9
|
+
const mergeProps_1 = require("../../utils/mergeProps");
|
|
10
|
+
const i18n_1 = require("../i18n");
|
|
11
|
+
function useDatePickerProps(state, _a) {
|
|
12
|
+
var _b;
|
|
13
|
+
var { onFocus, onBlur } = _a, props = tslib_1.__rest(_a, ["onFocus", "onBlur"]);
|
|
14
|
+
const [isActive, setActive] = react_1.default.useState(false);
|
|
15
|
+
const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
|
|
16
|
+
onFocusWithin: onFocus,
|
|
17
|
+
onBlurWithin: onBlur,
|
|
18
|
+
onFocusWithinChange(isFocusWithin) {
|
|
19
|
+
setActive(isFocusWithin);
|
|
20
|
+
if (!isFocusWithin) {
|
|
21
|
+
state.setOpen(false);
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
const { inputProps } = (0, DateField_1.useDateFieldProps)(state.dateFieldState, props);
|
|
26
|
+
let error;
|
|
27
|
+
let validationState = props.validationState;
|
|
28
|
+
if (validationState) {
|
|
29
|
+
error = validationState === 'invalid' ? props.errorMessage || true : undefined;
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
validationState = state.dateFieldState.validationState;
|
|
33
|
+
error = validationState === 'invalid';
|
|
34
|
+
}
|
|
35
|
+
const inputRef = react_1.default.useRef(null);
|
|
36
|
+
const handleRef = (0, uikit_1.useForkRef)(inputRef, inputProps.controlRef);
|
|
37
|
+
const calendarRef = react_1.default.useRef(null);
|
|
38
|
+
const calendarButtonRef = react_1.default.useRef(null);
|
|
39
|
+
const groupRef = react_1.default.useRef(null);
|
|
40
|
+
function focusInput() {
|
|
41
|
+
setTimeout(() => {
|
|
42
|
+
var _a;
|
|
43
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
return {
|
|
47
|
+
groupProps: Object.assign(Object.assign({ ref: groupRef, tabIndex: -1, role: 'group' }, focusWithinProps), { style: props.style, 'aria-disabled': state.disabled || undefined, onKeyDown: (e) => {
|
|
48
|
+
if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
e.stopPropagation();
|
|
51
|
+
state.setOpen(true);
|
|
52
|
+
}
|
|
53
|
+
} }),
|
|
54
|
+
fieldProps: (0, mergeProps_1.mergeProps)(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
|
|
55
|
+
? { value: '' }
|
|
56
|
+
: undefined, { controlRef: handleRef, error }),
|
|
57
|
+
calendarButtonProps: {
|
|
58
|
+
ref: calendarButtonRef,
|
|
59
|
+
size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size),
|
|
60
|
+
disabled: state.disabled,
|
|
61
|
+
extraProps: {
|
|
62
|
+
'aria-label': (0, i18n_1.i18n)('Calendar'),
|
|
63
|
+
'aria-haspopup': 'dialog',
|
|
64
|
+
'aria-expanded': state.isOpen,
|
|
65
|
+
},
|
|
66
|
+
view: 'flat-secondary',
|
|
67
|
+
onClick: () => {
|
|
68
|
+
setActive(true);
|
|
69
|
+
state.setOpen(!state.isOpen);
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
popupProps: {
|
|
73
|
+
open: state.isOpen,
|
|
74
|
+
onEscapeKeyDown: () => {
|
|
75
|
+
state.setOpen(false);
|
|
76
|
+
focusInput();
|
|
77
|
+
},
|
|
78
|
+
onOutsideClick: (e) => {
|
|
79
|
+
var _a;
|
|
80
|
+
if (e.target !== calendarButtonRef.current) {
|
|
81
|
+
state.setOpen(false);
|
|
82
|
+
}
|
|
83
|
+
if (e.target && ((_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
84
|
+
focusInput();
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
// @ts-expect-error focusTrap in popup was introduced in a newer version of uikit
|
|
88
|
+
focusTrap: true,
|
|
89
|
+
},
|
|
90
|
+
calendarProps: {
|
|
91
|
+
ref: calendarRef,
|
|
92
|
+
autoFocus: true,
|
|
93
|
+
size: props.size === 's' ? 'm' : props.size,
|
|
94
|
+
disabled: props.disabled,
|
|
95
|
+
readOnly: props.readOnly,
|
|
96
|
+
onUpdate: (d) => {
|
|
97
|
+
state.setDateValue(d);
|
|
98
|
+
if (!state.hasTime) {
|
|
99
|
+
focusInput();
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
defaultFocusedValue: (_b = state.dateValue) !== null && _b !== void 0 ? _b : undefined,
|
|
103
|
+
value: state.dateValue,
|
|
104
|
+
minValue: props.minValue,
|
|
105
|
+
maxValue: props.maxValue,
|
|
106
|
+
isDateUnavailable: props.isDateUnavailable,
|
|
107
|
+
timeZone: props.timeZone,
|
|
108
|
+
},
|
|
109
|
+
timeInputProps: {
|
|
110
|
+
value: state.timeValue,
|
|
111
|
+
onUpdate: state.setTimeValue,
|
|
112
|
+
format: state.timeFormat,
|
|
113
|
+
readOnly: state.readOnly,
|
|
114
|
+
disabled: state.disabled,
|
|
115
|
+
timeZone: props.timeZone,
|
|
116
|
+
hasClear: props.hasClear,
|
|
117
|
+
size: props.size,
|
|
118
|
+
},
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
exports.useDatePickerProps = useDatePickerProps;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { DateTime } from '@gravity-ui/date-utils';
|
|
2
|
-
import type {
|
|
2
|
+
import type { DateFieldState } from '../../DateField';
|
|
3
|
+
import type { DateFieldBase } from '../../types';
|
|
3
4
|
export type Granularity = 'day' | 'hour' | 'minute' | 'second';
|
|
4
5
|
export interface DatePickerState {
|
|
5
6
|
/** The currently selected date. */
|
|
@@ -36,10 +37,8 @@ export interface DatePickerState {
|
|
|
36
37
|
isOpen: boolean;
|
|
37
38
|
/** Sets whether the calendar popover is open. */
|
|
38
39
|
setOpen(isOpen: boolean): void;
|
|
40
|
+
dateFieldState: DateFieldState;
|
|
39
41
|
}
|
|
40
|
-
export interface DatePickerStateOptions extends
|
|
41
|
-
placeholderValue?: DateTime;
|
|
42
|
-
timeZone?: string;
|
|
43
|
-
format?: string;
|
|
42
|
+
export interface DatePickerStateOptions extends DateFieldBase {
|
|
44
43
|
}
|
|
45
44
|
export declare function useDatePickerState(props: DatePickerStateOptions): DatePickerState;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.useDatePickerState = void 0;
|
|
7
|
-
const
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
|
+
const DateField_1 = require("../../DateField");
|
|
8
7
|
const utils_1 = require("../../DateField/utils");
|
|
9
8
|
const useControlledState_1 = require("../../hooks/useControlledState");
|
|
10
9
|
const dates_1 = require("../../utils/dates");
|
|
@@ -81,6 +80,19 @@ function useDatePickerState(props) {
|
|
|
81
80
|
setSelectedTime(newValue);
|
|
82
81
|
}
|
|
83
82
|
};
|
|
83
|
+
const dateFieldState = (0, DateField_1.useDateFieldState)({
|
|
84
|
+
value: value !== null && value !== void 0 ? value : null,
|
|
85
|
+
onUpdate: setValue,
|
|
86
|
+
disabled,
|
|
87
|
+
readOnly,
|
|
88
|
+
validationState: props.validationState,
|
|
89
|
+
minValue: props.minValue,
|
|
90
|
+
maxValue: props.maxValue,
|
|
91
|
+
isDateUnavailable: props.isDateUnavailable,
|
|
92
|
+
format,
|
|
93
|
+
placeholderValue: props.placeholderValue,
|
|
94
|
+
timeZone: props.timeZone,
|
|
95
|
+
});
|
|
84
96
|
return {
|
|
85
97
|
value: value !== null && value !== void 0 ? value : null,
|
|
86
98
|
setValue,
|
|
@@ -101,6 +113,7 @@ function useDatePickerState(props) {
|
|
|
101
113
|
}
|
|
102
114
|
setOpen(newIsOpen);
|
|
103
115
|
},
|
|
116
|
+
dateFieldState,
|
|
104
117
|
};
|
|
105
118
|
}
|
|
106
119
|
exports.useDatePickerState = useDatePickerState;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.i18n = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
7
5
|
const i18n_1 = require("@gravity-ui/uikit/i18n");
|
|
8
6
|
const cn_1 = require("../../../utils/cn");
|
|
9
|
-
const en_json_1 = __importDefault(require("./en.json"));
|
|
10
|
-
const ru_json_1 = __importDefault(require("./ru.json"));
|
|
7
|
+
const en_json_1 = tslib_1.__importDefault(require("./en.json"));
|
|
8
|
+
const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
|
|
11
9
|
exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}date-picker`);
|
|
@@ -1,18 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
|
|
18
|
-
__exportStar(require("./
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./DatePicker"), exports);
|
|
5
|
+
tslib_1.__exportStar(require("./hooks/useDatePickerState"), exports);
|
|
6
|
+
tslib_1.__exportStar(require("./hooks/useDatePickerProps"), exports);
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.RelativeDateField = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
7
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
6
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
9
7
|
const uikit_1 = require("@gravity-ui/uikit");
|
|
10
8
|
const cn_1 = require("../../utils/cn");
|
|
11
9
|
const Calendar_1 = require("../Calendar");
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.useRelativeDateFieldProps = void 0;
|
|
7
|
-
const
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
8
6
|
function useRelativeDateFieldProps(state, props) {
|
|
9
7
|
const [prevCorrectDate, setPrevCorrectDate] = react_1.default.useState(state.lastCorrectDate);
|
|
10
8
|
const [focusedDate, setFocusedDate] = react_1.default.useState(state.lastCorrectDate);
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.useRelativeDateFieldState = void 0;
|
|
7
|
-
const
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
8
6
|
const date_utils_1 = require("@gravity-ui/date-utils");
|
|
9
7
|
const useControlledState_1 = require("../../hooks/useControlledState");
|
|
10
8
|
function useRelativeDateFieldState(props) {
|
|
@@ -1,19 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
|
|
18
|
-
__exportStar(require("./
|
|
19
|
-
__exportStar(require("./hooks/
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./RelativeDateField"), exports);
|
|
5
|
+
tslib_1.__exportStar(require("./hooks/useRelativeDateFieldProps"), exports);
|
|
6
|
+
tslib_1.__exportStar(require("./hooks/useRelativeDateFieldState"), exports);
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.RelativeDatePicker = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
7
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
6
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
9
7
|
const icons_1 = require("@gravity-ui/icons");
|
|
10
8
|
const uikit_1 = require("@gravity-ui/uikit");
|
|
11
9
|
const cn_1 = require("../../utils/cn");
|
|
@@ -1,28 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
3
|
exports.useRelativeDatePickerProps = void 0;
|
|
18
|
-
const
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
19
6
|
const uikit_1 = require("@gravity-ui/uikit");
|
|
20
7
|
const DateField_1 = require("../../DateField");
|
|
21
8
|
const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput");
|
|
22
9
|
const mergeProps_1 = require("../../utils/mergeProps");
|
|
23
10
|
const i18n_1 = require("../i18n");
|
|
24
11
|
function useRelativeDatePickerProps(state, _a) {
|
|
25
|
-
var { onFocus, onBlur } = _a, props = __rest(_a, ["onFocus", "onBlur"]);
|
|
12
|
+
var { onFocus, onBlur } = _a, props = tslib_1.__rest(_a, ["onFocus", "onBlur"]);
|
|
26
13
|
const { mode, setMode, datePickerState, dateFieldState, relativeDateState } = state;
|
|
27
14
|
const [focusedDate, setFocusedDate] = react_1.default.useState(relativeDateState.lastCorrectDate);
|
|
28
15
|
const [prevCorrectDate, setPrevCorrectDate] = react_1.default.useState(relativeDateState.lastCorrectDate);
|
|
@@ -42,7 +29,7 @@ function useRelativeDatePickerProps(state, _a) {
|
|
|
42
29
|
onBlurWithin: onBlur,
|
|
43
30
|
onFocusWithinChange(isFocusWithin) {
|
|
44
31
|
if (!isFocusWithin) {
|
|
45
|
-
state.setActive(
|
|
32
|
+
state.setActive(false);
|
|
46
33
|
}
|
|
47
34
|
},
|
|
48
35
|
});
|
|
@@ -50,16 +37,12 @@ function useRelativeDatePickerProps(state, _a) {
|
|
|
50
37
|
if (!state.isActive && isOpen) {
|
|
51
38
|
setOpen(false);
|
|
52
39
|
}
|
|
53
|
-
const [prevActive, setPrevActive] = react_1.default.useState(state.isActive);
|
|
54
|
-
if (prevActive !== state.isActive) {
|
|
55
|
-
setPrevActive(state.isActive);
|
|
56
|
-
if (state.isActive && !isOpen) {
|
|
57
|
-
setOpen(true);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
40
|
const commonInputProps = {
|
|
61
41
|
onFocus: () => {
|
|
62
|
-
state.
|
|
42
|
+
if (!state.isActive) {
|
|
43
|
+
state.setActive(true);
|
|
44
|
+
setOpen(true);
|
|
45
|
+
}
|
|
63
46
|
},
|
|
64
47
|
};
|
|
65
48
|
const { inputProps } = (0, DateField_1.useDateFieldProps)(dateFieldState, Object.assign(Object.assign({}, props), { value: undefined, defaultValue: undefined, onUpdate: undefined }));
|
|
@@ -68,6 +51,7 @@ function useRelativeDatePickerProps(state, _a) {
|
|
|
68
51
|
value: relativeDateState.text,
|
|
69
52
|
onUpdate: relativeDateState.setText,
|
|
70
53
|
hasClear: props.hasClear && !relativeDateState.readOnly,
|
|
54
|
+
placeholder: props.placeholder,
|
|
71
55
|
size: props.size,
|
|
72
56
|
};
|
|
73
57
|
let error;
|
|
@@ -82,19 +66,33 @@ function useRelativeDatePickerProps(state, _a) {
|
|
|
82
66
|
: dateFieldState.validationState;
|
|
83
67
|
error = validationState === 'invalid';
|
|
84
68
|
}
|
|
85
|
-
const wasActiveBeforeClickRef = react_1.default.useRef(state.isActive);
|
|
86
69
|
const inputRef = react_1.default.useRef(null);
|
|
87
70
|
const handleRef = (0, uikit_1.useForkRef)(inputRef, mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef);
|
|
88
71
|
const calendarRef = react_1.default.useRef(null);
|
|
72
|
+
function focusCalendar() {
|
|
73
|
+
setTimeout(() => {
|
|
74
|
+
var _a;
|
|
75
|
+
(_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
function focusInput() {
|
|
79
|
+
setTimeout(() => {
|
|
80
|
+
var _a;
|
|
81
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
82
|
+
});
|
|
83
|
+
}
|
|
89
84
|
return {
|
|
90
|
-
groupProps: Object.assign(Object.assign({ role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
|
|
85
|
+
groupProps: Object.assign(Object.assign({ tabIndex: -1, role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
|
|
91
86
|
if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|
92
87
|
e.preventDefault();
|
|
93
88
|
e.stopPropagation();
|
|
94
89
|
setOpen(true);
|
|
90
|
+
focusCalendar();
|
|
95
91
|
}
|
|
96
92
|
} }),
|
|
97
|
-
fieldProps: (0, mergeProps_1.mergeProps)(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps,
|
|
93
|
+
fieldProps: (0, mergeProps_1.mergeProps)(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, mode === 'absolute' && dateFieldState.isEmpty && !state.isActive && props.placeholder
|
|
94
|
+
? { value: '' }
|
|
95
|
+
: undefined, { controlRef: handleRef, error }),
|
|
98
96
|
modeSwitcherProps: {
|
|
99
97
|
size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size),
|
|
100
98
|
disabled: state.readOnly || state.disabled,
|
|
@@ -115,7 +113,7 @@ function useRelativeDatePickerProps(state, _a) {
|
|
|
115
113
|
else if (relativeDateState.parsedDate) {
|
|
116
114
|
setFocusedDate(relativeDateState.parsedDate);
|
|
117
115
|
}
|
|
118
|
-
|
|
116
|
+
focusInput();
|
|
119
117
|
},
|
|
120
118
|
},
|
|
121
119
|
calendarButtonProps: {
|
|
@@ -127,29 +125,20 @@ function useRelativeDatePickerProps(state, _a) {
|
|
|
127
125
|
'aria-expanded': isOpen,
|
|
128
126
|
},
|
|
129
127
|
view: 'flat-secondary',
|
|
130
|
-
onFocus: () => {
|
|
131
|
-
wasActiveBeforeClickRef.current = state.isActive;
|
|
132
|
-
},
|
|
133
128
|
onClick: () => {
|
|
134
129
|
state.setActive(true);
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
setTimeout(() => {
|
|
139
|
-
var _a;
|
|
140
|
-
(_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
141
|
-
});
|
|
142
|
-
}
|
|
130
|
+
setOpen(!isOpen);
|
|
131
|
+
if (!isOpen) {
|
|
132
|
+
focusCalendar();
|
|
143
133
|
}
|
|
144
|
-
wasActiveBeforeClickRef.current = state.isActive;
|
|
145
134
|
},
|
|
146
135
|
},
|
|
147
136
|
popupProps: {
|
|
148
137
|
open: isOpen,
|
|
149
138
|
onEscapeKeyDown: () => {
|
|
150
139
|
setOpen(false);
|
|
140
|
+
focusInput();
|
|
151
141
|
},
|
|
152
|
-
restoreFocus: true,
|
|
153
142
|
},
|
|
154
143
|
calendarProps: {
|
|
155
144
|
ref: calendarRef,
|
|
@@ -160,7 +149,7 @@ function useRelativeDatePickerProps(state, _a) {
|
|
|
160
149
|
datePickerState.setDateValue(v);
|
|
161
150
|
if (!state.datePickerState.hasTime) {
|
|
162
151
|
setOpen(false);
|
|
163
|
-
|
|
152
|
+
focusInput();
|
|
164
153
|
}
|
|
165
154
|
},
|
|
166
155
|
focusedValue: focusedDate,
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.useRelativeDatePickerState = void 0;
|
|
7
|
-
const
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
8
6
|
const DateField_1 = require("../../DateField");
|
|
9
7
|
const DatePicker_1 = require("../../DatePicker");
|
|
10
8
|
const RelativeDateField_1 = require("../../RelativeDateField");
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.i18n = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
7
5
|
const i18n_1 = require("@gravity-ui/uikit/i18n");
|
|
8
6
|
const cn_1 = require("../../../utils/cn");
|
|
9
|
-
const en_json_1 = __importDefault(require("./en.json"));
|
|
10
|
-
const ru_json_1 = __importDefault(require("./ru.json"));
|
|
7
|
+
const en_json_1 = tslib_1.__importDefault(require("./en.json"));
|
|
8
|
+
const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
|
|
11
9
|
exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}relative-date-picker`);
|
|
@@ -1,19 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
|
|
18
|
-
__exportStar(require("./
|
|
19
|
-
__exportStar(require("./hooks/
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./RelativeDatePicker"), exports);
|
|
5
|
+
tslib_1.__exportStar(require("./hooks/useRelativeDatePickerState"), exports);
|
|
6
|
+
tslib_1.__exportStar(require("./hooks/useRelativeDatePickerProps"), exports);
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.useControlledState = void 0;
|
|
7
|
-
const
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
8
6
|
function useControlledState(value, defaultValue, onUpdate) {
|
|
9
7
|
const [innerValue, setInnerValue] = react_1.default.useState(defaultValue);
|
|
10
8
|
const [wasControlled] = react_1.default.useState(value !== undefined);
|
|
@@ -1,21 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
|
|
18
|
-
__exportStar(require("./
|
|
19
|
-
__exportStar(require("./
|
|
20
|
-
__exportStar(require("./
|
|
21
|
-
__exportStar(require("./
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./Calendar"), exports);
|
|
5
|
+
tslib_1.__exportStar(require("./DateField"), exports);
|
|
6
|
+
tslib_1.__exportStar(require("./DatePicker"), exports);
|
|
7
|
+
tslib_1.__exportStar(require("./RelativeDateField"), exports);
|
|
8
|
+
tslib_1.__exportStar(require("./RelativeDatePicker"), exports);
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,17 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./components"), exports);
|