@snack-uikit/drawer 0.4.6-preview-85c5f47b.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/CHANGELOG.md +256 -0
- package/LICENSE +201 -0
- package/README.md +81 -0
- package/dist/components/Drawer/Drawer.d.ts +28 -0
- package/dist/components/Drawer/Drawer.js +25 -0
- package/dist/components/Drawer/index.d.ts +1 -0
- package/dist/components/Drawer/index.js +1 -0
- package/dist/components/Drawer/styles.module.css +3 -0
- package/dist/components/DrawerCustom/DrawerCustom.d.ts +44 -0
- package/dist/components/DrawerCustom/DrawerCustom.js +34 -0
- package/dist/components/DrawerCustom/constants.d.ts +5 -0
- package/dist/components/DrawerCustom/constants.js +13 -0
- package/dist/components/DrawerCustom/index.d.ts +1 -0
- package/dist/components/DrawerCustom/index.js +1 -0
- package/dist/components/DrawerCustom/motion.css +63 -0
- package/dist/components/DrawerCustom/styles.module.css +53 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +2 -0
- package/dist/constants.d.ts +29 -0
- package/dist/constants.js +32 -0
- package/dist/helperComponents/Body/Body.d.ts +10 -0
- package/dist/helperComponents/Body/Body.js +21 -0
- package/dist/helperComponents/Body/index.d.ts +1 -0
- package/dist/helperComponents/Body/index.js +1 -0
- package/dist/helperComponents/Body/styles.module.css +8 -0
- package/dist/helperComponents/ButtonClose/ButtonClose.d.ts +5 -0
- package/dist/helperComponents/ButtonClose/ButtonClose.js +7 -0
- package/dist/helperComponents/ButtonClose/index.d.ts +1 -0
- package/dist/helperComponents/ButtonClose/index.js +1 -0
- package/dist/helperComponents/ButtonClose/styles.module.css +35 -0
- package/dist/helperComponents/Footer/Footer.d.ts +10 -0
- package/dist/helperComponents/Footer/Footer.js +21 -0
- package/dist/helperComponents/Footer/index.d.ts +1 -0
- package/dist/helperComponents/Footer/index.js +1 -0
- package/dist/helperComponents/Footer/styles.module.css +17 -0
- package/dist/helperComponents/Header/Header.d.ts +20 -0
- package/dist/helperComponents/Header/Header.js +23 -0
- package/dist/helperComponents/Header/index.d.ts +1 -0
- package/dist/helperComponents/Header/index.js +1 -0
- package/dist/helperComponents/Header/styles.module.css +35 -0
- package/dist/helperComponents/index.d.ts +4 -0
- package/dist/helperComponents/index.js +4 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +46 -0
- package/src/components/Drawer/Drawer.tsx +95 -0
- package/src/components/Drawer/index.ts +1 -0
- package/src/components/Drawer/styles.module.scss +3 -0
- package/src/components/DrawerCustom/DrawerCustom.tsx +117 -0
- package/src/components/DrawerCustom/constants.ts +18 -0
- package/src/components/DrawerCustom/index.ts +1 -0
- package/src/components/DrawerCustom/motion.css +63 -0
- package/src/components/DrawerCustom/styles.module.scss +64 -0
- package/src/components/index.ts +2 -0
- package/src/constants.ts +34 -0
- package/src/helperComponents/Body/Body.tsx +23 -0
- package/src/helperComponents/Body/index.ts +1 -0
- package/src/helperComponents/Body/styles.module.scss +10 -0
- package/src/helperComponents/ButtonClose/ButtonClose.tsx +21 -0
- package/src/helperComponents/ButtonClose/index.ts +1 -0
- package/src/helperComponents/ButtonClose/styles.module.scss +44 -0
- package/src/helperComponents/Footer/Footer.tsx +25 -0
- package/src/helperComponents/Footer/index.ts +1 -0
- package/src/helperComponents/Footer/styles.module.scss +17 -0
- package/src/helperComponents/Header/Header.tsx +64 -0
- package/src/helperComponents/Header/index.ts +1 -0
- package/src/helperComponents/Header/styles.module.scss +36 -0
- package/src/helperComponents/index.ts +4 -0
- package/src/index.ts +1 -0
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import 'rc-drawer/assets/index.css';
|
|
14
|
+
import cn from 'classnames';
|
|
15
|
+
import RcDrawer from 'rc-drawer';
|
|
16
|
+
import { extractSupportProps } from '@snack-uikit/utils';
|
|
17
|
+
import { Mode, Position, Size, SIZE_AS_VALUES } from '../../constants';
|
|
18
|
+
import { ButtonClose, DrawerBody, DrawerFooter, DrawerHeader, } from '../../helperComponents';
|
|
19
|
+
import { motionProps } from './constants';
|
|
20
|
+
import styles from './styles.module.css';
|
|
21
|
+
function DrawerCustomComponent(_a) {
|
|
22
|
+
var { open, mode = Mode.Regular, position = Position.Right, onClose, rootClassName, className, size = Size.S, push, container, children, nestedDrawer } = _a, rest = __rest(_a, ["open", "mode", "position", "onClose", "rootClassName", "className", "size", "push", "container", "children", "nestedDrawer"]);
|
|
23
|
+
const isRegular = mode === Mode.Regular;
|
|
24
|
+
const isPredefinedSize = typeof size === 'string' && SIZE_AS_VALUES.includes(size);
|
|
25
|
+
return (_jsxs(RcDrawer, Object.assign({ mask: isRegular, maskClosable: isRegular, maskClassName: styles.mask, keyboard: isRegular, width: isPredefinedSize ? 'null' : size, open: open, placement: position, destroyOnClose: true, push: push, onClose: onClose, getContainer: container, className: cn(styles.drawer, className), rootClassName: cn(styles.drawerRoot, rootClassName) }, extractSupportProps(rest), { "data-content-wrapper": true, "data-size": isPredefinedSize ? size : undefined, "data-mode": mode }, motionProps, { children: [_jsx("div", Object.assign({ className: styles.headerElements }, { children: _jsx(ButtonClose, { onClick: onClose }) })), children, nestedDrawer] })));
|
|
26
|
+
}
|
|
27
|
+
/** Компонент-конструктор */
|
|
28
|
+
export const DrawerCustom = DrawerCustomComponent;
|
|
29
|
+
DrawerCustom.modes = Mode;
|
|
30
|
+
DrawerCustom.positions = Position;
|
|
31
|
+
DrawerCustom.sizes = Size;
|
|
32
|
+
DrawerCustom.Header = DrawerHeader;
|
|
33
|
+
DrawerCustom.Body = DrawerBody;
|
|
34
|
+
DrawerCustom.Footer = DrawerFooter;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import './motion.css';
|
|
2
|
+
export const maskMotion = {
|
|
3
|
+
motionAppear: true,
|
|
4
|
+
motionName: 'maskMotion',
|
|
5
|
+
};
|
|
6
|
+
export const motion = placement => ({
|
|
7
|
+
motionAppear: true,
|
|
8
|
+
motionName: `panelMotion-${placement}`,
|
|
9
|
+
});
|
|
10
|
+
export const motionProps = {
|
|
11
|
+
maskMotion,
|
|
12
|
+
motion,
|
|
13
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DrawerCustom';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DrawerCustom';
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
.maskMotion {
|
|
2
|
+
opacity: unset;
|
|
3
|
+
}
|
|
4
|
+
.maskMotion-enter, .maskMotion-appear {
|
|
5
|
+
opacity: 0;
|
|
6
|
+
}
|
|
7
|
+
.maskMotion-enter-active, .maskMotion-appear-active {
|
|
8
|
+
opacity: 1;
|
|
9
|
+
transition: opacity 0.2s;
|
|
10
|
+
}
|
|
11
|
+
.maskMotion-leave {
|
|
12
|
+
opacity: 1;
|
|
13
|
+
}
|
|
14
|
+
.maskMotion-leave-active {
|
|
15
|
+
opacity: 0;
|
|
16
|
+
transition: opacity 0.1s;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.panelMotion {
|
|
20
|
+
transform: unset;
|
|
21
|
+
}
|
|
22
|
+
.panelMotion-left-enter-start, .panelMotion-left-appear-start, .panelMotion-left-leave-start {
|
|
23
|
+
transition: none !important;
|
|
24
|
+
}
|
|
25
|
+
.panelMotion-left-enter-active, .panelMotion-left-appear-active {
|
|
26
|
+
transition: transform 0.2s ease-in-out;
|
|
27
|
+
}
|
|
28
|
+
.panelMotion-left-leave-active {
|
|
29
|
+
transition: transform 0.1s ease-out;
|
|
30
|
+
}
|
|
31
|
+
.panelMotion-left-enter, .panelMotion-left-appear {
|
|
32
|
+
transform: translateX(-100%);
|
|
33
|
+
}
|
|
34
|
+
.panelMotion-left-enter-active, .panelMotion-left-appear-active {
|
|
35
|
+
transform: translateX(0);
|
|
36
|
+
}
|
|
37
|
+
.panelMotion-left-leave {
|
|
38
|
+
transform: translateX(0);
|
|
39
|
+
}
|
|
40
|
+
.panelMotion-left-leave-active {
|
|
41
|
+
transform: translateX(-100%) !important;
|
|
42
|
+
}
|
|
43
|
+
.panelMotion-right-enter-start, .panelMotion-right-appear-start, .panelMotion-right-leave-start {
|
|
44
|
+
transition: none !important;
|
|
45
|
+
}
|
|
46
|
+
.panelMotion-right-enter-active, .panelMotion-right-appear-active {
|
|
47
|
+
transition: transform 0.2s ease-in-out;
|
|
48
|
+
}
|
|
49
|
+
.panelMotion-right-leave-active {
|
|
50
|
+
transition: transform 0.1s ease-out;
|
|
51
|
+
}
|
|
52
|
+
.panelMotion-right-enter, .panelMotion-right-appear {
|
|
53
|
+
transform: translateX(100%);
|
|
54
|
+
}
|
|
55
|
+
.panelMotion-right-enter-active, .panelMotion-right-appear-active {
|
|
56
|
+
transform: translateX(0);
|
|
57
|
+
}
|
|
58
|
+
.panelMotion-right-leave {
|
|
59
|
+
transform: translateX(0);
|
|
60
|
+
}
|
|
61
|
+
.panelMotion-right-leave-active {
|
|
62
|
+
transform: translateX(100%) !important;
|
|
63
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
.drawerRoot{
|
|
2
|
+
z-index:auto !important;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
div[data-content-wrapper=true]{
|
|
6
|
+
will-change:transform;
|
|
7
|
+
z-index:auto;
|
|
8
|
+
overflow:unset;
|
|
9
|
+
max-width:calc(100% - var(--space-drawer-outside-gap, 24px));
|
|
10
|
+
height:100%;
|
|
11
|
+
}
|
|
12
|
+
div[data-content-wrapper=true][data-size=s]{
|
|
13
|
+
min-width:var(--size-drawer-min-width-s, 304px);
|
|
14
|
+
width:var(--size-drawer-width-s, 464px);
|
|
15
|
+
}
|
|
16
|
+
div[data-content-wrapper=true][data-size=m]{
|
|
17
|
+
min-width:var(--size-drawer-min-width-m, 304px);
|
|
18
|
+
width:var(--size-drawer-width-m, 864px);
|
|
19
|
+
}
|
|
20
|
+
div[data-content-wrapper=true][data-size=l]{
|
|
21
|
+
min-width:var(--size-drawer-min-width-l, 304px);
|
|
22
|
+
width:var(--size-drawer-width-l, 1872px);
|
|
23
|
+
}
|
|
24
|
+
div[data-content-wrapper=true][data-mode=regular] .drawer{
|
|
25
|
+
background-color:var(--sys-neutral-background1-level, #f9f9f9);
|
|
26
|
+
}
|
|
27
|
+
div[data-content-wrapper=true][data-mode=soft] .drawer{
|
|
28
|
+
background-color:var(--sys-neutral-background2-level, #fdfdfd);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.drawer{
|
|
32
|
+
overflow:unset;
|
|
33
|
+
display:flex;
|
|
34
|
+
flex-direction:column;
|
|
35
|
+
box-sizing:border-box;
|
|
36
|
+
box-shadow:var(--box-shadow-elevation-level5, 0px 0px 16px 0px rgba(0, 0, 0, 0.0784313725), 0px 24px 16px 0px rgba(0, 0, 0, 0.0784313725));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.headerElements{
|
|
40
|
+
padding-top:var(--space-drawer-header-elements-top, 32px);
|
|
41
|
+
padding-right:var(--space-drawer-header-elements-side, 32px);
|
|
42
|
+
gap:var(--dimension-theme-general-16px, 16px);
|
|
43
|
+
position:absolute;
|
|
44
|
+
top:0;
|
|
45
|
+
right:0;
|
|
46
|
+
display:flex;
|
|
47
|
+
align-items:center;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.mask{
|
|
51
|
+
z-index:auto !important;
|
|
52
|
+
background-color:var(--sys-blackout, rgba(0, 0, 0, 0.4784313725));
|
|
53
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export declare enum Size {
|
|
2
|
+
S = "s",
|
|
3
|
+
M = "m",
|
|
4
|
+
L = "l"
|
|
5
|
+
}
|
|
6
|
+
export declare const SIZE_AS_VALUES: string[];
|
|
7
|
+
export declare enum Mode {
|
|
8
|
+
Regular = "regular",
|
|
9
|
+
Soft = "soft"
|
|
10
|
+
}
|
|
11
|
+
export declare enum Position {
|
|
12
|
+
Right = "right",
|
|
13
|
+
Left = "left"
|
|
14
|
+
}
|
|
15
|
+
export declare const NESTED_DRAWER_PUSH_DISTANCE = 24;
|
|
16
|
+
export declare const TEST_IDS: {
|
|
17
|
+
closeButton: string;
|
|
18
|
+
header: string;
|
|
19
|
+
title: string;
|
|
20
|
+
tooltip: string;
|
|
21
|
+
subtitle: string;
|
|
22
|
+
image: string;
|
|
23
|
+
content: string;
|
|
24
|
+
footer: string;
|
|
25
|
+
footerActions: string;
|
|
26
|
+
approveButton: string;
|
|
27
|
+
cancelButton: string;
|
|
28
|
+
additionalButton: string;
|
|
29
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export var Size;
|
|
2
|
+
(function (Size) {
|
|
3
|
+
Size["S"] = "s";
|
|
4
|
+
Size["M"] = "m";
|
|
5
|
+
Size["L"] = "l";
|
|
6
|
+
})(Size || (Size = {}));
|
|
7
|
+
export const SIZE_AS_VALUES = Object.values(Size);
|
|
8
|
+
export var Mode;
|
|
9
|
+
(function (Mode) {
|
|
10
|
+
Mode["Regular"] = "regular";
|
|
11
|
+
Mode["Soft"] = "soft";
|
|
12
|
+
})(Mode || (Mode = {}));
|
|
13
|
+
export var Position;
|
|
14
|
+
(function (Position) {
|
|
15
|
+
Position["Right"] = "right";
|
|
16
|
+
Position["Left"] = "left";
|
|
17
|
+
})(Position || (Position = {}));
|
|
18
|
+
export const NESTED_DRAWER_PUSH_DISTANCE = 24;
|
|
19
|
+
export const TEST_IDS = {
|
|
20
|
+
closeButton: 'drawer__close-button',
|
|
21
|
+
header: 'drawer__header',
|
|
22
|
+
title: 'drawer__title',
|
|
23
|
+
tooltip: 'drawer__title-tooltip',
|
|
24
|
+
subtitle: 'drawer__subtitle',
|
|
25
|
+
image: 'drawer__image',
|
|
26
|
+
content: 'drawer__body',
|
|
27
|
+
footer: 'drawer__footer',
|
|
28
|
+
footerActions: 'drawer__footer-actions',
|
|
29
|
+
approveButton: 'drawer__approve-button',
|
|
30
|
+
cancelButton: 'drawer__cancel-button',
|
|
31
|
+
additionalButton: 'drawer__additional-button',
|
|
32
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { WithSupportProps } from '@snack-uikit/utils';
|
|
3
|
+
export type DrawerBodyProps = WithSupportProps<{
|
|
4
|
+
/** Контент */
|
|
5
|
+
content: ReactNode;
|
|
6
|
+
/** CSS-класс */
|
|
7
|
+
className?: string;
|
|
8
|
+
}>;
|
|
9
|
+
/** Вспомогательный компонент для добавления "тела" в DrawerCustom */
|
|
10
|
+
export declare function DrawerBody({ content, className, ...rest }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import cn from 'classnames';
|
|
14
|
+
import { Scroll } from '@snack-uikit/scroll';
|
|
15
|
+
import { extractSupportProps } from '@snack-uikit/utils';
|
|
16
|
+
import styles from './styles.module.css';
|
|
17
|
+
/** Вспомогательный компонент для добавления "тела" в DrawerCustom */
|
|
18
|
+
export function DrawerBody(_a) {
|
|
19
|
+
var { content, className } = _a, rest = __rest(_a, ["content", "className"]);
|
|
20
|
+
return (_jsx(Scroll, Object.assign({ size: Scroll.sizes.M, className: cn(styles.drawerBody, className) }, extractSupportProps(rest), { children: content })));
|
|
21
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Body';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Body';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { CrossSVG } from '@snack-uikit/icons';
|
|
3
|
+
import { TEST_IDS } from '../../constants';
|
|
4
|
+
import styles from './styles.module.css';
|
|
5
|
+
export function ButtonClose({ onClick }) {
|
|
6
|
+
return (_jsx("button", Object.assign({ className: styles.buttonClose, onClick: onClick, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton }, { children: _jsx(CrossSVG, {}) })));
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ButtonClose';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ButtonClose';
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
.buttonClose{
|
|
2
|
+
width:var(--size-drawer-button-close, 32px);
|
|
3
|
+
height:var(--size-drawer-button-close, 32px);
|
|
4
|
+
border-radius:var(--radius-drawer-button-close, 16px);
|
|
5
|
+
cursor:pointer;
|
|
6
|
+
display:flex;
|
|
7
|
+
align-items:center;
|
|
8
|
+
justify-content:center;
|
|
9
|
+
box-sizing:border-box;
|
|
10
|
+
margin:0;
|
|
11
|
+
padding:0;
|
|
12
|
+
color:var(--sys-neutral-text-support, #565656);
|
|
13
|
+
background-color:var(--sys-neutral-decor-default, #dedede);
|
|
14
|
+
border:0 solid transparent;
|
|
15
|
+
outline:0;
|
|
16
|
+
outline-offset:var(--spacing-state-focus-offset, 2px);
|
|
17
|
+
}
|
|
18
|
+
.buttonClose:hover, .buttonClose:focus-visible{
|
|
19
|
+
color:var(--sys-neutral-text-main, #333333);
|
|
20
|
+
background-color:var(--sys-neutral-decor-hovered, #d2d2d2);
|
|
21
|
+
}
|
|
22
|
+
.buttonClose:focus-visible{
|
|
23
|
+
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
24
|
+
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
25
|
+
outline-color:var(--border-state-focus-s-border-color, );
|
|
26
|
+
outline-color:var(--sys-available-complementary, #131313);
|
|
27
|
+
}
|
|
28
|
+
.buttonClose:active{
|
|
29
|
+
color:var(--sys-neutral-text-main, #333333);
|
|
30
|
+
background-color:var(--sys-neutral-decor-activated, #b8b8b8);
|
|
31
|
+
}
|
|
32
|
+
.buttonClose svg{
|
|
33
|
+
width:var(--dimension-3m, 24px) !important;
|
|
34
|
+
height:var(--dimension-3m, 24px) !important;
|
|
35
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { WithSupportProps } from '@snack-uikit/utils';
|
|
3
|
+
export type DrawerFooterProps = WithSupportProps<{
|
|
4
|
+
/** Слот для добавления кнопок-действий */
|
|
5
|
+
actions: ReactNode;
|
|
6
|
+
/** CSS-класс */
|
|
7
|
+
className?: string;
|
|
8
|
+
}>;
|
|
9
|
+
/** Вспомогательный компонент для добавления "футера" в DrawerCustom */
|
|
10
|
+
export declare function DrawerFooter({ actions, className, ...rest }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import cn from 'classnames';
|
|
14
|
+
import { extractSupportProps } from '@snack-uikit/utils';
|
|
15
|
+
import { TEST_IDS } from '../../constants';
|
|
16
|
+
import styles from './styles.module.css';
|
|
17
|
+
/** Вспомогательный компонент для добавления "футера" в DrawerCustom */
|
|
18
|
+
export function DrawerFooter(_a) {
|
|
19
|
+
var { actions, className } = _a, rest = __rest(_a, ["actions", "className"]);
|
|
20
|
+
return (_jsx("div", Object.assign({ className: cn(styles.footer, className) }, extractSupportProps(rest), { children: _jsx("div", Object.assign({ className: styles.footerActions, "data-test-id": TEST_IDS.footerActions }, { children: actions })) })));
|
|
21
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Footer';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Footer';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.footer{
|
|
2
|
+
padding-top:var(--space-drawer-footer-top, 24px);
|
|
3
|
+
padding-left:var(--space-drawer-footer-side, 32px);
|
|
4
|
+
padding-right:var(--space-drawer-footer-side, 32px);
|
|
5
|
+
padding-bottom:var(--space-drawer-footer-bottom, 32px);
|
|
6
|
+
gap:var(--space-drawer-footer-gap, 16px);
|
|
7
|
+
display:flex;
|
|
8
|
+
flex-direction:column;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.footerActions{
|
|
12
|
+
gap:var(--space-drawer-footer-action-row-gap, 8px);
|
|
13
|
+
display:flex;
|
|
14
|
+
flex-direction:row-reverse;
|
|
15
|
+
flex-wrap:wrap;
|
|
16
|
+
align-items:center;
|
|
17
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { TooltipProps } from '@snack-uikit/tooltip';
|
|
3
|
+
import { WithSupportProps } from '@snack-uikit/utils';
|
|
4
|
+
export type DrawerHeaderProps = WithSupportProps<{
|
|
5
|
+
/** Изображение */
|
|
6
|
+
image?: {
|
|
7
|
+
src: string;
|
|
8
|
+
alt: string;
|
|
9
|
+
};
|
|
10
|
+
/** Заголовок */
|
|
11
|
+
title: ReactNode;
|
|
12
|
+
/** Тултип для заголовка */
|
|
13
|
+
titleTooltip?: TooltipProps['tip'];
|
|
14
|
+
/** Подзаголовок */
|
|
15
|
+
subtitle?: ReactNode;
|
|
16
|
+
/** CSS-класс */
|
|
17
|
+
className?: string;
|
|
18
|
+
}>;
|
|
19
|
+
/** Вспомогательный компонент для добавления "шапки" в DrawerCustom */
|
|
20
|
+
export declare function DrawerHeader({ title, titleTooltip, subtitle, image, className, ...rest }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import cn from 'classnames';
|
|
14
|
+
import { QuestionTooltip } from '@snack-uikit/tooltip';
|
|
15
|
+
import { Typography } from '@snack-uikit/typography';
|
|
16
|
+
import { extractSupportProps } from '@snack-uikit/utils';
|
|
17
|
+
import { TEST_IDS } from '../../constants';
|
|
18
|
+
import styles from './styles.module.css';
|
|
19
|
+
/** Вспомогательный компонент для добавления "шапки" в DrawerCustom */
|
|
20
|
+
export function DrawerHeader(_a) {
|
|
21
|
+
var { title, titleTooltip, subtitle, image, className } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "image", "className"]);
|
|
22
|
+
return (_jsxs("div", Object.assign({ className: cn(styles.drawerHeader, className) }, extractSupportProps(rest), { children: [image && _jsx("img", { src: image.src, alt: image.alt, className: styles.image, "data-test-id": TEST_IDS.image }), _jsxs("div", Object.assign({ className: styles.headlineLayout }, { children: [_jsxs("div", Object.assign({ className: styles.headline }, { children: [_jsx(Typography, Object.assign({ family: Typography.families.Sans, role: Typography.roles.Headline, size: Typography.sizes.S, className: styles.title, "data-test-id": TEST_IDS.title }, { children: title })), titleTooltip && (_jsx(QuestionTooltip, { tip: titleTooltip, size: QuestionTooltip.sizes.S, "data-test-id": TEST_IDS.tooltip }))] })), subtitle && (_jsx(Typography, Object.assign({ family: Typography.families.Sans, role: Typography.roles.Body, size: Typography.sizes.M, className: styles.subtitle, "data-test-id": TEST_IDS.subtitle }, { children: subtitle })))] }))] })));
|
|
23
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Header';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Header';
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
.drawerHeader{
|
|
2
|
+
}
|
|
3
|
+
|
|
4
|
+
.image{
|
|
5
|
+
height:var(--size-drawer-image, 184px);
|
|
6
|
+
display:block;
|
|
7
|
+
width:100%;
|
|
8
|
+
-o-object-fit:cover;
|
|
9
|
+
object-fit:cover;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.headlineLayout{
|
|
13
|
+
padding-top:var(--space-drawer-headline-layout-top, 32px);
|
|
14
|
+
padding-left:var(--space-drawer-headline-layout-side-s, 32px);
|
|
15
|
+
padding-right:var(--space-drawer-headline-layout-side-m, 64px);
|
|
16
|
+
padding-bottom:var(--space-drawer-headline-layout-bottom, 24px);
|
|
17
|
+
gap:var(--space-drawer-headline-layout-gap, 8px);
|
|
18
|
+
display:flex;
|
|
19
|
+
flex-direction:column;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.headline{
|
|
23
|
+
gap:var(--space-drawer-headline-layout-headline, 4px);
|
|
24
|
+
display:flex;
|
|
25
|
+
align-items:center;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.title{
|
|
29
|
+
display:grid;
|
|
30
|
+
color:var(--sys-neutral-text-main, #333333);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.subtitle{
|
|
34
|
+
color:var(--sys-neutral-text-support, #565656);
|
|
35
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
package/package.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@snack-uikit/drawer",
|
|
3
|
+
"publishConfig": {
|
|
4
|
+
"access": "public"
|
|
5
|
+
},
|
|
6
|
+
"title": "Drawer",
|
|
7
|
+
"version": "0.4.6-preview-85c5f47b.0",
|
|
8
|
+
"sideEffects": [
|
|
9
|
+
"*.css",
|
|
10
|
+
"*.woff",
|
|
11
|
+
"*.woff2"
|
|
12
|
+
],
|
|
13
|
+
"description": "",
|
|
14
|
+
"main": "./dist/index.js",
|
|
15
|
+
"module": "./dist/index.js",
|
|
16
|
+
"homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/drawer",
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "https://github.com/cloud-ru-tech/snack-uikit.git",
|
|
20
|
+
"directory": "packages/drawer"
|
|
21
|
+
},
|
|
22
|
+
"author": "Белов Алексей <anbelov@cloud.ru>",
|
|
23
|
+
"contributors": [
|
|
24
|
+
"Белов Алексей <anbelov@cloud.ru>"
|
|
25
|
+
],
|
|
26
|
+
"files": [
|
|
27
|
+
"dist",
|
|
28
|
+
"src",
|
|
29
|
+
"./CHANGELOG.md",
|
|
30
|
+
"./LICENSE"
|
|
31
|
+
],
|
|
32
|
+
"license": "Apache-2.0",
|
|
33
|
+
"scripts": {},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"@snack-uikit/button": "0.13.7-preview-85c5f47b.0",
|
|
36
|
+
"@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
|
|
37
|
+
"@snack-uikit/scroll": "0.3.5-preview-85c5f47b.0",
|
|
38
|
+
"@snack-uikit/tooltip": "0.8.1-preview-85c5f47b.0",
|
|
39
|
+
"@snack-uikit/truncate-string": "0.2.17-preview-85c5f47b.0",
|
|
40
|
+
"@snack-uikit/typography": "0.4.5-preview-85c5f47b.0",
|
|
41
|
+
"@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
|
|
42
|
+
"classnames": "2.3.2",
|
|
43
|
+
"rc-drawer": "6.4.1"
|
|
44
|
+
},
|
|
45
|
+
"gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
|
|
46
|
+
}
|