@skbkontur/side-menu 0.2.5 → 0.3.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 +11 -0
- package/package.json +1 -1
- package/src/InnerSubMenu.js +1 -1
- package/src/SeparatedSubMenu.js +1 -11
- package/src/SideMenu.styles.d.ts +5 -1
- package/src/SideMenu.styles.js +41 -27
- package/src/SideMenuAvatar.js +3 -1
- package/src/SideMenuDropdown.d.ts +1 -0
- package/src/SideMenuDropdown.js +11 -6
- package/src/SideMenuItem.d.ts +4 -2
- package/src/SideMenuItem.js +52 -43
- package/src/SideMenuLogotype.js +2 -5
- package/src/SideMenuSubItem.js +7 -2
- package/src/SideMenuSubItemHeader.js +4 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.3.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.2.5...@skbkontur/side-menu@0.3.0) (2022-11-03)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **logos:** optimize svgo config ([753c221](https://git.skbkontur.ru/ui/ui-parking/commits/753c221300358e8196c11d36923eac8445ec93a1))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [0.2.5](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.2.2...@skbkontur/side-menu@0.2.5) (2022-10-17)
|
|
7
18
|
|
|
8
19
|
|
package/package.json
CHANGED
package/src/InnerSubMenu.js
CHANGED
|
@@ -8,7 +8,7 @@ var InnerSubMenu = forwardRef(function (_a, ref) {
|
|
|
8
8
|
var children = _a.children, id = _a.id;
|
|
9
9
|
return (React.createElement(React.Fragment, null, React.Children.map(children, function (child) {
|
|
10
10
|
if (React.isValidElement(child)) {
|
|
11
|
-
return React.cloneElement(child, {
|
|
11
|
+
return React.cloneElement(child, { _parent: id, ref: ref });
|
|
12
12
|
}
|
|
13
13
|
return child;
|
|
14
14
|
})));
|
package/src/SeparatedSubMenu.js
CHANGED
|
@@ -25,17 +25,7 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
|
|
|
25
25
|
});
|
|
26
26
|
};
|
|
27
27
|
return (React.createElement("div", { className: cx((_b = {}, _b[jsStyles.root()] = true, _b[jsStyles.separatedMenu()] = true, _b)), ref: ref },
|
|
28
|
-
React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) },
|
|
29
|
-
if (React.isValidElement(child)) {
|
|
30
|
-
// @ts-expect-error: accessing private property
|
|
31
|
-
if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuSubItemHeader' && !hasSubItems(children)) {
|
|
32
|
-
return React.cloneElement(child, {
|
|
33
|
-
className: jsStyles.subItemHeaderWithoutIcons(),
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
return child;
|
|
37
|
-
}
|
|
38
|
-
}))));
|
|
28
|
+
React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, children)));
|
|
39
29
|
});
|
|
40
30
|
SeparatedSubMenu.displayName = 'SeparatedSubMenu';
|
|
41
31
|
var SeparatedSubMenuWithStaticFields = Object.assign(SeparatedSubMenu, { __KONTUR_REACT_UI__: 'SeparatedSubMenu' });
|
package/src/SideMenu.styles.d.ts
CHANGED
|
@@ -30,6 +30,8 @@ export declare const jsStyles: {
|
|
|
30
30
|
itemTextTransitioned(): string;
|
|
31
31
|
itemTextMultiline(): string;
|
|
32
32
|
subItemText(): string;
|
|
33
|
+
subItemTextSeparatedMenuFirstLevel(): string;
|
|
34
|
+
nestedSubItemTextSeparatedMenu(): string;
|
|
33
35
|
itemTextWithoutItemIcon(): string;
|
|
34
36
|
subItemTextWithoutColumnIcons(): string;
|
|
35
37
|
itemTextLarge(): string;
|
|
@@ -41,16 +43,18 @@ export declare const jsStyles: {
|
|
|
41
43
|
iconMultilineLarge(): string;
|
|
42
44
|
iconSubItemLarge(): string;
|
|
43
45
|
iconSubItem(): string;
|
|
46
|
+
iconSubItemSeparatedMenu(): string;
|
|
44
47
|
avatarIcon(): string;
|
|
45
48
|
headerIcon(): string;
|
|
46
49
|
marker(): string;
|
|
47
50
|
textAndMarkerWrapper(): string;
|
|
48
51
|
markerMultiline(): string;
|
|
49
52
|
subItemHeader(): string;
|
|
50
|
-
|
|
53
|
+
subItemHeaderInSeparatedSubMenu(): string;
|
|
51
54
|
separatedMenu(): string;
|
|
52
55
|
dropdownWrapper(): string;
|
|
53
56
|
dropdownLabel(): string;
|
|
57
|
+
dropdownLabelMinimized(): string;
|
|
54
58
|
subItemMenu(): string;
|
|
55
59
|
rightBorder(): string;
|
|
56
60
|
};
|
package/src/SideMenu.styles.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
2
|
import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
|
|
3
|
+
var subItemTextSeparatedMenuFirstLevelXMargin = '8px';
|
|
3
4
|
var styles = {
|
|
4
5
|
root: function () {
|
|
5
6
|
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 232px;\n height: 100%;\n background: #f6f6f6;\n padding: 0 16px 24px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n box-sizing: border-box;\n transition: width 1s;\n "], ["\n width: 232px;\n height: 100%;\n background: #f6f6f6;\n padding: 0 16px 24px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n box-sizing: border-box;\n transition: width 1s;\n "])));
|
|
@@ -20,7 +21,8 @@ var styles = {
|
|
|
20
21
|
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 100%;\n display: inline-flex;\n position: relative;\n "], ["\n height: 100%;\n display: inline-flex;\n position: relative;\n "])));
|
|
21
22
|
},
|
|
22
23
|
rootWrapperIE: function () {
|
|
23
|
-
|
|
24
|
+
var ieRootWrapperCorrection = 15;
|
|
25
|
+
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n top: -", "px;\n height: calc(100% + ", "px);\n "], ["\n position: relative;\n top: -", "px;\n height: calc(100% + ", "px);\n "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
|
|
24
26
|
},
|
|
25
27
|
resizableRightBorder: function () {
|
|
26
28
|
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n cursor: col-resize;\n "], ["\n cursor: col-resize;\n "])));
|
|
@@ -85,80 +87,92 @@ var styles = {
|
|
|
85
87
|
subItemText: function () {
|
|
86
88
|
return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n margin-left: 4px;\n "], ["\n margin-left: 4px;\n "])));
|
|
87
89
|
},
|
|
90
|
+
subItemTextSeparatedMenuFirstLevel: function () {
|
|
91
|
+
return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n margin: 0 ", ";\n "], ["\n margin: 0 ", ";\n "])), subItemTextSeparatedMenuFirstLevelXMargin);
|
|
92
|
+
},
|
|
93
|
+
nestedSubItemTextSeparatedMenu: function () {
|
|
94
|
+
return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n margin: 0 20px;\n "], ["\n margin: 0 20px;\n "])));
|
|
95
|
+
},
|
|
88
96
|
itemTextWithoutItemIcon: function () {
|
|
89
|
-
return css(
|
|
97
|
+
return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n margin-left: 40px;\n "], ["\n margin-left: 40px;\n "])));
|
|
90
98
|
},
|
|
91
99
|
subItemTextWithoutColumnIcons: function () {
|
|
92
|
-
return css(
|
|
100
|
+
return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n margin-left: 8px;\n "], ["\n margin-left: 8px;\n "])));
|
|
93
101
|
},
|
|
94
102
|
itemTextLarge: function () {
|
|
95
|
-
return css(
|
|
103
|
+
return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 22px;\n "], ["\n font-size: 16px;\n line-height: 22px;\n "])));
|
|
96
104
|
},
|
|
97
105
|
dividerInDropdown: function () {
|
|
98
|
-
return css(
|
|
106
|
+
return css(templateObject_34 || (templateObject_34 = __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 "])));
|
|
99
107
|
},
|
|
100
108
|
dividerInSideMenu: function () {
|
|
101
|
-
return css(
|
|
109
|
+
return css(templateObject_35 || (templateObject_35 = __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 "])));
|
|
102
110
|
},
|
|
103
111
|
icon: function () {
|
|
104
|
-
return css(
|
|
112
|
+
return css(templateObject_36 || (templateObject_36 = __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 "])));
|
|
105
113
|
},
|
|
106
114
|
iconMultiline: function () {
|
|
107
|
-
return css(
|
|
115
|
+
return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n min-height: 0;\n align-self: flex-start;\n align-items: flex-start;\n "], ["\n min-height: 0;\n align-self: flex-start;\n align-items: flex-start;\n "])));
|
|
108
116
|
},
|
|
109
117
|
iconLarge: function () {
|
|
110
|
-
return css(
|
|
118
|
+
return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n min-height: 30px;\n line-height: 22px;\n "], ["\n min-height: 30px;\n line-height: 22px;\n "])));
|
|
111
119
|
},
|
|
112
120
|
iconMultilineLarge: function () {
|
|
113
|
-
return css(
|
|
121
|
+
return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n min-height: 0;\n "], ["\n min-height: 0;\n "])));
|
|
114
122
|
},
|
|
115
123
|
iconSubItemLarge: function () {
|
|
116
|
-
return css(
|
|
124
|
+
return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n min-height: 22px;\n "], ["\n min-height: 22px;\n "])));
|
|
117
125
|
},
|
|
118
126
|
iconSubItem: function () {
|
|
119
|
-
return css(
|
|
127
|
+
return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n padding-left: 20px;\n padding-right: 0;\n min-height: 20px;\n line-height: 16px;\n "], ["\n padding-left: 20px;\n padding-right: 0;\n min-height: 20px;\n line-height: 16px;\n "])));
|
|
128
|
+
},
|
|
129
|
+
iconSubItemSeparatedMenu: function () {
|
|
130
|
+
return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n padding-left: 4px;\n "], ["\n padding-left: 4px;\n "])));
|
|
120
131
|
},
|
|
121
132
|
avatarIcon: function () {
|
|
122
|
-
return css(
|
|
133
|
+
return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n margin: 0 4px;\n padding: 0;\n "], ["\n margin: 0 4px;\n padding: 0;\n "])));
|
|
123
134
|
},
|
|
124
135
|
headerIcon: function () {
|
|
125
|
-
return css(
|
|
136
|
+
return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n padding: 0 4px;\n "], ["\n padding: 0 4px;\n "])));
|
|
126
137
|
},
|
|
127
138
|
marker: function () {
|
|
128
|
-
return css(
|
|
139
|
+
return css(templateObject_45 || (templateObject_45 = __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 "])));
|
|
129
140
|
},
|
|
130
141
|
textAndMarkerWrapper: function () {
|
|
131
|
-
return css(
|
|
142
|
+
return css(templateObject_46 || (templateObject_46 = __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 "])));
|
|
132
143
|
},
|
|
133
144
|
markerMultiline: function () {
|
|
134
|
-
return css(
|
|
145
|
+
return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n align-self: flex-start;\n "], ["\n align-self: flex-start;\n "])));
|
|
135
146
|
},
|
|
136
147
|
subItemHeader: function () {
|
|
137
|
-
return css(
|
|
148
|
+
return css(templateObject_48 || (templateObject_48 = __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 "])));
|
|
138
149
|
},
|
|
139
|
-
|
|
140
|
-
return css(
|
|
150
|
+
subItemHeaderInSeparatedSubMenu: function () {
|
|
151
|
+
return css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), subItemTextSeparatedMenuFirstLevelXMargin);
|
|
141
152
|
},
|
|
142
153
|
separatedMenu: function () {
|
|
143
|
-
return css(
|
|
154
|
+
return css(templateObject_50 || (templateObject_50 = __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 "])));
|
|
144
155
|
},
|
|
145
156
|
dropdownWrapper: function () {
|
|
146
|
-
return css(
|
|
157
|
+
return css(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n overflow-x: hidden;\n "], ["\n overflow-x: hidden;\n "])));
|
|
147
158
|
},
|
|
148
159
|
dropdownLabel: function () {
|
|
149
|
-
return css(
|
|
160
|
+
return css(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n width: 200px;\n transition: width 1s;\n "], ["\n width: 200px;\n transition: width 1s;\n "])));
|
|
161
|
+
},
|
|
162
|
+
dropdownLabelMinimized: function () {
|
|
163
|
+
return css(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n width: 100%;\n "], ["\n width: 100%;\n "])));
|
|
150
164
|
},
|
|
151
165
|
subItemMenu: function () {
|
|
152
|
-
return css(
|
|
166
|
+
return css(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n padding-left: 16px;\n "], ["\n padding-left: 16px;\n "])));
|
|
153
167
|
},
|
|
154
168
|
rightBorder: function () {
|
|
155
|
-
return css(
|
|
169
|
+
return css(templateObject_55 || (templateObject_55 = __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 "])));
|
|
156
170
|
},
|
|
157
171
|
};
|
|
158
172
|
export var customStyles = {
|
|
159
173
|
rightBorderHovered: function (color) {
|
|
160
|
-
return css(
|
|
174
|
+
return css(templateObject_56 || (templateObject_56 = __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);
|
|
161
175
|
},
|
|
162
176
|
};
|
|
163
177
|
export var jsStyles = memoizeStyle(styles);
|
|
164
|
-
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;
|
|
178
|
+
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, templateObject_55, templateObject_56;
|
package/src/SideMenuAvatar.js
CHANGED
|
@@ -9,7 +9,9 @@ import { SideMenuDropdown } from './SideMenuDropdown';
|
|
|
9
9
|
*/
|
|
10
10
|
var SideMenuAvatar = forwardRef(function (_a, ref) {
|
|
11
11
|
var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, icon = _a.icon, rest = __rest(_a, ["userName", "avatarUrl", "children", "icon"]);
|
|
12
|
-
return (
|
|
12
|
+
return (
|
|
13
|
+
// @ts-expect-error: icon is not provided as _avatar replaces it
|
|
14
|
+
React.createElement(SideMenuDropdown, __assign({ _avatar: React.createElement(UserAvatar, { userName: userName, avatarUrl: avatarUrl }), caption: userName, menuWidth: 200, positions: ['top left'], ref: ref }, rest), children));
|
|
13
15
|
});
|
|
14
16
|
SideMenuAvatar.displayName = 'SideMenuAvatar';
|
|
15
17
|
var SideMenuAvatarWithStaticFields = Object.assign(SideMenuAvatar, { __KONTUR_REACT_UI__: 'SideMenuAvatar' });
|
|
@@ -6,6 +6,7 @@ export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuPro
|
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
caption?: string;
|
|
8
8
|
disableAnimations?: boolean;
|
|
9
|
+
_avatar?: React.ReactElement;
|
|
9
10
|
}
|
|
10
11
|
declare const SideMenuDropdownWithStaticFields: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLDivElement>> & {
|
|
11
12
|
__KONTUR_REACT_UI__: string;
|
package/src/SideMenuDropdown.js
CHANGED
|
@@ -1,27 +1,32 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
-
import React, { forwardRef } from 'react';
|
|
2
|
+
import React, { forwardRef, useContext } from 'react';
|
|
3
3
|
import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
|
|
4
4
|
import { DEFAULT_THEME, DropdownMenu, ThemeFactory } from '@skbkontur/react-ui';
|
|
5
5
|
import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
|
|
6
6
|
import { jsStyles } from './SideMenu.styles';
|
|
7
7
|
import { SideMenuItem } from './SideMenuItem';
|
|
8
|
+
import { SideMenuContext } from './SideMenuContext';
|
|
8
9
|
/**
|
|
9
10
|
* Элемент списка с выпадающим меню
|
|
10
11
|
*
|
|
11
12
|
* @visibleName SideMenu.Dropdown
|
|
12
13
|
*/
|
|
13
14
|
var SideMenuDropdown = forwardRef(function (_a, ref) {
|
|
14
|
-
var _b;
|
|
15
|
-
var icon = _a.icon, children = _a.children,
|
|
16
|
-
var
|
|
17
|
-
|
|
15
|
+
var _b, _c;
|
|
16
|
+
var icon = _a.icon, _avatar = _a._avatar, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "_avatar", "children", "caption", "className", "disableAnimations", "menuWidth"]);
|
|
17
|
+
var context = useContext(SideMenuContext);
|
|
18
|
+
var label = (React.createElement("div", { className: cx((_b = {},
|
|
19
|
+
_b[jsStyles.dropdownLabel()] = true,
|
|
20
|
+
_b[jsStyles.dropdownLabelMinimized()] = context.isMinimised,
|
|
21
|
+
_b)) },
|
|
22
|
+
React.createElement(SideMenuItem, { icon: icon, caption: caption, _avatar: _avatar })));
|
|
18
23
|
return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
|
|
19
24
|
menuItemHoverBg: '#f6f6f6',
|
|
20
25
|
menuItemHoverColor: '#222',
|
|
21
26
|
popupBorderRadius: '8px',
|
|
22
27
|
menuItemPaddingX: '32px',
|
|
23
28
|
}, DEFAULT_THEME) },
|
|
24
|
-
React.createElement("div", __assign({ className: cx((
|
|
29
|
+
React.createElement("div", __assign({ className: cx((_c = {}, _c[jsStyles.dropdownWrapper()] = true, _c), className), ref: ref }, rest),
|
|
25
30
|
React.createElement(DropdownMenu, __assign({ caption: label, positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), children))));
|
|
26
31
|
});
|
|
27
32
|
SideMenuDropdown.displayName = 'SideMenuDropdown';
|
package/src/SideMenuItem.d.ts
CHANGED
|
@@ -7,8 +7,10 @@ export interface SideMenuItemProps extends CommonProps {
|
|
|
7
7
|
icon: React.ReactElement;
|
|
8
8
|
marker?: string;
|
|
9
9
|
caption?: string;
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
_isSubMenu?: boolean;
|
|
11
|
+
_parent?: string;
|
|
12
|
+
_isNestedSubMenu?: boolean;
|
|
13
|
+
_avatar?: React.ReactElement;
|
|
12
14
|
}
|
|
13
15
|
declare const SideMenuItemWithStaticFields: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLButtonElement>> & {
|
|
14
16
|
__KONTUR_REACT_UI__: string;
|
package/src/SideMenuItem.js
CHANGED
|
@@ -12,14 +12,14 @@ import { InnerSubMenu } from './InnerSubMenu';
|
|
|
12
12
|
* @visibleName SideMenu.Item
|
|
13
13
|
*/
|
|
14
14
|
var SideMenuItem = forwardRef(function (_a, ref) {
|
|
15
|
-
var _b, _c, _d, _e, _f;
|
|
16
|
-
var className = _a.className, onClick = _a.onClick, onKeyDown = _a.onKeyDown, icon = _a.icon, marker = _a.marker, caption = _a.caption,
|
|
15
|
+
var _b, _c, _d, _e, _f, _g;
|
|
16
|
+
var className = _a.className, onClick = _a.onClick, onKeyDown = _a.onKeyDown, icon = _a.icon, _avatar = _a._avatar, marker = _a.marker, caption = _a.caption, _parent = _a._parent, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, rest = __rest(_a, ["className", "onClick", "onKeyDown", "icon", "_avatar", "marker", "caption", "_parent", "_isSubMenu", "children", "_isNestedSubMenu"]);
|
|
17
17
|
var context = useContext(SideMenuContext);
|
|
18
18
|
var textRef = useRef(null);
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
-
var
|
|
19
|
+
var _h = useState(false), isOpened = _h[0], setIsOpened = _h[1];
|
|
20
|
+
var _j = useState(false), focusedByTab = _j[0], setFocusedByTab = _j[1];
|
|
21
|
+
var _k = useState(false), isMultiline = _k[0], setIsMultiline = _k[1];
|
|
22
|
+
var _l = useState(context), oldContext = _l[0], setOldContext = _l[1];
|
|
23
23
|
var id = useState('id' + Math.floor(Math.random() * 10000))[0];
|
|
24
24
|
var getNumberOfTextLines = function () {
|
|
25
25
|
if (textRef.current) {
|
|
@@ -43,9 +43,9 @@ var SideMenuItem = forwardRef(function (_a, ref) {
|
|
|
43
43
|
}, [context.activeItem]);
|
|
44
44
|
var setActive = function () {
|
|
45
45
|
var _a, _b, _c, _d;
|
|
46
|
-
if (
|
|
47
|
-
if (
|
|
48
|
-
(_a = context.setActiveItem) === null || _a === void 0 ? void 0 : _a.call(context,
|
|
46
|
+
if (_isSubMenu) {
|
|
47
|
+
if (_parent) {
|
|
48
|
+
(_a = context.setActiveItem) === null || _a === void 0 ? void 0 : _a.call(context, _parent);
|
|
49
49
|
}
|
|
50
50
|
(_b = context.setActiveSubItem) === null || _b === void 0 ? void 0 : _b.call(context, id);
|
|
51
51
|
}
|
|
@@ -60,8 +60,6 @@ var SideMenuItem = forwardRef(function (_a, ref) {
|
|
|
60
60
|
if (context) {
|
|
61
61
|
active = context.activeItem === id || context.activeSubItem === id;
|
|
62
62
|
}
|
|
63
|
-
// @ts-expect-error: accessing private property
|
|
64
|
-
var isIconUserAvatar = typeof (icon === null || icon === void 0 ? void 0 : icon.type) === 'function' && icon.type.__KONTUR_REACT_UI__ === 'UserAvatar';
|
|
65
63
|
var handleClick = function (e) {
|
|
66
64
|
if (onClick) {
|
|
67
65
|
onClick(e);
|
|
@@ -87,7 +85,7 @@ var SideMenuItem = forwardRef(function (_a, ref) {
|
|
|
87
85
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
|
|
88
86
|
};
|
|
89
87
|
var renderSubMenu = function () {
|
|
90
|
-
if (children && isOpened && !
|
|
88
|
+
if (children && isOpened && !_isSubMenu && !context.isMinimised) {
|
|
91
89
|
if (context.isSeparatedMenu) {
|
|
92
90
|
return React.createElement(SeparatedSubMenu, null, children);
|
|
93
91
|
}
|
|
@@ -96,51 +94,62 @@ var SideMenuItem = forwardRef(function (_a, ref) {
|
|
|
96
94
|
}
|
|
97
95
|
}
|
|
98
96
|
};
|
|
97
|
+
var hasShortcutImage = icon || _avatar;
|
|
99
98
|
return (React.createElement("div", null,
|
|
100
99
|
React.createElement("button", __assign({ className: cx((_b = {},
|
|
101
100
|
_b[jsStyles.item()] = true,
|
|
102
|
-
_b[jsStyles.subItem()] = context.isSeparatedMenu &&
|
|
101
|
+
_b[jsStyles.subItem()] = context.isSeparatedMenu && _isSubMenu,
|
|
103
102
|
_b[jsStyles.focusedItem()] = focusedByTab,
|
|
104
103
|
_b[jsStyles.activeItem()] = (active && !isOpened) ||
|
|
105
104
|
(active && isOpened && !context.activeSubItem) ||
|
|
106
|
-
(active && isOpened &&
|
|
107
|
-
|
|
105
|
+
(active && isOpened && _isSubMenu) ||
|
|
106
|
+
(active && context.isSeparatedMenu),
|
|
107
|
+
_b[jsStyles.activeSubItem()] = active && context.isSeparatedMenu && _isSubMenu,
|
|
108
108
|
_b), className), onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, onFocus: handleFocus, onBlur: handleBlur, ref: ref }, rest),
|
|
109
109
|
React.createElement("div", { className: cx((_c = {},
|
|
110
110
|
_c[jsStyles.itemWrapper()] = true,
|
|
111
111
|
_c[jsStyles.itemMultilineWrapper()] = isMultiline,
|
|
112
|
-
_c[jsStyles.subItemWrapper()] =
|
|
112
|
+
_c[jsStyles.subItemWrapper()] = _isSubMenu,
|
|
113
113
|
_c[jsStyles.itemLargeWrapper()] = context.size === 'large',
|
|
114
|
-
_c[jsStyles.subItemLargeWrapper()] = context.size === 'large' &&
|
|
114
|
+
_c[jsStyles.subItemLargeWrapper()] = context.size === 'large' && _isSubMenu,
|
|
115
115
|
_c[jsStyles.itemLargeMultilineWrapper()] = isMultiline && context.size === 'large',
|
|
116
116
|
_c)) },
|
|
117
|
-
icon &&
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
_d
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
117
|
+
icon &&
|
|
118
|
+
React.cloneElement(icon, {
|
|
119
|
+
size: _isSubMenu ? 16 : 24,
|
|
120
|
+
disableCompensation: true,
|
|
121
|
+
className: cx((_d = {},
|
|
122
|
+
_d[jsStyles.icon()] = true,
|
|
123
|
+
_d[jsStyles.iconMultiline()] = isMultiline,
|
|
124
|
+
_d[jsStyles.iconLarge()] = context.size === 'large',
|
|
125
|
+
_d[jsStyles.iconMultilineLarge()] = context.size === 'large' && isMultiline,
|
|
126
|
+
_d[jsStyles.iconSubItem()] = _isSubMenu,
|
|
127
|
+
_d[jsStyles.iconSubItemSeparatedMenu()] = context.isSeparatedMenu && _isSubMenu,
|
|
128
|
+
_d[jsStyles.iconSubItemLarge()] = _isSubMenu && context.size === 'large',
|
|
129
|
+
_d)),
|
|
130
|
+
}),
|
|
131
|
+
_avatar &&
|
|
132
|
+
React.cloneElement(_avatar, {
|
|
133
|
+
className: cx((_e = {},
|
|
134
|
+
_e[jsStyles.avatarIcon()] = true,
|
|
135
|
+
_e)),
|
|
136
|
+
}),
|
|
130
137
|
!context.isMinimised && (React.createElement("div", { className: jsStyles.textAndMarkerWrapper() },
|
|
131
|
-
React.createElement("p", { className: cx((
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
_f
|
|
142
|
-
|
|
143
|
-
|
|
138
|
+
React.createElement("p", { className: cx((_f = {},
|
|
139
|
+
_f[jsStyles.itemText()] = true,
|
|
140
|
+
_f[jsStyles.itemTextTransitioned()] = context.isTransitioned,
|
|
141
|
+
_f[jsStyles.subItemText()] = _isSubMenu,
|
|
142
|
+
_f[jsStyles.subItemTextSeparatedMenuFirstLevel()] = context.isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
|
|
143
|
+
_f[jsStyles.nestedSubItemTextSeparatedMenu()] = context.isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
|
|
144
|
+
_f[jsStyles.itemTextWithoutItemIcon()] = !hasShortcutImage && !context.isSeparatedMenu,
|
|
145
|
+
_f[jsStyles.subItemTextWithoutColumnIcons()] = _isSubMenu && context.isSeparatedMenu && !context.hasSubIcons,
|
|
146
|
+
_f[jsStyles.itemTextLarge()] = context.size === 'large',
|
|
147
|
+
_f[jsStyles.itemTextMultiline()] = isMultiline,
|
|
148
|
+
_f)), ref: textRef }, caption),
|
|
149
|
+
marker && (React.createElement("span", { className: cx((_g = {},
|
|
150
|
+
_g[jsStyles.marker()] = true,
|
|
151
|
+
_g[jsStyles.markerMultiline()] = isMultiline,
|
|
152
|
+
_g)) }, marker)))))),
|
|
144
153
|
renderSubMenu()));
|
|
145
154
|
});
|
|
146
155
|
SideMenuItem.displayName = 'SideMenuItem';
|
package/src/SideMenuLogotype.js
CHANGED
|
@@ -31,11 +31,8 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
|
|
|
31
31
|
.join('');
|
|
32
32
|
};
|
|
33
33
|
var getProductName = function () {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
name = changeCamelCaseToKebabCase(productLogo.type.name);
|
|
37
|
-
}
|
|
38
|
-
return name;
|
|
34
|
+
// @ts-expect-error: accessing private property
|
|
35
|
+
return productLogo ? changeCamelCaseToKebabCase(productLogo.type.__KONTUR_REACT_UI__) : 'kontur';
|
|
39
36
|
};
|
|
40
37
|
var productName = getProductName();
|
|
41
38
|
var getStaticIconPath = function () {
|
package/src/SideMenuSubItem.js
CHANGED
|
@@ -31,8 +31,13 @@ var SideMenuSubItem = forwardRef(function (props, ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}, [isOpened, props.children]);
|
|
33
33
|
return (React.createElement("div", { ref: ref },
|
|
34
|
-
React.createElement(SideMenuItem, __assign({ onClick: handleClick, icon: icon,
|
|
35
|
-
props.children && isOpened && React.createElement("div", { className: jsStyles.subItemMenu() }, props.children)
|
|
34
|
+
React.createElement(SideMenuItem, __assign({ onClick: handleClick, icon: icon, _isSubMenu: true, onKeyDown: handleKeyDown }, props)),
|
|
35
|
+
props.children && isOpened && (React.createElement("div", { className: jsStyles.subItemMenu() }, React.Children.map(props.children, function (child) {
|
|
36
|
+
if (React.isValidElement(child)) {
|
|
37
|
+
return React.cloneElement(child, { _isNestedSubMenu: true });
|
|
38
|
+
}
|
|
39
|
+
return child;
|
|
40
|
+
})))));
|
|
36
41
|
});
|
|
37
42
|
SideMenuSubItem.displayName = 'SideMenuSubItem';
|
|
38
43
|
var SideMenuSubItemWithStaticFields = Object.assign(SideMenuSubItem, { __KONTUR_REACT_UI__: 'SideMenuSubItem' });
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
-
import React, { forwardRef } from 'react';
|
|
2
|
+
import React, { forwardRef, useContext } from 'react';
|
|
3
3
|
import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
|
|
4
4
|
import { jsStyles } from './SideMenu.styles';
|
|
5
|
+
import { SideMenuContext } from './SideMenuContext';
|
|
5
6
|
/**
|
|
6
7
|
* Заголовок списка второго уровня
|
|
7
8
|
*
|
|
@@ -10,7 +11,8 @@ import { jsStyles } from './SideMenu.styles';
|
|
|
10
11
|
var SideMenuSubItemHeader = forwardRef(function (_a, ref) {
|
|
11
12
|
var _b;
|
|
12
13
|
var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
|
|
13
|
-
|
|
14
|
+
var context = useContext(SideMenuContext);
|
|
15
|
+
return (React.createElement("p", __assign({ className: cx((_b = {}, _b[jsStyles.subItemHeader()] = true, _b[jsStyles.subItemHeaderInSeparatedSubMenu()] = context.isSeparatedMenu, _b), className), ref: ref }, rest), children));
|
|
14
16
|
});
|
|
15
17
|
SideMenuSubItemHeader.displayName = 'SideMenuSubItemHeader';
|
|
16
18
|
var SideMenuSubItemHeaderWithStaticFields = Object.assign(SideMenuSubItemHeader, {
|