@gravity-ui/date-components 2.10.1 → 2.10.3
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/CalendarView/CalendarView.js +2 -2
- package/dist/cjs/components/CalendarView/utils.d.ts +3 -3
- package/dist/cjs/components/CalendarView/utils.js +7 -6
- package/dist/cjs/components/DateField/hooks/useDateFieldState.js +2 -3
- package/dist/cjs/components/DateField/utils.js +2 -2
- package/dist/cjs/components/RangeDateField/hooks/useRangeDateFieldState.js +3 -4
- package/dist/cjs/components/RangeDateField/utils/isValidRange.js +1 -2
- package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldState.js +1 -1
- package/dist/esm/components/CalendarView/CalendarView.js +2 -2
- package/dist/esm/components/CalendarView/utils.d.ts +3 -3
- package/dist/esm/components/CalendarView/utils.js +7 -6
- package/dist/esm/components/DateField/hooks/useDateFieldState.js +2 -3
- package/dist/esm/components/DateField/utils.js +3 -3
- package/dist/esm/components/RangeDateField/hooks/useRangeDateFieldState.js +3 -4
- package/dist/esm/components/RangeDateField/utils/isValidRange.js +1 -2
- package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldState.js +2 -2
- package/package.json +1 -1
|
@@ -61,7 +61,7 @@ function Content({ className, state, animation, onAnimationEnd }) {
|
|
|
61
61
|
return ((0, jsx_runtime_1.jsxs)("div", { className: b('content', { animation }, className), onAnimationEnd: onAnimationEnd, role: "presentation", children: [state.mode === 'days' && (0, jsx_runtime_1.jsx)(Weekdays, { state: state }), (0, jsx_runtime_1.jsx)(CalendarGridCells, { state: state })] }));
|
|
62
62
|
}
|
|
63
63
|
function Weekdays({ state }) {
|
|
64
|
-
const weekdays = (0, utils_1.getWeekDays)();
|
|
64
|
+
const weekdays = (0, utils_1.getWeekDays)(state);
|
|
65
65
|
return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-row'), role: "row", children: weekdays.map((date) => {
|
|
66
66
|
return ((0, jsx_runtime_1.jsx)("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": (0, dates_1.formatDateTime)(date, 'dddd', state.timeZone), children: (0, dates_1.formatDateTime)(date, 'dd', state.timeZone) }, date.day()));
|
|
67
67
|
}) }));
|
|
@@ -69,7 +69,7 @@ function Weekdays({ state }) {
|
|
|
69
69
|
function CalendarGridCells({ state }) {
|
|
70
70
|
const rowsInPeriod = state.mode === 'days' ? 6 : 4;
|
|
71
71
|
const columnsInRow = state.mode === 'days' ? 7 : 3 + (state.mode === 'quarters' ? 1 : 0);
|
|
72
|
-
const days = (0, utils_1.getDaysInPeriod)(state
|
|
72
|
+
const days = (0, utils_1.getDaysInPeriod)(state);
|
|
73
73
|
return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? ((0, jsx_runtime_1.jsx)("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: (0, dates_1.formatDateTime)(days[rowIndex * columnsInRow], 'YYYY', state.timeZone) })) : null, days
|
|
74
74
|
.slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
|
|
75
75
|
.map((date) => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DateTime } from '@gravity-ui/date-utils';
|
|
2
|
-
import type { CalendarLayout } from './hooks/types';
|
|
3
|
-
export declare function getDaysInPeriod(
|
|
4
|
-
export declare function getWeekDays(): DateTime[];
|
|
2
|
+
import type { CalendarLayout, CalendarState, RangeCalendarState } from './hooks/types';
|
|
3
|
+
export declare function getDaysInPeriod(state: CalendarState | RangeCalendarState): DateTime[];
|
|
4
|
+
export declare function getWeekDays(state: CalendarState | RangeCalendarState): DateTime[];
|
|
5
5
|
export declare const calendarLayouts: CalendarLayout[];
|
|
@@ -4,29 +4,30 @@ exports.calendarLayouts = void 0;
|
|
|
4
4
|
exports.getDaysInPeriod = getDaysInPeriod;
|
|
5
5
|
exports.getWeekDays = getWeekDays;
|
|
6
6
|
const date_utils_1 = require("@gravity-ui/date-utils");
|
|
7
|
-
function getDaysInPeriod(
|
|
7
|
+
function getDaysInPeriod(state) {
|
|
8
8
|
const days = [];
|
|
9
|
-
|
|
9
|
+
const startDate = (0, date_utils_1.dateTime)({ input: state.startDate, timeZone: state.timeZone });
|
|
10
|
+
if (state.mode === 'days') {
|
|
10
11
|
const currentDate = startDate.startOf('week');
|
|
11
12
|
for (let i = 0; i < 42; i++) {
|
|
12
13
|
days.push(currentDate.add({ days: i }));
|
|
13
14
|
}
|
|
14
15
|
}
|
|
15
|
-
else if (mode === 'quarters') {
|
|
16
|
+
else if (state.mode === 'quarters') {
|
|
16
17
|
for (let i = 0; i < 16; i++) {
|
|
17
18
|
days.push(startDate.add(i, 'quarters'));
|
|
18
19
|
}
|
|
19
20
|
}
|
|
20
21
|
else {
|
|
21
22
|
for (let i = 0; i < 12; i++) {
|
|
22
|
-
days.push(startDate.add({ [mode]: i }));
|
|
23
|
+
days.push(startDate.add({ [state.mode]: i }));
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
26
|
return days;
|
|
26
27
|
}
|
|
27
|
-
function getWeekDays() {
|
|
28
|
+
function getWeekDays(state) {
|
|
28
29
|
const weekDays = [];
|
|
29
|
-
const weekStart = (0, date_utils_1.dateTime)().startOf('week');
|
|
30
|
+
const weekStart = (0, date_utils_1.dateTime)({ timeZone: state.timeZone }).startOf('week');
|
|
30
31
|
for (let i = 0; i < 7; i++) {
|
|
31
32
|
const date = weekStart.add({ days: i });
|
|
32
33
|
weekDays.push(date);
|
|
@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.useDateFieldState = useDateFieldState;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const date_utils_1 = require("@gravity-ui/date-utils");
|
|
9
8
|
const uikit_1 = require("@gravity-ui/uikit");
|
|
10
9
|
const dates_1 = require("../../utils/dates");
|
|
11
10
|
const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
|
|
@@ -47,7 +46,7 @@ function useDateFieldState(props) {
|
|
|
47
46
|
timeZone,
|
|
48
47
|
}));
|
|
49
48
|
}
|
|
50
|
-
const displayValue = value &&
|
|
49
|
+
const displayValue = value && value.isValid() && (0, utils_1.isAllSegmentsValid)(allSegments, validSegments)
|
|
51
50
|
? value.timeZone(timeZone)
|
|
52
51
|
: placeholderDate.timeZone(timeZone);
|
|
53
52
|
const sectionsState = useSectionsState(sections, displayValue, validSegments);
|
|
@@ -143,7 +142,7 @@ function useDateFieldState(props) {
|
|
|
143
142
|
}
|
|
144
143
|
function setValueFromString(str) {
|
|
145
144
|
const date = (0, utils_1.parseDateFromString)(str, format, timeZone);
|
|
146
|
-
if (
|
|
145
|
+
if (date.isValid()) {
|
|
147
146
|
handleUpdateDate(date);
|
|
148
147
|
return true;
|
|
149
148
|
}
|
|
@@ -492,7 +492,7 @@ function formatSections(sections) {
|
|
|
492
492
|
}
|
|
493
493
|
function parseDate(options) {
|
|
494
494
|
let date = (0, date_utils_1.dateTime)(options);
|
|
495
|
-
if (!
|
|
495
|
+
if (!date.isValid()) {
|
|
496
496
|
date = (0, date_utils_1.dateTime)(Object.assign(Object.assign({}, options), { format: undefined }));
|
|
497
497
|
}
|
|
498
498
|
return date;
|
|
@@ -502,7 +502,7 @@ function isDateStringWithTimeZone(str) {
|
|
|
502
502
|
}
|
|
503
503
|
function parseDateFromString(str, format, timeZone) {
|
|
504
504
|
let date = parseDate({ input: str, format, timeZone });
|
|
505
|
-
if (
|
|
505
|
+
if (date.isValid()) {
|
|
506
506
|
if (timeZone && !isDateStringWithTimeZone(str)) {
|
|
507
507
|
const time = parseDate({ input: str, format });
|
|
508
508
|
date = (0, dates_1.mergeDateTime)(date, time);
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.useRangeDateFieldState = useRangeDateFieldState;
|
|
7
7
|
/* eslint-disable complexity */
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
|
-
const date_utils_1 = require("@gravity-ui/date-utils");
|
|
10
9
|
const uikit_1 = require("@gravity-ui/uikit");
|
|
11
10
|
const DateField_1 = require("../../DateField");
|
|
12
11
|
const utils_1 = require("../../DateField/utils");
|
|
@@ -57,8 +56,8 @@ function useRangeDateFieldState(props) {
|
|
|
57
56
|
}));
|
|
58
57
|
}
|
|
59
58
|
const displayValue = value &&
|
|
60
|
-
|
|
61
|
-
|
|
59
|
+
value.start.isValid() &&
|
|
60
|
+
value.end.isValid() &&
|
|
62
61
|
Object.keys(validSegments.start).length >= Object.keys(allSegments).length &&
|
|
63
62
|
Object.keys(validSegments.end).length >= Object.keys(allSegments).length
|
|
64
63
|
? { start: value.start.timeZone(timeZone), end: value.end.timeZone(timeZone) }
|
|
@@ -165,7 +164,7 @@ function useRangeDateFieldState(props) {
|
|
|
165
164
|
const start = (0, utils_1.parseDateFromString)((_a = list === null || list === void 0 ? void 0 : list[0]) === null || _a === void 0 ? void 0 : _a.trim(), format, timeZone);
|
|
166
165
|
const end = (0, utils_1.parseDateFromString)((_b = list === null || list === void 0 ? void 0 : list[1]) === null || _b === void 0 ? void 0 : _b.trim(), format, timeZone);
|
|
167
166
|
const range = { start, end };
|
|
168
|
-
if (
|
|
167
|
+
if (range.start.isValid() && range.end.isValid()) {
|
|
169
168
|
handleUpdateRange(range);
|
|
170
169
|
return true;
|
|
171
170
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.isValidRange = isValidRange;
|
|
4
|
-
const date_utils_1 = require("@gravity-ui/date-utils");
|
|
5
4
|
function isValidRange({ start, end }) {
|
|
6
|
-
return
|
|
5
|
+
return start.isValid() && end.isValid() && (start.isSame(end) || start.isBefore(end));
|
|
7
6
|
}
|
|
@@ -21,7 +21,7 @@ function useRelativeDateFieldState(props) {
|
|
|
21
21
|
setText(t);
|
|
22
22
|
if ((0, date_utils_1.isLikeRelative)(t)) {
|
|
23
23
|
const date = (0, date_utils_1.dateTimeParse)(t);
|
|
24
|
-
if (date &&
|
|
24
|
+
if (date && date.isValid()) {
|
|
25
25
|
setValue(t);
|
|
26
26
|
}
|
|
27
27
|
else {
|
|
@@ -55,7 +55,7 @@ function Content({ className, state, animation, onAnimationEnd }) {
|
|
|
55
55
|
return (_jsxs("div", { className: b('content', { animation }, className), onAnimationEnd: onAnimationEnd, role: "presentation", children: [state.mode === 'days' && _jsx(Weekdays, { state: state }), _jsx(CalendarGridCells, { state: state })] }));
|
|
56
56
|
}
|
|
57
57
|
function Weekdays({ state }) {
|
|
58
|
-
const weekdays = getWeekDays();
|
|
58
|
+
const weekdays = getWeekDays(state);
|
|
59
59
|
return (_jsx("div", { className: b('grid-row'), role: "row", children: weekdays.map((date) => {
|
|
60
60
|
return (_jsx("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": formatDateTime(date, 'dddd', state.timeZone), children: formatDateTime(date, 'dd', state.timeZone) }, date.day()));
|
|
61
61
|
}) }));
|
|
@@ -63,7 +63,7 @@ function Weekdays({ state }) {
|
|
|
63
63
|
function CalendarGridCells({ state }) {
|
|
64
64
|
const rowsInPeriod = state.mode === 'days' ? 6 : 4;
|
|
65
65
|
const columnsInRow = state.mode === 'days' ? 7 : 3 + (state.mode === 'quarters' ? 1 : 0);
|
|
66
|
-
const days = getDaysInPeriod(state
|
|
66
|
+
const days = getDaysInPeriod(state);
|
|
67
67
|
return (_jsx("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => (_jsxs("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? (_jsx("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: formatDateTime(days[rowIndex * columnsInRow], 'YYYY', state.timeZone) })) : null, days
|
|
68
68
|
.slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
|
|
69
69
|
.map((date) => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DateTime } from '@gravity-ui/date-utils';
|
|
2
|
-
import type { CalendarLayout } from './hooks/types';
|
|
3
|
-
export declare function getDaysInPeriod(
|
|
4
|
-
export declare function getWeekDays(): DateTime[];
|
|
2
|
+
import type { CalendarLayout, CalendarState, RangeCalendarState } from './hooks/types';
|
|
3
|
+
export declare function getDaysInPeriod(state: CalendarState | RangeCalendarState): DateTime[];
|
|
4
|
+
export declare function getWeekDays(state: CalendarState | RangeCalendarState): DateTime[];
|
|
5
5
|
export declare const calendarLayouts: CalendarLayout[];
|
|
@@ -1,27 +1,28 @@
|
|
|
1
1
|
import { dateTime } from '@gravity-ui/date-utils';
|
|
2
|
-
export function getDaysInPeriod(
|
|
2
|
+
export function getDaysInPeriod(state) {
|
|
3
3
|
const days = [];
|
|
4
|
-
|
|
4
|
+
const startDate = dateTime({ input: state.startDate, timeZone: state.timeZone });
|
|
5
|
+
if (state.mode === 'days') {
|
|
5
6
|
const currentDate = startDate.startOf('week');
|
|
6
7
|
for (let i = 0; i < 42; i++) {
|
|
7
8
|
days.push(currentDate.add({ days: i }));
|
|
8
9
|
}
|
|
9
10
|
}
|
|
10
|
-
else if (mode === 'quarters') {
|
|
11
|
+
else if (state.mode === 'quarters') {
|
|
11
12
|
for (let i = 0; i < 16; i++) {
|
|
12
13
|
days.push(startDate.add(i, 'quarters'));
|
|
13
14
|
}
|
|
14
15
|
}
|
|
15
16
|
else {
|
|
16
17
|
for (let i = 0; i < 12; i++) {
|
|
17
|
-
days.push(startDate.add({ [mode]: i }));
|
|
18
|
+
days.push(startDate.add({ [state.mode]: i }));
|
|
18
19
|
}
|
|
19
20
|
}
|
|
20
21
|
return days;
|
|
21
22
|
}
|
|
22
|
-
export function getWeekDays() {
|
|
23
|
+
export function getWeekDays(state) {
|
|
23
24
|
const weekDays = [];
|
|
24
|
-
const weekStart = dateTime().startOf('week');
|
|
25
|
+
const weekStart = dateTime({ timeZone: state.timeZone }).startOf('week');
|
|
25
26
|
for (let i = 0; i < 7; i++) {
|
|
26
27
|
const date = weekStart.add({ days: i });
|
|
27
28
|
weekDays.push(date);
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { isValid } from '@gravity-ui/date-utils';
|
|
3
2
|
import { useControlledState } from '@gravity-ui/uikit';
|
|
4
3
|
import { createPlaceholderValue, isInvalid } from '../../utils/dates';
|
|
5
4
|
import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
|
|
@@ -41,7 +40,7 @@ export function useDateFieldState(props) {
|
|
|
41
40
|
timeZone,
|
|
42
41
|
}));
|
|
43
42
|
}
|
|
44
|
-
const displayValue = value && isValid(
|
|
43
|
+
const displayValue = value && value.isValid() && isAllSegmentsValid(allSegments, validSegments)
|
|
45
44
|
? value.timeZone(timeZone)
|
|
46
45
|
: placeholderDate.timeZone(timeZone);
|
|
47
46
|
const sectionsState = useSectionsState(sections, displayValue, validSegments);
|
|
@@ -137,7 +136,7 @@ export function useDateFieldState(props) {
|
|
|
137
136
|
}
|
|
138
137
|
function setValueFromString(str) {
|
|
139
138
|
const date = parseDateFromString(str, format, timeZone);
|
|
140
|
-
if (isValid(
|
|
139
|
+
if (date.isValid()) {
|
|
141
140
|
handleUpdateDate(date);
|
|
142
141
|
return true;
|
|
143
142
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { dateTime, expandFormat
|
|
2
|
+
import { dateTime, expandFormat } from '@gravity-ui/date-utils';
|
|
3
3
|
import { mergeDateTime } from '../utils/dates';
|
|
4
4
|
import { i18n } from './i18n';
|
|
5
5
|
export const EDITABLE_SEGMENTS = {
|
|
@@ -471,7 +471,7 @@ export function formatSections(sections) {
|
|
|
471
471
|
}
|
|
472
472
|
function parseDate(options) {
|
|
473
473
|
let date = dateTime(options);
|
|
474
|
-
if (!isValid(
|
|
474
|
+
if (!date.isValid()) {
|
|
475
475
|
date = dateTime(Object.assign(Object.assign({}, options), { format: undefined }));
|
|
476
476
|
}
|
|
477
477
|
return date;
|
|
@@ -481,7 +481,7 @@ function isDateStringWithTimeZone(str) {
|
|
|
481
481
|
}
|
|
482
482
|
export function parseDateFromString(str, format, timeZone) {
|
|
483
483
|
let date = parseDate({ input: str, format, timeZone });
|
|
484
|
-
if (isValid(
|
|
484
|
+
if (date.isValid()) {
|
|
485
485
|
if (timeZone && !isDateStringWithTimeZone(str)) {
|
|
486
486
|
const time = parseDate({ input: str, format });
|
|
487
487
|
date = mergeDateTime(date, time);
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/* eslint-disable complexity */
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { isValid } from '@gravity-ui/date-utils';
|
|
4
3
|
import { useControlledState } from '@gravity-ui/uikit';
|
|
5
4
|
import { useBaseDateFieldState } from '../../DateField';
|
|
6
5
|
import { EDITABLE_SEGMENTS, addSegment, isAllSegmentsValid, parseDateFromString, setSegment, useFormatSections, } from '../../DateField/utils';
|
|
@@ -51,8 +50,8 @@ export function useRangeDateFieldState(props) {
|
|
|
51
50
|
}));
|
|
52
51
|
}
|
|
53
52
|
const displayValue = value &&
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
value.start.isValid() &&
|
|
54
|
+
value.end.isValid() &&
|
|
56
55
|
Object.keys(validSegments.start).length >= Object.keys(allSegments).length &&
|
|
57
56
|
Object.keys(validSegments.end).length >= Object.keys(allSegments).length
|
|
58
57
|
? { start: value.start.timeZone(timeZone), end: value.end.timeZone(timeZone) }
|
|
@@ -159,7 +158,7 @@ export function useRangeDateFieldState(props) {
|
|
|
159
158
|
const start = parseDateFromString((_a = list === null || list === void 0 ? void 0 : list[0]) === null || _a === void 0 ? void 0 : _a.trim(), format, timeZone);
|
|
160
159
|
const end = parseDateFromString((_b = list === null || list === void 0 ? void 0 : list[1]) === null || _b === void 0 ? void 0 : _b.trim(), format, timeZone);
|
|
161
160
|
const range = { start, end };
|
|
162
|
-
if (
|
|
161
|
+
if (range.start.isValid() && range.end.isValid()) {
|
|
163
162
|
handleUpdateRange(range);
|
|
164
163
|
return true;
|
|
165
164
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { isValid } from '@gravity-ui/date-utils';
|
|
2
1
|
export function isValidRange({ start, end }) {
|
|
3
|
-
return isValid(
|
|
2
|
+
return start.isValid() && end.isValid() && (start.isSame(end) || start.isBefore(end));
|
|
4
3
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { dateTimeParse, isLikeRelative
|
|
2
|
+
import { dateTimeParse, isLikeRelative } from '@gravity-ui/date-utils';
|
|
3
3
|
import { useControlledState } from '@gravity-ui/uikit';
|
|
4
4
|
export function useRelativeDateFieldState(props) {
|
|
5
5
|
var _a;
|
|
@@ -15,7 +15,7 @@ export function useRelativeDateFieldState(props) {
|
|
|
15
15
|
setText(t);
|
|
16
16
|
if (isLikeRelative(t)) {
|
|
17
17
|
const date = dateTimeParse(t);
|
|
18
|
-
if (date && isValid(
|
|
18
|
+
if (date && date.isValid()) {
|
|
19
19
|
setValue(t);
|
|
20
20
|
}
|
|
21
21
|
else {
|