@skbkontur/side-menu 0.2.4 → 0.2.5
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 +12 -0
- package/README.md +15 -8
- package/package.json +1 -1
- package/src/SideMenu.d.ts +1 -0
- package/src/SideMenu.js +23 -9
- package/src/SideMenu.styles.d.ts +1 -3
- package/src/SideMenu.styles.js +32 -38
- package/src/SideMenuAvatar.d.ts +1 -1
- package/src/SideMenuAvatar.js +1 -1
- package/src/SideMenuBody.js +3 -7
- package/src/SideMenuContext.d.ts +1 -2
- package/src/SideMenuDropdown.d.ts +1 -1
- package/src/SideMenuFooter.js +2 -5
- package/src/SideMenuItem.d.ts +1 -1
- package/src/SideMenuItem.js +6 -11
- package/src/SideMenuLogotype.js +2 -15
- package/src/SideMenuSubItem.d.ts +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
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.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
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **importer.tsx:** fix validation column after remove row ([b81b7b8](https://git.skbkontur.ru/ui/ui-parking/commits/b81b7b83e93194279dae53d3ee5c4550d98163a8))
|
|
12
|
+
* **importer.tsx:** validation columns after matching data ([4440160](https://git.skbkontur.ru/ui/ui-parking/commits/44401601a77a6f5c672ad87ef8f1a00b9640ec79))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
6
18
|
## [0.2.4](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.2.2...@skbkontur/side-menu@0.2.4) (2022-10-14)
|
|
7
19
|
|
|
8
20
|
|
package/README.md
CHANGED
|
@@ -15,6 +15,7 @@ import {
|
|
|
15
15
|
BookmarkIcon24Regular,
|
|
16
16
|
StackHDownIcon24Regular,
|
|
17
17
|
SettingsGearIcon24Regular,
|
|
18
|
+
FaceAHappyIcon24Regular
|
|
18
19
|
} from '@skbkontur/icons';
|
|
19
20
|
|
|
20
21
|
<div style={{height: '600px'}}>
|
|
@@ -34,7 +35,7 @@ import {
|
|
|
34
35
|
<SideMenu.SubItem caption={'Требуют обработки'}/>
|
|
35
36
|
<SideMenu.SubItem caption={'Обработанные'}/>
|
|
36
37
|
</SideMenu.Item>
|
|
37
|
-
<SideMenu.Item caption={'Контрагенты'}/>
|
|
38
|
+
<SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
|
|
38
39
|
<SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
|
|
39
40
|
<SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
|
|
40
41
|
<SideMenu.SubItem caption={'Исходящие'}/>
|
|
@@ -83,8 +84,14 @@ import { Buhgalteria, Kontur } from '@skbkontur/logos';
|
|
|
83
84
|
import { MenuItem, Modal, Input } from '@skbkontur/react-ui';
|
|
84
85
|
import { SideMenu } from './index';
|
|
85
86
|
import {
|
|
87
|
+
DocTextIcon24Regular,
|
|
88
|
+
CommentRectTextIcon24Regular,
|
|
89
|
+
LightbulbIcon24Regular,
|
|
90
|
+
BookOpenTextIcon24Regular,
|
|
91
|
+
BookmarkIcon24Regular,
|
|
86
92
|
StackHDownIcon24Regular,
|
|
87
93
|
SettingsGearIcon24Regular,
|
|
94
|
+
FaceAHappyIcon24Regular
|
|
88
95
|
} from '@skbkontur/icons';
|
|
89
96
|
|
|
90
97
|
const [opened, setOpened] = React.useState(false);
|
|
@@ -111,10 +118,10 @@ const renderModal = () => {
|
|
|
111
118
|
}
|
|
112
119
|
|
|
113
120
|
<div style={{height: '600px', width: '100%'}}>
|
|
114
|
-
<SideMenu isSeparatedMenu={true}>
|
|
121
|
+
<SideMenu isSeparatedMenu={true} disableSwipe={true}>
|
|
115
122
|
<SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>}/>
|
|
116
123
|
<SideMenu.Body>
|
|
117
|
-
<SideMenu.Item caption={'Документы'} marker={'новое'}>
|
|
124
|
+
<SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы'} marker={'новое'}>
|
|
118
125
|
<SideMenu.SubItem caption={'Входящие'} marker={'5'}>
|
|
119
126
|
<SideMenu.SubItem caption={'Входящие бла-бла-бла'}>
|
|
120
127
|
<SideMenu.SubItem caption={'Входящие11'}>
|
|
@@ -144,18 +151,18 @@ const renderModal = () => {
|
|
|
144
151
|
<SideMenu.SubItem caption={'Требуют обработки'}/>
|
|
145
152
|
<SideMenu.SubItem caption={'Обработанные'}/>
|
|
146
153
|
</SideMenu.Item>
|
|
147
|
-
<SideMenu.Item caption={'Контрагенты'}/>
|
|
148
|
-
<SideMenu.Item caption={'Сообщения'} marker={'5'}>
|
|
154
|
+
<SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
|
|
155
|
+
<SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
|
|
149
156
|
<SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
|
|
150
157
|
<SideMenu.SubItem caption={'Исходящие'}/>
|
|
151
158
|
<SideMenu.SubItem caption={'Внутренние'}/>
|
|
152
159
|
<SideMenu.SubItem caption={'Черновики'}/>
|
|
153
160
|
<SideMenu.SubItem caption={'Удаленные'}/>
|
|
154
161
|
</SideMenu.Item>
|
|
155
|
-
<SideMenu.Item caption={'Справочная'}/>
|
|
162
|
+
<SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
|
|
156
163
|
<SideMenu.Divider />
|
|
157
|
-
<SideMenu.Item caption={'Еще раздел'}/>
|
|
158
|
-
<SideMenu.Item caption={'Отчетность'}/>
|
|
164
|
+
<SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
|
|
165
|
+
<SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
|
|
159
166
|
</SideMenu.Body>
|
|
160
167
|
<SideMenu.Footer>
|
|
161
168
|
<div>
|
package/package.json
CHANGED
package/src/SideMenu.d.ts
CHANGED
package/src/SideMenu.js
CHANGED
|
@@ -19,15 +19,17 @@ export var SideMenuDataTids = {
|
|
|
19
19
|
};
|
|
20
20
|
var SideMenu = forwardRef(function (_a, ref) {
|
|
21
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"]);
|
|
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, _f = _a.disableSwipe, disableSwipe = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "size", "isSeparatedMenu", "className", "disableSwipe"]);
|
|
23
23
|
var scrollTimer = null;
|
|
24
24
|
var transitionTimer = null;
|
|
25
|
-
var
|
|
26
|
-
var _g = useState(
|
|
27
|
-
var _h = useState(null),
|
|
28
|
-
var _j = useState(
|
|
29
|
-
var _k = useState(false),
|
|
30
|
-
var _l = useState(
|
|
25
|
+
var widgetTimer;
|
|
26
|
+
var _g = useState(false), isMinimised = _g[0], setIsMinimised = _g[1];
|
|
27
|
+
var _h = useState(null), activeItem = _h[0], setActiveItem = _h[1];
|
|
28
|
+
var _j = useState(null), activeSubItem = _j[0], setActiveSubItem = _j[1];
|
|
29
|
+
var _k = useState(false), hasScrollBar = _k[0], setHasScrollBar = _k[1];
|
|
30
|
+
var _l = useState(false), isTransitioned = _l[0], setIsTransitioned = _l[1];
|
|
31
|
+
var _m = useState('#2291ff'), productColor = _m[0], setProductColor = _m[1];
|
|
32
|
+
var _o = useState(false), showWidget = _o[0], setShowWidget = _o[1];
|
|
31
33
|
useEffect(function () {
|
|
32
34
|
return function () {
|
|
33
35
|
if (scrollTimer) {
|
|
@@ -62,6 +64,17 @@ var SideMenu = forwardRef(function (_a, ref) {
|
|
|
62
64
|
setHasScrollBar(false);
|
|
63
65
|
}, 200);
|
|
64
66
|
};
|
|
67
|
+
var handleMouseEnter = function () {
|
|
68
|
+
widgetTimer = setTimeout(function () {
|
|
69
|
+
setShowWidget(true);
|
|
70
|
+
}, 500);
|
|
71
|
+
};
|
|
72
|
+
var handleMouseLeave = function () {
|
|
73
|
+
if (widgetTimer) {
|
|
74
|
+
clearTimeout(widgetTimer);
|
|
75
|
+
}
|
|
76
|
+
setShowWidget(false);
|
|
77
|
+
};
|
|
65
78
|
return (React.createElement(SideMenuContext.Provider, { value: {
|
|
66
79
|
isMinimised: isMinimised,
|
|
67
80
|
isTransitioned: isTransitioned,
|
|
@@ -73,8 +86,9 @@ var SideMenu = forwardRef(function (_a, ref) {
|
|
|
73
86
|
activeSubItem: activeSubItem,
|
|
74
87
|
setActiveSubItem: setActiveSubItem,
|
|
75
88
|
setProductColor: setProductColor,
|
|
89
|
+
showWidget: showWidget,
|
|
76
90
|
} },
|
|
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),
|
|
91
|
+
React.createElement("aside", __assign({ className: cx((_b = {}, _b[jsStyles.rootWrapper()] = true, _b[jsStyles.rootWrapperIE()] = isIE11, _b), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }),
|
|
78
92
|
React.createElement("div", { className: cx((_c = {},
|
|
79
93
|
_c[jsStyles.root()] = true,
|
|
80
94
|
_c[jsStyles.rootSafari()] = isSafari,
|
|
@@ -82,7 +96,7 @@ var SideMenu = forwardRef(function (_a, ref) {
|
|
|
82
96
|
_c[jsStyles.rootWithInnerSubMenu()] = !isSeparatedMenu,
|
|
83
97
|
_c[jsStyles.rootWithoutScrollBar()] = !hasScrollBar,
|
|
84
98
|
_c)), onMouseOver: showMinimisedRoot, onFocus: showMinimisedRoot, onScroll: handleScroll }, children),
|
|
85
|
-
React.createElement(RightBorder, { setIsMinimised: function (value) { return setIsMinimised(value); } }))));
|
|
99
|
+
!disableSwipe && React.createElement(RightBorder, { setIsMinimised: function (value) { return setIsMinimised(value); } }))));
|
|
86
100
|
});
|
|
87
101
|
SideMenu.displayName = 'SideMenu';
|
|
88
102
|
var STATIC_PROPS = {
|
package/src/SideMenu.styles.d.ts
CHANGED
|
@@ -25,15 +25,12 @@ export declare const jsStyles: {
|
|
|
25
25
|
itemLargeWrapper(): string;
|
|
26
26
|
subItemLargeWrapper(): string;
|
|
27
27
|
itemLargeMultilineWrapper(): string;
|
|
28
|
-
itemLargeWrapperWithoutIcon(): string;
|
|
29
28
|
subItemWrapper(): string;
|
|
30
|
-
itemWrapperWithoutIcon(): string;
|
|
31
29
|
itemText(): string;
|
|
32
30
|
itemTextTransitioned(): string;
|
|
33
31
|
itemTextMultiline(): string;
|
|
34
32
|
subItemText(): string;
|
|
35
33
|
itemTextWithoutItemIcon(): string;
|
|
36
|
-
itemTextWithoutColumnIcons(): string;
|
|
37
34
|
subItemTextWithoutColumnIcons(): string;
|
|
38
35
|
itemTextLarge(): string;
|
|
39
36
|
dividerInDropdown(): string;
|
|
@@ -41,6 +38,7 @@ export declare const jsStyles: {
|
|
|
41
38
|
icon(): string;
|
|
42
39
|
iconMultiline(): string;
|
|
43
40
|
iconLarge(): string;
|
|
41
|
+
iconMultilineLarge(): string;
|
|
44
42
|
iconSubItemLarge(): string;
|
|
45
43
|
iconSubItem(): string;
|
|
46
44
|
avatarIcon(): string;
|
package/src/SideMenu.styles.js
CHANGED
|
@@ -70,101 +70,95 @@ var styles = {
|
|
|
70
70
|
itemLargeMultilineWrapper: function () {
|
|
71
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 "])));
|
|
72
72
|
},
|
|
73
|
-
itemLargeWrapperWithoutIcon: function () {
|
|
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 "])));
|
|
75
|
-
},
|
|
76
73
|
subItemWrapper: function () {
|
|
77
|
-
return css(
|
|
78
|
-
},
|
|
79
|
-
itemWrapperWithoutIcon: function () {
|
|
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 "])));
|
|
74
|
+
return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n padding-top: 4px;\n padding-bottom: 4px;\n "], ["\n padding-top: 4px;\n padding-bottom: 4px;\n "])));
|
|
81
75
|
},
|
|
82
76
|
itemText: function () {
|
|
83
|
-
return css(
|
|
77
|
+
return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n line-height: 20px;\n margin: 0 8px 0 0;\n "], ["\n line-height: 20px;\n margin: 0 8px 0 0;\n "])));
|
|
84
78
|
},
|
|
85
79
|
itemTextTransitioned: function () {
|
|
86
|
-
return css(
|
|
80
|
+
return css(templateObject_26 || (templateObject_26 = __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 "])));
|
|
87
81
|
},
|
|
88
82
|
itemTextMultiline: function () {
|
|
89
|
-
return css(
|
|
83
|
+
return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n align-self: flex-start;\n "], ["\n align-self: flex-start;\n "])));
|
|
90
84
|
},
|
|
91
85
|
subItemText: function () {
|
|
92
|
-
return css(
|
|
86
|
+
return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n margin-left: 4px;\n "], ["\n margin-left: 4px;\n "])));
|
|
93
87
|
},
|
|
94
88
|
itemTextWithoutItemIcon: function () {
|
|
95
|
-
return css(
|
|
96
|
-
},
|
|
97
|
-
itemTextWithoutColumnIcons: function () {
|
|
98
|
-
return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n margin-left: 12px;\n "], ["\n margin-left: 12px;\n "])));
|
|
89
|
+
return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n margin-left: 40px;\n "], ["\n margin-left: 40px;\n "])));
|
|
99
90
|
},
|
|
100
91
|
subItemTextWithoutColumnIcons: function () {
|
|
101
|
-
return css(
|
|
92
|
+
return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n margin-left: 8px;\n "], ["\n margin-left: 8px;\n "])));
|
|
102
93
|
},
|
|
103
94
|
itemTextLarge: function () {
|
|
104
|
-
return css(
|
|
95
|
+
return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 22px;\n "], ["\n font-size: 16px;\n line-height: 22px;\n "])));
|
|
105
96
|
},
|
|
106
97
|
dividerInDropdown: function () {
|
|
107
|
-
return css(
|
|
98
|
+
return css(templateObject_32 || (templateObject_32 = __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
99
|
},
|
|
109
100
|
dividerInSideMenu: function () {
|
|
110
|
-
return css(
|
|
101
|
+
return css(templateObject_33 || (templateObject_33 = __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
102
|
},
|
|
112
103
|
icon: function () {
|
|
113
|
-
return css(
|
|
104
|
+
return css(templateObject_34 || (templateObject_34 = __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
105
|
},
|
|
115
106
|
iconMultiline: function () {
|
|
116
|
-
return css(
|
|
107
|
+
return css(templateObject_35 || (templateObject_35 = __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 "])));
|
|
117
108
|
},
|
|
118
109
|
iconLarge: function () {
|
|
119
|
-
return css(
|
|
110
|
+
return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n min-height: 30px;\n line-height: 22px;\n "], ["\n min-height: 30px;\n line-height: 22px;\n "])));
|
|
111
|
+
},
|
|
112
|
+
iconMultilineLarge: function () {
|
|
113
|
+
return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n min-height: 0;\n "], ["\n min-height: 0;\n "])));
|
|
120
114
|
},
|
|
121
115
|
iconSubItemLarge: function () {
|
|
122
|
-
return css(
|
|
116
|
+
return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n min-height: 22px;\n "], ["\n min-height: 22px;\n "])));
|
|
123
117
|
},
|
|
124
118
|
iconSubItem: function () {
|
|
125
|
-
return css(
|
|
119
|
+
return css(templateObject_39 || (templateObject_39 = __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 "])));
|
|
126
120
|
},
|
|
127
121
|
avatarIcon: function () {
|
|
128
|
-
return css(
|
|
122
|
+
return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n padding: 0 4px;\n "], ["\n padding: 0 4px;\n "])));
|
|
129
123
|
},
|
|
130
124
|
headerIcon: function () {
|
|
131
|
-
return css(
|
|
125
|
+
return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n padding: 0 4px;\n "], ["\n padding: 0 4px;\n "])));
|
|
132
126
|
},
|
|
133
127
|
marker: function () {
|
|
134
|
-
return css(
|
|
128
|
+
return css(templateObject_42 || (templateObject_42 = __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
129
|
},
|
|
136
130
|
textAndMarkerWrapper: function () {
|
|
137
|
-
return css(
|
|
131
|
+
return css(templateObject_43 || (templateObject_43 = __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
132
|
},
|
|
139
133
|
markerMultiline: function () {
|
|
140
|
-
return css(
|
|
134
|
+
return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n align-self: flex-start;\n "], ["\n align-self: flex-start;\n "])));
|
|
141
135
|
},
|
|
142
136
|
subItemHeader: function () {
|
|
143
|
-
return css(
|
|
137
|
+
return css(templateObject_45 || (templateObject_45 = __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
138
|
},
|
|
145
139
|
subItemHeaderWithoutIcons: function () {
|
|
146
|
-
return css(
|
|
140
|
+
return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n padding-left: 8px;\n "], ["\n padding-left: 8px;\n "])));
|
|
147
141
|
},
|
|
148
142
|
separatedMenu: function () {
|
|
149
|
-
return css(
|
|
143
|
+
return css(templateObject_47 || (templateObject_47 = __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
144
|
},
|
|
151
145
|
dropdownWrapper: function () {
|
|
152
|
-
return css(
|
|
146
|
+
return css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n overflow-x: hidden;\n "], ["\n overflow-x: hidden;\n "])));
|
|
153
147
|
},
|
|
154
148
|
dropdownLabel: function () {
|
|
155
|
-
return css(
|
|
149
|
+
return css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n width: 200px;\n "], ["\n width: 200px;\n "])));
|
|
156
150
|
},
|
|
157
151
|
subItemMenu: function () {
|
|
158
|
-
return css(
|
|
152
|
+
return css(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n padding-left: 16px;\n "], ["\n padding-left: 16px;\n "])));
|
|
159
153
|
},
|
|
160
154
|
rightBorder: function () {
|
|
161
|
-
return css(
|
|
155
|
+
return css(templateObject_51 || (templateObject_51 = __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
156
|
},
|
|
163
157
|
};
|
|
164
158
|
export var customStyles = {
|
|
165
159
|
rightBorderHovered: function (color) {
|
|
166
|
-
return css(
|
|
160
|
+
return css(templateObject_52 || (templateObject_52 = __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
161
|
},
|
|
168
162
|
};
|
|
169
163
|
export var jsStyles = memoizeStyle(styles);
|
|
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
|
|
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;
|
package/src/SideMenuAvatar.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { UserAvatarProps } from '@skbkontur/react-ui-addons/components/UserAvatar';
|
|
3
3
|
import { SideMenuDropdownProps } from './SideMenuDropdown';
|
|
4
|
-
export interface SideMenuAvatarProps extends UserAvatarProps, SideMenuDropdownProps {
|
|
4
|
+
export interface SideMenuAvatarProps extends UserAvatarProps, Omit<SideMenuDropdownProps, 'icon'>, Partial<Pick<SideMenuDropdownProps, 'icon'>> {
|
|
5
5
|
}
|
|
6
6
|
declare const SideMenuAvatarWithStaticFields: React.ForwardRefExoticComponent<SideMenuAvatarProps & React.RefAttributes<HTMLDivElement>> & {
|
|
7
7
|
__KONTUR_REACT_UI__: string;
|
package/src/SideMenuAvatar.js
CHANGED
|
@@ -8,7 +8,7 @@ import { SideMenuDropdown } from './SideMenuDropdown';
|
|
|
8
8
|
* @visibleName SideMenu.Avatar
|
|
9
9
|
*/
|
|
10
10
|
var SideMenuAvatar = forwardRef(function (_a, ref) {
|
|
11
|
-
var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, rest = __rest(_a, ["userName", "avatarUrl", "children"]);
|
|
11
|
+
var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, icon = _a.icon, rest = __rest(_a, ["userName", "avatarUrl", "children", "icon"]);
|
|
12
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
13
|
});
|
|
14
14
|
SideMenuAvatar.displayName = 'SideMenuAvatar';
|
package/src/SideMenuBody.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
-
import React, { forwardRef
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
3
3
|
import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
|
|
4
|
-
import { SideMenuContext } from './SideMenuContext';
|
|
5
4
|
import { jsStyles } from './SideMenu.styles';
|
|
6
5
|
import { SideMenuBodyChildren } from './SideMenuBodyChildren';
|
|
7
6
|
/**
|
|
@@ -12,11 +11,8 @@ import { SideMenuBodyChildren } from './SideMenuBodyChildren';
|
|
|
12
11
|
var SideMenuBody = forwardRef(function (_a, ref) {
|
|
13
12
|
var _b;
|
|
14
13
|
var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
return (React.createElement(SideMenuContext.Provider, { value: __assign({ hasIcons: hasIcons, setHasIcons: function () { return setHasIcons(true); } }, context) },
|
|
18
|
-
React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.body()] = true, _b), className), ref: ref }, rest),
|
|
19
|
-
React.createElement(SideMenuBodyChildren, null, children))));
|
|
14
|
+
return (React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.body()] = true, _b), className), ref: ref }, rest),
|
|
15
|
+
React.createElement(SideMenuBodyChildren, null, children)));
|
|
20
16
|
});
|
|
21
17
|
SideMenuBody.displayName = 'SideMenuBody';
|
|
22
18
|
var SideMenuBodyWithStaticFields = Object.assign(SideMenuBody, { __KONTUR_REACT_UI__: 'SideMenuBody' });
|
package/src/SideMenuContext.d.ts
CHANGED
|
@@ -3,8 +3,6 @@ export interface SideMenuContextType {
|
|
|
3
3
|
isTransitioned?: boolean;
|
|
4
4
|
isSeparatedMenu?: boolean;
|
|
5
5
|
size?: 'small' | 'large';
|
|
6
|
-
hasIcons?: boolean;
|
|
7
|
-
setHasIcons?: () => void;
|
|
8
6
|
activeItem?: string | null;
|
|
9
7
|
setActiveItem?: (item: string | null) => void;
|
|
10
8
|
activeSubItem?: string | null;
|
|
@@ -12,5 +10,6 @@ export interface SideMenuContextType {
|
|
|
12
10
|
hasSubIcons?: boolean;
|
|
13
11
|
productColor?: string;
|
|
14
12
|
setProductColor?: (color: string) => void;
|
|
13
|
+
showWidget?: boolean;
|
|
15
14
|
}
|
|
16
15
|
export declare const SideMenuContext: import("react").Context<SideMenuContextType>;
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { DropdownMenuProps } from '@skbkontur/react-ui';
|
|
3
3
|
import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
|
|
4
4
|
export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'> {
|
|
5
|
-
icon
|
|
5
|
+
icon: React.ReactElement;
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
caption?: string;
|
|
8
8
|
disableAnimations?: boolean;
|
package/src/SideMenuFooter.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
-
import React, { forwardRef
|
|
2
|
+
import React, { forwardRef } 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';
|
|
6
5
|
/**
|
|
7
6
|
* Нижняя часть меню
|
|
8
7
|
*
|
|
@@ -11,9 +10,7 @@ import { SideMenuContext } from './SideMenuContext';
|
|
|
11
10
|
var SideMenuFooter = forwardRef(function (_a, ref) {
|
|
12
11
|
var _b;
|
|
13
12
|
var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
|
|
14
|
-
|
|
15
|
-
return (React.createElement(SideMenuContext.Provider, { value: __assign({ hasIcons: true }, context) },
|
|
16
|
-
React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.footer()] = true, _b), className), ref: ref }, rest), children)));
|
|
13
|
+
return (React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.footer()] = true, _b), className), ref: ref }, rest), children));
|
|
17
14
|
});
|
|
18
15
|
SideMenuFooter.displayName = 'SideMenuFooter';
|
|
19
16
|
var SideMenuFooterWithStaticFields = Object.assign(SideMenuFooter, { __KONTUR_REACT_UI__: 'SideMenuFooter' });
|
package/src/SideMenuItem.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export interface SideMenuItemProps extends CommonProps {
|
|
|
4
4
|
onClick?: (event: React.MouseEvent) => void;
|
|
5
5
|
onKeyDown?: (event: React.KeyboardEvent) => void;
|
|
6
6
|
children?: React.ReactNode;
|
|
7
|
-
icon
|
|
7
|
+
icon: React.ReactElement;
|
|
8
8
|
marker?: string;
|
|
9
9
|
caption?: string;
|
|
10
10
|
isSubMenu?: boolean;
|
package/src/SideMenuItem.js
CHANGED
|
@@ -33,10 +33,6 @@ var SideMenuItem = forwardRef(function (_a, ref) {
|
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
useEffect(function () {
|
|
36
|
-
var _a;
|
|
37
|
-
if (icon && !isSubMenu) {
|
|
38
|
-
(_a = context.setHasIcons) === null || _a === void 0 ? void 0 : _a.call(context);
|
|
39
|
-
}
|
|
40
36
|
getNumberOfTextLines();
|
|
41
37
|
});
|
|
42
38
|
useEffect(function () {
|
|
@@ -114,22 +110,22 @@ var SideMenuItem = forwardRef(function (_a, ref) {
|
|
|
114
110
|
_c[jsStyles.itemWrapper()] = true,
|
|
115
111
|
_c[jsStyles.itemMultilineWrapper()] = isMultiline,
|
|
116
112
|
_c[jsStyles.subItemWrapper()] = isSubMenu,
|
|
117
|
-
_c[jsStyles.itemWrapperWithoutIcon()] = !icon && !isSubMenu,
|
|
118
113
|
_c[jsStyles.itemLargeWrapper()] = context.size === 'large',
|
|
119
114
|
_c[jsStyles.subItemLargeWrapper()] = context.size === 'large' && isSubMenu,
|
|
120
115
|
_c[jsStyles.itemLargeMultilineWrapper()] = isMultiline && context.size === 'large',
|
|
121
|
-
_c[jsStyles.itemLargeWrapperWithoutIcon()] = !icon && !isSubMenu && context.size === 'large',
|
|
122
116
|
_c)) },
|
|
123
|
-
icon && (React.createElement(
|
|
117
|
+
icon && (React.createElement(React.Fragment, null, React.cloneElement(icon, {
|
|
118
|
+
size: isSubMenu ? 16 : 24,
|
|
119
|
+
disableCompensation: true,
|
|
120
|
+
className: cx((_d = {},
|
|
124
121
|
_d[jsStyles.icon()] = true,
|
|
125
122
|
_d[jsStyles.iconMultiline()] = isMultiline,
|
|
126
123
|
_d[jsStyles.iconLarge()] = context.size === 'large',
|
|
124
|
+
_d[jsStyles.iconMultilineLarge()] = context.size === 'large' && isMultiline,
|
|
127
125
|
_d[jsStyles.iconSubItem()] = isSubMenu,
|
|
128
126
|
_d[jsStyles.iconSubItemLarge()] = isSubMenu && context.size === 'large',
|
|
129
127
|
_d[jsStyles.avatarIcon()] = isIconUserAvatar,
|
|
130
|
-
_d))
|
|
131
|
-
size: isSubMenu ? 16 : 24,
|
|
132
|
-
disableCompensation: true,
|
|
128
|
+
_d)),
|
|
133
129
|
}))),
|
|
134
130
|
!context.isMinimised && (React.createElement("div", { className: jsStyles.textAndMarkerWrapper() },
|
|
135
131
|
React.createElement("p", { className: cx((_e = {},
|
|
@@ -137,7 +133,6 @@ var SideMenuItem = forwardRef(function (_a, ref) {
|
|
|
137
133
|
_e[jsStyles.itemTextTransitioned()] = context.isTransitioned,
|
|
138
134
|
_e[jsStyles.subItemText()] = isSubMenu,
|
|
139
135
|
_e[jsStyles.itemTextWithoutItemIcon()] = !icon,
|
|
140
|
-
_e[jsStyles.itemTextWithoutColumnIcons()] = !context.hasIcons && !isSubMenu,
|
|
141
136
|
_e[jsStyles.subItemTextWithoutColumnIcons()] = isSubMenu && context.isSeparatedMenu && !context.hasSubIcons,
|
|
142
137
|
_e[jsStyles.itemTextLarge()] = context.size === 'large',
|
|
143
138
|
_e[jsStyles.itemTextMultiline()] = isMultiline,
|
package/src/SideMenuLogotype.js
CHANGED
|
@@ -22,19 +22,6 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
|
|
|
22
22
|
setSize(24);
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
|
-
var widgetTimer;
|
|
26
|
-
var _c = useState(false), withWidget = _c[0], setWithWidget = _c[1];
|
|
27
|
-
var handleMouseEnter = function () {
|
|
28
|
-
widgetTimer = setTimeout(function () {
|
|
29
|
-
setWithWidget(true);
|
|
30
|
-
}, 500);
|
|
31
|
-
};
|
|
32
|
-
var handleMouseLeave = function () {
|
|
33
|
-
if (widgetTimer) {
|
|
34
|
-
clearTimeout(widgetTimer);
|
|
35
|
-
}
|
|
36
|
-
setWithWidget(false);
|
|
37
|
-
};
|
|
38
25
|
var changeCamelCaseToKebabCase = function (str) {
|
|
39
26
|
return str
|
|
40
27
|
.split('')
|
|
@@ -57,8 +44,8 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
|
|
|
57
44
|
if (context.isMinimised || context.isTransitioned) {
|
|
58
45
|
return React.createElement("img", { className: jsStyles.headerIcon(), src: iconUrl || getStaticIconPath(), alt: productName });
|
|
59
46
|
}
|
|
60
|
-
return (React.createElement("div", {
|
|
61
|
-
React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget:
|
|
47
|
+
return (React.createElement("div", { ref: ref },
|
|
48
|
+
React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: context.showWidget }, rest))));
|
|
62
49
|
});
|
|
63
50
|
SideMenuLogotype.displayName = 'SideMenuLogotype';
|
|
64
51
|
var SideMenuLogotypeWithStaticFields = Object.assign(SideMenuLogotype, { __KONTUR_REACT_UI__: 'SideMenuLogotype' });
|
package/src/SideMenuSubItem.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { SideMenuItemProps } from './SideMenuItem';
|
|
3
|
-
|
|
3
|
+
export interface SideMenuSubItemProps extends Omit<SideMenuItemProps, 'icon'>, Partial<Pick<SideMenuItemProps, 'icon'>> {
|
|
4
|
+
}
|
|
5
|
+
declare const SideMenuSubItemWithStaticFields: React.ForwardRefExoticComponent<SideMenuSubItemProps & React.RefAttributes<HTMLDivElement>> & {
|
|
4
6
|
__KONTUR_REACT_UI__: string;
|
|
5
7
|
};
|
|
6
8
|
export { SideMenuSubItemWithStaticFields as SideMenuSubItem };
|