@alfalab/core-components-date-range-input 3.0.4 → 3.0.5
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-63dec22f.d.ts +172 -12
- package/Component-8b5756fe.d.ts +388 -0
- package/Component.desktop-8b5756fe.d.ts +68 -5
- package/Component.mobile-ebda875c.d.ts +6 -0
- package/components/date-range-input/Component.d.ts +1 -1
- package/components/date-range-input/Component.js +1 -1
- package/components/date-range-input/index.css +7 -7
- package/cssm/{index-50136800.d.ts → index-2abb571d.d.ts} +5 -1
- package/esm/components/date-range-input/Component.js +1 -1
- package/esm/components/date-range-input/index.css +7 -7
- package/{modern/index-50136800.d.ts → esm/index-2abb571d.d.ts} +5 -1
- package/{esm/index-50136800.d.ts → index-2abb571d.d.ts} +5 -1
- package/index-9211a437.d.ts +1 -1
- package/index-ebda875c.d.ts +15 -115
- package/index-f034f741.d.ts +80 -2
- package/mobile-c219f8ca.d.ts +1 -367
- package/modern/Component-2abb571d.d.ts +6 -0
- package/modern/components/date-range-input/Component.js +1 -1
- package/modern/components/date-range-input/index.css +7 -7
- package/{index-50136800.d.ts → modern/index-2abb571d.d.ts} +5 -1
- package/package.json +4 -4
- package/Component-50136800.d.ts +0 -186
- package/Component-5684a67d.d.ts +0 -23
- package/Component-e2b6c730.d.ts +0 -76
- package/Component.desktop-ebda875c.d.ts +0 -6
- package/desktop-8b5756fe.d.ts +0 -2
- package/utils-e0a54580.d.ts +0 -8
- /package/{cssm/Component-50136800.d.ts → Component-2abb571d.d.ts} +0 -0
- /package/{Component.responsive-755fbaa3.d.ts → Component.responsive-2e2b2125.d.ts} +0 -0
- /package/{esm/Component-50136800.d.ts → cssm/Component-2abb571d.d.ts} +0 -0
- /package/{modern/Component-50136800.d.ts → esm/Component-2abb571d.d.ts} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 9bgzg */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-border-secondary: #e9e9eb; /* 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,24 +41,24 @@
|
|
|
41
41
|
/* marker */
|
|
42
42
|
} :root {
|
|
43
43
|
--calendar-popover-border-radius: var(--border-radius-m);
|
|
44
|
-
} .date-range-
|
|
44
|
+
} .date-range-input__component_184ip {
|
|
45
45
|
display: inline-block;
|
|
46
46
|
outline: none;
|
|
47
47
|
position: relative;
|
|
48
|
-
} .date-range-
|
|
48
|
+
} .date-range-input__calendarContainer_184ip {
|
|
49
49
|
display: inline-block;
|
|
50
50
|
box-sizing: border-box;
|
|
51
51
|
border-radius: var(--calendar-popover-border-radius);
|
|
52
52
|
border: 1px solid var(--color-light-border-secondary)
|
|
53
|
-
} @media (max-width: 374px) { .date-range-
|
|
53
|
+
} @media (max-width: 374px) { .date-range-input__calendarContainer_184ip {
|
|
54
54
|
width: 100%;
|
|
55
55
|
min-width: 288px
|
|
56
56
|
}
|
|
57
|
-
} .date-range-
|
|
57
|
+
} .date-range-input__calendarResponsive_184ip {
|
|
58
58
|
width: var(--calendar-width);
|
|
59
|
-
} .date-range-
|
|
59
|
+
} .date-range-input__block_184ip {
|
|
60
60
|
width: 100%;
|
|
61
|
-
} .date-range-
|
|
61
|
+
} .date-range-input__calendarIcon_184ip {
|
|
62
62
|
margin-right: var(--gap-s-neg);
|
|
63
63
|
height: 100%;
|
|
64
64
|
}
|
|
@@ -8,4 +8,8 @@ declare function easeInOutQuad(x: number): number;
|
|
|
8
8
|
declare const easingFns: {
|
|
9
9
|
easeInOutQuad: typeof easeInOutQuad;
|
|
10
10
|
};
|
|
11
|
-
|
|
11
|
+
declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
|
|
12
|
+
declare const inputUtils: {
|
|
13
|
+
disableUserInput: typeof disableUserInput;
|
|
14
|
+
};
|
|
15
|
+
export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };
|
|
@@ -12,7 +12,7 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
|
12
12
|
import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
|
|
13
13
|
import 'date-fns/parse';
|
|
14
14
|
|
|
15
|
-
var styles = {"component":"date-range-
|
|
15
|
+
var styles = {"component":"date-range-input__component_184ip","calendarContainer":"date-range-input__calendarContainer_184ip","calendarResponsive":"date-range-input__calendarResponsive_184ip","block":"date-range-input__block_184ip","calendarIcon":"date-range-input__calendarIcon_184ip"};
|
|
16
16
|
require('./index.css')
|
|
17
17
|
|
|
18
18
|
var DateRangeInput = React.forwardRef(function (_a, ref) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 9bgzg */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-border-secondary: #e9e9eb; /* 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,24 +41,24 @@
|
|
|
41
41
|
/* marker */
|
|
42
42
|
} :root {
|
|
43
43
|
--calendar-popover-border-radius: var(--border-radius-m);
|
|
44
|
-
} .date-range-
|
|
44
|
+
} .date-range-input__component_184ip {
|
|
45
45
|
display: inline-block;
|
|
46
46
|
outline: none;
|
|
47
47
|
position: relative;
|
|
48
|
-
} .date-range-
|
|
48
|
+
} .date-range-input__calendarContainer_184ip {
|
|
49
49
|
display: inline-block;
|
|
50
50
|
box-sizing: border-box;
|
|
51
51
|
border-radius: var(--calendar-popover-border-radius);
|
|
52
52
|
border: 1px solid var(--color-light-border-secondary)
|
|
53
|
-
} @media (max-width: 374px) { .date-range-
|
|
53
|
+
} @media (max-width: 374px) { .date-range-input__calendarContainer_184ip {
|
|
54
54
|
width: 100%;
|
|
55
55
|
min-width: 288px
|
|
56
56
|
}
|
|
57
|
-
} .date-range-
|
|
57
|
+
} .date-range-input__calendarResponsive_184ip {
|
|
58
58
|
width: var(--calendar-width);
|
|
59
|
-
} .date-range-
|
|
59
|
+
} .date-range-input__block_184ip {
|
|
60
60
|
width: 100%;
|
|
61
|
-
} .date-range-
|
|
61
|
+
} .date-range-input__calendarIcon_184ip {
|
|
62
62
|
margin-right: var(--gap-s-neg);
|
|
63
63
|
height: 100%;
|
|
64
64
|
}
|
|
@@ -8,4 +8,8 @@ declare function easeInOutQuad(x: number): number;
|
|
|
8
8
|
declare const easingFns: {
|
|
9
9
|
easeInOutQuad: typeof easeInOutQuad;
|
|
10
10
|
};
|
|
11
|
-
|
|
11
|
+
declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
|
|
12
|
+
declare const inputUtils: {
|
|
13
|
+
disableUserInput: typeof disableUserInput;
|
|
14
|
+
};
|
|
15
|
+
export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };
|
|
@@ -8,4 +8,8 @@ declare function easeInOutQuad(x: number): number;
|
|
|
8
8
|
declare const easingFns: {
|
|
9
9
|
easeInOutQuad: typeof easeInOutQuad;
|
|
10
10
|
};
|
|
11
|
-
|
|
11
|
+
declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
|
|
12
|
+
declare const inputUtils: {
|
|
13
|
+
disableUserInput: typeof disableUserInput;
|
|
14
|
+
};
|
|
15
|
+
export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils };
|
package/index-9211a437.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Button } from "./Component.responsive-
|
|
1
|
+
export { Button } from "./Component.responsive-2e2b2125";
|
|
2
2
|
export type { ButtonProps } from "./typings-9211a437";
|
package/index-ebda875c.d.ts
CHANGED
|
@@ -1,135 +1,35 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from "react";
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
default: {
|
|
6
|
-
[key: string]: string;
|
|
7
|
-
};
|
|
8
|
-
inverted: {
|
|
9
|
-
[key: string]: string;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
|
|
3
|
+
import { ButtonHTMLAttributes, ElementType, FC } from "react";
|
|
4
|
+
interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
13
5
|
/**
|
|
14
|
-
*
|
|
6
|
+
* Вид компонента
|
|
15
7
|
*/
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Размер компонента
|
|
19
|
-
*/
|
|
20
|
-
size?: "s" | "m" | "l" | "xl";
|
|
21
|
-
/**
|
|
22
|
-
* Набор цветов для компонента
|
|
23
|
-
*/
|
|
24
|
-
colors?: "default" | "inverted";
|
|
25
|
-
/**
|
|
26
|
-
* Заблокированное состояние
|
|
27
|
-
*/
|
|
28
|
-
disabled?: boolean;
|
|
29
|
-
/**
|
|
30
|
-
* Cостояние только для чтения
|
|
31
|
-
*/
|
|
32
|
-
readOnly?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* Заполненное состояние
|
|
35
|
-
*/
|
|
36
|
-
filled?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* Выбранное (фокус) состояние
|
|
39
|
-
*/
|
|
40
|
-
focused?: boolean;
|
|
41
|
-
/**
|
|
42
|
-
* Отображение ошибки
|
|
43
|
-
*/
|
|
44
|
-
error?: ReactNode | boolean;
|
|
45
|
-
/**
|
|
46
|
-
* Текст подсказки
|
|
47
|
-
*/
|
|
48
|
-
hint?: ReactNode;
|
|
49
|
-
/**
|
|
50
|
-
* Лейбл компонента
|
|
51
|
-
*/
|
|
52
|
-
label?: ReactNode;
|
|
53
|
-
/**
|
|
54
|
-
* Вид лейбла внутри / снаружи
|
|
55
|
-
*/
|
|
56
|
-
labelView?: "inner" | "outer";
|
|
57
|
-
/**
|
|
58
|
-
* Слот слева
|
|
59
|
-
*/
|
|
60
|
-
leftAddons?: ReactNode;
|
|
61
|
-
/**
|
|
62
|
-
* Слот справа
|
|
63
|
-
*/
|
|
64
|
-
rightAddons?: ReactNode;
|
|
65
|
-
/**
|
|
66
|
-
* Слот под полем
|
|
67
|
-
*/
|
|
68
|
-
bottomAddons?: ReactNode;
|
|
8
|
+
view: "desktop" | "mobile";
|
|
69
9
|
/**
|
|
70
10
|
* Дополнительный класс
|
|
71
11
|
*/
|
|
72
12
|
className?: string;
|
|
73
13
|
/**
|
|
74
|
-
*
|
|
75
|
-
*/
|
|
76
|
-
fieldClassName?: string;
|
|
77
|
-
/**
|
|
78
|
-
* Дополнительный класс для поля
|
|
14
|
+
* Позиция крестика
|
|
79
15
|
*/
|
|
80
|
-
|
|
16
|
+
align?: "left" | "right";
|
|
81
17
|
/**
|
|
82
|
-
*
|
|
18
|
+
* Фиксирует крестик
|
|
83
19
|
*/
|
|
84
|
-
|
|
20
|
+
sticky?: boolean;
|
|
85
21
|
/**
|
|
86
|
-
*
|
|
22
|
+
* Иконка
|
|
87
23
|
*/
|
|
88
|
-
|
|
24
|
+
icon?: ElementType;
|
|
89
25
|
/**
|
|
90
26
|
* Идентификатор для систем автоматизированного тестирования
|
|
91
27
|
*/
|
|
92
28
|
dataTestId?: string;
|
|
93
29
|
/**
|
|
94
|
-
*
|
|
95
|
-
*/
|
|
96
|
-
children?: ReactNode;
|
|
97
|
-
/**
|
|
98
|
-
* Основные стили компонента.
|
|
99
|
-
*/
|
|
100
|
-
styles: {
|
|
101
|
-
[key: string]: string;
|
|
102
|
-
};
|
|
103
|
-
/**
|
|
104
|
-
* Стили компонента для default и inverted режима.
|
|
30
|
+
* Коллбэк закрытия.
|
|
105
31
|
*/
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
declare const
|
|
109
|
-
|
|
110
|
-
size?: "s" | "m" | "l" | "xl" | undefined;
|
|
111
|
-
colors?: "default" | "inverted" | undefined;
|
|
112
|
-
disabled?: boolean | undefined;
|
|
113
|
-
readOnly?: boolean | undefined;
|
|
114
|
-
filled?: boolean | undefined;
|
|
115
|
-
focused?: boolean | undefined;
|
|
116
|
-
error?: ReactNode | boolean;
|
|
117
|
-
hint?: ReactNode;
|
|
118
|
-
label?: ReactNode;
|
|
119
|
-
labelView?: "inner" | "outer" | undefined;
|
|
120
|
-
leftAddons?: ReactNode;
|
|
121
|
-
rightAddons?: ReactNode;
|
|
122
|
-
bottomAddons?: ReactNode;
|
|
123
|
-
className?: string | undefined;
|
|
124
|
-
fieldClassName?: string | undefined;
|
|
125
|
-
inputWrapperClassName?: string | undefined;
|
|
126
|
-
labelClassName?: string | undefined;
|
|
127
|
-
addonsClassName?: string | undefined;
|
|
128
|
-
dataTestId?: string | undefined;
|
|
129
|
-
children?: ReactNode;
|
|
130
|
-
styles: {
|
|
131
|
-
[key: string]: string;
|
|
132
|
-
};
|
|
133
|
-
colorStyles?: StyleColors | undefined;
|
|
134
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
135
|
-
export { StyleColors, BaseFormControlProps, BaseFormControl };
|
|
32
|
+
onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
|
|
33
|
+
}
|
|
34
|
+
declare const Closer: FC<CloserProps>;
|
|
35
|
+
export { CloserProps, Closer };
|
package/index-f034f741.d.ts
CHANGED
|
@@ -1,2 +1,80 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { FC, MouseEvent } from "react";
|
|
2
|
+
type PeriodType = "range" | "day" | "week" | "month" | "quarter" | "year";
|
|
3
|
+
type PeriodSliderProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Активная дата или период
|
|
6
|
+
*/
|
|
7
|
+
value?: Date | [
|
|
8
|
+
Date,
|
|
9
|
+
Date
|
|
10
|
+
];
|
|
11
|
+
/**
|
|
12
|
+
* Тип периода
|
|
13
|
+
*/
|
|
14
|
+
periodType?: PeriodType;
|
|
15
|
+
/**
|
|
16
|
+
* Дополнительный класс
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Отключает кнопку назад
|
|
21
|
+
*/
|
|
22
|
+
prevArrowDisabled?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Отключает кнопку вперед
|
|
25
|
+
*/
|
|
26
|
+
nextArrowDisabled?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Скрывает заблокированные кнопки
|
|
29
|
+
*/
|
|
30
|
+
hideDisabledArrows?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Возможность выбора месяца и года, если periodType 'month'
|
|
33
|
+
*/
|
|
34
|
+
isMonthAndYearSelectable?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Отображать ли текущий год, если isMonthAndYearSelectable true
|
|
37
|
+
*/
|
|
38
|
+
showCurrentYearSelector?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Функция для форматирование выбранного периода
|
|
41
|
+
*/
|
|
42
|
+
periodFormatter?: (valueFrom: Date, valueTo: Date, periodType: PeriodType) => string;
|
|
43
|
+
/**
|
|
44
|
+
* Обработчик нажатия кнопки переключения на назад
|
|
45
|
+
*/
|
|
46
|
+
onPrevArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
|
|
47
|
+
value: Date;
|
|
48
|
+
valueFrom: Date;
|
|
49
|
+
valueTo: Date;
|
|
50
|
+
periodType: PeriodType;
|
|
51
|
+
}) => void;
|
|
52
|
+
/**
|
|
53
|
+
* Обработчик нажатия кнопки переключения на вперед
|
|
54
|
+
*/
|
|
55
|
+
onNextArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
|
|
56
|
+
value: Date;
|
|
57
|
+
valueFrom: Date;
|
|
58
|
+
valueTo: Date;
|
|
59
|
+
periodType: PeriodType;
|
|
60
|
+
}) => void;
|
|
61
|
+
/**
|
|
62
|
+
* Обработчик нажатия на селектор месяца
|
|
63
|
+
*/
|
|
64
|
+
onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
65
|
+
/**
|
|
66
|
+
* Обработчик нажатия на селектор года
|
|
67
|
+
*/
|
|
68
|
+
onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
69
|
+
/**
|
|
70
|
+
* Обработчик нажатия на период
|
|
71
|
+
*/
|
|
72
|
+
onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
|
73
|
+
/**
|
|
74
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
75
|
+
*/
|
|
76
|
+
dataTestId?: string;
|
|
77
|
+
};
|
|
78
|
+
declare const PeriodSlider: FC<PeriodSliderProps>;
|
|
79
|
+
export { PeriodType, PeriodSliderProps, PeriodSlider };
|
|
80
|
+
export { shiftValues } from "./Component.desktop-8b5756fe";
|