mimir-ui-kit 1.20.5 → 1.20.6
Sign up to get free protection for your applications and to get access to all the features.
package/dist/assets/Drawer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._drawer_knrhj_3{--drawer-width: 808px;--drawer-z-index: 10000;position:fixed;z-index:10000;z-index:var(--drawer-z-index);display:flex;flex-direction:column;width:808px;width:var(--drawer-width);height:100%;overflow:auto;background-color:var(--black-5);transition:all .3s ease;pointer-events:none}._drawer_knrhj_3 ._content_knrhj_17{position:relative;display:flex;flex:1;flex-direction:column;padding:var(--space-m) var(--space-4xl) var(--space-4xl);transition:all .3s ease}@media (max-width: 600px){._drawer_knrhj_3 ._content_knrhj_17{--drawer-width: 100%;padding:var(--space-m)}}._drawer_knrhj_3 ._content_knrhj_17._is-loading_knrhj_31{align-items:center;justify-content:center}._drawer_knrhj_3 ._header_knrhj_35{display:flex;gap:var(--space-xs);height:68px}._drawer_knrhj_3 ._header_knrhj_35:not(:last-child){margin-bottom:var(--space-2xl)}._drawer_knrhj_3 ._header_knrhj_35 ._title_knrhj_43{flex:1;align-self:flex-end;font-weight:var(--font-weight-text-medium);font-size:var(--size-text-xl3);line-height:var(--line-height-text-s1);letter-spacing:.7px}@media (max-width: 600px){._drawer_knrhj_3 ._header_knrhj_35 ._title_knrhj_43{font-size:var(--size-text-xl2);line-height:var(--line-height-text-xs)}}._drawer_knrhj_3 ._header_knrhj_35 ._space_knrhj_57{flex:0 0 var(--button-height-m)}@media (max-width: 600px){._drawer_knrhj_3 ._header_knrhj_35{height:55px}._drawer_knrhj_3 ._header_knrhj_35:not(:last-child){margin-bottom:var(--space-m)}}._drawer_knrhj_3 ._inner_knrhj_68{flex:1}._drawer_knrhj_3 ._button_knrhj_71{position:absolute;top:var(--space-m);right:var(--space-m)}._drawer_knrhj_3 ._footer_knrhj_76{display:block;padding-top:var(--space-4xl)}@media (max-width: 600px){._drawer_knrhj_3 ._footer_knrhj_76{padding-top:var(--space-m)}}._drawer_knrhj_3 ._footer-button_knrhj_85{display:block;margin-left:auto}._drawer_knrhj_3._left_knrhj_89{top:0;left:-100%}._drawer_knrhj_3._right_knrhj_93{top:0;right:-100%}._drawer_knrhj_3._full_knrhj_97{top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-height:100vh;border-radius:0;transform:scale(.95);opacity:0;transition:transform .3s ease-in-out,opacity .3s ease-in-out}._drawer_knrhj_3._bottom_knrhj_107{right:50%;bottom:-100%;left:50%;max-height:80vh;border-top-left-radius:var(--control-radius);border-top-right-radius:var(--control-radius);transform:translate(-50%)}._drawer_knrhj_3._opened_knrhj_116{transition:all .3s ease;pointer-events:auto}._drawer_knrhj_3._opened_knrhj_116._left_knrhj_89{left:0%;transition:left .3s ease}._drawer_knrhj_3._opened_knrhj_116._right_knrhj_93{right:0%;transition:right .3s ease}._drawer_knrhj_3._opened_knrhj_116._bottom_knrhj_107{bottom:0%}._drawer_knrhj_3._opened_knrhj_116._full_knrhj_97{transform:scale(1);opacity:1}._drawer_knrhj_3._is-closing_knrhj_135._left_knrhj_89{left:-100%}._drawer_knrhj_3._is-closing_knrhj_135._right_knrhj_93{right:-100%}._drawer_knrhj_3._is-closing_knrhj_135._bottom_knrhj_107{bottom:-100%}._drawer_knrhj_3._is-closing_knrhj_135._full_knrhj_97{transform:scale(.95);opacity:0}@media (max-width: 1440px){._drawer_knrhj_3{--drawer-width: 608px}}@media (max-width: 1280px){._drawer_knrhj_3{--drawer-width: 648px}}@media (max-width: 768px){._drawer_knrhj_3{--drawer-width: 584px}}@media (max-width: 600px){._drawer_knrhj_3{--drawer-width: 100%}._drawer_knrhj_3._bottom_knrhj_107{max-width:359px}}._overlay_knrhj_172{--overlay-z-index: 9990;position:fixed;top:0;left:0;z-index:9990;z-index:var(--overlay-z-index);width:100%;height:100%;background-color:#0009;opacity:0;transition:all .3s ease}._overlay_knrhj_172._opened_knrhj_116{opacity:1;transition:all .3s ease}._overlay_knrhj_172._is-closing_knrhj_135{opacity:0;transition:all .3s ease}
|
|
@@ -26,6 +26,10 @@ type TProps = {
|
|
|
26
26
|
* Дополнительный класс для родительской обертки.
|
|
27
27
|
*/
|
|
28
28
|
className?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Флаг отвечающий за загрузку
|
|
31
|
+
*/
|
|
32
|
+
isLoading?: boolean;
|
|
29
33
|
/**
|
|
30
34
|
* Позиция шторки.
|
|
31
35
|
*/
|
|
@@ -40,5 +44,5 @@ type TProps = {
|
|
|
40
44
|
/**
|
|
41
45
|
* Компонент шторки, который может выезжать слева, справа или внизу.
|
|
42
46
|
*/
|
|
43
|
-
export declare const Drawer: ({ isOpen, onClose, title, className, position, paddingRight, additionalHeight, footer, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
|
|
47
|
+
export declare const Drawer: ({ isOpen, onClose, title, className, isLoading, position, paddingRight, additionalHeight, footer, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
|
|
44
48
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import { useState, useRef, useCallback, useEffect } from "react";
|
|
4
4
|
import { EDrawerPosition } from "./constants.js";
|
|
@@ -7,37 +7,39 @@ import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
|
|
|
7
7
|
import { useLockBodyScroll } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
|
|
8
8
|
import { Button } from "../Button/Button.js";
|
|
9
9
|
import { EButtonVariantDefault, EButtonSize } from "../Button/constants.js";
|
|
10
|
+
import { Loader } from "../Loader/Loader.js";
|
|
10
11
|
import { Portal } from "../Portal/Portal.js";
|
|
11
|
-
import '../../assets/Drawer.css';const drawer = "
|
|
12
|
-
const content = "
|
|
13
|
-
const header = "
|
|
14
|
-
const title = "
|
|
15
|
-
const space = "
|
|
16
|
-
const inner = "
|
|
17
|
-
const button = "
|
|
18
|
-
const footer = "
|
|
19
|
-
const left = "
|
|
20
|
-
const right = "
|
|
21
|
-
const full = "
|
|
22
|
-
const bottom = "
|
|
23
|
-
const opened = "
|
|
24
|
-
const overlay = "
|
|
12
|
+
import '../../assets/Drawer.css';const drawer = "_drawer_knrhj_3";
|
|
13
|
+
const content = "_content_knrhj_17";
|
|
14
|
+
const header = "_header_knrhj_35";
|
|
15
|
+
const title = "_title_knrhj_43";
|
|
16
|
+
const space = "_space_knrhj_57";
|
|
17
|
+
const inner = "_inner_knrhj_68";
|
|
18
|
+
const button = "_button_knrhj_71";
|
|
19
|
+
const footer = "_footer_knrhj_76";
|
|
20
|
+
const left = "_left_knrhj_89";
|
|
21
|
+
const right = "_right_knrhj_93";
|
|
22
|
+
const full = "_full_knrhj_97";
|
|
23
|
+
const bottom = "_bottom_knrhj_107";
|
|
24
|
+
const opened = "_opened_knrhj_116";
|
|
25
|
+
const overlay = "_overlay_knrhj_172";
|
|
25
26
|
const cls = {
|
|
26
27
|
drawer,
|
|
27
28
|
content,
|
|
29
|
+
"is-loading": "_is-loading_knrhj_31",
|
|
28
30
|
header,
|
|
29
31
|
title,
|
|
30
32
|
space,
|
|
31
33
|
inner,
|
|
32
34
|
button,
|
|
33
35
|
footer,
|
|
34
|
-
"footer-button": "_footer-
|
|
36
|
+
"footer-button": "_footer-button_knrhj_85",
|
|
35
37
|
left,
|
|
36
38
|
right,
|
|
37
39
|
full,
|
|
38
40
|
bottom,
|
|
39
41
|
opened,
|
|
40
|
-
"is-closing": "_is-
|
|
42
|
+
"is-closing": "_is-closing_knrhj_135",
|
|
41
43
|
overlay
|
|
42
44
|
};
|
|
43
45
|
const ANIMATION_DELAY = 300;
|
|
@@ -46,6 +48,7 @@ const Drawer = ({
|
|
|
46
48
|
onClose,
|
|
47
49
|
title: title2,
|
|
48
50
|
className,
|
|
51
|
+
isLoading,
|
|
49
52
|
position = EDrawerPosition.RIGHT,
|
|
50
53
|
paddingRight = 8,
|
|
51
54
|
additionalHeight = 0,
|
|
@@ -110,33 +113,41 @@ const Drawer = ({
|
|
|
110
113
|
minHeight: isBottomPosition && contentRef.current ? contentRef.current.offsetHeight + additionalHeight : void 0
|
|
111
114
|
},
|
|
112
115
|
className: classNames(cls.drawer, cls[position], mods, className),
|
|
113
|
-
children: /* @__PURE__ */
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
className: cls
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
116
|
+
children: /* @__PURE__ */ jsx(
|
|
117
|
+
"section",
|
|
118
|
+
{
|
|
119
|
+
className: classNames(cls.content, cls[position], {
|
|
120
|
+
[cls["is-loading"]]: Boolean(isLoading)
|
|
121
|
+
}),
|
|
122
|
+
children: isLoading ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
123
|
+
/* @__PURE__ */ jsxs("header", { className: cls.header, children: [
|
|
124
|
+
/* @__PURE__ */ jsx("h2", { className: cls.title, children: title2 }),
|
|
125
|
+
/* @__PURE__ */ jsx("div", { className: cls.space, children: /* @__PURE__ */ jsx(
|
|
126
|
+
Button,
|
|
127
|
+
{
|
|
128
|
+
variant: EButtonVariantDefault.SecondaryWhite,
|
|
129
|
+
isIconButton: true,
|
|
130
|
+
size: isMobile ? EButtonSize.S : EButtonSize.M,
|
|
131
|
+
iconName: "Close16px",
|
|
132
|
+
onClick: handleClose,
|
|
133
|
+
className: cls.button
|
|
134
|
+
}
|
|
135
|
+
) })
|
|
136
|
+
] }),
|
|
137
|
+
/* @__PURE__ */ jsx("div", { ref: contentRef, className: cls.inner, children }),
|
|
138
|
+
/* @__PURE__ */ jsx("footer", { className: cls.footer, children: typeof footer2 === "function" ? footer2({ handleClose }) : footer2 || /* @__PURE__ */ jsx(
|
|
139
|
+
Button,
|
|
140
|
+
{
|
|
141
|
+
size: isMobile ? EButtonSize.M : EButtonSize.XXL,
|
|
142
|
+
full: isMobile,
|
|
143
|
+
onClick: handleClose,
|
|
144
|
+
className: cls["footer-button"],
|
|
145
|
+
children: "Закрыть"
|
|
146
|
+
}
|
|
147
|
+
) })
|
|
148
|
+
] })
|
|
149
|
+
}
|
|
150
|
+
)
|
|
140
151
|
}
|
|
141
152
|
),
|
|
142
153
|
/* @__PURE__ */ jsx("div", { className: classNames(cls.overlay, mods), onClick: handleClose })
|