@skbkontur/side-menu 0.2.0 → 0.2.2
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 +20 -0
- package/README.md +131 -135
- package/index.d.ts +1 -1
- package/index.js +1 -1
- package/package.json +2 -2
- package/src/InnerSubMenu.d.ts +9 -0
- package/src/InnerSubMenu.js +18 -0
- package/src/RightBorder.d.ts +8 -0
- package/src/RightBorder.js +71 -0
- package/src/SeparatedSubMenu.d.ts +8 -0
- package/src/SeparatedSubMenu.js +42 -0
- package/src/SideMenu.d.ts +23 -50
- package/src/SideMenu.js +81 -143
- package/src/SideMenu.styles.d.ts +8 -4
- package/src/SideMenu.styles.js +52 -44
- package/src/SideMenuAvatar.d.ts +6 -22
- package/src/SideMenuAvatar.js +10 -41
- package/src/SideMenuBody.d.ts +5 -7
- package/src/SideMenuBody.js +22 -15
- package/src/SideMenuBodyChildren.d.ts +6 -0
- package/src/SideMenuBodyChildren.js +26 -0
- package/src/SideMenuContext.d.ts +7 -6
- package/src/SideMenuContext.js +1 -1
- package/src/SideMenuDivider.d.ts +5 -10
- package/src/SideMenuDivider.js +11 -19
- package/src/SideMenuDropdown.d.ts +13 -0
- package/src/SideMenuDropdown.js +29 -0
- package/src/SideMenuFooter.d.ts +5 -7
- package/src/SideMenuFooter.js +19 -6
- package/src/SideMenuHeader.d.ts +4 -26
- package/src/SideMenuHeader.js +32 -76
- package/src/SideMenuItem.d.ts +9 -35
- package/src/SideMenuItem.js +134 -165
- package/src/SideMenuLogotype.d.ts +6 -0
- package/src/SideMenuLogotype.js +65 -0
- package/src/SideMenuOrganisations.d.ts +4 -16
- package/src/SideMenuOrganisations.js +12 -35
- package/src/SideMenuSubItem.d.ts +3 -17
- package/src/SideMenuSubItem.js +27 -42
- package/src/SideMenuSubItemHeader.d.ts +5 -12
- package/src/SideMenuSubItemHeader.js +13 -21
- package/src/SideMenuDropdownMenuSeparator.d.ts +0 -11
- package/src/SideMenuDropdownMenuSeparator.js +0 -25
- package/src/SideMenuSubItemButtons.d.ts +0 -15
- package/src/SideMenuSubItemButtons.js +0 -25
package/src/SideMenu.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import { __assign,
|
|
2
|
-
import React from 'react';
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
import React, { forwardRef, useEffect, useState } from 'react';
|
|
3
3
|
import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
|
|
4
|
-
import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
|
|
5
4
|
import { isIE11, isSafari } from '@skbkontur/react-ui/lib/client';
|
|
6
5
|
import { jsStyles } from './SideMenu.styles';
|
|
7
6
|
import { SideMenuOrganisations } from './SideMenuOrganisations';
|
|
8
|
-
import {
|
|
7
|
+
import { SideMenuContext } from './SideMenuContext';
|
|
9
8
|
import { SideMenuBody } from './SideMenuBody';
|
|
10
9
|
import { SideMenuFooter } from './SideMenuFooter';
|
|
11
10
|
import { SideMenuHeader } from './SideMenuHeader';
|
|
@@ -14,150 +13,89 @@ import { SideMenuAvatar } from './SideMenuAvatar';
|
|
|
14
13
|
import { SideMenuSubItem } from './SideMenuSubItem';
|
|
15
14
|
import { SideMenuDivider } from './SideMenuDivider';
|
|
16
15
|
import { SideMenuSubItemHeader } from './SideMenuSubItemHeader';
|
|
17
|
-
import {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
_this.handleMouseLeave = function () {
|
|
37
|
-
if (_this.resizeTimer) {
|
|
38
|
-
clearTimeout(_this.resizeTimer);
|
|
16
|
+
import { RightBorder } from './RightBorder';
|
|
17
|
+
export var SideMenuDataTids = {
|
|
18
|
+
root: 'SideMenu__root',
|
|
19
|
+
};
|
|
20
|
+
var SideMenu = forwardRef(function (_a, ref) {
|
|
21
|
+
var _b, _c;
|
|
22
|
+
var children = _a.children, _d = _a.size, size = _d === void 0 ? 'small' : _d, _e = _a.isSeparatedMenu, isSeparatedMenu = _e === void 0 ? false : _e, className = _a.className, rest = __rest(_a, ["children", "size", "isSeparatedMenu", "className"]);
|
|
23
|
+
var scrollTimer = null;
|
|
24
|
+
var transitionTimer = null;
|
|
25
|
+
var _f = useState(false), isMinimised = _f[0], setIsMinimised = _f[1];
|
|
26
|
+
var _g = useState(null), activeItem = _g[0], setActiveItem = _g[1];
|
|
27
|
+
var _h = useState(null), activeSubItem = _h[0], setActiveSubItem = _h[1];
|
|
28
|
+
var _j = useState(false), hasScrollBar = _j[0], setHasScrollBar = _j[1];
|
|
29
|
+
var _k = useState(false), isTransitioned = _k[0], setIsTransitioned = _k[1];
|
|
30
|
+
var _l = useState('#2291ff'), productColor = _l[0], setProductColor = _l[1];
|
|
31
|
+
useEffect(function () {
|
|
32
|
+
return function () {
|
|
33
|
+
if (scrollTimer) {
|
|
34
|
+
clearTimeout(scrollTimer);
|
|
39
35
|
}
|
|
40
|
-
_this.setState({ isAbleToResize: false });
|
|
41
36
|
};
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
_this.transitionTimer = setTimeout(function () {
|
|
50
|
-
_this.setState({ isTransitioned: false });
|
|
51
|
-
}, 1000);
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
_this.handleScroll = function (event) {
|
|
55
|
-
var element = event.target;
|
|
56
|
-
if (Math.floor(element.scrollHeight - element.scrollTop) === element.clientHeight) {
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
if (!_this.state.hasScrollBar) {
|
|
60
|
-
_this.setState({ hasScrollBar: true });
|
|
61
|
-
}
|
|
62
|
-
if (_this.scrollTimer) {
|
|
63
|
-
clearTimeout(_this.scrollTimer);
|
|
37
|
+
});
|
|
38
|
+
var showMinimisedRoot = function () {
|
|
39
|
+
if (isMinimised) {
|
|
40
|
+
setIsTransitioned(true);
|
|
41
|
+
setIsMinimised(false);
|
|
42
|
+
if (transitionTimer) {
|
|
43
|
+
clearTimeout(transitionTimer);
|
|
64
44
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
},
|
|
68
|
-
};
|
|
69
|
-
_this.swipe = function (rightBorder) {
|
|
70
|
-
var isMouseDown = false, startX = 0;
|
|
71
|
-
var checkStart = function (event) {
|
|
72
|
-
startX = event.pageX;
|
|
73
|
-
isMouseDown = true;
|
|
74
|
-
};
|
|
75
|
-
var checkMove = function (event) {
|
|
76
|
-
if (!isMouseDown) {
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
if (event.pageX < startX && _this.state.isAbleToResize) {
|
|
80
|
-
_this.setState({ isMinimised: true });
|
|
81
|
-
}
|
|
82
|
-
return;
|
|
83
|
-
};
|
|
84
|
-
var checkEnd = function () {
|
|
85
|
-
isMouseDown = false;
|
|
86
|
-
};
|
|
87
|
-
rightBorder.addEventListener('mousedown', checkStart);
|
|
88
|
-
rightBorder.addEventListener('mousemove', checkMove);
|
|
89
|
-
document.addEventListener('mouseup', checkEnd);
|
|
90
|
-
};
|
|
91
|
-
_this.rightBorderRef = React.createRef();
|
|
92
|
-
_this.state = {
|
|
93
|
-
isMinimised: false,
|
|
94
|
-
isAbleToResize: false,
|
|
95
|
-
activeItem: null,
|
|
96
|
-
activeSubItem: null,
|
|
97
|
-
hasScrollBar: false,
|
|
98
|
-
isTransitioned: false,
|
|
99
|
-
};
|
|
100
|
-
return _this;
|
|
101
|
-
}
|
|
102
|
-
SideMenu.prototype.componentDidMount = function () {
|
|
103
|
-
if (this.rightBorderRef.current) {
|
|
104
|
-
this.swipe(this.rightBorderRef.current);
|
|
45
|
+
transitionTimer = setTimeout(function () {
|
|
46
|
+
setIsTransitioned(false);
|
|
47
|
+
}, 1000);
|
|
105
48
|
}
|
|
106
49
|
};
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
50
|
+
var handleScroll = function (event) {
|
|
51
|
+
var element = event.target;
|
|
52
|
+
if (Math.floor(element.scrollHeight - element.scrollTop) === element.clientHeight) {
|
|
53
|
+
return;
|
|
110
54
|
}
|
|
111
|
-
if (
|
|
112
|
-
|
|
55
|
+
if (!hasScrollBar) {
|
|
56
|
+
setHasScrollBar(true);
|
|
113
57
|
}
|
|
58
|
+
if (scrollTimer) {
|
|
59
|
+
clearTimeout(scrollTimer);
|
|
60
|
+
}
|
|
61
|
+
scrollTimer = setTimeout(function () {
|
|
62
|
+
setHasScrollBar(false);
|
|
63
|
+
}, 200);
|
|
114
64
|
};
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
SideMenu.Header = SideMenuHeader;
|
|
153
|
-
SideMenu.Item = SideMenuItem;
|
|
154
|
-
SideMenu.SubItem = SideMenuSubItem;
|
|
155
|
-
SideMenu.SubItemHeader = SideMenuSubItemHeader;
|
|
156
|
-
SideMenu.Avatar = SideMenuAvatar;
|
|
157
|
-
SideMenu.Organisations = SideMenuOrganisations;
|
|
158
|
-
SideMenu.Divider = SideMenuDivider;
|
|
159
|
-
SideMenu.SubItemButtons = SideMenuSubItemButtons;
|
|
160
|
-
SideMenu.DropdownMenuSeparator = SideMenuDropdownMenuSeparator;
|
|
161
|
-
return SideMenu;
|
|
162
|
-
}(React.Component));
|
|
163
|
-
export { SideMenu };
|
|
65
|
+
return (React.createElement(SideMenuContext.Provider, { value: {
|
|
66
|
+
isMinimised: isMinimised,
|
|
67
|
+
isTransitioned: isTransitioned,
|
|
68
|
+
isSeparatedMenu: isSeparatedMenu,
|
|
69
|
+
size: size,
|
|
70
|
+
activeItem: activeItem,
|
|
71
|
+
productColor: productColor,
|
|
72
|
+
setActiveItem: setActiveItem,
|
|
73
|
+
activeSubItem: activeSubItem,
|
|
74
|
+
setActiveSubItem: setActiveSubItem,
|
|
75
|
+
setProductColor: setProductColor,
|
|
76
|
+
} },
|
|
77
|
+
React.createElement("aside", __assign({ className: cx((_b = {}, _b[jsStyles.rootWrapper()] = true, _b[jsStyles.rootWrapperIE()] = isIE11, _b), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest),
|
|
78
|
+
React.createElement("div", { className: cx((_c = {},
|
|
79
|
+
_c[jsStyles.root()] = true,
|
|
80
|
+
_c[jsStyles.rootSafari()] = isSafari,
|
|
81
|
+
_c[jsStyles.minimisedRoot()] = isMinimised,
|
|
82
|
+
_c[jsStyles.rootWithInnerSubMenu()] = !isSeparatedMenu,
|
|
83
|
+
_c[jsStyles.rootWithoutScrollBar()] = !hasScrollBar,
|
|
84
|
+
_c)), onMouseOver: showMinimisedRoot, onFocus: showMinimisedRoot, onScroll: handleScroll }, children),
|
|
85
|
+
React.createElement(RightBorder, { setIsMinimised: function (value) { return setIsMinimised(value); } }))));
|
|
86
|
+
});
|
|
87
|
+
SideMenu.displayName = 'SideMenu';
|
|
88
|
+
var STATIC_PROPS = {
|
|
89
|
+
Body: SideMenuBody,
|
|
90
|
+
Footer: SideMenuFooter,
|
|
91
|
+
Header: SideMenuHeader,
|
|
92
|
+
Item: SideMenuItem,
|
|
93
|
+
SubItem: SideMenuSubItem,
|
|
94
|
+
SubItemHeader: SideMenuSubItemHeader,
|
|
95
|
+
Avatar: SideMenuAvatar,
|
|
96
|
+
Organisations: SideMenuOrganisations,
|
|
97
|
+
Divider: SideMenuDivider,
|
|
98
|
+
__KONTUR_REACT_UI__: 'SideMenu',
|
|
99
|
+
};
|
|
100
|
+
var SideMenuWithStaticFields = Object.assign(SideMenu, STATIC_PROPS);
|
|
101
|
+
export { SideMenuWithStaticFields as SideMenu };
|
package/src/SideMenu.styles.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
export declare const customStyles: {
|
|
2
|
+
rightBorderHovered(color?: string | undefined): string;
|
|
3
|
+
};
|
|
1
4
|
export declare const jsStyles: {
|
|
2
5
|
root(): string;
|
|
3
6
|
rootSafari(): string;
|
|
@@ -6,7 +9,6 @@ export declare const jsStyles: {
|
|
|
6
9
|
rootWithInnerSubMenu(): string;
|
|
7
10
|
rootWrapper(): string;
|
|
8
11
|
rootWrapperIE(): string;
|
|
9
|
-
rightBorder(): string;
|
|
10
12
|
resizableRightBorder(): string;
|
|
11
13
|
body(): string;
|
|
12
14
|
footer(): string;
|
|
@@ -34,7 +36,8 @@ export declare const jsStyles: {
|
|
|
34
36
|
itemTextWithoutColumnIcons(): string;
|
|
35
37
|
subItemTextWithoutColumnIcons(): string;
|
|
36
38
|
itemTextLarge(): string;
|
|
37
|
-
|
|
39
|
+
dividerInDropdown(): string;
|
|
40
|
+
dividerInSideMenu(): string;
|
|
38
41
|
icon(): string;
|
|
39
42
|
iconMultiline(): string;
|
|
40
43
|
iconLarge(): string;
|
|
@@ -43,12 +46,13 @@ export declare const jsStyles: {
|
|
|
43
46
|
avatarIcon(): string;
|
|
44
47
|
headerIcon(): string;
|
|
45
48
|
marker(): string;
|
|
49
|
+
textAndMarkerWrapper(): string;
|
|
46
50
|
markerMultiline(): string;
|
|
47
|
-
dropdownMenuSeparator(): string;
|
|
48
51
|
subItemHeader(): string;
|
|
52
|
+
subItemHeaderWithoutIcons(): string;
|
|
49
53
|
separatedMenu(): string;
|
|
50
|
-
buttonsGroup(): string;
|
|
51
54
|
dropdownWrapper(): string;
|
|
52
55
|
dropdownLabel(): string;
|
|
53
56
|
subItemMenu(): string;
|
|
57
|
+
rightBorder(): string;
|
|
54
58
|
};
|
package/src/SideMenu.styles.js
CHANGED
|
@@ -8,7 +8,7 @@ var styles = {
|
|
|
8
8
|
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n &::-webkit-scrollbar-thumb {\n background: #888;\n }\n "], ["\n &::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n &::-webkit-scrollbar-thumb {\n background: #888;\n }\n "])));
|
|
9
9
|
},
|
|
10
10
|
rootWithoutScrollBar: function () {
|
|
11
|
-
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n
|
|
11
|
+
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n -ms-overflow-style: none;\n scrollbar-width: none;\n &::-webkit-scrollbar {\n display: none;\n width: 0;\n }\n "], ["\n -ms-overflow-style: none;\n scrollbar-width: none;\n &::-webkit-scrollbar {\n display: none;\n width: 0;\n }\n "])));
|
|
12
12
|
},
|
|
13
13
|
minimisedRoot: function () {
|
|
14
14
|
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 72px !important;\n "], ["\n width: 72px !important;\n "])));
|
|
@@ -22,95 +22,95 @@ var styles = {
|
|
|
22
22
|
rootWrapperIE: function () {
|
|
23
23
|
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n top: -15px;\n "], ["\n position: relative;\n top: -15px;\n "])));
|
|
24
24
|
},
|
|
25
|
-
rightBorder: function () {
|
|
26
|
-
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 100%;\n right: -10px;\n background: transparent;\n "], ["\n position: absolute;\n width: 20px;\n height: 100%;\n right: -10px;\n background: transparent;\n "])));
|
|
27
|
-
},
|
|
28
25
|
resizableRightBorder: function () {
|
|
29
|
-
return css(
|
|
26
|
+
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n cursor: col-resize;\n "], ["\n cursor: col-resize;\n "])));
|
|
30
27
|
},
|
|
31
28
|
body: function () {
|
|
32
|
-
return css(
|
|
29
|
+
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n flex-grow: 1;\n padding-bottom: 16px;\n margin-top: 0;\n "], ["\n flex-grow: 1;\n padding-bottom: 16px;\n margin-top: 0;\n "])));
|
|
33
30
|
},
|
|
34
31
|
footer: function () {
|
|
35
|
-
return css(
|
|
32
|
+
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n flex-grow: 0;\n "], ["\n flex-grow: 0;\n "])));
|
|
36
33
|
},
|
|
37
34
|
headerWrapper: function () {
|
|
38
|
-
return css(
|
|
35
|
+
return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: sticky;\n width: 186px;\n top: 0;\n background: #f6f6f6;\n z-index: 1;\n padding: 24px 8px 16px;\n "], ["\n position: sticky;\n width: 186px;\n top: 0;\n background: #f6f6f6;\n z-index: 1;\n padding: 24px 8px 16px;\n "])));
|
|
39
36
|
},
|
|
40
37
|
headerMinimisedWrapper: function () {
|
|
41
|
-
return css(
|
|
38
|
+
return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n width: 54px;\n padding-left: 0 !important;\n padding-right: 0;\n "], ["\n width: 54px;\n padding-left: 0 !important;\n padding-right: 0;\n "])));
|
|
42
39
|
},
|
|
43
40
|
headerFixedWrapper: function () {
|
|
44
|
-
return css(
|
|
41
|
+
return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n border-bottom: 1px solid #e6e6e6;\n "], ["\n border-bottom: 1px solid #e6e6e6;\n "])));
|
|
45
42
|
},
|
|
46
43
|
item: function () {
|
|
47
|
-
return css(
|
|
44
|
+
return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n border: none;\n margin: 0;\n padding: 0;\n overflow: visible;\n color: inherit;\n font: inherit;\n line-height: normal;\n text-align: inherit;\n outline: none;\n width: 100%;\n background: #f6f6f6;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n &:hover {\n background: rgba(255, 255, 255, 0.48);\n }\n &:focus {\n outline: none;\n }\n "], ["\n border: none;\n margin: 0;\n padding: 0;\n overflow: visible;\n color: inherit;\n font: inherit;\n line-height: normal;\n text-align: inherit;\n outline: none;\n width: 100%;\n background: #f6f6f6;\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n &:hover {\n background: rgba(255, 255, 255, 0.48);\n }\n &:focus {\n outline: none;\n }\n "])));
|
|
48
45
|
},
|
|
49
46
|
subItem: function () {
|
|
50
|
-
return css(
|
|
47
|
+
return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n background: #fff;\n &:hover {\n background: #f6f6f6;\n }\n "], ["\n background: #fff;\n &:hover {\n background: #f6f6f6;\n }\n "])));
|
|
51
48
|
},
|
|
52
49
|
focusedItem: function () {
|
|
53
|
-
return css(
|
|
50
|
+
return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n box-shadow: inset 0 0 0 2px #1c7edf;\n "], ["\n box-shadow: inset 0 0 0 2px #1c7edf;\n "])));
|
|
54
51
|
},
|
|
55
52
|
activeItem: function () {
|
|
56
|
-
return css(
|
|
53
|
+
return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n background: #fff !important;\n "], ["\n background: #fff !important;\n "])));
|
|
57
54
|
},
|
|
58
55
|
activeSubItem: function () {
|
|
59
|
-
return css(
|
|
56
|
+
return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background: #f2f2f2 !important;\n "], ["\n background: #f2f2f2 !important;\n "])));
|
|
60
57
|
},
|
|
61
58
|
itemWrapper: function () {
|
|
62
|
-
return css(
|
|
59
|
+
return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-top: 4px;\n padding-bottom: 4px;\n "], ["\n display: flex;\n align-items: center;\n padding-top: 4px;\n padding-bottom: 4px;\n "])));
|
|
63
60
|
},
|
|
64
61
|
itemMultilineWrapper: function () {
|
|
65
|
-
return css(
|
|
62
|
+
return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n padding-top: 8px;\n padding-bottom: 8px;\n "], ["\n padding-top: 8px;\n padding-bottom: 8px;\n "])));
|
|
66
63
|
},
|
|
67
64
|
itemLargeWrapper: function () {
|
|
68
|
-
return css(
|
|
65
|
+
return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n padding-top: 9px;\n padding-bottom: 9px;\n "], ["\n padding-top: 9px;\n padding-bottom: 9px;\n "])));
|
|
69
66
|
},
|
|
70
67
|
subItemLargeWrapper: function () {
|
|
71
|
-
return css(
|
|
68
|
+
return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n padding-top: 5px !important;\n padding-bottom: 5px !important;\n "], ["\n padding-top: 5px !important;\n padding-bottom: 5px !important;\n "])));
|
|
72
69
|
},
|
|
73
70
|
itemLargeMultilineWrapper: function () {
|
|
74
|
-
return css(
|
|
71
|
+
return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n padding-top: 8px;\n padding-bottom: 8px;\n "], ["\n padding-top: 8px;\n padding-bottom: 8px;\n "])));
|
|
75
72
|
},
|
|
76
73
|
itemLargeWrapperWithoutIcon: function () {
|
|
77
|
-
return css(
|
|
74
|
+
return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n padding-top: 13px !important;\n padding-bottom: 13px !important;\n "], ["\n padding-top: 13px !important;\n padding-bottom: 13px !important;\n "])));
|
|
78
75
|
},
|
|
79
76
|
subItemWrapper: function () {
|
|
80
|
-
return css(
|
|
77
|
+
return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n padding-top: 4px;\n padding-bottom: 4px;\n "], ["\n padding-top: 4px;\n padding-bottom: 4px;\n "])));
|
|
81
78
|
},
|
|
82
79
|
itemWrapperWithoutIcon: function () {
|
|
83
|
-
return css(
|
|
80
|
+
return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n min-height: 20px;\n padding-top: 10px !important;\n padding-bottom: 10px !important;\n "], ["\n min-height: 20px;\n padding-top: 10px !important;\n padding-bottom: 10px !important;\n "])));
|
|
84
81
|
},
|
|
85
82
|
itemText: function () {
|
|
86
|
-
return css(
|
|
83
|
+
return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n line-height: 20px;\n margin: 0 8px 0 0;\n "], ["\n line-height: 20px;\n margin: 0 8px 0 0;\n "])));
|
|
87
84
|
},
|
|
88
85
|
itemTextTransitioned: function () {
|
|
89
|
-
return css(
|
|
86
|
+
return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n "], ["\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n "])));
|
|
90
87
|
},
|
|
91
88
|
itemTextMultiline: function () {
|
|
92
|
-
return css(
|
|
89
|
+
return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n align-self: flex-start;\n "], ["\n align-self: flex-start;\n "])));
|
|
93
90
|
},
|
|
94
91
|
subItemText: function () {
|
|
95
|
-
return css(
|
|
92
|
+
return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n margin-left: 4px;\n "], ["\n margin-left: 4px;\n "])));
|
|
96
93
|
},
|
|
97
94
|
itemTextWithoutItemIcon: function () {
|
|
98
|
-
return css(
|
|
95
|
+
return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n margin-left: 40px;\n "], ["\n margin-left: 40px;\n "])));
|
|
99
96
|
},
|
|
100
97
|
itemTextWithoutColumnIcons: function () {
|
|
101
|
-
return css(
|
|
98
|
+
return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n margin-left: 12px;\n "], ["\n margin-left: 12px;\n "])));
|
|
102
99
|
},
|
|
103
100
|
subItemTextWithoutColumnIcons: function () {
|
|
104
|
-
return css(
|
|
101
|
+
return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n margin-left: 8px;\n "], ["\n margin-left: 8px;\n "])));
|
|
105
102
|
},
|
|
106
103
|
itemTextLarge: function () {
|
|
107
|
-
return css(
|
|
104
|
+
return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 22px;\n "], ["\n font-size: 16px;\n line-height: 22px;\n "])));
|
|
105
|
+
},
|
|
106
|
+
dividerInDropdown: function () {
|
|
107
|
+
return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n background: #ebebeb;\n height: 1px;\n border: none;\n margin: 4px 12px 4px 32px;\n "], ["\n background: #ebebeb;\n height: 1px;\n border: none;\n margin: 4px 12px 4px 32px;\n "])));
|
|
108
108
|
},
|
|
109
|
-
|
|
110
|
-
return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n background: #d6d6d6;\n
|
|
109
|
+
dividerInSideMenu: function () {
|
|
110
|
+
return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n background: #d6d6d6;\n margin-left: 8px;\n margin-right: 8px;\n "], ["\n background: #d6d6d6;\n margin-left: 8px;\n margin-right: 8px;\n "])));
|
|
111
111
|
},
|
|
112
112
|
icon: function () {
|
|
113
|
-
return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0 8px;\n min-height: 32px;\n line-height: 20px;\n "], ["\n display: flex;\n align-items: center;\n padding: 0 8px;\n min-height: 32px;\n line-height: 20px;\n "])));
|
|
113
|
+
return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0 8px;\n min-height: 32px;\n line-height: 20px;\n flex-shrink: 0;\n "], ["\n display: flex;\n align-items: center;\n padding: 0 8px;\n min-height: 32px;\n line-height: 20px;\n flex-shrink: 0;\n "])));
|
|
114
114
|
},
|
|
115
115
|
iconMultiline: function () {
|
|
116
116
|
return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n align-self: flex-start;\n align-items: flex-start;\n "], ["\n align-self: flex-start;\n align-items: flex-start;\n "])));
|
|
@@ -133,20 +133,20 @@ var styles = {
|
|
|
133
133
|
marker: function () {
|
|
134
134
|
return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n padding-right: 6px;\n padding-left: 6px;\n background: #2291ff;\n border-radius: 9999px;\n margin-left: auto;\n margin-right: 8px;\n color: #fff;\n line-height: 20px;\n font-weight: 700;\n "], ["\n padding-right: 6px;\n padding-left: 6px;\n background: #2291ff;\n border-radius: 9999px;\n margin-left: auto;\n margin-right: 8px;\n color: #fff;\n line-height: 20px;\n font-weight: 700;\n "])));
|
|
135
135
|
},
|
|
136
|
-
|
|
137
|
-
return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n
|
|
136
|
+
textAndMarkerWrapper: function () {
|
|
137
|
+
return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n align-items: center;\n "], ["\n display: flex;\n flex-grow: 1;\n align-items: center;\n "])));
|
|
138
138
|
},
|
|
139
|
-
|
|
140
|
-
return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n
|
|
139
|
+
markerMultiline: function () {
|
|
140
|
+
return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n align-self: flex-start;\n "], ["\n align-self: flex-start;\n "])));
|
|
141
141
|
},
|
|
142
142
|
subItemHeader: function () {
|
|
143
|
-
return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n font-size: 12px;\n color: rgba(0, 0, 0, 0.48);\n padding: 10px 8px 2px 40px;\n "], ["\n font-size: 12px;\n color: rgba(0, 0, 0, 0.48);\n padding: 10px 8px 2px 40px;\n "])));
|
|
143
|
+
return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n font-size: 12px;\n color: rgba(0, 0, 0, 0.48);\n padding: 10px 8px 2px 40px;\n margin: 0;\n "], ["\n font-size: 12px;\n color: rgba(0, 0, 0, 0.48);\n padding: 10px 8px 2px 40px;\n margin: 0;\n "])));
|
|
144
144
|
},
|
|
145
|
-
|
|
146
|
-
return css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n
|
|
145
|
+
subItemHeaderWithoutIcons: function () {
|
|
146
|
+
return css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n padding-left: 8px;\n "], ["\n padding-left: 8px;\n "])));
|
|
147
147
|
},
|
|
148
|
-
|
|
149
|
-
return css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n
|
|
148
|
+
separatedMenu: function () {
|
|
149
|
+
return css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n z-index: 8000;\n background: #fff;\n left: 100%;\n overflow: auto;\n justify-content: flex-start;\n padding-top: 24px;\n border-right: 1px solid #e5e5e5;\n "], ["\n position: absolute;\n top: 0;\n z-index: 8000;\n background: #fff;\n left: 100%;\n overflow: auto;\n justify-content: flex-start;\n padding-top: 24px;\n border-right: 1px solid #e5e5e5;\n "])));
|
|
150
150
|
},
|
|
151
151
|
dropdownWrapper: function () {
|
|
152
152
|
return css(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n overflow-x: hidden;\n "], ["\n overflow-x: hidden;\n "])));
|
|
@@ -157,6 +157,14 @@ var styles = {
|
|
|
157
157
|
subItemMenu: function () {
|
|
158
158
|
return css(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n padding-left: 16px;\n "], ["\n padding-left: 16px;\n "])));
|
|
159
159
|
},
|
|
160
|
+
rightBorder: function () {
|
|
161
|
+
return css(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 100%;\n right: -10px;\n background: transparent;\n "], ["\n position: absolute;\n width: 20px;\n height: 100%;\n right: -10px;\n background: transparent;\n "])));
|
|
162
|
+
},
|
|
163
|
+
};
|
|
164
|
+
export var customStyles = {
|
|
165
|
+
rightBorderHovered: function (color) {
|
|
166
|
+
return css(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n position: absolute;\n width: 2px;\n background: ", ";\n height: 100%;\n left: 9px;\n "], ["\n position: absolute;\n width: 2px;\n background: ", ";\n height: 100%;\n left: 9px;\n "])), color);
|
|
167
|
+
},
|
|
160
168
|
};
|
|
161
169
|
export var jsStyles = memoizeStyle(styles);
|
|
162
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52;
|
|
170
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54;
|
package/src/SideMenuAvatar.d.ts
CHANGED
|
@@ -1,25 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
|
|
3
2
|
import { UserAvatarProps } from '@skbkontur/react-ui-addons/components/UserAvatar';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
};
|
|
7
|
-
declare type DefaultProps = {
|
|
8
|
-
cabinetUrl: string;
|
|
9
|
-
};
|
|
10
|
-
export declare type SideMenuAvatarProps = CommonProps & UserAvatarProps & SideMenuAvatarInterface & Partial<DefaultProps>;
|
|
11
|
-
declare type SideMenuAvatarComponentProps = CommonProps & UserAvatarProps & SideMenuAvatarInterface & DefaultProps;
|
|
12
|
-
/**
|
|
13
|
-
* Аватар пользователя
|
|
14
|
-
*
|
|
15
|
-
* @visibleName SideMenu.Avatar
|
|
16
|
-
*/
|
|
17
|
-
export declare class SideMenuAvatar extends React.Component<SideMenuAvatarComponentProps> {
|
|
18
|
-
static __KONTUR_REACT_UI__: string;
|
|
19
|
-
static defaultProps: {
|
|
20
|
-
cabinetUrl: string;
|
|
21
|
-
};
|
|
22
|
-
render(): JSX.Element;
|
|
23
|
-
renderMain(): JSX.Element;
|
|
3
|
+
import { SideMenuDropdownProps } from './SideMenuDropdown';
|
|
4
|
+
export interface SideMenuAvatarProps extends UserAvatarProps, SideMenuDropdownProps {
|
|
24
5
|
}
|
|
25
|
-
|
|
6
|
+
declare const SideMenuAvatarWithStaticFields: React.ForwardRefExoticComponent<SideMenuAvatarProps & React.RefAttributes<HTMLDivElement>> & {
|
|
7
|
+
__KONTUR_REACT_UI__: string;
|
|
8
|
+
};
|
|
9
|
+
export { SideMenuAvatarWithStaticFields as SideMenuAvatar };
|
package/src/SideMenuAvatar.js
CHANGED
|
@@ -1,47 +1,16 @@
|
|
|
1
|
-
import { __assign,
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
|
|
4
|
-
import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
|
|
5
|
-
import { DEFAULT_THEME, DropdownMenu, MenuItem, ThemeFactory } from '@skbkontur/react-ui';
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
6
3
|
import { UserAvatar } from '@skbkontur/react-ui-addons/components/UserAvatar';
|
|
7
|
-
import {
|
|
8
|
-
import { SideMenuItem } from './SideMenuItem';
|
|
9
|
-
import { SideMenuDropdownMenuSeparator } from './SideMenuDropdownMenuSeparator';
|
|
4
|
+
import { SideMenuDropdown } from './SideMenuDropdown';
|
|
10
5
|
/**
|
|
11
6
|
* Аватар пользователя
|
|
12
7
|
*
|
|
13
8
|
* @visibleName SideMenu.Avatar
|
|
14
9
|
*/
|
|
15
|
-
var SideMenuAvatar =
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
SideMenuAvatar.prototype.renderMain = function () {
|
|
24
|
-
var _a = this.props, cabinetUrl = _a.cabinetUrl, userName = _a.userName, onLogout = _a.onLogout;
|
|
25
|
-
var label = (React.createElement("div", { className: jsStyles.dropdownLabel() },
|
|
26
|
-
React.createElement(SideMenuItem, { icon: React.createElement(UserAvatar, __assign({}, this.props)), caption: userName })));
|
|
27
|
-
return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
|
|
28
|
-
menuItemHoverBg: '#f6f6f6',
|
|
29
|
-
menuItemHoverColor: '#222',
|
|
30
|
-
popupBorderRadius: '8px',
|
|
31
|
-
menuItemPaddingX: '32px',
|
|
32
|
-
}, DEFAULT_THEME) },
|
|
33
|
-
React.createElement(CommonWrapper, __assign({}, this.props),
|
|
34
|
-
React.createElement("div", { className: jsStyles.dropdownWrapper() },
|
|
35
|
-
React.createElement(DropdownMenu, { caption: label, menuWidth: 200, positions: ['top left'] },
|
|
36
|
-
React.createElement(MenuItem, { href: cabinetUrl, target: "_blank" }, "\u041B\u0438\u0447\u043D\u044B\u0439 \u043A\u0430\u0431\u0438\u043D\u0435\u0442"),
|
|
37
|
-
React.createElement(MenuItem, null, "\u0411\u0435\u0437\u043E\u043F\u0430\u0441\u043D\u043E\u0441\u0442\u044C"),
|
|
38
|
-
React.createElement(SideMenuDropdownMenuSeparator, null),
|
|
39
|
-
React.createElement(MenuItem, { onClick: onLogout }, "\u0412\u044B\u0439\u0442\u0438"))))));
|
|
40
|
-
};
|
|
41
|
-
SideMenuAvatar.__KONTUR_REACT_UI__ = 'SideMenuAvatar';
|
|
42
|
-
SideMenuAvatar.defaultProps = {
|
|
43
|
-
cabinetUrl: 'https://cabinet.kontur.ru',
|
|
44
|
-
};
|
|
45
|
-
return SideMenuAvatar;
|
|
46
|
-
}(React.Component));
|
|
47
|
-
export { SideMenuAvatar };
|
|
10
|
+
var SideMenuAvatar = forwardRef(function (_a, ref) {
|
|
11
|
+
var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, rest = __rest(_a, ["userName", "avatarUrl", "children"]);
|
|
12
|
+
return (React.createElement(SideMenuDropdown, __assign({ icon: React.createElement(UserAvatar, { userName: userName, avatarUrl: avatarUrl }), caption: userName, menuWidth: 200, positions: ['top left'], ref: ref }, rest), children));
|
|
13
|
+
});
|
|
14
|
+
SideMenuAvatar.displayName = 'SideMenuAvatar';
|
|
15
|
+
var SideMenuAvatarWithStaticFields = Object.assign(SideMenuAvatar, { __KONTUR_REACT_UI__: 'SideMenuAvatar' });
|
|
16
|
+
export { SideMenuAvatarWithStaticFields as SideMenuAvatar };
|
package/src/SideMenuBody.d.ts
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
|
|
3
|
-
|
|
4
|
-
* Основной контейнер для меню
|
|
5
|
-
*
|
|
6
|
-
* @visibleName SideMenu.Body
|
|
7
|
-
*/
|
|
8
|
-
export declare type SideMenuBodyProps = CommonProps & {
|
|
3
|
+
export interface SideMenuBodyProps extends CommonProps {
|
|
9
4
|
children?: React.ReactNode;
|
|
5
|
+
}
|
|
6
|
+
declare const SideMenuBodyWithStaticFields: React.ForwardRefExoticComponent<SideMenuBodyProps & React.RefAttributes<HTMLDivElement>> & {
|
|
7
|
+
__KONTUR_REACT_UI__: string;
|
|
10
8
|
};
|
|
11
|
-
export
|
|
9
|
+
export { SideMenuBodyWithStaticFields as SideMenuBody };
|