@alfalab/core-components-date-time-input 3.2.1 → 4.0.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-50136800.d.ts +6 -0
- package/Component-63dec22f.d.ts +167 -0
- package/Component-72dda473.d.ts +53 -0
- package/Component-8b5756fe.d.ts +388 -0
- package/Component.desktop-2e2b2125.d.ts +6 -0
- package/Component.desktop-8b5756fe.d.ts +197 -0
- package/Component.desktop.d.ts +1 -1
- package/Component.desktop.js +4 -3
- package/Component.mobile-755fbaa3.d.ts +6 -0
- package/Component.mobile-ebda875c.d.ts +6 -0
- package/Component.mobile.d.ts +1 -1
- package/Component.mobile.js +4 -3
- package/Component.responsive-2e2b2125.d.ts +66 -0
- package/Component.responsive.d.ts +2 -2
- package/Component.responsive.js +5 -2
- package/components/date-time-input/Component.d.ts +19 -8
- package/components/date-time-input/Component.js +14 -13
- package/components/date-time-input/index.css +7 -7
- package/components/date-time-input/index.js +1 -2
- package/cssm/Component-50136800.d.ts +6 -0
- package/cssm/Component-63dec22f.d.ts +167 -0
- package/cssm/Component-72dda473.d.ts +53 -0
- package/cssm/Component-8b5756fe.d.ts +388 -0
- package/cssm/Component.desktop-2e2b2125.d.ts +6 -0
- package/cssm/Component.desktop-8b5756fe.d.ts +197 -0
- package/cssm/Component.desktop.d.ts +1 -1
- package/cssm/Component.desktop.js +4 -3
- package/cssm/Component.mobile-755fbaa3.d.ts +6 -0
- package/cssm/Component.mobile-ebda875c.d.ts +6 -0
- package/cssm/Component.mobile.d.ts +1 -1
- package/cssm/Component.mobile.js +4 -3
- package/cssm/Component.responsive-2e2b2125.d.ts +66 -0
- package/cssm/Component.responsive.d.ts +2 -2
- package/cssm/Component.responsive.js +5 -2
- package/cssm/components/date-time-input/Component.d.ts +19 -8
- package/cssm/components/date-time-input/Component.js +13 -12
- package/cssm/components/date-time-input/index.js +1 -2
- package/cssm/desktop-63dec22f.d.ts +2 -0
- package/cssm/desktop.js +3 -2
- package/cssm/index-50136800.d.ts +11 -0
- package/cssm/index-72dda473.d.ts +12 -0
- package/cssm/index-9211a437.d.ts +2 -0
- package/cssm/index-ebda875c.d.ts +35 -0
- package/cssm/index-f034f741.d.ts +80 -0
- package/cssm/index.d.ts +3 -2
- package/cssm/index.js +5 -2
- package/cssm/mobile-c219f8ca.d.ts +1 -0
- package/cssm/mobile.js +3 -2
- package/cssm/types-83e2bd9e.d.ts +113 -0
- package/cssm/typings-5684a67d.d.ts +23 -0
- package/cssm/typings-9211a437.d.ts +95 -0
- package/cssm/useCalendar-5684a67d.d.ts +97 -0
- package/cssm/utils-5684a67d.d.ts +88 -0
- package/desktop-63dec22f.d.ts +2 -0
- package/desktop.js +3 -2
- package/esm/Component-50136800.d.ts +6 -0
- package/esm/Component-63dec22f.d.ts +167 -0
- package/esm/Component-72dda473.d.ts +53 -0
- package/esm/Component-8b5756fe.d.ts +388 -0
- package/esm/Component.desktop-2e2b2125.d.ts +6 -0
- package/esm/Component.desktop-8b5756fe.d.ts +197 -0
- package/esm/Component.desktop.d.ts +1 -1
- package/esm/Component.desktop.js +4 -3
- package/esm/Component.mobile-755fbaa3.d.ts +6 -0
- package/esm/Component.mobile-ebda875c.d.ts +6 -0
- package/esm/Component.mobile.d.ts +1 -1
- package/esm/Component.mobile.js +4 -3
- package/esm/Component.responsive-2e2b2125.d.ts +66 -0
- package/esm/Component.responsive.d.ts +2 -2
- package/esm/Component.responsive.js +5 -2
- package/esm/components/date-time-input/Component.d.ts +19 -8
- package/esm/components/date-time-input/Component.js +13 -12
- package/esm/components/date-time-input/index.css +7 -7
- package/esm/components/date-time-input/index.js +1 -2
- package/esm/desktop-63dec22f.d.ts +2 -0
- package/esm/desktop.js +3 -2
- package/esm/index-50136800.d.ts +11 -0
- package/esm/index-72dda473.d.ts +12 -0
- package/esm/index-9211a437.d.ts +2 -0
- package/esm/index-ebda875c.d.ts +35 -0
- package/esm/index-f034f741.d.ts +80 -0
- package/esm/index.d.ts +3 -2
- package/esm/index.js +5 -2
- package/esm/mobile-c219f8ca.d.ts +1 -0
- package/esm/mobile.js +3 -2
- package/esm/types-83e2bd9e.d.ts +113 -0
- package/esm/typings-5684a67d.d.ts +23 -0
- package/esm/typings-9211a437.d.ts +95 -0
- package/esm/useCalendar-5684a67d.d.ts +97 -0
- package/esm/utils-5684a67d.d.ts +88 -0
- package/index-50136800.d.ts +11 -0
- package/index-72dda473.d.ts +12 -0
- package/index-9211a437.d.ts +2 -0
- package/index-ebda875c.d.ts +35 -0
- package/index-f034f741.d.ts +80 -0
- package/index.d.ts +3 -2
- package/index.js +5 -2
- package/mobile-c219f8ca.d.ts +1 -0
- package/mobile.js +3 -2
- package/modern/Component-50136800.d.ts +6 -0
- package/modern/Component-63dec22f.d.ts +167 -0
- package/modern/Component-72dda473.d.ts +53 -0
- package/modern/Component-8b5756fe.d.ts +388 -0
- package/modern/Component.desktop-2e2b2125.d.ts +6 -0
- package/modern/Component.desktop-8b5756fe.d.ts +197 -0
- package/modern/Component.desktop.d.ts +1 -1
- package/modern/Component.desktop.js +4 -3
- package/modern/Component.mobile-755fbaa3.d.ts +6 -0
- package/modern/Component.mobile-ebda875c.d.ts +6 -0
- package/modern/Component.mobile.d.ts +1 -1
- package/modern/Component.mobile.js +4 -3
- package/modern/Component.responsive-2e2b2125.d.ts +66 -0
- package/modern/Component.responsive.d.ts +2 -2
- package/modern/Component.responsive.js +5 -2
- package/modern/components/date-time-input/Component.d.ts +19 -8
- package/modern/components/date-time-input/Component.js +7 -8
- package/modern/components/date-time-input/index.css +7 -7
- package/modern/components/date-time-input/index.js +1 -2
- package/modern/desktop-63dec22f.d.ts +2 -0
- package/modern/desktop.js +3 -2
- package/modern/index-50136800.d.ts +11 -0
- package/modern/index-72dda473.d.ts +12 -0
- package/modern/index-9211a437.d.ts +2 -0
- package/modern/index-ebda875c.d.ts +35 -0
- package/modern/index-f034f741.d.ts +80 -0
- package/modern/index.d.ts +3 -2
- package/modern/index.js +5 -2
- package/modern/mobile-c219f8ca.d.ts +1 -0
- package/modern/mobile.js +3 -2
- package/modern/types-83e2bd9e.d.ts +113 -0
- package/modern/typings-5684a67d.d.ts +23 -0
- package/modern/typings-9211a437.d.ts +95 -0
- package/modern/useCalendar-5684a67d.d.ts +97 -0
- package/modern/utils-5684a67d.d.ts +88 -0
- package/package.json +28 -5
- package/src/Component.desktop.tsx +21 -0
- package/src/Component.mobile.tsx +22 -0
- package/src/Component.responsive.tsx +37 -0
- package/src/components/date-time-input/Component.tsx +423 -0
- package/src/components/date-time-input/index.module.css +37 -0
- package/src/components/date-time-input/index.ts +1 -0
- package/src/desktop.ts +1 -0
- package/src/index.ts +2 -0
- package/src/mobile.ts +1 -0
- package/src/utils/format.ts +165 -0
- package/src/utils/index.ts +1 -0
- package/types-83e2bd9e.d.ts +113 -0
- package/typings-5684a67d.d.ts +23 -0
- package/typings-9211a437.d.ts +95 -0
- package/useCalendar-5684a67d.d.ts +97 -0
- package/utils-5684a67d.d.ts +88 -0
- package/cssm/responsive.d.ts +0 -2
- package/cssm/responsive.js +0 -26
- package/esm/responsive.d.ts +0 -2
- package/esm/responsive.js +0 -17
- package/modern/responsive.d.ts +0 -2
- package/modern/responsive.js +0 -16
- package/responsive.d.ts +0 -2
- package/responsive.js +0 -25
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { FC, ReactNode, MouseEvent } from "react";
|
|
4
|
+
import { SelectorView, Month, DayAddons, View } from "./typings-5684a67d";
|
|
5
|
+
import { PeriodType } from "./index-f034f741";
|
|
6
|
+
type HeaderProps = {
|
|
7
|
+
/**
|
|
8
|
+
* Вид шапки — месяц и год или только месяц
|
|
9
|
+
*/
|
|
10
|
+
view?: SelectorView;
|
|
11
|
+
/**
|
|
12
|
+
* Отображать тень? (нужна при прокрутке)
|
|
13
|
+
*/
|
|
14
|
+
withShadow?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Дочерние элементы.
|
|
17
|
+
*/
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
};
|
|
20
|
+
declare const Header: FC<HeaderProps>;
|
|
21
|
+
type MonthYearHeaderProps = {
|
|
22
|
+
/**
|
|
23
|
+
* Активная дата
|
|
24
|
+
*/
|
|
25
|
+
value?: Date;
|
|
26
|
+
/**
|
|
27
|
+
* Дополнительный класс
|
|
28
|
+
*/
|
|
29
|
+
className?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Обработчик нажатия на кнопку месяца
|
|
32
|
+
*/
|
|
33
|
+
onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
34
|
+
/**
|
|
35
|
+
* Обработчик нажатия на кнопку года
|
|
36
|
+
*/
|
|
37
|
+
onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
38
|
+
/**
|
|
39
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
40
|
+
*/
|
|
41
|
+
dataTestId?: string;
|
|
42
|
+
};
|
|
43
|
+
declare const MonthYearHeader: FC<MonthYearHeaderProps>;
|
|
44
|
+
type MonthsTableProps = {
|
|
45
|
+
/**
|
|
46
|
+
* Массив месяцев
|
|
47
|
+
*/
|
|
48
|
+
months?: Month[];
|
|
49
|
+
/**
|
|
50
|
+
* Выбранный месяц
|
|
51
|
+
*/
|
|
52
|
+
selectedMonth?: Date;
|
|
53
|
+
/**
|
|
54
|
+
* Доп пропсы для переданного месяца
|
|
55
|
+
*/
|
|
56
|
+
getMonthProps: (day: Month) => Record<string, unknown>;
|
|
57
|
+
/**
|
|
58
|
+
* Должен ли календарь подстраиваться под ширину родителя.
|
|
59
|
+
*/
|
|
60
|
+
responsive?: boolean;
|
|
61
|
+
};
|
|
62
|
+
declare const MonthsTable: FC<MonthsTableProps>;
|
|
63
|
+
declare const formatPeriod: (valueFrom: Date, valueTo: Date, periodType: PeriodType, showCurrentYear?: boolean) => string;
|
|
64
|
+
declare const getYearSelectorValue: (valueFrom: Date | undefined, showCurrentYear: boolean) => number | "";
|
|
65
|
+
declare const shiftValues: (valueFrom: Date, valueTo: Date, periodType: PeriodType, direction: "prev" | "next") => {
|
|
66
|
+
valueFrom: Date;
|
|
67
|
+
valueTo: Date;
|
|
68
|
+
};
|
|
69
|
+
type YearsTableProps = {
|
|
70
|
+
/**
|
|
71
|
+
* Массив лет
|
|
72
|
+
*/
|
|
73
|
+
years?: Date[];
|
|
74
|
+
/**
|
|
75
|
+
* Выбранный год
|
|
76
|
+
*/
|
|
77
|
+
selectedYear?: Date;
|
|
78
|
+
/**
|
|
79
|
+
* Доп. пропсы для переданного года
|
|
80
|
+
*/
|
|
81
|
+
getYearProps: (year: Date) => Record<string, unknown>;
|
|
82
|
+
/**
|
|
83
|
+
* Обработчик скролла
|
|
84
|
+
*/
|
|
85
|
+
onScroll: (scrollTop: number) => void;
|
|
86
|
+
/**
|
|
87
|
+
* Должен ли календарь подстраиваться под ширину родителя.
|
|
88
|
+
*/
|
|
89
|
+
responsive?: boolean;
|
|
90
|
+
};
|
|
91
|
+
declare const YearsTable: FC<YearsTableProps>;
|
|
92
|
+
type CalendarDesktopProps = {
|
|
93
|
+
/**
|
|
94
|
+
* Дополнительный класс
|
|
95
|
+
*/
|
|
96
|
+
className?: string;
|
|
97
|
+
/**
|
|
98
|
+
* Вид по умолчанию (выбор дней, месяцев, лет)
|
|
99
|
+
*/
|
|
100
|
+
defaultView?: View;
|
|
101
|
+
/**
|
|
102
|
+
* Вид шапки — месяц и год или только месяц
|
|
103
|
+
*/
|
|
104
|
+
selectorView?: SelectorView;
|
|
105
|
+
/**
|
|
106
|
+
* Выбранная дата (timestamp)
|
|
107
|
+
*/
|
|
108
|
+
value?: number;
|
|
109
|
+
/**
|
|
110
|
+
* Открытый месяц (timestamp)
|
|
111
|
+
*/
|
|
112
|
+
month?: number;
|
|
113
|
+
/**
|
|
114
|
+
* Месяц, открытый по умолчанию (timestamp)
|
|
115
|
+
*/
|
|
116
|
+
defaultMonth?: number;
|
|
117
|
+
/**
|
|
118
|
+
* Минимальная дата, доступная для выбора (timestamp)
|
|
119
|
+
*/
|
|
120
|
+
minDate?: number;
|
|
121
|
+
/**
|
|
122
|
+
* Максимальная дата, доступная для выбора (timestamp)
|
|
123
|
+
*/
|
|
124
|
+
maxDate?: number;
|
|
125
|
+
/**
|
|
126
|
+
* Начало выделенного периода (timestamp)
|
|
127
|
+
*/
|
|
128
|
+
selectedFrom?: number;
|
|
129
|
+
/**
|
|
130
|
+
* Конец выделенного периода (timestamp)
|
|
131
|
+
*/
|
|
132
|
+
selectedTo?: number;
|
|
133
|
+
/**
|
|
134
|
+
* Индикатор, что выбран полный период
|
|
135
|
+
*/
|
|
136
|
+
rangeComplete?: boolean;
|
|
137
|
+
/**
|
|
138
|
+
* Список событий
|
|
139
|
+
*/
|
|
140
|
+
events?: Array<Date | number>;
|
|
141
|
+
/**
|
|
142
|
+
* Список отключенных для выбора дней.
|
|
143
|
+
*/
|
|
144
|
+
offDays?: Array<Date | number>;
|
|
145
|
+
/**
|
|
146
|
+
* Список выходных
|
|
147
|
+
*/
|
|
148
|
+
holidays?: Array<Date | number>;
|
|
149
|
+
/**
|
|
150
|
+
* Обработчик изменения месяца (или года)
|
|
151
|
+
*/
|
|
152
|
+
onMonthChange?: (month: number) => void;
|
|
153
|
+
/**
|
|
154
|
+
* Обработчик выбора даты
|
|
155
|
+
*/
|
|
156
|
+
onChange?: (date?: number) => void;
|
|
157
|
+
/**
|
|
158
|
+
* Обработчик нажатия на кнопку месяца
|
|
159
|
+
*/
|
|
160
|
+
onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
161
|
+
/**
|
|
162
|
+
* Обработчик нажатия на кнопку года
|
|
163
|
+
*/
|
|
164
|
+
onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
165
|
+
/**
|
|
166
|
+
* Обработчик нажатия на период
|
|
167
|
+
*/
|
|
168
|
+
onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
|
169
|
+
/**
|
|
170
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
171
|
+
*/
|
|
172
|
+
dataTestId?: string;
|
|
173
|
+
/**
|
|
174
|
+
* Нужно ли рендерить шапку календаря
|
|
175
|
+
*/
|
|
176
|
+
hasHeader?: boolean;
|
|
177
|
+
/**
|
|
178
|
+
* Должен ли календарь подстраиваться под ширину родителя.
|
|
179
|
+
*/
|
|
180
|
+
responsive?: boolean;
|
|
181
|
+
/**
|
|
182
|
+
* Дополнительный контент под числом
|
|
183
|
+
*/
|
|
184
|
+
dayAddons?: DayAddons[];
|
|
185
|
+
/**
|
|
186
|
+
* Форма ячейки дня
|
|
187
|
+
*/
|
|
188
|
+
shape?: 'rounded' | 'rectangular';
|
|
189
|
+
/**
|
|
190
|
+
* Отображать ли текущий год, если selectorView 'month-only'
|
|
191
|
+
* @default false
|
|
192
|
+
*/
|
|
193
|
+
showCurrentYearSelector?: boolean;
|
|
194
|
+
};
|
|
195
|
+
declare const CalendarDesktop: React.ForwardRefExoticComponent<CalendarDesktopProps & React.RefAttributes<HTMLDivElement>>;
|
|
196
|
+
export { HeaderProps, Header, MonthYearHeaderProps, MonthYearHeader, MonthsTableProps, MonthsTable, formatPeriod, getYearSelectorValue, shiftValues, YearsTableProps, YearsTable, CalendarDesktopProps, CalendarDesktop };
|
|
197
|
+
export * from "./Component-63dec22f";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { DateTimeInputProps } from "./components/date-time-input/Component";
|
|
4
|
-
type DateTimeInputDesktopProps = Omit<DateTimeInputProps, 'view'>;
|
|
4
|
+
type DateTimeInputDesktopProps = Omit<DateTimeInputProps, 'view' | 'InputComponent'>;
|
|
5
5
|
declare const DateTimeInputDesktop: React.ForwardRefExoticComponent<DateTimeInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
|
|
6
6
|
export { DateTimeInputDesktopProps, DateTimeInputDesktop };
|
|
@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
6
|
var React = require('react');
|
|
7
|
+
var desktop = require('@alfalab/core-components-calendar/cssm/desktop');
|
|
8
|
+
var desktop$1 = require('@alfalab/core-components-input/cssm/desktop');
|
|
7
9
|
var components_dateTimeInput_Component = require('./components/date-time-input/Component.js');
|
|
8
10
|
require('react-merge-refs');
|
|
9
11
|
require('classnames');
|
|
10
|
-
require('@alfalab/core-components-calendar/cssm');
|
|
12
|
+
require('@alfalab/core-components-calendar/cssm/shared');
|
|
11
13
|
require('@alfalab/core-components-icon-button/cssm');
|
|
12
|
-
require('@alfalab/core-components-input/cssm');
|
|
13
14
|
require('@alfalab/core-components-popover/cssm');
|
|
14
15
|
require('@alfalab/hooks');
|
|
15
16
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
@@ -22,6 +23,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
22
23
|
|
|
23
24
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
24
25
|
|
|
25
|
-
var DateTimeInputDesktop = React.forwardRef(function (props, ref) { return React__default.default.createElement(components_dateTimeInput_Component.DateTimeInput, tslib.__assign({}, props, { ref: ref })); });
|
|
26
|
+
var DateTimeInputDesktop = React.forwardRef(function (props, ref) { return (React__default.default.createElement(components_dateTimeInput_Component.DateTimeInput, tslib.__assign({ Calendar: desktop.CalendarDesktop, InputComponent: desktop$1.InputDesktop }, props, { ref: ref }))); });
|
|
26
27
|
|
|
27
28
|
exports.DateTimeInputDesktop = DateTimeInputDesktop;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
|
|
4
|
+
type ButtonMobileProps = Partial<AnchorButtonProps | NativeButtonProps>;
|
|
5
|
+
declare const ButtonMobile: React.ForwardRefExoticComponent<ButtonMobileProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
6
|
+
export { ButtonMobileProps, ButtonMobile };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { BaseFormControlProps } from "./index-ebda875c";
|
|
4
|
+
type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
|
|
5
|
+
declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export { FormControlMobileProps, FormControlMobile };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { DateTimeInputProps } from "./components/date-time-input/Component";
|
|
4
|
-
type DateTimeInputMobileProps = Omit<DateTimeInputProps, 'view'>;
|
|
4
|
+
type DateTimeInputMobileProps = Omit<DateTimeInputProps, 'view' | 'InputComponent'>;
|
|
5
5
|
declare const DateTimeInputMobile: React.ForwardRefExoticComponent<DateTimeInputMobileProps & React.RefAttributes<HTMLInputElement>>;
|
|
6
6
|
export { DateTimeInputMobileProps, DateTimeInputMobile };
|
package/cssm/Component.mobile.js
CHANGED
|
@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var
|
|
7
|
+
var mobile$1 = require('@alfalab/core-components-calendar/cssm/mobile');
|
|
8
|
+
var mobile = require('@alfalab/core-components-input/cssm/mobile');
|
|
8
9
|
var components_dateTimeInput_Component = require('./components/date-time-input/Component.js');
|
|
9
10
|
require('react-merge-refs');
|
|
10
11
|
require('classnames');
|
|
12
|
+
require('@alfalab/core-components-calendar/cssm/shared');
|
|
11
13
|
require('@alfalab/core-components-icon-button/cssm');
|
|
12
|
-
require('@alfalab/core-components-input/cssm');
|
|
13
14
|
require('@alfalab/core-components-popover/cssm');
|
|
14
15
|
require('@alfalab/hooks');
|
|
15
16
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
@@ -22,6 +23,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
22
23
|
|
|
23
24
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
24
25
|
|
|
25
|
-
var DateTimeInputMobile = React.forwardRef(function (props, ref) { return React__default.default.createElement(components_dateTimeInput_Component.DateTimeInput, tslib.__assign({ Calendar:
|
|
26
|
+
var DateTimeInputMobile = React.forwardRef(function (props, ref) { return (React__default.default.createElement(components_dateTimeInput_Component.DateTimeInput, tslib.__assign({ InputComponent: mobile.InputMobile, Calendar: mobile$1.CalendarMobile, view: 'mobile' }, props, { ref: ref }))); });
|
|
26
27
|
|
|
27
28
|
exports.DateTimeInputMobile = DateTimeInputMobile;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { FC, ReactNode } from "react";
|
|
4
|
+
import { ButtonProps } from "./typings-9211a437";
|
|
5
|
+
type MqProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
8
|
+
*/
|
|
9
|
+
query?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Запрос на поддержку тач-событий
|
|
12
|
+
*/
|
|
13
|
+
touch?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Дочерние элементы.
|
|
16
|
+
*/
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* Обработчик изменений в совпадении запросов
|
|
20
|
+
*/
|
|
21
|
+
onMatchChange?: (isMatched: boolean) => void;
|
|
22
|
+
};
|
|
23
|
+
declare const Mq: FC<MqProps>;
|
|
24
|
+
/**
|
|
25
|
+
* Хук для медиа запросов.
|
|
26
|
+
* @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
27
|
+
* @param defaultValue Значение по-умолчанию.
|
|
28
|
+
*/
|
|
29
|
+
declare const useMatchMedia: (query: string, defaultValue?: boolean | (() => boolean)) => boolean[];
|
|
30
|
+
/**
|
|
31
|
+
* Возвращает MediaQueryList для заданного media-выражения.
|
|
32
|
+
*
|
|
33
|
+
* @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
34
|
+
*/
|
|
35
|
+
declare function getMatchMedia(queryProp: string): MediaQueryList;
|
|
36
|
+
/**
|
|
37
|
+
* Удаляет MediaQueryList.
|
|
38
|
+
*
|
|
39
|
+
* @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
40
|
+
*/
|
|
41
|
+
declare function releaseMatchMedia(queryProp: string): void;
|
|
42
|
+
/**
|
|
43
|
+
* Возвращает `true`, если есть поддержка `Pointer Events`
|
|
44
|
+
*/
|
|
45
|
+
declare function isPointerEventsSupported(): boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Возвращает `true`, если есть поддержка `Touch Events`
|
|
48
|
+
*/
|
|
49
|
+
declare function isTouchSupported(): boolean;
|
|
50
|
+
declare const _exports: {
|
|
51
|
+
"--mobile-xs": string;
|
|
52
|
+
"--mobile-s": string;
|
|
53
|
+
"--mobile-m": string;
|
|
54
|
+
"--mobile-l": string;
|
|
55
|
+
"--mobile": string;
|
|
56
|
+
"--tablet-s": string;
|
|
57
|
+
"--tablet-m": string;
|
|
58
|
+
"--tablet": string;
|
|
59
|
+
"--desktop-s": string;
|
|
60
|
+
"--desktop-m": string;
|
|
61
|
+
"--desktop-l": string;
|
|
62
|
+
"--desktop-xl": string;
|
|
63
|
+
"--desktop": string;
|
|
64
|
+
};
|
|
65
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
66
|
+
export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported, Button };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { DateTimeInputProps } from "./components/date-time-input/Component";
|
|
4
|
-
type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view'> & {
|
|
4
|
+
type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view' | 'InputComponent'> & {
|
|
5
5
|
/**
|
|
6
6
|
* Контрольная точка, с нее начинается desktop версия
|
|
7
7
|
* @default 1024
|
|
@@ -9,7 +9,7 @@ type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view'> & {
|
|
|
9
9
|
breakpoint?: number;
|
|
10
10
|
};
|
|
11
11
|
type DateTimeInputMedia = 'desktop' | 'mobile';
|
|
12
|
-
declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<DateTimeInputProps, "view"> & {
|
|
12
|
+
declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<DateTimeInputProps, "view" | "InputComponent"> & {
|
|
13
13
|
/**
|
|
14
14
|
* Контрольная точка, с нее начинается desktop версия
|
|
15
15
|
* @default 1024
|
|
@@ -7,18 +7,21 @@ var React = require('react');
|
|
|
7
7
|
var hooks = require('@alfalab/hooks');
|
|
8
8
|
var Component_desktop = require('./Component.desktop.js');
|
|
9
9
|
var Component_mobile = require('./Component.mobile.js');
|
|
10
|
+
require('@alfalab/core-components-calendar/cssm/desktop');
|
|
11
|
+
require('@alfalab/core-components-input/cssm/desktop');
|
|
10
12
|
require('./components/date-time-input/Component.js');
|
|
11
13
|
require('react-merge-refs');
|
|
12
14
|
require('classnames');
|
|
13
|
-
require('@alfalab/core-components-calendar/cssm');
|
|
15
|
+
require('@alfalab/core-components-calendar/cssm/shared');
|
|
14
16
|
require('@alfalab/core-components-icon-button/cssm');
|
|
15
|
-
require('@alfalab/core-components-input/cssm');
|
|
16
17
|
require('@alfalab/core-components-popover/cssm');
|
|
17
18
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
18
19
|
require('./utils/format.js');
|
|
19
20
|
require('date-fns/isValid');
|
|
20
21
|
require('date-fns/parse');
|
|
21
22
|
require('./components/date-time-input/index.module.css');
|
|
23
|
+
require('@alfalab/core-components-calendar/cssm/mobile');
|
|
24
|
+
require('@alfalab/core-components-input/cssm/mobile');
|
|
22
25
|
|
|
23
26
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
24
27
|
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ChangeEvent, ElementType } from "react";
|
|
4
|
-
import {
|
|
4
|
+
import { CalendarDesktopProps } from "../../desktop-63dec22f";
|
|
5
|
+
import { CalendarMobileProps } from "../../mobile-c219f8ca";
|
|
5
6
|
import { InputProps } from "@alfalab/core-components-input";
|
|
6
7
|
import { PopoverProps } from "@alfalab/core-components-popover";
|
|
7
8
|
type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
|
|
@@ -42,7 +43,7 @@ type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
|
|
|
42
43
|
/**
|
|
43
44
|
* Доп. пропсы для календаря
|
|
44
45
|
*/
|
|
45
|
-
calendarProps?: (
|
|
46
|
+
calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
|
|
46
47
|
/**
|
|
47
48
|
* Месяц в календаре по умолчанию (timestamp)
|
|
48
49
|
*/
|
|
@@ -92,6 +93,10 @@ type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
|
|
|
92
93
|
* Отображение компонента в мобильном или десктопном виде
|
|
93
94
|
*/
|
|
94
95
|
view?: 'desktop' | 'mobile';
|
|
96
|
+
/**
|
|
97
|
+
* Компонент инпута
|
|
98
|
+
*/
|
|
99
|
+
InputComponent?: ElementType;
|
|
95
100
|
/**
|
|
96
101
|
* Запретить ввод с клавиатуры
|
|
97
102
|
*/
|
|
@@ -135,15 +140,17 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
|
|
|
135
140
|
/**
|
|
136
141
|
* Доп. пропсы для календаря
|
|
137
142
|
*/
|
|
138
|
-
calendarProps?: (
|
|
143
|
+
calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | (CalendarDesktopProps & {
|
|
139
144
|
open: boolean;
|
|
140
|
-
/**
|
|
141
|
-
* Дополнительный класс для поповера
|
|
142
|
-
*/
|
|
143
145
|
title?: string | undefined;
|
|
144
146
|
onClose?: (() => void) | undefined;
|
|
147
|
+
/**
|
|
148
|
+
* Обработчик изменения значения
|
|
149
|
+
*/
|
|
145
150
|
onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) => void) | undefined;
|
|
146
|
-
yearsAmount?: number | undefined;
|
|
151
|
+
yearsAmount?: number | undefined; /**
|
|
152
|
+
* Обработчик окончания ввода
|
|
153
|
+
*/
|
|
147
154
|
hasHeader?: boolean | undefined;
|
|
148
155
|
allowSelectionFromEmptyRange?: boolean | undefined;
|
|
149
156
|
} & Record<string, unknown>) | undefined;
|
|
@@ -195,7 +202,11 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
|
|
|
195
202
|
/**
|
|
196
203
|
* Отображение компонента в мобильном или десктопном виде
|
|
197
204
|
*/
|
|
198
|
-
view?: "
|
|
205
|
+
view?: "desktop" | "mobile" | undefined;
|
|
206
|
+
/**
|
|
207
|
+
* Компонент инпута
|
|
208
|
+
*/
|
|
209
|
+
InputComponent?: React.ElementType<any> | undefined;
|
|
199
210
|
/**
|
|
200
211
|
* Запретить ввод с клавиатуры
|
|
201
212
|
*/
|
|
@@ -6,9 +6,8 @@ var tslib = require('tslib');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var mergeRefs = require('react-merge-refs');
|
|
8
8
|
var cn = require('classnames');
|
|
9
|
-
var
|
|
9
|
+
var shared = require('@alfalab/core-components-calendar/cssm/shared');
|
|
10
10
|
var coreComponentsIconButton = require('@alfalab/core-components-icon-button/cssm');
|
|
11
|
-
var coreComponentsInput = require('@alfalab/core-components-input/cssm');
|
|
12
11
|
var coreComponentsPopover = require('@alfalab/core-components-popover/cssm');
|
|
13
12
|
var hooks = require('@alfalab/hooks');
|
|
14
13
|
var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
|
|
@@ -28,11 +27,11 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
|
28
27
|
var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
29
28
|
var _b, _c;
|
|
30
29
|
var _d;
|
|
31
|
-
var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, _e = _a.disableUserInput, disableUserInput = _e === void 0 ? false : _e, picker = _a.picker, _f = _a.defaultValue, defaultValue = _f === void 0 ? '' : _f, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _g = _a.popoverPosition, popoverPosition = _g === void 0 ? 'bottom-start' : _g, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip,
|
|
30
|
+
var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, _e = _a.disableUserInput, disableUserInput = _e === void 0 ? false : _e, picker = _a.picker, _f = _a.defaultValue, defaultValue = _f === void 0 ? '' : _f, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _g = _a.popoverPosition, popoverPosition = _g === void 0 ? 'bottom-start' : _g, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, InputComponent = _a.InputComponent, Calendar = _a.Calendar, _h = _a.calendarProps, calendarProps = _h === void 0 ? {} : _h, defaultMonth = _a.defaultMonth, _j = _a.minDate, minDate = _j === void 0 ? calendarProps.minDate : _j, _k = _a.maxDate, maxDate = _k === void 0 ? calendarProps.maxDate : _k, _l = _a.offDays, offDays = _l === void 0 ? calendarProps.offDays || [] : _l, _m = _a.events, events = _m === void 0 ? calendarProps.events || [] : _m, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, error = _a.error, _p = _a.view, view = _p === void 0 ? 'desktop' : _p, restProps = tslib.__rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "disableUserInput", "picker", "defaultValue", "value", "onChange", "onComplete", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "InputComponent", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen", "error", "view"]);
|
|
32
31
|
var inputRef = React.useRef(null);
|
|
33
32
|
var calendarRef = React.useRef(null);
|
|
34
|
-
var
|
|
35
|
-
var
|
|
33
|
+
var _q = React.useState(propValue || defaultValue), value = _q[0], setValue = _q[1];
|
|
34
|
+
var _r = React.useState(false), open = _r[0], setOpen = _r[1];
|
|
36
35
|
var calendarValue = value ? utils_format.getDateWithoutTime(value).getTime() : undefined;
|
|
37
36
|
var inputDisabled = disabled || readOnly;
|
|
38
37
|
var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
|
|
@@ -48,7 +47,7 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
48
47
|
return false;
|
|
49
48
|
var dateValue = utils_format.getDateWithoutTime(newInputValue).getTime();
|
|
50
49
|
return (dateValue &&
|
|
51
|
-
|
|
50
|
+
shared.dateInLimits(dateValue, minDate, maxDate) &&
|
|
52
51
|
!offDays.includes(dateValue));
|
|
53
52
|
};
|
|
54
53
|
var setTimeToDate = function () {
|
|
@@ -144,16 +143,18 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
144
143
|
inputRef.current.focus();
|
|
145
144
|
}
|
|
146
145
|
};
|
|
147
|
-
var renderCalendar = function () {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
React__default.default.createElement(
|
|
146
|
+
var renderCalendar = function () {
|
|
147
|
+
return Calendar ? (
|
|
148
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
149
|
+
React__default.default.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
150
|
+
React__default.default.createElement(Calendar, tslib.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleMobileCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(value) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))) : null;
|
|
151
|
+
};
|
|
151
152
|
return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {},
|
|
152
153
|
_b[styles__default.default.block] = block,
|
|
153
154
|
_b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
|
|
154
|
-
React__default.default.createElement(
|
|
155
|
+
InputComponent ? (React__default.default.createElement(InputComponent, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
|
|
155
156
|
rightAddons,
|
|
156
|
-
picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles__default.default.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) })),
|
|
157
|
+
picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles__default.default.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) }))) : null,
|
|
157
158
|
picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles__default.default.calendarContainer, (_c = {},
|
|
158
159
|
_c[styles__default.default.calendarResponsive] = calendarResponsive,
|
|
159
160
|
_c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
|
|
@@ -7,9 +7,8 @@ require('tslib');
|
|
|
7
7
|
require('react');
|
|
8
8
|
require('react-merge-refs');
|
|
9
9
|
require('classnames');
|
|
10
|
-
require('@alfalab/core-components-calendar/cssm');
|
|
10
|
+
require('@alfalab/core-components-calendar/cssm/shared');
|
|
11
11
|
require('@alfalab/core-components-icon-button/cssm');
|
|
12
|
-
require('@alfalab/core-components-input/cssm');
|
|
13
12
|
require('@alfalab/core-components-popover/cssm');
|
|
14
13
|
require('@alfalab/hooks');
|
|
15
14
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
package/cssm/desktop.js
CHANGED
|
@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var Component_desktop = require('./Component.desktop.js');
|
|
6
6
|
require('tslib');
|
|
7
7
|
require('react');
|
|
8
|
+
require('@alfalab/core-components-calendar/cssm/desktop');
|
|
9
|
+
require('@alfalab/core-components-input/cssm/desktop');
|
|
8
10
|
require('./components/date-time-input/Component.js');
|
|
9
11
|
require('react-merge-refs');
|
|
10
12
|
require('classnames');
|
|
11
|
-
require('@alfalab/core-components-calendar/cssm');
|
|
13
|
+
require('@alfalab/core-components-calendar/cssm/shared');
|
|
12
14
|
require('@alfalab/core-components-icon-button/cssm');
|
|
13
|
-
require('@alfalab/core-components-input/cssm');
|
|
14
15
|
require('@alfalab/core-components-popover/cssm');
|
|
15
16
|
require('@alfalab/hooks');
|
|
16
17
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { PaddingType } from "./index-72dda473";
|
|
4
|
+
declare const isClient: () => boolean;
|
|
5
|
+
declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
|
|
6
|
+
declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
|
|
7
|
+
declare function easeInOutQuad(x: number): number;
|
|
8
|
+
declare const easingFns: {
|
|
9
|
+
easeInOutQuad: typeof easeInOutQuad;
|
|
10
|
+
};
|
|
11
|
+
export { isClient, getDataTestId, createPaddingStyle, easingFns };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
|
|
2
|
+
type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
|
|
3
|
+
type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
|
|
4
|
+
type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
|
|
5
|
+
type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
|
|
6
|
+
type PaddingType = number | string | {
|
|
7
|
+
top?: number;
|
|
8
|
+
right?: number;
|
|
9
|
+
bottom?: number;
|
|
10
|
+
left?: number;
|
|
11
|
+
};
|
|
12
|
+
export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { ButtonHTMLAttributes, ElementType, FC } from "react";
|
|
4
|
+
interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
/**
|
|
6
|
+
* Вид компонента
|
|
7
|
+
*/
|
|
8
|
+
view: "desktop" | "mobile";
|
|
9
|
+
/**
|
|
10
|
+
* Дополнительный класс
|
|
11
|
+
*/
|
|
12
|
+
className?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Позиция крестика
|
|
15
|
+
*/
|
|
16
|
+
align?: "left" | "right";
|
|
17
|
+
/**
|
|
18
|
+
* Фиксирует крестик
|
|
19
|
+
*/
|
|
20
|
+
sticky?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Иконка
|
|
23
|
+
*/
|
|
24
|
+
icon?: ElementType;
|
|
25
|
+
/**
|
|
26
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
27
|
+
*/
|
|
28
|
+
dataTestId?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Коллбэк закрытия.
|
|
31
|
+
*/
|
|
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 };
|