@skbkontur/side-menu 0.6.1 → 0.6.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 +11 -0
- package/README.md +41 -0
- package/package.json +1 -1
- package/src/SideMenu/SideMenu.js +7 -1
- package/src/SideMenu/SideMenu.styles.d.ts +1 -0
- package/src/SideMenu/SideMenu.styles.js +17 -14
- package/src/SideMenuDropdown/SideMenuDropdown.js +2 -2
- package/src/internal/Burger.styles.js +1 -1
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.6.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.6.1...@skbkontur/side-menu@0.6.2) (2023-02-20)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **SideMenu:** adaptive version fix ([8433d88](https://git.skbkontur.ru/ui/ui-parking/commits/8433d88733782b139813d3de802158b447729a6b))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [0.6.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.6.0...@skbkontur/side-menu@0.6.1) (2023-02-09)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @skbkontur/side-menu
|
package/README.md
CHANGED
|
@@ -454,3 +454,44 @@ const items = [
|
|
|
454
454
|
</div>
|
|
455
455
|
</div>
|
|
456
456
|
```
|
|
457
|
+
|
|
458
|
+
### Адаптивность
|
|
459
|
+
|
|
460
|
+
Пример встраивания SideMenu с адаптивом (более наглядно в [песочнице](https://codesandbox.io/s/dark-waterfall-5b4fkh?file=/src/App.js)):
|
|
461
|
+
|
|
462
|
+
```jsx static
|
|
463
|
+
<div className="App">
|
|
464
|
+
<div className="layout">
|
|
465
|
+
<div className="menu">
|
|
466
|
+
<SideMenu />
|
|
467
|
+
</div>
|
|
468
|
+
<div className="content">
|
|
469
|
+
...
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
```
|
|
474
|
+
|
|
475
|
+
где
|
|
476
|
+
|
|
477
|
+
```css static
|
|
478
|
+
.layout {
|
|
479
|
+
display: flex;
|
|
480
|
+
flex-direction: column;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.layout .menu {
|
|
484
|
+
height: 68px;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
@media screen and (min-width: 992px) {
|
|
488
|
+
.layout {
|
|
489
|
+
flex-direction: row;
|
|
490
|
+
height: 100vh;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.layout .menu {
|
|
494
|
+
height: 100%;
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
```
|
package/package.json
CHANGED
package/src/SideMenu/SideMenu.js
CHANGED
|
@@ -58,6 +58,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
|
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
});
|
|
61
|
+
useEffect(function () {
|
|
62
|
+
if (isNarrowDesktop || isDesktop) {
|
|
63
|
+
setIsShown(true);
|
|
64
|
+
}
|
|
65
|
+
}, [isNarrowDesktop, isDesktop]);
|
|
61
66
|
useEffect(function () {
|
|
62
67
|
setActiveMenuItem(value);
|
|
63
68
|
}, [value]);
|
|
@@ -135,7 +140,8 @@ var SideMenuInner = forwardRef(function (_a, ref) {
|
|
|
135
140
|
} },
|
|
136
141
|
React.createElement(ZIndex, { priority: isTabletOrMobileSideMenu ? 'Sidepage' : 0, className: cx((_b = {},
|
|
137
142
|
_b[jsStyles.sideMenuZIndex()] = true,
|
|
138
|
-
_b[jsStyles.sideMenuZIndexForTabletsOrMobiles()] =
|
|
143
|
+
_b[jsStyles.sideMenuZIndexForTabletsOrMobiles()] = isTabletOrMobileSideMenu,
|
|
144
|
+
_b[jsStyles.shownSideMenuZIndexForTabletsOrMobiles()] = isShown && isTabletOrMobileSideMenu,
|
|
139
145
|
_b)) },
|
|
140
146
|
React.createElement(React.Fragment, null,
|
|
141
147
|
isTabletOrMobileSideMenu && isShown && React.createElement(Backdrop, null),
|
|
@@ -5,45 +5,48 @@ var styles = {
|
|
|
5
5
|
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n "], ["\n position: relative;\n height: 100%;\n "])));
|
|
6
6
|
},
|
|
7
7
|
sideMenuZIndexForTabletsOrMobiles: function () {
|
|
8
|
-
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n "], ["\n position: absolute;\n top: 0;\n "])));
|
|
8
|
+
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 68px;\n position: absolute;\n top: 0;\n "], ["\n height: 68px;\n position: absolute;\n top: 0;\n "])));
|
|
9
|
+
},
|
|
10
|
+
shownSideMenuZIndexForTabletsOrMobiles: function () {
|
|
11
|
+
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 100vh;\n "], ["\n height: 100vh;\n "])));
|
|
9
12
|
},
|
|
10
13
|
root: function () {
|
|
11
|
-
return css(
|
|
14
|
+
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 232px;\n height: 100%;\n background: #f6f6f6;\n position: relative;\n box-sizing: border-box;\n transition: width 1s;\n "], ["\n width: 232px;\n height: 100%;\n background: #f6f6f6;\n position: relative;\n box-sizing: border-box;\n transition: width 1s;\n "])));
|
|
12
15
|
},
|
|
13
16
|
rootSafari: function () {
|
|
14
|
-
return css(
|
|
17
|
+
return css(templateObject_5 || (templateObject_5 = __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 "])));
|
|
15
18
|
},
|
|
16
19
|
rootInnerWithoutScrollBar: function () {
|
|
17
|
-
return css(
|
|
20
|
+
return css(templateObject_6 || (templateObject_6 = __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 "])));
|
|
18
21
|
},
|
|
19
22
|
collapsedRootInnerForTabletsOrMobiles: function () {
|
|
20
|
-
return css(
|
|
23
|
+
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n overflow: hidden;\n "], ["\n overflow: hidden;\n "])));
|
|
21
24
|
},
|
|
22
25
|
minimisedRoot: function () {
|
|
23
|
-
return css(
|
|
26
|
+
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 72px !important;\n "], ["\n width: 72px !important;\n "])));
|
|
24
27
|
},
|
|
25
28
|
rootWithInnerSubMenu: function () {
|
|
26
|
-
return css(
|
|
29
|
+
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n overflow-x: hidden;\n "], ["\n overflow-x: hidden;\n "])));
|
|
27
30
|
},
|
|
28
31
|
rootForTouchScreens: function () {
|
|
29
|
-
return css(
|
|
32
|
+
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 328px;\n "], ["\n width: 328px;\n "])));
|
|
30
33
|
},
|
|
31
34
|
rootInSeparatedMenuForMobiles: function () {
|
|
32
|
-
return css(
|
|
35
|
+
return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background: #fff;\n "], ["\n background: #fff;\n "])));
|
|
33
36
|
},
|
|
34
37
|
rootInnerContainer: function () {
|
|
35
|
-
return css(
|
|
38
|
+
return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n height: calc(100% - 24px);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0 16px 24px;\n "], ["\n height: calc(100% - 24px);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0 16px 24px;\n "])));
|
|
36
39
|
},
|
|
37
40
|
rootWrapper: function () {
|
|
38
|
-
return css(
|
|
41
|
+
return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n height: 100%;\n display: inline-flex;\n position: relative;\n "], ["\n height: 100%;\n display: inline-flex;\n position: relative;\n "])));
|
|
39
42
|
},
|
|
40
43
|
rootWrapperIE: function () {
|
|
41
44
|
var ieRootWrapperCorrection = 15;
|
|
42
|
-
return css(
|
|
45
|
+
return css(templateObject_14 || (templateObject_14 = __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);
|
|
43
46
|
},
|
|
44
47
|
collapsedRootForTabletsOrMobiles: function () {
|
|
45
|
-
return css(
|
|
48
|
+
return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n background-color: transparent;\n "], ["\n background-color: transparent;\n "])));
|
|
46
49
|
},
|
|
47
50
|
};
|
|
48
51
|
export var jsStyles = memoizeStyle(styles);
|
|
49
|
-
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;
|
|
52
|
+
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;
|
|
@@ -27,9 +27,9 @@ var SideMenuDropdownInner = forwardRef(function (_a, ref) {
|
|
|
27
27
|
if (React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'MenuItem') {
|
|
28
28
|
return React.cloneElement(child, {
|
|
29
29
|
onClick: function () {
|
|
30
|
-
var _a;
|
|
30
|
+
var _a, _b, _c;
|
|
31
31
|
(_a = context.toggleIsShown) === null || _a === void 0 ? void 0 : _a.call(context);
|
|
32
|
-
child.props.onClick();
|
|
32
|
+
(_c = (_b = child.props).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
33
33
|
},
|
|
34
34
|
});
|
|
35
35
|
}
|
|
@@ -3,7 +3,7 @@ import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
|
|
|
3
3
|
import { resetButton } from '@skbkontur/react-ui/lib/styles/Mixins';
|
|
4
4
|
var styles = {
|
|
5
5
|
burgerWrapperForTabletsOrMobiles: function () {
|
|
6
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n margin-right: 8px;\n "], ["\n ", ";\n margin-right: 8px;\n "])), resetButton());
|
|
6
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n margin-right: 8px;\n cursor: pointer;\n "], ["\n ", ";\n margin-right: 8px;\n cursor: pointer;\n "])), resetButton());
|
|
7
7
|
},
|
|
8
8
|
};
|
|
9
9
|
export var jsStyles = memoizeStyle(styles);
|