@alfalab/core-components-gallery 5.2.12 → 5.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Component-89a3cf4c.d.ts +38 -0
- package/Component.js +4 -4
- package/buttons-5bf80e8b.d.ts +336 -0
- package/{buttons-40cc6ecb.js → buttons-5bf80e8b.js} +5 -5
- package/components/header/Component.js +2 -2
- package/components/header/buttons.js +2 -2
- package/components/header/index.css +6 -6
- package/components/header/index.js +2 -2
- package/components/header-info-block/Component.js +1 -1
- package/components/header-info-block/index.css +5 -5
- package/components/image-preview/Component.js +1 -1
- package/components/image-preview/index.css +13 -13
- package/components/image-viewer/component.js +1 -1
- package/components/image-viewer/index.css +19 -19
- package/components/image-viewer/index.js +1 -1
- package/components/image-viewer/slide.js +1 -1
- package/components/index.js +3 -3
- package/components/navigation-bar/Component.js +1 -1
- package/components/navigation-bar/index.css +6 -6
- package/cssm/Component-89a3cf4c.d.ts +38 -0
- package/cssm/Component.js +1 -1
- package/cssm/components/header/Component.js +1 -1
- package/cssm/components/header/buttons.js +4 -4
- package/cssm/components/header/index.js +1 -1
- package/cssm/components/index.js +1 -1
- package/cssm/index-89a3cf4c.d.ts +3 -0
- package/cssm/index-ebda875c.d.ts +35 -0
- package/cssm/index.js +1 -1
- package/cssm/types-ebda875c.d.ts +113 -0
- package/cssm/typings-9211a437.d.ts +95 -0
- package/esm/Component-89a3cf4c.d.ts +38 -0
- package/esm/Component.js +4 -4
- package/esm/buttons-d8c2f203.d.ts +336 -0
- package/esm/{buttons-b7c1eb79.js → buttons-d8c2f203.js} +5 -5
- package/esm/components/header/Component.js +2 -2
- package/esm/components/header/buttons.js +2 -2
- package/esm/components/header/index.css +6 -6
- package/esm/components/header/index.js +2 -2
- package/esm/components/header-info-block/Component.js +1 -1
- package/esm/components/header-info-block/index.css +5 -5
- package/esm/components/image-preview/Component.js +1 -1
- package/esm/components/image-preview/index.css +13 -13
- package/esm/components/image-viewer/component.js +1 -1
- package/esm/components/image-viewer/index.css +19 -19
- package/esm/components/image-viewer/index.js +1 -1
- package/esm/components/image-viewer/slide.js +1 -1
- package/esm/components/index.js +3 -3
- package/esm/components/navigation-bar/Component.js +1 -1
- package/esm/components/navigation-bar/index.css +6 -6
- package/esm/index-89a3cf4c.d.ts +3 -0
- package/esm/index-ebda875c.d.ts +35 -0
- package/esm/index.css +3 -3
- package/esm/index.js +3 -3
- package/esm/{slide-5ba1bee4.js → slide-7de3e914.js} +1 -1
- package/esm/types-ebda875c.d.ts +113 -0
- package/esm/typings-9211a437.d.ts +95 -0
- package/index-89a3cf4c.d.ts +3 -0
- package/index-ebda875c.d.ts +35 -0
- package/index.css +3 -3
- package/index.js +3 -3
- package/modern/Component-89a3cf4c.d.ts +38 -0
- package/modern/Component.js +4 -4
- package/modern/buttons-c09a58e5.d.ts +336 -0
- package/modern/{buttons-06fbdff4.js → buttons-c09a58e5.js} +5 -5
- package/modern/components/header/Component.js +2 -2
- package/modern/components/header/buttons.js +2 -2
- package/modern/components/header/index.css +6 -6
- package/modern/components/header/index.js +2 -2
- package/modern/components/header-info-block/Component.js +1 -1
- package/modern/components/header-info-block/index.css +5 -5
- package/modern/components/image-preview/Component.js +1 -1
- package/modern/components/image-preview/index.css +13 -13
- package/modern/components/image-viewer/component.js +1 -1
- package/modern/components/image-viewer/index.css +19 -19
- package/modern/components/image-viewer/index.js +1 -1
- package/modern/components/image-viewer/slide.js +1 -1
- package/modern/components/index.js +3 -3
- package/modern/components/navigation-bar/Component.js +1 -1
- package/modern/components/navigation-bar/index.css +6 -6
- package/modern/index-89a3cf4c.d.ts +3 -0
- package/modern/index-ebda875c.d.ts +35 -0
- package/modern/index.css +3 -3
- package/modern/index.js +3 -3
- package/modern/{slide-f15bedd3.js → slide-0c0b76a4.js} +1 -1
- package/modern/types-ebda875c.d.ts +113 -0
- package/modern/typings-9211a437.d.ts +95 -0
- package/package.json +5 -5
- package/{slide-51930e3c.js → slide-346fa78d.js} +1 -1
- package/src/Component.tsx +185 -0
- package/src/components/header/Component.tsx +86 -0
- package/src/components/header/buttons.tsx +78 -0
- package/src/components/header/index.module.css +30 -0
- package/src/components/header/index.tsx +1 -0
- package/src/components/header-info-block/Component.tsx +47 -0
- package/src/components/header-info-block/index.module.css +29 -0
- package/src/components/header-info-block/index.ts +1 -0
- package/src/components/image-preview/Component.tsx +88 -0
- package/src/components/image-preview/index.module.css +68 -0
- package/src/components/image-preview/index.tsx +1 -0
- package/src/components/image-preview/paths.ts +5 -0
- package/src/components/image-viewer/component.tsx +232 -0
- package/src/components/image-viewer/index.module.css +126 -0
- package/src/components/image-viewer/index.ts +1 -0
- package/src/components/image-viewer/paths.ts +5 -0
- package/src/components/image-viewer/slide.tsx +113 -0
- package/src/components/index.ts +4 -0
- package/src/components/navigation-bar/Component.tsx +96 -0
- package/src/components/navigation-bar/index.module.css +31 -0
- package/src/components/navigation-bar/index.ts +1 -0
- package/src/context.ts +47 -0
- package/src/index.module.css +17 -0
- package/src/index.ts +2 -0
- package/src/types.ts +13 -0
- package/src/utils/constants.ts +10 -0
- package/src/utils/index.ts +3 -0
- package/src/utils/split-filename.ts +17 -0
- package/src/utils/utils.ts +18 -0
- package/types-ebda875c.d.ts +113 -0
- package/typings-9211a437.d.ts +95 -0
- package/buttons-40cc6ecb.d.ts +0 -11
- package/esm/buttons-b7c1eb79.d.ts +0 -11
- package/modern/buttons-06fbdff4.d.ts +0 -11
- /package/esm/{slide-5ba1bee4.d.ts → slide-7de3e914.d.ts} +0 -0
- /package/modern/{slide-f15bedd3.d.ts → slide-0c0b76a4.d.ts} +0 -0
- /package/{slide-51930e3c.d.ts → slide-346fa78d.d.ts} +0 -0
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { FC } from "react";
|
|
4
|
+
import { BaseButtonProps } from "./typings-9211a437";
|
|
5
|
+
type SpinnerProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Управление видимостью компонента
|
|
8
|
+
*/
|
|
9
|
+
visible?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Размер компонента
|
|
12
|
+
*/
|
|
13
|
+
size?: "xs" | "s" | "m";
|
|
14
|
+
/**
|
|
15
|
+
* Дополнительный класс
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Идентификатор компонента в DOM
|
|
20
|
+
*/
|
|
21
|
+
id?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
24
|
+
*/
|
|
25
|
+
dataTestId?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Палитра, в контексте которой используется спиннер
|
|
28
|
+
*/
|
|
29
|
+
colors?: "default" | "inverted";
|
|
30
|
+
};
|
|
31
|
+
declare const Spinner: FC<SpinnerProps>;
|
|
32
|
+
/**
|
|
33
|
+
* Минимальное время отображения лоадера - 500мс,
|
|
34
|
+
* чтобы при быстрых ответах от сервера кнопка не «моргала».
|
|
35
|
+
*/
|
|
36
|
+
declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
|
|
37
|
+
declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
38
|
+
export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };
|
package/Component.js
CHANGED
|
@@ -17,10 +17,10 @@ require('./components/image-preview/paths.js');
|
|
|
17
17
|
require('./components/header-info-block/Component.js');
|
|
18
18
|
require('@alfalab/core-components-typography');
|
|
19
19
|
require('./utils/split-filename.js');
|
|
20
|
-
require('./buttons-
|
|
20
|
+
require('./buttons-5bf80e8b.js');
|
|
21
21
|
require('tslib');
|
|
22
22
|
require('@alfalab/core-components-icon-button');
|
|
23
|
-
require('@alfalab/core-components-tooltip');
|
|
23
|
+
require('@alfalab/core-components-tooltip/desktop');
|
|
24
24
|
require('@alfalab/icons-glyph/ArrowsInwardMIcon');
|
|
25
25
|
require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
|
|
26
26
|
require('@alfalab/icons-glyph/CrossMIcon');
|
|
@@ -30,7 +30,7 @@ require('swiper');
|
|
|
30
30
|
require('swiper/react');
|
|
31
31
|
require('@alfalab/icons-glyph/ChevronBackHeavyMIcon');
|
|
32
32
|
require('@alfalab/icons-glyph/ChevronForwardHeavyMIcon');
|
|
33
|
-
require('./slide-
|
|
33
|
+
require('./slide-346fa78d.js');
|
|
34
34
|
require('./components/image-viewer/paths.js');
|
|
35
35
|
require('swiper/swiper.min.css');
|
|
36
36
|
|
|
@@ -38,7 +38,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
38
38
|
|
|
39
39
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
40
40
|
|
|
41
|
-
var styles = {"container":"
|
|
41
|
+
var styles = {"container":"gallery__container_1iwsa","modal":"gallery__modal_1iwsa"};
|
|
42
42
|
require('./index.css')
|
|
43
43
|
|
|
44
44
|
var Backdrop = function () { return null; };
|
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
/// <reference types="react-transition-group" />
|
|
2
|
+
/// <reference types="react" />
|
|
3
|
+
import { FC, MutableRefObject, ReactElement, ReactNode, RefObject, CSSProperties, MouseEvent } from "react";
|
|
4
|
+
import { TransitionProps } from "react-transition-group/Transition";
|
|
5
|
+
import { NavigationBarProps } from "./types-ebda875c";
|
|
6
|
+
import { CSSTransitionProps, CSSTransitionClassNames } from "react-transition-group/CSSTransition";
|
|
7
|
+
import { BasePlacement, VariationPlacement } from "@popperjs/core";
|
|
8
|
+
import { SwipeableHandlers } from "react-swipeable";
|
|
9
|
+
import { IconButtonProps } from "@alfalab/core-components-icon-button";
|
|
10
|
+
type RefElement = HTMLElement | null;
|
|
11
|
+
type Position = BasePlacement | VariationPlacement;
|
|
12
|
+
type PopoverProps = {
|
|
13
|
+
/**
|
|
14
|
+
* Управление состоянием поповера (открыт/закрыт)
|
|
15
|
+
*/
|
|
16
|
+
open: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Элемент, относительного которого появляется поповер
|
|
19
|
+
*/
|
|
20
|
+
anchorElement: RefElement;
|
|
21
|
+
/**
|
|
22
|
+
* Использовать ширину родительского элемента
|
|
23
|
+
*/
|
|
24
|
+
useAnchorWidth?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Позиционирование поповера
|
|
27
|
+
*/
|
|
28
|
+
position?: Position;
|
|
29
|
+
/**
|
|
30
|
+
* Запрещает поповеру менять свою позицию.
|
|
31
|
+
* Например, если места снизу недостаточно,то он все равно будет показан снизу
|
|
32
|
+
*/
|
|
33
|
+
preventFlip?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
|
|
36
|
+
*/
|
|
37
|
+
preventOverflow?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
|
|
40
|
+
*/
|
|
41
|
+
availableHeight?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Если `true`, будет отрисована стрелочка
|
|
44
|
+
*/
|
|
45
|
+
withArrow?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Смещение поповера.
|
|
48
|
+
* Если позиционирование top, bottom, то [x, y].
|
|
49
|
+
* Если позиционирование left, right то [y, x].
|
|
50
|
+
*/
|
|
51
|
+
offset?: [
|
|
52
|
+
number,
|
|
53
|
+
number
|
|
54
|
+
];
|
|
55
|
+
/**
|
|
56
|
+
* Дополнительный класс для поповера
|
|
57
|
+
*/
|
|
58
|
+
popperClassName?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Дополнительный класс для стрелочки
|
|
61
|
+
*/
|
|
62
|
+
arrowClassName?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Функция, возвращающая контейнер, в который будет рендериться поповер
|
|
65
|
+
*/
|
|
66
|
+
getPortalContainer?: () => HTMLElement;
|
|
67
|
+
/**
|
|
68
|
+
* CSSTransitionProps, прокидываются в компонент CSSTransitionProps.
|
|
69
|
+
*/
|
|
70
|
+
transition?: CSSTransitionProps;
|
|
71
|
+
/**
|
|
72
|
+
* Выставляет кастомное свойство transition-duration
|
|
73
|
+
*/
|
|
74
|
+
transitionDuration?: CSSProperties["transitionDuration"];
|
|
75
|
+
/**
|
|
76
|
+
* Рендерит компонент, обернутый в Transition
|
|
77
|
+
*/
|
|
78
|
+
withTransition?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
81
|
+
*/
|
|
82
|
+
dataTestId?: string;
|
|
83
|
+
/**
|
|
84
|
+
* Хранит функцию, с помощью которой можно обновить положение компонента
|
|
85
|
+
*/
|
|
86
|
+
update?: MutableRefObject<() => void>;
|
|
87
|
+
/**
|
|
88
|
+
* Дополнительный класс
|
|
89
|
+
*/
|
|
90
|
+
className?: string;
|
|
91
|
+
/**
|
|
92
|
+
* z-index компонента
|
|
93
|
+
*/
|
|
94
|
+
zIndex?: number;
|
|
95
|
+
/**
|
|
96
|
+
* Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,
|
|
97
|
+
* по очереди для каждой позиции из этого списка.
|
|
98
|
+
* Если не передавать, то поповер открывается в противоположном направлении от переданного position.
|
|
99
|
+
*/
|
|
100
|
+
fallbackPlacements?: Position[];
|
|
101
|
+
/**
|
|
102
|
+
* Контент
|
|
103
|
+
*/
|
|
104
|
+
children?: ReactNode;
|
|
105
|
+
};
|
|
106
|
+
type Trigger = "click" | "hover";
|
|
107
|
+
type TooltipDesktopProps = {
|
|
108
|
+
/**
|
|
109
|
+
* Контент тултипа
|
|
110
|
+
*/
|
|
111
|
+
content: ReactNode;
|
|
112
|
+
/**
|
|
113
|
+
* Позиционирование тултипа
|
|
114
|
+
*/
|
|
115
|
+
position?: Position;
|
|
116
|
+
/**
|
|
117
|
+
* Задержка перед открытием тултипа
|
|
118
|
+
*/
|
|
119
|
+
onOpenDelay?: number;
|
|
120
|
+
/**
|
|
121
|
+
* Задержка перед закрытием тултипа
|
|
122
|
+
*/
|
|
123
|
+
onCloseDelay?: number;
|
|
124
|
+
/**
|
|
125
|
+
* Обработчик открытия тултипа
|
|
126
|
+
*/
|
|
127
|
+
onOpen?: () => void;
|
|
128
|
+
/**
|
|
129
|
+
* Обработчик закрытия тултипа
|
|
130
|
+
*/
|
|
131
|
+
onClose?: () => void;
|
|
132
|
+
/**
|
|
133
|
+
* Событие, по которому происходит открытие тултипа
|
|
134
|
+
*/
|
|
135
|
+
trigger?: Trigger;
|
|
136
|
+
/**
|
|
137
|
+
* Если `true`, то тултип будет открыт
|
|
138
|
+
*/
|
|
139
|
+
open?: boolean;
|
|
140
|
+
/**
|
|
141
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
142
|
+
*/
|
|
143
|
+
dataTestId?: string;
|
|
144
|
+
/**
|
|
145
|
+
* Дочерние элементы тултипа.
|
|
146
|
+
* При срабатывании событий на них, тултип будет открываться
|
|
147
|
+
*/
|
|
148
|
+
children: ReactElement;
|
|
149
|
+
/**
|
|
150
|
+
* Смещение тултипа
|
|
151
|
+
*/
|
|
152
|
+
offset?: [
|
|
153
|
+
number,
|
|
154
|
+
number
|
|
155
|
+
];
|
|
156
|
+
/**
|
|
157
|
+
* Функция, возвращающая контейнер, в который будет рендериться тултип
|
|
158
|
+
*/
|
|
159
|
+
getPortalContainer?: () => HTMLElement;
|
|
160
|
+
/**
|
|
161
|
+
* Дополнительный класс для стрелочки
|
|
162
|
+
*/
|
|
163
|
+
arrowClassName?: string;
|
|
164
|
+
/**
|
|
165
|
+
* Дополнительный класс для контента
|
|
166
|
+
*/
|
|
167
|
+
contentClassName?: string;
|
|
168
|
+
/**
|
|
169
|
+
* Дополнительный класс для поповера
|
|
170
|
+
*/
|
|
171
|
+
popoverClassName?: string;
|
|
172
|
+
/**
|
|
173
|
+
* Дополнительный класс для обертки над дочерними элементами
|
|
174
|
+
*/
|
|
175
|
+
targetClassName?: string;
|
|
176
|
+
/**
|
|
177
|
+
* Вид тултипа
|
|
178
|
+
*/
|
|
179
|
+
view?: "tooltip" | "hint";
|
|
180
|
+
/**
|
|
181
|
+
* Хранит функцию, с помощью которой можно обновить положение компонента
|
|
182
|
+
*/
|
|
183
|
+
updatePopover?: PopoverProps["update"];
|
|
184
|
+
/**
|
|
185
|
+
* z-index компонента
|
|
186
|
+
*/
|
|
187
|
+
zIndex?: number;
|
|
188
|
+
/**
|
|
189
|
+
* Реф для обертки над дочерними элементами
|
|
190
|
+
*/
|
|
191
|
+
targetRef?: MutableRefObject<HTMLElement | null>;
|
|
192
|
+
/**
|
|
193
|
+
* Если тултип не помещается в переданной позиции (position), он попробует открыться в другой позиции,
|
|
194
|
+
* по очереди для каждой позиции из этого списка.
|
|
195
|
+
* Если не передавать, то тултип открывается в противоположном направлении от переданного position.
|
|
196
|
+
*/
|
|
197
|
+
fallbackPlacements?: PopoverProps["fallbackPlacements"];
|
|
198
|
+
/**
|
|
199
|
+
* Запрещает тултипу менять свою позицию, если он не влезает в видимую область.
|
|
200
|
+
*/
|
|
201
|
+
preventOverflow?: PopoverProps["preventOverflow"];
|
|
202
|
+
/**
|
|
203
|
+
* Позволяет тултипу подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
|
|
204
|
+
*/
|
|
205
|
+
availableHeight?: PopoverProps["availableHeight"];
|
|
206
|
+
/**
|
|
207
|
+
* Элемент, относительно которого будет позиционировать тултип.
|
|
208
|
+
*/
|
|
209
|
+
anchor?: PopoverProps["anchorElement"];
|
|
210
|
+
/**
|
|
211
|
+
* Набор цветов для компонента
|
|
212
|
+
*/
|
|
213
|
+
colors?: "default" | "inverted";
|
|
214
|
+
/**
|
|
215
|
+
* Использовать ширину родительского элемента
|
|
216
|
+
*/
|
|
217
|
+
useAnchorWidth?: boolean;
|
|
218
|
+
};
|
|
219
|
+
declare const TooltipDesktop: FC<TooltipDesktopProps>;
|
|
220
|
+
type PortalProps = {
|
|
221
|
+
/** Контент */
|
|
222
|
+
children?: ReactNode;
|
|
223
|
+
/**
|
|
224
|
+
* Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
|
|
225
|
+
*/
|
|
226
|
+
getPortalContainer?: () => Element;
|
|
227
|
+
/**
|
|
228
|
+
* Немедленно отрендерить дочерние элементы (false - контент будет отрендерен на след. рендер).
|
|
229
|
+
*/
|
|
230
|
+
immediateMount?: boolean;
|
|
231
|
+
};
|
|
232
|
+
declare const Portal: import("react").ForwardRefExoticComponent<PortalProps & import("react").RefAttributes<Element>>;
|
|
233
|
+
/**
|
|
234
|
+
* Набор констант для z-index соответствующих классов компонентов.
|
|
235
|
+
* Значения выбраны по приоритету.
|
|
236
|
+
*/
|
|
237
|
+
declare const stackingOrder: {
|
|
238
|
+
FOCUSED: number;
|
|
239
|
+
DEFAULT: number;
|
|
240
|
+
POPOVER: number;
|
|
241
|
+
MODAL: number;
|
|
242
|
+
TOAST: number;
|
|
243
|
+
};
|
|
244
|
+
declare const StackingContext: import("react").Context<number>;
|
|
245
|
+
type StackProps = {
|
|
246
|
+
/**
|
|
247
|
+
* Render prop, в который передается функция.
|
|
248
|
+
* Функция принимает аргумент со значением z-index из текущего контекста.
|
|
249
|
+
*/
|
|
250
|
+
children: (value: number) => ReactNode;
|
|
251
|
+
/**
|
|
252
|
+
* Исходное значение для z-index.
|
|
253
|
+
* @default 5
|
|
254
|
+
*/
|
|
255
|
+
value?: number;
|
|
256
|
+
};
|
|
257
|
+
declare const Stack: FC<StackProps>;
|
|
258
|
+
declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
|
|
259
|
+
declare const getDefaultPortalContainer: () => Element;
|
|
260
|
+
declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
|
|
261
|
+
type FooterProps = {
|
|
262
|
+
/**
|
|
263
|
+
* Контент футера
|
|
264
|
+
*/
|
|
265
|
+
children?: ReactNode;
|
|
266
|
+
/**
|
|
267
|
+
* Фиксирует футер
|
|
268
|
+
*/
|
|
269
|
+
sticky?: boolean;
|
|
270
|
+
/**
|
|
271
|
+
* Дополнительный класс
|
|
272
|
+
*/
|
|
273
|
+
className?: string;
|
|
274
|
+
};
|
|
275
|
+
declare const Footer: FC<FooterProps>;
|
|
276
|
+
type HeaderProps = Omit<NavigationBarProps, "view" | "size"> & {
|
|
277
|
+
headerRef: RefObject<HTMLDivElement>;
|
|
278
|
+
headerOffset: number;
|
|
279
|
+
};
|
|
280
|
+
declare const Header: FC<HeaderProps>;
|
|
281
|
+
type BackdropProps = Partial<TransitionProps> & {
|
|
282
|
+
/**
|
|
283
|
+
* Прозрачный бэкдроп
|
|
284
|
+
*/
|
|
285
|
+
invisible?: boolean;
|
|
286
|
+
/**
|
|
287
|
+
* Управляет видимостью компонента
|
|
288
|
+
*/
|
|
289
|
+
open: boolean;
|
|
290
|
+
/**
|
|
291
|
+
* Обработчик клика по бэкдропу
|
|
292
|
+
*/
|
|
293
|
+
onClose?: (event: MouseEvent<HTMLElement>) => void;
|
|
294
|
+
/**
|
|
295
|
+
* Дополнительный класс
|
|
296
|
+
*/
|
|
297
|
+
className?: string;
|
|
298
|
+
/**
|
|
299
|
+
* Классы анимации
|
|
300
|
+
*
|
|
301
|
+
* http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
|
|
302
|
+
*/
|
|
303
|
+
transitionClassNames?: string | CSSTransitionClassNames;
|
|
304
|
+
/**
|
|
305
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
306
|
+
*/
|
|
307
|
+
dataTestId?: string;
|
|
308
|
+
/**
|
|
309
|
+
* Дочерние элементы.
|
|
310
|
+
*/
|
|
311
|
+
children?: ReactNode;
|
|
312
|
+
};
|
|
313
|
+
type SwipeableBackdropProps = BackdropProps & {
|
|
314
|
+
/**
|
|
315
|
+
* Прозрачность бэкдропа
|
|
316
|
+
*/
|
|
317
|
+
opacity?: number;
|
|
318
|
+
/**
|
|
319
|
+
* Обработчики свайпа
|
|
320
|
+
*/
|
|
321
|
+
handlers?: SwipeableHandlers;
|
|
322
|
+
/**
|
|
323
|
+
* Время анимации opacity
|
|
324
|
+
*/
|
|
325
|
+
opacityTimeout?: number;
|
|
326
|
+
};
|
|
327
|
+
declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
|
|
328
|
+
type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
|
|
329
|
+
buttonRef?: MutableRefObject<HTMLButtonElement | null>;
|
|
330
|
+
download?: string | boolean;
|
|
331
|
+
};
|
|
332
|
+
declare const Fullscreen: FC<Props>;
|
|
333
|
+
declare const ExitFullscreen: FC<Props>;
|
|
334
|
+
declare const Download: FC<Props>;
|
|
335
|
+
declare const Exit: FC<Props>;
|
|
336
|
+
export { TooltipDesktop, TooltipDesktopProps, PortalProps, Portal, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, FooterProps, Footer, HeaderProps, Header, SwipeableBackdropProps, SwipeableBackdrop, Fullscreen, ExitFullscreen, Download, Exit };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var tslib = require('tslib');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
|
|
6
|
-
var
|
|
6
|
+
var desktop = require('@alfalab/core-components-tooltip/desktop');
|
|
7
7
|
var ArrowsInwardMIcon = require('@alfalab/icons-glyph/ArrowsInwardMIcon');
|
|
8
8
|
var ArrowsOutwardMIcon = require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
|
|
9
9
|
var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
|
|
@@ -13,20 +13,20 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
|
|
14
14
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
15
|
|
|
16
|
-
var styles = {"header":"
|
|
16
|
+
var styles = {"header":"gallery__header_1t8xm","buttons":"gallery__buttons_1t8xm","iconButton":"gallery__iconButton_1t8xm"};
|
|
17
17
|
require('./components/header/index.css')
|
|
18
18
|
|
|
19
19
|
var Fullscreen = function (_a) {
|
|
20
20
|
var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
|
|
21
|
-
return (React__default.default.createElement(
|
|
21
|
+
return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
|
|
22
22
|
React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsOutwardMIcon.ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton }))));
|
|
23
23
|
};
|
|
24
24
|
var ExitFullscreen = function (_a) {
|
|
25
25
|
var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
|
|
26
|
-
return (React__default.default.createElement(
|
|
26
|
+
return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
|
|
27
27
|
React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsInwardMIcon.ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton }))));
|
|
28
28
|
};
|
|
29
|
-
var Download = function (props) { return (React__default.default.createElement(
|
|
29
|
+
var Download = function (props) { return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
|
|
30
30
|
React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: PointerDownMIcon.PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })))); };
|
|
31
31
|
var Exit = function (props) { return (React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: CrossMIcon.CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }))); };
|
|
32
32
|
|
|
@@ -7,12 +7,12 @@ var context = require('../../context.js');
|
|
|
7
7
|
var utils_utils = require('../../utils/utils.js');
|
|
8
8
|
var utils_constants = require('../../utils/constants.js');
|
|
9
9
|
var components_headerInfoBlock_Component = require('../header-info-block/Component.js');
|
|
10
|
-
var components_header_buttons = require('../../buttons-
|
|
10
|
+
var components_header_buttons = require('../../buttons-5bf80e8b.js');
|
|
11
11
|
require('@alfalab/core-components-typography');
|
|
12
12
|
require('../../utils/split-filename.js');
|
|
13
13
|
require('tslib');
|
|
14
14
|
require('@alfalab/core-components-icon-button');
|
|
15
|
-
require('@alfalab/core-components-tooltip');
|
|
15
|
+
require('@alfalab/core-components-tooltip/desktop');
|
|
16
16
|
require('@alfalab/icons-glyph/ArrowsInwardMIcon');
|
|
17
17
|
require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
|
|
18
18
|
require('@alfalab/icons-glyph/CrossMIcon');
|
|
@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
require('tslib');
|
|
6
6
|
require('react');
|
|
7
7
|
require('@alfalab/core-components-icon-button');
|
|
8
|
-
require('@alfalab/core-components-tooltip');
|
|
8
|
+
require('@alfalab/core-components-tooltip/desktop');
|
|
9
9
|
require('@alfalab/icons-glyph/ArrowsInwardMIcon');
|
|
10
10
|
require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
|
|
11
11
|
require('@alfalab/icons-glyph/CrossMIcon');
|
|
12
12
|
require('@alfalab/icons-glyph/PointerDownMIcon');
|
|
13
|
-
var components_header_buttons = require('../../buttons-
|
|
13
|
+
var components_header_buttons = require('../../buttons-5bf80e8b.js');
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1vv78 */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-static-graphic-light: #fff; /* 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 */
|
|
@@ -20,20 +20,20 @@
|
|
|
20
20
|
--gap-2xl: 32px;
|
|
21
21
|
} :root {
|
|
22
22
|
} :root {
|
|
23
|
-
} .
|
|
23
|
+
} .gallery__header_1t8xm {
|
|
24
24
|
display: flex;
|
|
25
25
|
justify-content: space-between;
|
|
26
26
|
flex-shrink: 0;
|
|
27
27
|
width: 100%;
|
|
28
28
|
padding: var(--gap-m) var(--gap-xl);
|
|
29
29
|
box-sizing: border-box;
|
|
30
|
-
} .
|
|
30
|
+
} .gallery__buttons_1t8xm {
|
|
31
31
|
display: flex;
|
|
32
32
|
padding-left: var(--gap-2xl)
|
|
33
|
-
} .
|
|
33
|
+
} .gallery__buttons_1t8xm path {
|
|
34
34
|
color: var(--color-static-graphic-light);
|
|
35
|
-
} /* TODO: применять static цвет через prop IconButton'а */ .
|
|
35
|
+
} /* TODO: применять static цвет через prop IconButton'а */ .gallery__iconButton_1t8xm:hover path {
|
|
36
36
|
color: var(--color-static-graphic-light-shade-7);
|
|
37
|
-
} .
|
|
37
|
+
} .gallery__iconButton_1t8xm:active path {
|
|
38
38
|
color: var(--color-static-graphic-light-shade-15);
|
|
39
39
|
}
|
|
@@ -10,10 +10,10 @@ require('../../utils/constants.js');
|
|
|
10
10
|
require('../header-info-block/Component.js');
|
|
11
11
|
require('@alfalab/core-components-typography');
|
|
12
12
|
require('../../utils/split-filename.js');
|
|
13
|
-
require('../../buttons-
|
|
13
|
+
require('../../buttons-5bf80e8b.js');
|
|
14
14
|
require('tslib');
|
|
15
15
|
require('@alfalab/core-components-icon-button');
|
|
16
|
-
require('@alfalab/core-components-tooltip');
|
|
16
|
+
require('@alfalab/core-components-tooltip/desktop');
|
|
17
17
|
require('@alfalab/icons-glyph/ArrowsInwardMIcon');
|
|
18
18
|
require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
|
|
19
19
|
require('@alfalab/icons-glyph/CrossMIcon');
|
|
@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
12
12
|
|
|
13
|
-
var styles = {"info":"
|
|
13
|
+
var styles = {"info":"gallery__info_16xy6","filenameHead":"gallery__filenameHead_16xy6","filenameContainer":"gallery__filenameContainer_16xy6","description":"gallery__description_16xy6"};
|
|
14
14
|
require('./index.css')
|
|
15
15
|
|
|
16
16
|
var HeaderInfoBlock = function (_a) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: xzkl4 */
|
|
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 */
|
|
@@ -15,21 +15,21 @@
|
|
|
15
15
|
--gap-2xs: 4px;
|
|
16
16
|
} :root {
|
|
17
17
|
} :root {
|
|
18
|
-
} .
|
|
18
|
+
} .gallery__info_16xy6 {
|
|
19
19
|
height: 100%;
|
|
20
20
|
display: flex;
|
|
21
21
|
flex-direction: column;
|
|
22
22
|
justify-content: center;
|
|
23
23
|
overflow: hidden;
|
|
24
|
-
} .
|
|
24
|
+
} .gallery__filenameHead_16xy6 {
|
|
25
25
|
display: inline;
|
|
26
26
|
text-overflow: ellipsis;
|
|
27
27
|
overflow: hidden;
|
|
28
28
|
white-space: nowrap;
|
|
29
|
-
} .
|
|
29
|
+
} .gallery__filenameContainer_16xy6 {
|
|
30
30
|
overflow: hidden;
|
|
31
31
|
display: inline-flex;
|
|
32
|
-
} .
|
|
32
|
+
} .gallery__description_16xy6 {
|
|
33
33
|
display: inline;
|
|
34
34
|
text-overflow: ellipsis;
|
|
35
35
|
overflow: hidden;
|
|
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
14
14
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
15
15
|
|
|
16
|
-
var styles = {"component":"
|
|
16
|
+
var styles = {"component":"gallery__component_2msh2","active":"gallery__active_2msh2","image":"gallery__image_2msh2","preview":"gallery__preview_2msh2","loading":"gallery__loading_2msh2","brokenImageWrapper":"gallery__brokenImageWrapper_2msh2","brokenIcon":"gallery__brokenIcon_2msh2","focused":"gallery__focused_2msh2"};
|
|
17
17
|
require('./index.css')
|
|
18
18
|
|
|
19
19
|
var ImagePreview = function (_a) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: ogcve */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-bg-primary: #fff;
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
} :root {
|
|
24
24
|
} :root {
|
|
25
25
|
--focus-color: var(--color-light-border-link);
|
|
26
|
-
} .
|
|
26
|
+
} .gallery__component_2msh2 {
|
|
27
27
|
display: flex;
|
|
28
28
|
padding: var(--gap-2xs);
|
|
29
29
|
border: 2px solid rgba(0, 0, 0, 0);
|
|
@@ -31,11 +31,11 @@
|
|
|
31
31
|
overflow: hidden;
|
|
32
32
|
transition: border 0.15s ease-in-out;
|
|
33
33
|
outline: none;
|
|
34
|
-
} .
|
|
34
|
+
} .gallery__active_2msh2 {
|
|
35
35
|
border-color: var(--color-static-overlay-white-xhigh)
|
|
36
|
-
} .
|
|
36
|
+
} .gallery__active_2msh2 > .gallery__image_2msh2 {
|
|
37
37
|
opacity: 0.7;
|
|
38
|
-
} .
|
|
38
|
+
} .gallery__preview_2msh2 {
|
|
39
39
|
width: 56px;
|
|
40
40
|
height: 56px;
|
|
41
41
|
flex-shrink: 0;
|
|
@@ -43,29 +43,29 @@
|
|
|
43
43
|
cursor: pointer;
|
|
44
44
|
-webkit-user-select: none;
|
|
45
45
|
user-select: none;
|
|
46
|
-
} .
|
|
46
|
+
} .gallery__image_2msh2 {
|
|
47
47
|
background-color: var(--color-light-bg-primary);
|
|
48
48
|
background-size: cover;
|
|
49
49
|
background-repeat: no-repeat;
|
|
50
50
|
background-position: center;
|
|
51
51
|
transition: opacity 0.15s ease-in-out
|
|
52
|
-
} .
|
|
52
|
+
} .gallery__image_2msh2:hover {
|
|
53
53
|
opacity: 0.7;
|
|
54
|
-
} .
|
|
54
|
+
} .gallery__loading_2msh2 {
|
|
55
55
|
background-color: var(--color-static-bg-secondary-dark)
|
|
56
|
-
} .
|
|
56
|
+
} .gallery__loading_2msh2 .gallery__active_2msh2 {
|
|
57
57
|
background-color: var(--color-static-bg-quaternary-dark);
|
|
58
|
-
} .
|
|
58
|
+
} .gallery__brokenImageWrapper_2msh2 {
|
|
59
59
|
display: flex;
|
|
60
60
|
justify-content: center;
|
|
61
61
|
align-items: center;
|
|
62
62
|
background-color: var(--color-static-bg-quaternary-dark)
|
|
63
|
-
} .
|
|
63
|
+
} .gallery__brokenImageWrapper_2msh2:hover {
|
|
64
64
|
opacity: 0.7;
|
|
65
|
-
} .
|
|
65
|
+
} .gallery__brokenIcon_2msh2 {
|
|
66
66
|
width: 40px;
|
|
67
67
|
height: 40px;
|
|
68
|
-
} .
|
|
68
|
+
} .gallery__focused_2msh2 {
|
|
69
69
|
outline: 2px solid var(--focus-color);
|
|
70
70
|
outline-offset: 2px;
|
|
71
71
|
}
|
|
@@ -14,7 +14,7 @@ var ChevronForwardHeavyMIcon = require('@alfalab/icons-glyph/ChevronForwardHeavy
|
|
|
14
14
|
var context = require('../../context.js');
|
|
15
15
|
var utils_utils = require('../../utils/utils.js');
|
|
16
16
|
var utils_constants = require('../../utils/constants.js');
|
|
17
|
-
var components_imageViewer_slide = require('../../slide-
|
|
17
|
+
var components_imageViewer_slide = require('../../slide-346fa78d.js');
|
|
18
18
|
require('swiper/swiper.min.css');
|
|
19
19
|
require('@alfalab/core-components-typography');
|
|
20
20
|
require('./paths.js');
|