mimir-ui-kit 1.21.1 → 1.21.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/assets/Drawer.css +1 -1
- package/dist/components/Drawer/Drawer.d.ts +1 -5
- package/dist/components/Drawer/Drawer.js +27 -29
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/useResizeObserver/getElement.d.ts +4 -0
- package/dist/hooks/useResizeObserver/getElement.js +18 -0
- package/dist/hooks/useResizeObserver/index.d.ts +1 -0
- package/dist/hooks/useResizeObserver/index.js +4 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.d.ts +17 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.js +49 -0
- package/dist/index.js +2 -0
- package/package.json +1 -1
package/dist/assets/Drawer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._drawer_1y1lk_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_1y1lk_3::-webkit-scrollbar{width:3px}._drawer_1y1lk_3::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:2px}._drawer_1y1lk_3::-webkit-scrollbar-track{background-color:var(--white)}._drawer_1y1lk_3 ._content_1y1lk_27{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_1y1lk_3 ._content_1y1lk_27{--drawer-width: 100%;padding:var(--space-m)}}._drawer_1y1lk_3 ._content_1y1lk_27._is-loading_1y1lk_41{align-items:center;justify-content:center}._drawer_1y1lk_3 ._header_1y1lk_45{display:flex;gap:var(--space-xs);min-height:68px}._drawer_1y1lk_3 ._header_1y1lk_45:not(:last-child){margin-bottom:var(--space-2xl)}._drawer_1y1lk_3 ._header_1y1lk_45._sticky-header_1y1lk_53{position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--black-5)}._drawer_1y1lk_3 ._header_1y1lk_45 ._title_1y1lk_59{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_1y1lk_3 ._header_1y1lk_45 ._title_1y1lk_59{font-size:var(--size-text-xl2);line-height:var(--line-height-text-xs)}}._drawer_1y1lk_3 ._header_1y1lk_45 ._space_1y1lk_73{flex:0 0 var(--button-height-m)}@media (max-width: 600px){._drawer_1y1lk_3 ._header_1y1lk_45{min-height:55px}._drawer_1y1lk_3 ._header_1y1lk_45:not(:last-child){margin-bottom:var(--space-m)}}._drawer_1y1lk_3 ._inner_1y1lk_84{flex:1}._drawer_1y1lk_3 ._button_1y1lk_87{position:absolute;top:var(--space-m);right:var(--space-m)}._drawer_1y1lk_3 ._footer_1y1lk_92{display:block;padding-top:var(--space-4xl)}@media (max-width: 600px){._drawer_1y1lk_3 ._footer_1y1lk_92{padding-top:var(--space-m)}}._drawer_1y1lk_3 ._footer-button_1y1lk_101{display:block;margin-left:auto}._drawer_1y1lk_3._left_1y1lk_105{top:0;left:-100%}._drawer_1y1lk_3._right_1y1lk_109{top:0;right:-100%}._drawer_1y1lk_3._full_1y1lk_113{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_1y1lk_3._bottom_1y1lk_123{right:50%;bottom:-100%;left:50%;height:-webkit-max-content;height:-moz-max-content;height:max-content;max-height:calc(100% - var(--space-xs));border-top-left-radius:var(--control-radius);border-top-right-radius:var(--control-radius);transform:translate(-50%)}._drawer_1y1lk_3._bottom_1y1lk_123._full-bottom-height_1y1lk_133{height:calc(100% - var(--space-xs))}._drawer_1y1lk_3._bottom_1y1lk_123._is-loading_1y1lk_41{height:50vh}._drawer_1y1lk_3._opened_1y1lk_139{transition:all .3s ease;pointer-events:auto}._drawer_1y1lk_3._opened_1y1lk_139._left_1y1lk_105{left:0%;transition:left .3s ease}._drawer_1y1lk_3._opened_1y1lk_139._right_1y1lk_109{right:0%;transition:right .3s ease}._drawer_1y1lk_3._opened_1y1lk_139._bottom_1y1lk_123{bottom:0%}._drawer_1y1lk_3._opened_1y1lk_139._full_1y1lk_113{transform:scale(1);opacity:1}._drawer_1y1lk_3._is-closing_1y1lk_158._left_1y1lk_105{left:-100%}._drawer_1y1lk_3._is-closing_1y1lk_158._right_1y1lk_109{right:-100%}._drawer_1y1lk_3._is-closing_1y1lk_158._bottom_1y1lk_123{bottom:-100%}._drawer_1y1lk_3._is-closing_1y1lk_158._full_1y1lk_113{transform:scale(.95);opacity:0}@media (max-width: 1440px){._drawer_1y1lk_3{--drawer-width: 608px}}@media (max-width: 1280px){._drawer_1y1lk_3{--drawer-width: 648px}}@media (max-width: 768px){._drawer_1y1lk_3{--drawer-width: 584px}}@media (max-width: 600px){._drawer_1y1lk_3{--drawer-width: 100%}._drawer_1y1lk_3._bottom_1y1lk_123{--drawer-width: calc(100% - var(--space-xs))}}._overlay_1y1lk_195{--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_1y1lk_195._opened_1y1lk_139{opacity:1;transition:all .3s ease}._overlay_1y1lk_195._is-closing_1y1lk_158{opacity:0;transition:all .3s ease}
|
|
@@ -14,10 +14,6 @@ type TProps = {
|
|
|
14
14
|
* Настраиваемый паддинг для body, что бы избежать скачка контента при overflow: hidden
|
|
15
15
|
*/
|
|
16
16
|
paddingRight?: number;
|
|
17
|
-
/**
|
|
18
|
-
* Дополнительная высота для учета нижнего сайдбара
|
|
19
|
-
*/
|
|
20
|
-
additionalHeight?: number;
|
|
21
17
|
/**
|
|
22
18
|
* Функция закрытия шторки
|
|
23
19
|
*/
|
|
@@ -52,5 +48,5 @@ type TProps = {
|
|
|
52
48
|
/**
|
|
53
49
|
* Компонент шторки, который может выезжать слева, справа или внизу.
|
|
54
50
|
*/
|
|
55
|
-
export declare const Drawer: ({ isOpen, onClose, title, className, isLoading, stickyHeader, fullBottomHeight, position, paddingRight,
|
|
51
|
+
export declare const Drawer: ({ isOpen, onClose, title, className, isLoading, stickyHeader, fullBottomHeight, position, paddingRight, footer, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
|
|
56
52
|
export {};
|
|
@@ -5,43 +5,44 @@ import { EDrawerPosition } from "./constants.js";
|
|
|
5
5
|
import { useMediaQuery } from "../../hooks/useMediaQuery/useMediaQuery.js";
|
|
6
6
|
import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
|
|
7
7
|
import { useLockBodyScroll } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
|
|
8
|
+
import { useResizeObserver } from "../../hooks/useResizeObserver/useResizeObserver.js";
|
|
8
9
|
import { Button } from "../Button/Button.js";
|
|
9
10
|
import { EButtonVariantDefault, EButtonSize } from "../Button/constants.js";
|
|
10
11
|
import { Loader } from "../Loader/Loader.js";
|
|
11
12
|
import { Portal } from "../Portal/Portal.js";
|
|
12
|
-
import '../../assets/Drawer.css';const drawer = "
|
|
13
|
-
const content = "
|
|
14
|
-
const header = "
|
|
15
|
-
const title = "
|
|
16
|
-
const space = "
|
|
17
|
-
const inner = "
|
|
18
|
-
const button = "
|
|
19
|
-
const footer = "
|
|
20
|
-
const left = "
|
|
21
|
-
const right = "
|
|
22
|
-
const full = "
|
|
23
|
-
const bottom = "
|
|
24
|
-
const opened = "
|
|
25
|
-
const overlay = "
|
|
13
|
+
import '../../assets/Drawer.css';const drawer = "_drawer_1y1lk_3";
|
|
14
|
+
const content = "_content_1y1lk_27";
|
|
15
|
+
const header = "_header_1y1lk_45";
|
|
16
|
+
const title = "_title_1y1lk_59";
|
|
17
|
+
const space = "_space_1y1lk_73";
|
|
18
|
+
const inner = "_inner_1y1lk_84";
|
|
19
|
+
const button = "_button_1y1lk_87";
|
|
20
|
+
const footer = "_footer_1y1lk_92";
|
|
21
|
+
const left = "_left_1y1lk_105";
|
|
22
|
+
const right = "_right_1y1lk_109";
|
|
23
|
+
const full = "_full_1y1lk_113";
|
|
24
|
+
const bottom = "_bottom_1y1lk_123";
|
|
25
|
+
const opened = "_opened_1y1lk_139";
|
|
26
|
+
const overlay = "_overlay_1y1lk_195";
|
|
26
27
|
const cls = {
|
|
27
28
|
drawer,
|
|
28
29
|
content,
|
|
29
|
-
"is-loading": "_is-
|
|
30
|
+
"is-loading": "_is-loading_1y1lk_41",
|
|
30
31
|
header,
|
|
31
|
-
"sticky-header": "_sticky-
|
|
32
|
+
"sticky-header": "_sticky-header_1y1lk_53",
|
|
32
33
|
title,
|
|
33
34
|
space,
|
|
34
35
|
inner,
|
|
35
36
|
button,
|
|
36
37
|
footer,
|
|
37
|
-
"footer-button": "_footer-
|
|
38
|
+
"footer-button": "_footer-button_1y1lk_101",
|
|
38
39
|
left,
|
|
39
40
|
right,
|
|
40
41
|
full,
|
|
41
42
|
bottom,
|
|
42
|
-
"full-bottom-height": "_full-bottom-
|
|
43
|
+
"full-bottom-height": "_full-bottom-height_1y1lk_133",
|
|
43
44
|
opened,
|
|
44
|
-
"is-closing": "_is-
|
|
45
|
+
"is-closing": "_is-closing_1y1lk_158",
|
|
45
46
|
overlay
|
|
46
47
|
};
|
|
47
48
|
const ANIMATION_DELAY = 300;
|
|
@@ -50,12 +51,11 @@ const Drawer = ({
|
|
|
50
51
|
onClose,
|
|
51
52
|
title: title2,
|
|
52
53
|
className,
|
|
53
|
-
isLoading,
|
|
54
|
+
isLoading = false,
|
|
54
55
|
stickyHeader,
|
|
55
56
|
fullBottomHeight = false,
|
|
56
57
|
position = EDrawerPosition.RIGHT,
|
|
57
58
|
paddingRight = 8,
|
|
58
|
-
additionalHeight = 0,
|
|
59
59
|
footer: footer2,
|
|
60
60
|
children
|
|
61
61
|
}) => {
|
|
@@ -63,9 +63,10 @@ const Drawer = ({
|
|
|
63
63
|
const [isMounted, setIsMounted] = useState(false);
|
|
64
64
|
const [isBodyScrollLocked, setIsBodyScrollLocked] = useState(false);
|
|
65
65
|
const timerRef = useRef();
|
|
66
|
-
const contentRef = useRef(null);
|
|
67
|
-
const isBottomPosition = position === EDrawerPosition.BOTTOM;
|
|
68
66
|
const isMobile = useMediaQuery(EMediaQuery.XS1);
|
|
67
|
+
const { ref } = useResizeObserver({
|
|
68
|
+
enabled: position === EDrawerPosition.BOTTOM
|
|
69
|
+
});
|
|
69
70
|
useLockBodyScroll({
|
|
70
71
|
on: isBodyScrollLocked,
|
|
71
72
|
paddingRight
|
|
@@ -103,26 +104,23 @@ const Drawer = ({
|
|
|
103
104
|
const mods = {
|
|
104
105
|
[cls.opened]: isMounted,
|
|
105
106
|
[cls["is-closing"]]: isClosing,
|
|
106
|
-
[cls["full-bottom-height"]]: fullBottomHeight
|
|
107
|
+
[cls["full-bottom-height"]]: fullBottomHeight,
|
|
108
|
+
[cls["is-loading"]]: isLoading
|
|
107
109
|
};
|
|
108
110
|
if (!isOpen) {
|
|
109
111
|
return null;
|
|
110
112
|
}
|
|
111
|
-
const bottomPositionHeight = isBottomPosition && contentRef.current && !fullBottomHeight ? contentRef.current.offsetHeight + additionalHeight : void 0;
|
|
112
113
|
return /* @__PURE__ */ jsxs(Portal, { children: [
|
|
113
114
|
/* @__PURE__ */ jsx(
|
|
114
115
|
"div",
|
|
115
116
|
{
|
|
116
117
|
"aria-hidden": !isOpen,
|
|
117
118
|
role: "dialog",
|
|
118
|
-
style: {
|
|
119
|
-
height: bottomPositionHeight
|
|
120
|
-
},
|
|
121
119
|
className: classNames(cls.drawer, cls[position], mods, className),
|
|
122
120
|
children: /* @__PURE__ */ jsx(
|
|
123
121
|
"section",
|
|
124
122
|
{
|
|
125
|
-
ref
|
|
123
|
+
ref,
|
|
126
124
|
className: classNames(cls.content, cls[position], {
|
|
127
125
|
[cls["is-loading"]]: Boolean(isLoading)
|
|
128
126
|
}),
|
package/dist/hooks/index.d.ts
CHANGED
package/dist/hooks/index.js
CHANGED
|
@@ -5,6 +5,7 @@ import { useInterval } from "./useInterval/useInterval.js";
|
|
|
5
5
|
import { useTimer } from "./useTimer/index.js";
|
|
6
6
|
import { useCopyToClipboard } from "./useCopyToClipboard/useCopyToClipboard.js";
|
|
7
7
|
import { useMergeRefs } from "./useMergeRefs/useMergeRefs.js";
|
|
8
|
+
import { useResizeObserver } from "./useResizeObserver/useResizeObserver.js";
|
|
8
9
|
export {
|
|
9
10
|
EMediaQuery,
|
|
10
11
|
EMinMediaQuery,
|
|
@@ -13,5 +14,6 @@ export {
|
|
|
13
14
|
useLockBodyScroll,
|
|
14
15
|
useMediaQuery,
|
|
15
16
|
useMergeRefs,
|
|
17
|
+
useResizeObserver,
|
|
16
18
|
useTimer
|
|
17
19
|
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
|
|
3
|
+
export type GetElementTarget = RefObject<Element | null | undefined> | (() => Element) | Element | Window | Document;
|
|
4
|
+
export declare const getElement: <Target extends GetElementTarget>(target: Target) => Element | (Target & Document) | (Target & Window) | null | undefined;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
const getElement = (target) => {
|
|
2
|
+
if (typeof target === "function") {
|
|
3
|
+
return target();
|
|
4
|
+
}
|
|
5
|
+
if (target instanceof Document) {
|
|
6
|
+
return target;
|
|
7
|
+
}
|
|
8
|
+
if (target instanceof Window) {
|
|
9
|
+
return target;
|
|
10
|
+
}
|
|
11
|
+
if (target instanceof Element) {
|
|
12
|
+
return target;
|
|
13
|
+
}
|
|
14
|
+
return target.current;
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
getElement
|
|
18
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useResizeObserver } from './useResizeObserver';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
|
|
3
|
+
export type UseResizeObserverTarget = RefObject<Element | null | undefined> | (() => Element) | Element;
|
|
4
|
+
export interface UseResizeObserverOptions extends ResizeObserverOptions {
|
|
5
|
+
enabled?: boolean;
|
|
6
|
+
onChange?: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
|
|
7
|
+
}
|
|
8
|
+
export interface UseResizeObserverReturn {
|
|
9
|
+
entries: ResizeObserverEntry[];
|
|
10
|
+
}
|
|
11
|
+
export interface UseResizeObserver {
|
|
12
|
+
<Target extends UseResizeObserverTarget | UseResizeObserverTarget[]>(target: Target, options?: UseResizeObserverOptions): UseResizeObserverReturn;
|
|
13
|
+
<Target extends UseResizeObserverTarget | UseResizeObserverTarget[]>(options?: UseResizeObserverOptions, target?: never): UseResizeObserverReturn & {
|
|
14
|
+
ref: (node: Target) => void;
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
export declare const useResizeObserver: UseResizeObserver;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { useState, useRef, useEffect } from "react";
|
|
2
|
+
import { getElement } from "./getElement.js";
|
|
3
|
+
const useResizeObserver = (...params) => {
|
|
4
|
+
const target = typeof params[0] === "object" && !("current" in params[0]) ? void 0 : params[0];
|
|
5
|
+
const options = target ? params[1] : params[0];
|
|
6
|
+
const enabled = (options == null ? void 0 : options.enabled) ?? true;
|
|
7
|
+
const [entries, setEntries] = useState([]);
|
|
8
|
+
const [internalRef, setInternalRef] = useState();
|
|
9
|
+
const internalOnChangeRef = useRef();
|
|
10
|
+
internalOnChangeRef.current = options == null ? void 0 : options.onChange;
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (!enabled && !target && !internalRef) return;
|
|
13
|
+
if (Array.isArray(target)) {
|
|
14
|
+
if (!target.length) return;
|
|
15
|
+
const observer2 = new ResizeObserver((entries2) => {
|
|
16
|
+
var _a;
|
|
17
|
+
setEntries(entries2);
|
|
18
|
+
(_a = internalOnChangeRef.current) == null ? void 0 : _a.call(internalOnChangeRef, entries2, observer2);
|
|
19
|
+
});
|
|
20
|
+
target.forEach((target2) => {
|
|
21
|
+
const element2 = getElement(target2);
|
|
22
|
+
if (!element2) return;
|
|
23
|
+
observer2.observe(element2, options);
|
|
24
|
+
});
|
|
25
|
+
return () => {
|
|
26
|
+
observer2.disconnect();
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
const element = target ? getElement(target) : internalRef;
|
|
30
|
+
if (!element) return;
|
|
31
|
+
const observer = new ResizeObserver((entries2) => {
|
|
32
|
+
var _a;
|
|
33
|
+
setEntries(entries2);
|
|
34
|
+
(_a = internalOnChangeRef.current) == null ? void 0 : _a.call(internalOnChangeRef, entries2, observer);
|
|
35
|
+
});
|
|
36
|
+
observer.observe(element, options);
|
|
37
|
+
return () => {
|
|
38
|
+
observer.disconnect();
|
|
39
|
+
};
|
|
40
|
+
}, [internalRef, target, options == null ? void 0 : options.box, enabled]);
|
|
41
|
+
if (target) return { entries };
|
|
42
|
+
return {
|
|
43
|
+
ref: setInternalRef,
|
|
44
|
+
entries
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
export {
|
|
48
|
+
useResizeObserver
|
|
49
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -50,6 +50,7 @@ import { useInterval } from "./hooks/useInterval/useInterval.js";
|
|
|
50
50
|
import { useTimer } from "./hooks/useTimer/index.js";
|
|
51
51
|
import { useCopyToClipboard } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
|
|
52
52
|
import { useMergeRefs } from "./hooks/useMergeRefs/useMergeRefs.js";
|
|
53
|
+
import { useResizeObserver } from "./hooks/useResizeObserver/useResizeObserver.js";
|
|
53
54
|
import { Icon } from "./icons/Icon.js";
|
|
54
55
|
import { formating } from "./utils/index.js";
|
|
55
56
|
import './assets/index.css';export {
|
|
@@ -118,6 +119,7 @@ import './assets/index.css';export {
|
|
|
118
119
|
useLockBodyScroll,
|
|
119
120
|
useMediaQuery,
|
|
120
121
|
useMergeRefs,
|
|
122
|
+
useResizeObserver,
|
|
121
123
|
useTimer,
|
|
122
124
|
useToast
|
|
123
125
|
};
|