@snack-uikit/drawer 0.6.19 → 0.6.20-preview-41627947.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/README.md +3 -3
- package/dist/components/Drawer/Drawer.d.ts +10 -3
- package/dist/components/Drawer/Drawer.js +2 -1
- package/dist/helperComponents/WithTooltip/WithTooltip.d.ts +8 -0
- package/dist/helperComponents/WithTooltip/WithTooltip.js +8 -0
- package/dist/helperComponents/WithTooltip/index.d.ts +1 -0
- package/dist/helperComponents/WithTooltip/index.js +1 -0
- package/package.json +2 -2
- package/src/components/Drawer/Drawer.tsx +18 -6
- package/src/helperComponents/WithTooltip/WithTooltip.tsx +16 -0
- package/src/helperComponents/WithTooltip/index.ts +1 -0
package/README.md
CHANGED
|
@@ -42,9 +42,9 @@
|
|
|
42
42
|
| image | `{ src: string; alt: string; }` | - | Изображение |
|
|
43
43
|
| subtitle | `string` | - | Подзаголовок |
|
|
44
44
|
| size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
|
|
45
|
-
| approveButton | `Omit<ButtonFilledProps, "data-test-id" \| "size"
|
|
46
|
-
| cancelButton | `Omit<ButtonOutlineProps, "data-test-id" \| "size"
|
|
47
|
-
| additionalButton | `Omit<ButtonSimpleProps, "data-test-id" \| "size"
|
|
45
|
+
| approveButton | `Omit<ButtonFilledProps, "data-test-id" \| "size"> & { tooltip?: TooltipProps; }` | - | Основная кнопка |
|
|
46
|
+
| cancelButton | `Omit<ButtonOutlineProps, "data-test-id" \| "size"> & { tooltip?: TooltipProps; }` | - | Кнопка отмены |
|
|
47
|
+
| additionalButton | `Omit<ButtonSimpleProps, "data-test-id" \| "size"> & { tooltip?: TooltipProps; }` | - | Дополнительная кнопка |
|
|
48
48
|
| nestedDrawer | `ReactElement<DrawerProps, string \| JSXElementConstructor<any>>` | - | Вложенный Drawer |
|
|
49
49
|
|
|
50
50
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
|
|
3
|
+
import { TooltipProps } from '@snack-uikit/tooltip';
|
|
3
4
|
import { DrawerBodyProps, DrawerHeaderProps } from '../../helperComponents';
|
|
4
5
|
import { Size } from '../../types';
|
|
5
6
|
import { DrawerCustomProps } from '../DrawerCustom';
|
|
@@ -11,11 +12,17 @@ export type DrawerProps = Omit<DrawerCustomProps, 'size' | 'children' | 'nestedD
|
|
|
11
12
|
/** Размер */
|
|
12
13
|
size?: Size;
|
|
13
14
|
/** Основная кнопка */
|
|
14
|
-
approveButton?: Omit<ButtonFilledProps, 'size' | 'data-test-id'
|
|
15
|
+
approveButton?: Omit<ButtonFilledProps, 'size' | 'data-test-id'> & {
|
|
16
|
+
tooltip?: TooltipProps;
|
|
17
|
+
};
|
|
15
18
|
/** Кнопка отмены */
|
|
16
|
-
cancelButton?: Omit<ButtonOutlineProps, 'size' | 'data-test-id'
|
|
19
|
+
cancelButton?: Omit<ButtonOutlineProps, 'size' | 'data-test-id'> & {
|
|
20
|
+
tooltip?: TooltipProps;
|
|
21
|
+
};
|
|
17
22
|
/** Дополнительная кнопка */
|
|
18
|
-
additionalButton?: Omit<ButtonSimpleProps, 'size' | 'data-test-id'
|
|
23
|
+
additionalButton?: Omit<ButtonSimpleProps, 'size' | 'data-test-id'> & {
|
|
24
|
+
tooltip?: TooltipProps;
|
|
25
|
+
};
|
|
19
26
|
/** Вложенный Drawer */
|
|
20
27
|
nestedDrawer?: ReactElement<DrawerProps>;
|
|
21
28
|
};
|
|
@@ -13,10 +13,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
13
13
|
import { ButtonFilled, ButtonOutline, ButtonSimple, } from '@snack-uikit/button';
|
|
14
14
|
import { TruncateString } from '@snack-uikit/truncate-string';
|
|
15
15
|
import { NESTED_DRAWER_PUSH_DISTANCE, TEST_IDS } from '../../constants';
|
|
16
|
+
import { WithTooltip } from '../../helperComponents/WithTooltip';
|
|
16
17
|
import { DrawerCustom } from '../DrawerCustom';
|
|
17
18
|
/** Готовый компонент Drawer */
|
|
18
19
|
export function Drawer(_a) {
|
|
19
20
|
var { title, titleTooltip, subtitle, image, content, approveButton, cancelButton, additionalButton, nestedDrawer } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "image", "content", "approveButton", "cancelButton", "additionalButton", "nestedDrawer"]);
|
|
20
21
|
const needFooter = Boolean(approveButton) || Boolean(cancelButton) || Boolean(additionalButton);
|
|
21
|
-
return (_jsxs(DrawerCustom, Object.assign({}, rest, { push: Boolean(nestedDrawer) && { distance: NESTED_DRAWER_PUSH_DISTANCE }, children: [_jsx(DrawerCustom.Header, { title: _jsx(TruncateString, { text: title }), titleTooltip: titleTooltip, subtitle: subtitle, image: image, "data-test-id": TEST_IDS.header }), _jsx(DrawerCustom.Body, { content: content, "data-test-id": TEST_IDS.content }), needFooter && (_jsx(DrawerCustom.Footer, { "data-test-id": TEST_IDS.footer, actions: _jsxs(_Fragment, { children: [approveButton && _jsx(ButtonFilled, Object.assign({}, approveButton, { size: 'm', "data-test-id": TEST_IDS.approveButton })), cancelButton && _jsx(ButtonOutline, Object.assign({}, cancelButton, { size: 'm', "data-test-id": TEST_IDS.cancelButton })), additionalButton && (_jsx(ButtonSimple, Object.assign({}, additionalButton, { size: 'm', "data-test-id": TEST_IDS.additionalButton })))] }) })), nestedDrawer] })));
|
|
22
|
+
return (_jsxs(DrawerCustom, Object.assign({}, rest, { push: Boolean(nestedDrawer) && { distance: NESTED_DRAWER_PUSH_DISTANCE }, children: [_jsx(DrawerCustom.Header, { title: _jsx(TruncateString, { text: title }), titleTooltip: titleTooltip, subtitle: subtitle, image: image, "data-test-id": TEST_IDS.header }), _jsx(DrawerCustom.Body, { content: content, "data-test-id": TEST_IDS.content }), needFooter && (_jsx(DrawerCustom.Footer, { "data-test-id": TEST_IDS.footer, actions: _jsxs(_Fragment, { children: [approveButton && (_jsx(WithTooltip, { tooltip: approveButton.tooltip, children: _jsx(ButtonFilled, Object.assign({}, approveButton, { size: 'm', "data-test-id": TEST_IDS.approveButton })) })), cancelButton && (_jsx(WithTooltip, { tooltip: cancelButton.tooltip, children: _jsx(ButtonOutline, Object.assign({}, cancelButton, { size: 'm', "data-test-id": TEST_IDS.cancelButton })) })), additionalButton && (_jsx(WithTooltip, { tooltip: additionalButton.tooltip, children: _jsx(ButtonSimple, Object.assign({}, additionalButton, { size: 'm', "data-test-id": TEST_IDS.additionalButton })) }))] }) })), nestedDrawer] })));
|
|
22
23
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { TooltipProps } from '@snack-uikit/tooltip';
|
|
3
|
+
type WithTooltipProps = PropsWithChildren<{
|
|
4
|
+
/** Тултип над кнопкой */
|
|
5
|
+
tooltip?: TooltipProps;
|
|
6
|
+
}>;
|
|
7
|
+
export declare function WithTooltip({ tooltip, children }: WithTooltipProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Tooltip } from '@snack-uikit/tooltip';
|
|
3
|
+
export function WithTooltip({ tooltip, children }) {
|
|
4
|
+
if (!tooltip) {
|
|
5
|
+
return _jsx(_Fragment, { children: children });
|
|
6
|
+
}
|
|
7
|
+
return _jsx(Tooltip, Object.assign({}, tooltip, { children: children }));
|
|
8
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './WithTooltip';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './WithTooltip';
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Drawer",
|
|
7
|
-
"version": "0.6.
|
|
7
|
+
"version": "0.6.20-preview-41627947.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"classnames": "2.3.2",
|
|
43
43
|
"rc-drawer": "6.4.1"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "86dc024e318ce10011bf49bfc9842e233bf4e2e6"
|
|
46
46
|
}
|
|
@@ -8,10 +8,12 @@ import {
|
|
|
8
8
|
ButtonSimple,
|
|
9
9
|
ButtonSimpleProps,
|
|
10
10
|
} from '@snack-uikit/button';
|
|
11
|
+
import { TooltipProps } from '@snack-uikit/tooltip';
|
|
11
12
|
import { TruncateString } from '@snack-uikit/truncate-string';
|
|
12
13
|
|
|
13
14
|
import { NESTED_DRAWER_PUSH_DISTANCE, TEST_IDS } from '../../constants';
|
|
14
15
|
import { DrawerBodyProps, DrawerHeaderProps } from '../../helperComponents';
|
|
16
|
+
import { WithTooltip } from '../../helperComponents/WithTooltip';
|
|
15
17
|
import { Size } from '../../types';
|
|
16
18
|
import { DrawerCustom, DrawerCustomProps } from '../DrawerCustom';
|
|
17
19
|
|
|
@@ -25,11 +27,11 @@ export type DrawerProps = Omit<DrawerCustomProps, 'size' | 'children' | 'nestedD
|
|
|
25
27
|
/** Размер */
|
|
26
28
|
size?: Size;
|
|
27
29
|
/** Основная кнопка */
|
|
28
|
-
approveButton?: Omit<ButtonFilledProps, 'size' | 'data-test-id'
|
|
30
|
+
approveButton?: Omit<ButtonFilledProps, 'size' | 'data-test-id'> & { tooltip?: TooltipProps };
|
|
29
31
|
/** Кнопка отмены */
|
|
30
|
-
cancelButton?: Omit<ButtonOutlineProps, 'size' | 'data-test-id'
|
|
32
|
+
cancelButton?: Omit<ButtonOutlineProps, 'size' | 'data-test-id'> & { tooltip?: TooltipProps };
|
|
31
33
|
/** Дополнительная кнопка */
|
|
32
|
-
additionalButton?: Omit<ButtonSimpleProps, 'size' | 'data-test-id'
|
|
34
|
+
additionalButton?: Omit<ButtonSimpleProps, 'size' | 'data-test-id'> & { tooltip?: TooltipProps };
|
|
33
35
|
/** Вложенный Drawer */
|
|
34
36
|
nestedDrawer?: ReactElement<DrawerProps>;
|
|
35
37
|
};
|
|
@@ -66,12 +68,22 @@ export function Drawer({
|
|
|
66
68
|
data-test-id={TEST_IDS.footer}
|
|
67
69
|
actions={
|
|
68
70
|
<>
|
|
69
|
-
{approveButton &&
|
|
71
|
+
{approveButton && (
|
|
72
|
+
<WithTooltip tooltip={approveButton.tooltip}>
|
|
73
|
+
<ButtonFilled {...approveButton} size='m' data-test-id={TEST_IDS.approveButton} />
|
|
74
|
+
</WithTooltip>
|
|
75
|
+
)}
|
|
70
76
|
|
|
71
|
-
{cancelButton &&
|
|
77
|
+
{cancelButton && (
|
|
78
|
+
<WithTooltip tooltip={cancelButton.tooltip}>
|
|
79
|
+
<ButtonOutline {...cancelButton} size='m' data-test-id={TEST_IDS.cancelButton} />
|
|
80
|
+
</WithTooltip>
|
|
81
|
+
)}
|
|
72
82
|
|
|
73
83
|
{additionalButton && (
|
|
74
|
-
<
|
|
84
|
+
<WithTooltip tooltip={additionalButton.tooltip}>
|
|
85
|
+
<ButtonSimple {...additionalButton} size='m' data-test-id={TEST_IDS.additionalButton} />
|
|
86
|
+
</WithTooltip>
|
|
75
87
|
)}
|
|
76
88
|
</>
|
|
77
89
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
|
|
3
|
+
import { Tooltip, TooltipProps } from '@snack-uikit/tooltip';
|
|
4
|
+
|
|
5
|
+
type WithTooltipProps = PropsWithChildren<{
|
|
6
|
+
/** Тултип над кнопкой */
|
|
7
|
+
tooltip?: TooltipProps;
|
|
8
|
+
}>;
|
|
9
|
+
|
|
10
|
+
export function WithTooltip({ tooltip, children }: WithTooltipProps) {
|
|
11
|
+
if (!tooltip) {
|
|
12
|
+
return <>{children}</>;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
return <Tooltip {...tooltip}>{children}</Tooltip>;
|
|
16
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './WithTooltip';
|