@alfalab/core-components-calendar-range 7.1.6 → 7.2.1
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/Component-5684a67d.d.ts +18 -0
- package/Component-63dec22f.d.ts +24 -0
- package/Component-e2b6c730.d.ts +23 -0
- package/Component.desktop-2e2b2125.d.ts +6 -0
- package/Component.desktop-e2b6c730.d.ts +134 -0
- package/Component.js +4 -2
- package/Component.responsive-2e2b2125.d.ts +68 -0
- package/components/divider/Component.js +1 -1
- package/components/divider/index.css +8 -8
- package/cssm/Component-5684a67d.d.ts +18 -0
- package/cssm/Component-63dec22f.d.ts +24 -0
- package/cssm/Component-e2b6c730.d.ts +23 -0
- package/cssm/Component.desktop-2e2b2125.d.ts +6 -0
- package/cssm/Component.desktop-e2b6c730.d.ts +134 -0
- package/cssm/Component.js +3 -1
- package/cssm/Component.responsive-2e2b2125.d.ts +68 -0
- package/cssm/desktop-63dec22f.d.ts +2 -0
- package/cssm/index-9211a437.d.ts +2 -0
- package/cssm/index-ebda875c.d.ts +2 -0
- package/cssm/index-f034f741.d.ts +2 -0
- package/cssm/index.js +3 -1
- package/cssm/shared-848397c5.d.ts +35 -0
- package/cssm/shared-c111a9fd.d.ts +13 -0
- package/cssm/typings-5684a67d.d.ts +23 -0
- package/cssm/typings-9211a437.d.ts +95 -0
- package/cssm/useCalendar-71d94e2b.d.ts +97 -0
- package/cssm/utils-e0a54580.d.ts +8 -0
- package/cssm/utils-e2b6c730.d.ts +88 -0
- package/cssm/views/popover.js +9 -8
- package/cssm/views/static.js +18 -17
- package/desktop-63dec22f.d.ts +2 -0
- package/esm/Component-5684a67d.d.ts +18 -0
- package/esm/Component-63dec22f.d.ts +24 -0
- package/esm/Component-e2b6c730.d.ts +23 -0
- package/esm/Component.desktop-2e2b2125.d.ts +6 -0
- package/esm/Component.desktop-e2b6c730.d.ts +134 -0
- package/esm/Component.js +4 -2
- package/esm/Component.responsive-2e2b2125.d.ts +68 -0
- package/esm/components/divider/Component.js +1 -1
- package/esm/components/divider/index.css +8 -8
- package/esm/desktop-63dec22f.d.ts +2 -0
- package/esm/index-9211a437.d.ts +2 -0
- package/esm/index-ebda875c.d.ts +2 -0
- package/esm/index-f034f741.d.ts +2 -0
- package/esm/index.js +4 -2
- package/esm/index.module-46b1abbe.js +4 -0
- package/esm/shared-848397c5.d.ts +35 -0
- package/esm/shared-c111a9fd.d.ts +13 -0
- package/esm/typings-5684a67d.d.ts +23 -0
- package/esm/typings-9211a437.d.ts +95 -0
- package/esm/useCalendar-71d94e2b.d.ts +97 -0
- package/esm/utils-e0a54580.d.ts +8 -0
- package/esm/utils-e2b6c730.d.ts +88 -0
- package/esm/views/index.css +7 -7
- package/esm/views/popover.js +3 -2
- package/esm/views/static.js +6 -5
- package/index-9211a437.d.ts +2 -0
- package/index-ebda875c.d.ts +2 -0
- package/index-f034f741.d.ts +2 -0
- package/index.js +4 -2
- package/index.module-2681dffc.js +6 -0
- package/modern/Component-5684a67d.d.ts +18 -0
- package/modern/Component-63dec22f.d.ts +24 -0
- package/modern/Component-e2b6c730.d.ts +23 -0
- package/modern/Component.desktop-2e2b2125.d.ts +6 -0
- package/modern/Component.desktop-e2b6c730.d.ts +134 -0
- package/modern/Component.js +4 -2
- package/modern/Component.responsive-2e2b2125.d.ts +68 -0
- package/modern/components/divider/Component.js +1 -1
- package/modern/components/divider/index.css +8 -8
- package/modern/desktop-63dec22f.d.ts +2 -0
- package/modern/index-9211a437.d.ts +2 -0
- package/modern/index-ebda875c.d.ts +2 -0
- package/modern/index-f034f741.d.ts +2 -0
- package/modern/index.js +4 -2
- package/modern/index.module-95129248.js +4 -0
- package/modern/shared-848397c5.d.ts +35 -0
- package/modern/shared-c111a9fd.d.ts +13 -0
- package/modern/typings-5684a67d.d.ts +23 -0
- package/modern/typings-9211a437.d.ts +95 -0
- package/modern/useCalendar-71d94e2b.d.ts +97 -0
- package/modern/utils-e0a54580.d.ts +8 -0
- package/modern/utils-e2b6c730.d.ts +88 -0
- package/modern/views/index.css +7 -7
- package/modern/views/popover.js +3 -2
- package/modern/views/static.js +6 -5
- package/package.json +4 -4
- package/shared-848397c5.d.ts +35 -0
- package/shared-c111a9fd.d.ts +13 -0
- package/src/Component.tsx +113 -0
- package/src/components/divider/Component.tsx +23 -0
- package/src/components/divider/index.module.css +41 -0
- package/src/components/divider/index.ts +1 -0
- package/src/hooks.ts +201 -0
- package/src/index.ts +1 -0
- package/src/utils.ts +2 -0
- package/src/views/index.module.css +28 -0
- package/src/views/popover.tsx +223 -0
- package/src/views/static.tsx +338 -0
- package/typings-5684a67d.d.ts +23 -0
- package/typings-9211a437.d.ts +95 -0
- package/useCalendar-71d94e2b.d.ts +97 -0
- package/utils-e0a54580.d.ts +8 -0
- package/utils-e2b6c730.d.ts +88 -0
- package/views/index.css +7 -7
- package/views/popover.js +10 -9
- package/views/static.js +19 -18
- package/esm/index.module-8ff2af7b.js +0 -4
- package/index.module-bda4cfcc.js +0 -6
- package/modern/index.module-0176534f.js +0 -4
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { DateShift, Day, DayAddons, Month, SpecialDays, SpecialDaysAddon } from "./typings-5684a67d";
|
|
3
|
+
declare const DAYS_IN_WEEK = 7;
|
|
4
|
+
declare const MONTHS_IN_YEAR = 12;
|
|
5
|
+
declare const SUNDAY_INDEX = 6;
|
|
6
|
+
declare const DATE_FORMAT = "dd.MM.yyyy";
|
|
7
|
+
declare const NATIVE_DATE_FORMAT = "yyyy-MM-dd";
|
|
8
|
+
declare const WEEKDAYS: string[];
|
|
9
|
+
declare const MONTHS: string[];
|
|
10
|
+
/**
|
|
11
|
+
* Возвращает «правильный» индекс дня недели, 0 - пн, 1 - вт и так далее.
|
|
12
|
+
*/
|
|
13
|
+
declare function russianWeekDay(date: Date): number;
|
|
14
|
+
/**
|
|
15
|
+
* Возвращает таблицу-календарь с заполненными датами для переданного месяца
|
|
16
|
+
*/
|
|
17
|
+
declare function generateWeeks(month: Date, options: {
|
|
18
|
+
minDate?: Date;
|
|
19
|
+
maxDate?: Date;
|
|
20
|
+
selected?: Date;
|
|
21
|
+
eventsMap?: SpecialDays;
|
|
22
|
+
offDaysMap?: SpecialDays;
|
|
23
|
+
holidaysMap?: SpecialDays;
|
|
24
|
+
dayAddonsMap?: SpecialDaysAddon;
|
|
25
|
+
}): Day[][];
|
|
26
|
+
/**
|
|
27
|
+
* Возвращает массив с месяцами для переданного года
|
|
28
|
+
*/
|
|
29
|
+
declare function generateMonths(year: Date, options: {
|
|
30
|
+
minMonth?: Date;
|
|
31
|
+
maxMonth?: Date;
|
|
32
|
+
}): Month[];
|
|
33
|
+
/**
|
|
34
|
+
* Возвращает массив лет от minYear до maxYear
|
|
35
|
+
*/
|
|
36
|
+
declare function generateYears(minYear: Date, maxYear: Date): Date[];
|
|
37
|
+
/**
|
|
38
|
+
* Добавляет метаданные для переданного дня
|
|
39
|
+
*/
|
|
40
|
+
declare function buildDay(day: Date, options: {
|
|
41
|
+
minDate?: Date;
|
|
42
|
+
maxDate?: Date;
|
|
43
|
+
selected?: Date;
|
|
44
|
+
eventsMap?: SpecialDays;
|
|
45
|
+
offDaysMap?: SpecialDays;
|
|
46
|
+
holidaysMap?: SpecialDays;
|
|
47
|
+
dayAddonsMap?: SpecialDaysAddon;
|
|
48
|
+
}): Day;
|
|
49
|
+
/**
|
|
50
|
+
* Добавляет метаданные для переданного месяца
|
|
51
|
+
*/
|
|
52
|
+
declare function buildMonth(month: Date, options: {
|
|
53
|
+
minMonth?: Date;
|
|
54
|
+
maxMonth?: Date;
|
|
55
|
+
}): Month;
|
|
56
|
+
/**
|
|
57
|
+
* Ограничивает дату на отрезке [minDate, maxDate]
|
|
58
|
+
*/
|
|
59
|
+
declare function limitDate(date: Date | number, minDate?: Date | number, maxDate?: Date | number): Date;
|
|
60
|
+
/**
|
|
61
|
+
* Проверяет, находится ли переданная дата в указанных границах
|
|
62
|
+
*/
|
|
63
|
+
declare function dateInLimits(date?: Date | number | null, minDate?: Date | number, maxDate?: Date | number): boolean | 0 | null | undefined;
|
|
64
|
+
/**
|
|
65
|
+
* Возвращает русское название месяца с большой буквы
|
|
66
|
+
*/
|
|
67
|
+
declare function monthName(month: Date): string;
|
|
68
|
+
/**
|
|
69
|
+
* Превращает массив в объект, у которого ключи составляются из элементов массива
|
|
70
|
+
*/
|
|
71
|
+
declare function dateArrayToHashTable(arr: Array<Date | number>): Record<number, boolean>;
|
|
72
|
+
declare function addonArrayToHashTable(arr: DayAddons[]): Record<number, ReactNode>;
|
|
73
|
+
/**
|
|
74
|
+
* Возвращает корректный отрезок дат для выделения
|
|
75
|
+
*/
|
|
76
|
+
declare function getSelectionRange(from?: Date | number, to?: Date | number, highlighted?: Date | number): {
|
|
77
|
+
start: Date;
|
|
78
|
+
end: Date;
|
|
79
|
+
} | null;
|
|
80
|
+
declare function modifyDateByShift(shift: DateShift, date: Date, minDate?: Date, maxDate?: Date, offDaysMap?: Record<number, boolean>): Date;
|
|
81
|
+
/**
|
|
82
|
+
* Если дата была выбрана мышкой — фокусную обводку не видно
|
|
83
|
+
* TODO: добавить в useFocus возможность переключать метод ввода программно
|
|
84
|
+
*/
|
|
85
|
+
declare function simulateTab(node: HTMLElement): void;
|
|
86
|
+
declare const formatDate: (date: Date | number, dateFormat?: string) => string;
|
|
87
|
+
declare const parseDateString: (value: string, dateFormat?: string) => Date;
|
|
88
|
+
export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString };
|
package/esm/views/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: m2x3f */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -38,16 +38,16 @@
|
|
|
38
38
|
/* disabled */
|
|
39
39
|
|
|
40
40
|
/* marker */
|
|
41
|
-
} .calendar-
|
|
41
|
+
} .calendar-range__component_10sfb {
|
|
42
42
|
display: flex
|
|
43
|
-
} .calendar-
|
|
43
|
+
} .calendar-range__component_10sfb button[aria-selected='true'] {
|
|
44
44
|
cursor: pointer;
|
|
45
|
-
} .calendar-
|
|
45
|
+
} .calendar-range__component_10sfb *[class*='errorIcon_'] {
|
|
46
46
|
display: none;
|
|
47
|
-
} .calendar-
|
|
47
|
+
} .calendar-range__component_10sfb *[class*='calendarIcon_'] {
|
|
48
48
|
margin-right: 0;
|
|
49
|
-
} .calendar-
|
|
49
|
+
} .calendar-range__static_10sfb .calendar-range__calendar_10sfb {
|
|
50
50
|
width: var(--calendar-inner-width)
|
|
51
|
-
} .calendar-
|
|
51
|
+
} .calendar-range__static_10sfb .calendar-range__calendar_10sfb > div:first-child {
|
|
52
52
|
padding: var(--gap-m) 0 var(--gap-s);
|
|
53
53
|
}
|
package/esm/views/popover.js
CHANGED
|
@@ -2,12 +2,13 @@ import { __assign } from 'tslib';
|
|
|
2
2
|
import React, { useState, useCallback, useEffect } from 'react';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import startOfMonth from 'date-fns/startOfMonth';
|
|
5
|
-
import {
|
|
5
|
+
import { CalendarInput } from '@alfalab/core-components-calendar-input/esm';
|
|
6
|
+
import { isValidInputValue, parseDateString } from '@alfalab/core-components-calendar-input/esm/shared';
|
|
6
7
|
import { isCompleteDateInput } from '@alfalab/core-components-date-input/esm';
|
|
7
8
|
import { useDidUpdateEffect } from '@alfalab/hooks';
|
|
8
9
|
import { Divider } from '../components/divider/Component.js';
|
|
9
10
|
import { usePopoverViewMonthes } from '../hooks.js';
|
|
10
|
-
import { s as styles } from '../index.module-
|
|
11
|
+
import { s as styles } from '../index.module-46b1abbe.js';
|
|
11
12
|
import 'date-fns/addMonths';
|
|
12
13
|
import 'date-fns/isEqual';
|
|
13
14
|
import 'date-fns/max';
|
package/esm/views/static.js
CHANGED
|
@@ -7,13 +7,14 @@ import isSameMonth from 'date-fns/isSameMonth';
|
|
|
7
7
|
import max from 'date-fns/max';
|
|
8
8
|
import startOfMonth from 'date-fns/startOfMonth';
|
|
9
9
|
import subMonths from 'date-fns/subMonths';
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
10
|
+
import { CalendarDesktop } from '@alfalab/core-components-calendar/esm/desktop';
|
|
11
|
+
import { usePeriodWithReset } from '@alfalab/core-components-calendar/esm/shared';
|
|
12
|
+
import { isValidInputValue, parseDateString, formatDate } from '@alfalab/core-components-calendar-input/esm/shared';
|
|
12
13
|
import { isCompleteDateInput, DateInput } from '@alfalab/core-components-date-input/esm';
|
|
13
14
|
import { Divider } from '../components/divider/Component.js';
|
|
14
15
|
import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
|
|
15
16
|
import { isDayButton } from '../utils.js';
|
|
16
|
-
import { s as styles } from '../index.module-
|
|
17
|
+
import { s as styles } from '../index.module-46b1abbe.js';
|
|
17
18
|
import 'date-fns/isEqual';
|
|
18
19
|
import 'date-fns/min';
|
|
19
20
|
|
|
@@ -152,8 +153,8 @@ var CalendarRangeStatic = function (_a) {
|
|
|
152
153
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
153
154
|
}, [hasValidateError]);
|
|
154
155
|
var rangeProps = useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
|
|
155
|
-
var CalendarFromComponent = dateInputFromProps.Calendar ||
|
|
156
|
-
var CalendarToComponent = dateInputToProps.Calendar ||
|
|
156
|
+
var CalendarFromComponent = dateInputFromProps.Calendar || CalendarDesktop;
|
|
157
|
+
var CalendarToComponent = dateInputToProps.Calendar || CalendarDesktop;
|
|
157
158
|
var minMaxInSameMonth = minDate && maxDate && isSameMonth(minDate, maxDate);
|
|
158
159
|
return (
|
|
159
160
|
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
package/index.js
CHANGED
|
@@ -9,6 +9,7 @@ require('./views/popover.js');
|
|
|
9
9
|
require('classnames');
|
|
10
10
|
require('date-fns/startOfMonth');
|
|
11
11
|
require('@alfalab/core-components-calendar-input');
|
|
12
|
+
require('@alfalab/core-components-calendar-input/shared');
|
|
12
13
|
require('@alfalab/core-components-date-input');
|
|
13
14
|
require('@alfalab/hooks');
|
|
14
15
|
require('./components/divider/Component.js');
|
|
@@ -18,11 +19,12 @@ require('date-fns/isEqual');
|
|
|
18
19
|
require('date-fns/max');
|
|
19
20
|
require('date-fns/min');
|
|
20
21
|
require('date-fns/subMonths');
|
|
21
|
-
require('./index.module-
|
|
22
|
+
require('./index.module-2681dffc.js');
|
|
22
23
|
require('./views/static.js');
|
|
23
24
|
require('date-fns/endOfMonth');
|
|
24
25
|
require('date-fns/isSameMonth');
|
|
25
|
-
require('@alfalab/core-components-calendar');
|
|
26
|
+
require('@alfalab/core-components-calendar/desktop');
|
|
27
|
+
require('@alfalab/core-components-calendar/shared');
|
|
26
28
|
require('./utils.js');
|
|
27
29
|
|
|
28
30
|
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { SelectorView } from "./typings-5684a67d";
|
|
3
|
+
type HeaderProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Вид шапки — месяц и год или только месяц
|
|
6
|
+
*/
|
|
7
|
+
view?: SelectorView;
|
|
8
|
+
/**
|
|
9
|
+
* Отображать тень? (нужна при прокрутке)
|
|
10
|
+
*/
|
|
11
|
+
withShadow?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Дочерние элементы.
|
|
14
|
+
*/
|
|
15
|
+
children?: ReactNode;
|
|
16
|
+
};
|
|
17
|
+
declare const Header: FC<HeaderProps>;
|
|
18
|
+
export { HeaderProps, Header };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ButtonHTMLAttributes } from "react";
|
|
4
|
+
type SelectButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
5
|
+
/**
|
|
6
|
+
* Дополнительный класс
|
|
7
|
+
*/
|
|
8
|
+
className?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Вид кнопки
|
|
11
|
+
*/
|
|
12
|
+
view?: 'default' | 'filled' | 'outlined' | 'selected';
|
|
13
|
+
};
|
|
14
|
+
declare const SelectButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
15
|
+
/**
|
|
16
|
+
* Дополнительный класс
|
|
17
|
+
*/
|
|
18
|
+
className?: string | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* Вид кнопки
|
|
21
|
+
*/
|
|
22
|
+
view?: "default" | "outlined" | "filled" | "selected" | undefined;
|
|
23
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
24
|
+
export { SelectButtonProps, SelectButton };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FC } from 'react';
|
|
3
|
+
import { Month } from "./typings-5684a67d";
|
|
4
|
+
type MonthsTableProps = {
|
|
5
|
+
/**
|
|
6
|
+
* Массив месяцев
|
|
7
|
+
*/
|
|
8
|
+
months?: Month[];
|
|
9
|
+
/**
|
|
10
|
+
* Выбранный месяц
|
|
11
|
+
*/
|
|
12
|
+
selectedMonth?: Date;
|
|
13
|
+
/**
|
|
14
|
+
* Доп пропсы для переданного месяца
|
|
15
|
+
*/
|
|
16
|
+
getMonthProps: (day: Month) => Record<string, unknown>;
|
|
17
|
+
/**
|
|
18
|
+
* Должен ли календарь подстраиваться под ширину родителя.
|
|
19
|
+
*/
|
|
20
|
+
responsive?: boolean;
|
|
21
|
+
};
|
|
22
|
+
declare const MonthsTable: FC<MonthsTableProps>;
|
|
23
|
+
export { MonthsTableProps, MonthsTable };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
|
|
4
|
+
type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
|
|
5
|
+
declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
6
|
+
export { ButtonDesktopProps, ButtonDesktop };
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { FC, MouseEvent } from "react";
|
|
4
|
+
import { DayAddons, SelectorView, View } from "./typings-5684a67d";
|
|
5
|
+
type YearsTableProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Массив лет
|
|
8
|
+
*/
|
|
9
|
+
years?: Date[];
|
|
10
|
+
/**
|
|
11
|
+
* Выбранный год
|
|
12
|
+
*/
|
|
13
|
+
selectedYear?: Date;
|
|
14
|
+
/**
|
|
15
|
+
* Доп. пропсы для переданного года
|
|
16
|
+
*/
|
|
17
|
+
getYearProps: (year: Date) => Record<string, unknown>;
|
|
18
|
+
/**
|
|
19
|
+
* Обработчик скролла
|
|
20
|
+
*/
|
|
21
|
+
onScroll: (scrollTop: number) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Должен ли календарь подстраиваться под ширину родителя.
|
|
24
|
+
*/
|
|
25
|
+
responsive?: boolean;
|
|
26
|
+
};
|
|
27
|
+
declare const YearsTable: FC<YearsTableProps>;
|
|
28
|
+
type CalendarDesktopProps = {
|
|
29
|
+
/**
|
|
30
|
+
* Дополнительный класс
|
|
31
|
+
*/
|
|
32
|
+
className?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Вид по умолчанию (выбор дней, месяцев, лет)
|
|
35
|
+
*/
|
|
36
|
+
defaultView?: View;
|
|
37
|
+
/**
|
|
38
|
+
* Вид шапки — месяц и год или только месяц
|
|
39
|
+
*/
|
|
40
|
+
selectorView?: SelectorView;
|
|
41
|
+
/**
|
|
42
|
+
* Выбранная дата (timestamp)
|
|
43
|
+
*/
|
|
44
|
+
value?: number;
|
|
45
|
+
/**
|
|
46
|
+
* Открытый месяц (timestamp)
|
|
47
|
+
*/
|
|
48
|
+
month?: number;
|
|
49
|
+
/**
|
|
50
|
+
* Месяц, открытый по умолчанию (timestamp)
|
|
51
|
+
*/
|
|
52
|
+
defaultMonth?: number;
|
|
53
|
+
/**
|
|
54
|
+
* Минимальная дата, доступная для выбора (timestamp)
|
|
55
|
+
*/
|
|
56
|
+
minDate?: number;
|
|
57
|
+
/**
|
|
58
|
+
* Максимальная дата, доступная для выбора (timestamp)
|
|
59
|
+
*/
|
|
60
|
+
maxDate?: number;
|
|
61
|
+
/**
|
|
62
|
+
* Начало выделенного периода (timestamp)
|
|
63
|
+
*/
|
|
64
|
+
selectedFrom?: number;
|
|
65
|
+
/**
|
|
66
|
+
* Конец выделенного периода (timestamp)
|
|
67
|
+
*/
|
|
68
|
+
selectedTo?: number;
|
|
69
|
+
/**
|
|
70
|
+
* Индикатор, что выбран полный период
|
|
71
|
+
*/
|
|
72
|
+
rangeComplete?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Список событий
|
|
75
|
+
*/
|
|
76
|
+
events?: Array<Date | number>;
|
|
77
|
+
/**
|
|
78
|
+
* Список отключенных для выбора дней.
|
|
79
|
+
*/
|
|
80
|
+
offDays?: Array<Date | number>;
|
|
81
|
+
/**
|
|
82
|
+
* Список выходных
|
|
83
|
+
*/
|
|
84
|
+
holidays?: Array<Date | number>;
|
|
85
|
+
/**
|
|
86
|
+
* Обработчик изменения месяца (или года)
|
|
87
|
+
*/
|
|
88
|
+
onMonthChange?: (month: number) => void;
|
|
89
|
+
/**
|
|
90
|
+
* Обработчик выбора даты
|
|
91
|
+
*/
|
|
92
|
+
onChange?: (date?: number) => void;
|
|
93
|
+
/**
|
|
94
|
+
* Обработчик нажатия на кнопку месяца
|
|
95
|
+
*/
|
|
96
|
+
onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
97
|
+
/**
|
|
98
|
+
* Обработчик нажатия на кнопку года
|
|
99
|
+
*/
|
|
100
|
+
onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
101
|
+
/**
|
|
102
|
+
* Обработчик нажатия на период
|
|
103
|
+
*/
|
|
104
|
+
onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
|
105
|
+
/**
|
|
106
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
107
|
+
*/
|
|
108
|
+
dataTestId?: string;
|
|
109
|
+
/**
|
|
110
|
+
* Нужно ли рендерить шапку календаря
|
|
111
|
+
*/
|
|
112
|
+
hasHeader?: boolean;
|
|
113
|
+
/**
|
|
114
|
+
* Должен ли календарь подстраиваться под ширину родителя.
|
|
115
|
+
*/
|
|
116
|
+
responsive?: boolean;
|
|
117
|
+
/**
|
|
118
|
+
* Дополнительный контент под числом
|
|
119
|
+
*/
|
|
120
|
+
dayAddons?: DayAddons[];
|
|
121
|
+
/**
|
|
122
|
+
* Форма ячейки дня
|
|
123
|
+
*/
|
|
124
|
+
shape?: 'rounded' | 'rectangular';
|
|
125
|
+
/**
|
|
126
|
+
* Отображать ли текущий год, если selectorView 'month-only'
|
|
127
|
+
* @default false
|
|
128
|
+
*/
|
|
129
|
+
showCurrentYearSelector?: boolean;
|
|
130
|
+
};
|
|
131
|
+
declare const CalendarDesktop: React.ForwardRefExoticComponent<CalendarDesktopProps & React.RefAttributes<HTMLDivElement>>;
|
|
132
|
+
export * from "./Component-e2b6c730";
|
|
133
|
+
export * from "./Component-5684a67d";
|
|
134
|
+
export { YearsTableProps, YearsTable, CalendarDesktopProps, CalendarDesktop };
|
package/modern/Component.js
CHANGED
|
@@ -4,6 +4,7 @@ import { CalendarRangeStatic } from './views/static.js';
|
|
|
4
4
|
import 'classnames';
|
|
5
5
|
import 'date-fns/startOfMonth';
|
|
6
6
|
import '@alfalab/core-components-calendar-input/modern';
|
|
7
|
+
import '@alfalab/core-components-calendar-input/modern/shared';
|
|
7
8
|
import '@alfalab/core-components-date-input/modern';
|
|
8
9
|
import '@alfalab/hooks';
|
|
9
10
|
import './components/divider/Component.js';
|
|
@@ -13,10 +14,11 @@ import 'date-fns/isEqual';
|
|
|
13
14
|
import 'date-fns/max';
|
|
14
15
|
import 'date-fns/min';
|
|
15
16
|
import 'date-fns/subMonths';
|
|
16
|
-
import './index.module-
|
|
17
|
+
import './index.module-95129248.js';
|
|
17
18
|
import 'date-fns/endOfMonth';
|
|
18
19
|
import 'date-fns/isSameMonth';
|
|
19
|
-
import '@alfalab/core-components-calendar/modern';
|
|
20
|
+
import '@alfalab/core-components-calendar/modern/desktop';
|
|
21
|
+
import '@alfalab/core-components-calendar/modern/shared';
|
|
20
22
|
import './utils.js';
|
|
21
23
|
|
|
22
24
|
const CalendarRange = ({ calendarPosition = 'static', ...restProps }) => {
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { FC, ReactNode } from "react";
|
|
4
|
+
import { AnchorButtonProps, NativeButtonProps, ButtonProps } from "./typings-9211a437";
|
|
5
|
+
type ButtonMobileProps = Partial<AnchorButtonProps | NativeButtonProps>;
|
|
6
|
+
declare const ButtonMobile: React.ForwardRefExoticComponent<ButtonMobileProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
7
|
+
type MqProps = {
|
|
8
|
+
/**
|
|
9
|
+
* Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
10
|
+
*/
|
|
11
|
+
query?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Запрос на поддержку тач-событий
|
|
14
|
+
*/
|
|
15
|
+
touch?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Дочерние элементы.
|
|
18
|
+
*/
|
|
19
|
+
children?: ReactNode;
|
|
20
|
+
/**
|
|
21
|
+
* Обработчик изменений в совпадении запросов
|
|
22
|
+
*/
|
|
23
|
+
onMatchChange?: (isMatched: boolean) => void;
|
|
24
|
+
};
|
|
25
|
+
declare const Mq: FC<MqProps>;
|
|
26
|
+
/**
|
|
27
|
+
* Хук для медиа запросов.
|
|
28
|
+
* @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
29
|
+
* @param defaultValue Значение по-умолчанию.
|
|
30
|
+
*/
|
|
31
|
+
declare const useMatchMedia: (query: string, defaultValue?: boolean | (() => boolean)) => boolean[];
|
|
32
|
+
/**
|
|
33
|
+
* Возвращает MediaQueryList для заданного media-выражения.
|
|
34
|
+
*
|
|
35
|
+
* @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
36
|
+
*/
|
|
37
|
+
declare function getMatchMedia(queryProp: string): MediaQueryList;
|
|
38
|
+
/**
|
|
39
|
+
* Удаляет MediaQueryList.
|
|
40
|
+
*
|
|
41
|
+
* @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
42
|
+
*/
|
|
43
|
+
declare function releaseMatchMedia(queryProp: string): void;
|
|
44
|
+
/**
|
|
45
|
+
* Возвращает `true`, если есть поддержка `Pointer Events`
|
|
46
|
+
*/
|
|
47
|
+
declare function isPointerEventsSupported(): boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Возвращает `true`, если есть поддержка `Touch Events`
|
|
50
|
+
*/
|
|
51
|
+
declare function isTouchSupported(): boolean;
|
|
52
|
+
declare const _exports: {
|
|
53
|
+
"--mobile-xs": string;
|
|
54
|
+
"--mobile-s": string;
|
|
55
|
+
"--mobile-m": string;
|
|
56
|
+
"--mobile-l": string;
|
|
57
|
+
"--mobile": string;
|
|
58
|
+
"--tablet-s": string;
|
|
59
|
+
"--tablet-m": string;
|
|
60
|
+
"--tablet": string;
|
|
61
|
+
"--desktop-s": string;
|
|
62
|
+
"--desktop-m": string;
|
|
63
|
+
"--desktop-l": string;
|
|
64
|
+
"--desktop-xl": string;
|
|
65
|
+
"--desktop": string;
|
|
66
|
+
};
|
|
67
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
68
|
+
export { _exports as default, ButtonMobileProps, ButtonMobile, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported, Button };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
|
|
4
|
-
const styles = {"component":"calendar-
|
|
4
|
+
const styles = {"component":"calendar-range__component_1pil0","outer":"calendar-range__outer_1pil0","s":"calendar-range__s_1pil0","m":"calendar-range__m_1pil0","l":"calendar-range__l_1pil0","xl":"calendar-range__xl_1pil0"};
|
|
5
5
|
require('./index.css')
|
|
6
6
|
|
|
7
7
|
const Divider = ({ inputFromProps, inputToProps }) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: phr0r */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-graphic-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -41,29 +41,29 @@
|
|
|
41
41
|
/* disabled */
|
|
42
42
|
|
|
43
43
|
/* marker */
|
|
44
|
-
} .calendar-
|
|
44
|
+
} .calendar-range__component_1pil0 {
|
|
45
45
|
display: flex;
|
|
46
46
|
align-items: center;
|
|
47
47
|
justify-content: center;
|
|
48
48
|
width: 16px;
|
|
49
49
|
margin: 0 var(--gap-xs)
|
|
50
|
-
} .calendar-
|
|
50
|
+
} .calendar-range__component_1pil0:after {
|
|
51
51
|
content: '';
|
|
52
52
|
display: block;
|
|
53
53
|
width: 100%;
|
|
54
54
|
height: 1px;
|
|
55
55
|
background-color: var(--color-light-graphic-primary);
|
|
56
|
-
} .calendar-
|
|
56
|
+
} .calendar-range__outer_1pil0 {
|
|
57
57
|
position: relative;
|
|
58
58
|
|
|
59
59
|
/* FormControl .above height + margin-bottom */
|
|
60
60
|
top: 24px;
|
|
61
|
-
} .calendar-
|
|
61
|
+
} .calendar-range__s_1pil0 {
|
|
62
62
|
height: var(--size-s-height);
|
|
63
|
-
} .calendar-
|
|
63
|
+
} .calendar-range__m_1pil0 {
|
|
64
64
|
height: var(--size-m-height);
|
|
65
|
-
} .calendar-
|
|
65
|
+
} .calendar-range__l_1pil0 {
|
|
66
66
|
height: var(--size-l-height);
|
|
67
|
-
} .calendar-
|
|
67
|
+
} .calendar-range__xl_1pil0 {
|
|
68
68
|
height: var(--size-xl-height);
|
|
69
69
|
}
|
package/modern/index.js
CHANGED
|
@@ -4,6 +4,7 @@ import './views/popover.js';
|
|
|
4
4
|
import 'classnames';
|
|
5
5
|
import 'date-fns/startOfMonth';
|
|
6
6
|
import '@alfalab/core-components-calendar-input/modern';
|
|
7
|
+
import '@alfalab/core-components-calendar-input/modern/shared';
|
|
7
8
|
import '@alfalab/core-components-date-input/modern';
|
|
8
9
|
import '@alfalab/hooks';
|
|
9
10
|
import './components/divider/Component.js';
|
|
@@ -13,9 +14,10 @@ import 'date-fns/isEqual';
|
|
|
13
14
|
import 'date-fns/max';
|
|
14
15
|
import 'date-fns/min';
|
|
15
16
|
import 'date-fns/subMonths';
|
|
16
|
-
import './index.module-
|
|
17
|
+
import './index.module-95129248.js';
|
|
17
18
|
import './views/static.js';
|
|
18
19
|
import 'date-fns/endOfMonth';
|
|
19
20
|
import 'date-fns/isSameMonth';
|
|
20
|
-
import '@alfalab/core-components-calendar/modern';
|
|
21
|
+
import '@alfalab/core-components-calendar/modern/desktop';
|
|
22
|
+
import '@alfalab/core-components-calendar/modern/shared';
|
|
21
23
|
import './utils.js';
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
2
|
+
type usePeriodProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Обработчик изменения выделенного периода
|
|
5
|
+
*/
|
|
6
|
+
onPeriodChange?: (selectedFrom?: number, selectedTo?: number) => void;
|
|
7
|
+
/**
|
|
8
|
+
* Начальное значение начала выделенного периода
|
|
9
|
+
*/
|
|
10
|
+
initialSelectedFrom?: number;
|
|
11
|
+
/**
|
|
12
|
+
* Начальное значение конца выделенного периода
|
|
13
|
+
*/
|
|
14
|
+
initialSelectedTo?: number;
|
|
15
|
+
};
|
|
16
|
+
declare function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo }?: usePeriodProps): {
|
|
17
|
+
selectedFrom: number | undefined;
|
|
18
|
+
selectedTo: number | undefined;
|
|
19
|
+
setStart: (date?: number) => void;
|
|
20
|
+
setEnd: (date?: number) => void;
|
|
21
|
+
resetPeriod: () => void;
|
|
22
|
+
updatePeriod: (date?: number) => void;
|
|
23
|
+
};
|
|
24
|
+
declare function usePeriodWithReset({ onPeriodChange, initialSelectedFrom, initialSelectedTo }?: usePeriodProps): {
|
|
25
|
+
selectedFrom: number | undefined;
|
|
26
|
+
selectedTo: number | undefined;
|
|
27
|
+
setStart: (date?: number) => void;
|
|
28
|
+
setEnd: (date?: number) => void;
|
|
29
|
+
resetPeriod: () => void;
|
|
30
|
+
updatePeriod: (date?: number) => void;
|
|
31
|
+
};
|
|
32
|
+
export { usePeriod, usePeriodWithReset };
|
|
33
|
+
export { russianWeekDay, dateInLimits, limitDate, monthName, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, DATE_FORMAT } from "./utils-e2b6c730";
|
|
34
|
+
export { useCalendar } from "./useCalendar-71d94e2b";
|
|
35
|
+
export * from "./index-f034f741";
|