@skbkontur/side-menu 1.11.2 → 1.11.4-collpsing.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 +19 -0
- package/README.md +3 -3
- package/SideMenuDataTids.d.ts +1 -0
- package/SideMenuDataTids.js +1 -0
- package/hooks/useMemoIcon.d.ts +1 -0
- package/hooks/useMemoIcon.js +11 -0
- package/internal/themes/SideMenuTheme.d.ts +2 -2
- package/internal/themes/SideMenuTheme.js +3 -9
- package/package.json +2 -2
- package/src/SideMenu/SideMenu.d.ts +8 -0
- package/src/SideMenu/SideMenu.js +50 -30
- package/src/SideMenu/SideMenu.styles.d.ts +1 -0
- package/src/SideMenu/SideMenu.styles.js +18 -15
- package/src/SideMenuContext.d.ts +1 -0
- package/src/internal/ClickableElement.js +3 -2
- package/src/internal/InnerBody.js +1 -1
- package/src/internal/RightBorder.d.ts +2 -2
- package/src/internal/RightBorder.js +18 -58
- package/src/internal/RightBorder.styles.d.ts +1 -2
- package/src/internal/RightBorder.styles.js +4 -8
- package/src/internal/SeparatedSubMenu.js +5 -3
- package/src/internal/SeparatedSubMenu.styles.d.ts +1 -1
- package/src/internal/SeparatedSubMenu.styles.js +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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
|
+
## [1.11.4](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.11.3...@skbkontur/side-menu@1.11.4) (2024-03-01)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **SideMenu:** fix width on touchscreens ([5aa31cd](https://git.skbkontur.ru/ui/ui-parking/commits/5aa31cdc1f24ca87154e0914768fc94b9e553909))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [1.11.3](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.11.2...@skbkontur/side-menu@1.11.3) (2024-02-29)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @skbkontur/side-menu
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [1.11.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.11.1...@skbkontur/side-menu@1.11.2) (2024-02-28)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @skbkontur/side-menu
|
package/README.md
CHANGED
|
@@ -689,9 +689,9 @@ const [isOpen, setIsOpen] = React.useState(true);
|
|
|
689
689
|
sideMenuNestedMenuPaddingLeft: string;
|
|
690
690
|
//#endregion
|
|
691
691
|
//#region RightBorder
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
692
|
+
sideMenuRightBorderWidth: string;
|
|
693
|
+
sideMenuRightBorderIconColor: string;
|
|
694
|
+
sideMenuRightBorderHoverIconColor: string;
|
|
695
695
|
// #region BackButton (for Mobiles)
|
|
696
696
|
sideMenuBackButtonCaptionFontWeight: string;
|
|
697
697
|
sideMenuBackButtonCaptionFontSize: string;
|
package/SideMenuDataTids.d.ts
CHANGED
package/SideMenuDataTids.js
CHANGED
package/hooks/useMemoIcon.d.ts
CHANGED
package/hooks/useMemoIcon.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
2
|
import { ArrowCDownIcon16Regular } from '@skbkontur/icons/icons/ArrowCDownIcon/ArrowCDownIcon16Regular';
|
|
3
3
|
import { ArrowCRightIcon16Regular } from '@skbkontur/icons/icons/ArrowCRightIcon/ArrowCRightIcon16Regular';
|
|
4
|
+
import { ArrowCLeftIcon16Regular } from '@skbkontur/icons/icons/ArrowCLeftIcon/ArrowCLeftIcon16Regular';
|
|
4
5
|
export var useMemoIcon = function (children, isOpened) {
|
|
5
6
|
return useMemo(function () {
|
|
6
7
|
if (children) {
|
|
@@ -13,3 +14,13 @@ export var useMemoIcon = function (children, isOpened) {
|
|
|
13
14
|
}
|
|
14
15
|
}, [isOpened, children]);
|
|
15
16
|
};
|
|
17
|
+
export var useMemoBorderIcon = function (isCollapsed) {
|
|
18
|
+
return useMemo(function () {
|
|
19
|
+
if (isCollapsed) {
|
|
20
|
+
return React.createElement(ArrowCRightIcon16Regular, null);
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
return React.createElement(ArrowCLeftIcon16Regular, null);
|
|
24
|
+
}
|
|
25
|
+
}, [isCollapsed]);
|
|
26
|
+
};
|
|
@@ -101,8 +101,8 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
|
|
|
101
101
|
static sideMenuDividerBgColor: string;
|
|
102
102
|
static sideMenuNestedMenuPaddingLeft: string;
|
|
103
103
|
static sideMenuRightBorderWidth: string;
|
|
104
|
-
static
|
|
105
|
-
static
|
|
104
|
+
static sideMenuRightBorderIconColor: string;
|
|
105
|
+
static sideMenuRightBorderHoverIconColor: string;
|
|
106
106
|
static sideMenuLogotypePaddingLeft: string;
|
|
107
107
|
static sideMenuLogotypePaddingTop: string;
|
|
108
108
|
static sideMenuLogotypePaddingBottom: string;
|
|
@@ -107,13 +107,6 @@ var SideMenuTheme = /** @class */ (function (_super) {
|
|
|
107
107
|
enumerable: false,
|
|
108
108
|
configurable: true
|
|
109
109
|
});
|
|
110
|
-
Object.defineProperty(SideMenuTheme, "sideMenuRightBorderColor", {
|
|
111
|
-
get: function () {
|
|
112
|
-
return this.sideMenuProductColor;
|
|
113
|
-
},
|
|
114
|
-
enumerable: false,
|
|
115
|
-
configurable: true
|
|
116
|
-
});
|
|
117
110
|
Object.defineProperty(SideMenuTheme, "sideMenuFooterDividerColor", {
|
|
118
111
|
get: function () {
|
|
119
112
|
return this.sideMenuDividerBgColor;
|
|
@@ -238,8 +231,9 @@ var SideMenuTheme = /** @class */ (function (_super) {
|
|
|
238
231
|
SideMenuTheme.sideMenuNestedMenuPaddingLeft = '16px';
|
|
239
232
|
//#endregion
|
|
240
233
|
//#region RightBorder
|
|
241
|
-
SideMenuTheme.sideMenuRightBorderWidth = '
|
|
242
|
-
SideMenuTheme.
|
|
234
|
+
SideMenuTheme.sideMenuRightBorderWidth = '16px';
|
|
235
|
+
SideMenuTheme.sideMenuRightBorderIconColor = '#adadad';
|
|
236
|
+
SideMenuTheme.sideMenuRightBorderHoverIconColor = '#222222';
|
|
243
237
|
//#endregion
|
|
244
238
|
//#region Logotype
|
|
245
239
|
SideMenuTheme.sideMenuLogotypePaddingLeft = '8px';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skbkontur/side-menu",
|
|
3
|
-
"version": "1.11.
|
|
3
|
+
"version": "1.11.4-collpsing.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public",
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@skbkontur/icons": "^1.7.3",
|
|
26
|
-
"@skbkontur/react-ui-addons": "^4.10.
|
|
26
|
+
"@skbkontur/react-ui-addons": "^4.10.2",
|
|
27
27
|
"tslib": "^1"
|
|
28
28
|
}
|
|
29
29
|
}
|
|
@@ -17,7 +17,15 @@ export interface SideMenuProps extends CommonProps {
|
|
|
17
17
|
children?: React.ReactNode;
|
|
18
18
|
size?: 'small' | 'large';
|
|
19
19
|
isSeparatedMenu?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Заблокировать возможность сворачивания меню до иконок на широких экранах
|
|
22
|
+
* @deprecated use disableCollapsing
|
|
23
|
+
*/
|
|
20
24
|
disableSwipe?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Заблокировать возможность сворачивания меню до иконок на широких экранах
|
|
27
|
+
*/
|
|
28
|
+
disableCollapsing?: boolean;
|
|
21
29
|
value?: string;
|
|
22
30
|
onValueChange?: (value: string) => void;
|
|
23
31
|
desktopMediaQuery?: string;
|
package/src/SideMenu/SideMenu.js
CHANGED
|
@@ -31,7 +31,7 @@ export var transitionDuration = 300; //ms
|
|
|
31
31
|
export var burgerTransitionDuration = (transitionDuration * 2) / 3;
|
|
32
32
|
var SideMenuInner = forwardRef(function (_a, ref) {
|
|
33
33
|
var _b, _c, _d, _e;
|
|
34
|
-
var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _f = _a.size, size = _f === void 0 ? 'small' : _f, _g = _a.isSeparatedMenu, isSeparatedMenu = _g === void 0 ? false : _g, className = _a.className, _h = _a.disableSwipe, disableSwipe = _h === void 0 ? true : _h, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery,
|
|
34
|
+
var children = _a.children, value = _a.value, onValueChange = _a.onValueChange, _f = _a.size, size = _f === void 0 ? 'small' : _f, _g = _a.isSeparatedMenu, isSeparatedMenu = _g === void 0 ? false : _g, className = _a.className, _h = _a.disableSwipe, disableSwipe = _h === void 0 ? true : _h, _j = _a.disableCollapsing, disableCollapsing = _j === void 0 ? false : _j, desktopMediaQuery = _a.desktopMediaQuery, narrowDesktopMediaQuery = _a.narrowDesktopMediaQuery, tabletMediaQuery = _a.tabletMediaQuery, mobileMediaQuery = _a.mobileMediaQuery, _k = _a.hideScrollBar, hideScrollBar = _k === void 0 ? undefined : _k, _l = _a.showScrollBar, showScrollBar = _l === void 0 ? 'hover' : _l, isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, rest = __rest(_a, ["children", "value", "onValueChange", "size", "isSeparatedMenu", "className", "disableSwipe", "disableCollapsing", "desktopMediaQuery", "narrowDesktopMediaQuery", "tabletMediaQuery", "mobileMediaQuery", "hideScrollBar", "showScrollBar", "isOpen", "onOpen", "onClose"]);
|
|
35
35
|
var transitionTimer = useRef(null);
|
|
36
36
|
var sideMenuRef = useRef(null);
|
|
37
37
|
var contentWrapperRef = useRef(null);
|
|
@@ -43,26 +43,31 @@ var SideMenuInner = forwardRef(function (_a, ref) {
|
|
|
43
43
|
isNarrowDesktopQuery: narrowDesktopMediaQuery || theme.sideMenuNarrowDesktopMediaQuery,
|
|
44
44
|
isDesktopQuery: desktopMediaQuery || theme.sideMenuDesktopMediaQuery,
|
|
45
45
|
};
|
|
46
|
-
var
|
|
46
|
+
var _m = useResponsiveLayout({
|
|
47
47
|
customMediaQueries: customMediaQueries,
|
|
48
|
-
}), isMobileQuery =
|
|
48
|
+
}), isMobileQuery = _m.isMobileQuery, isTabletQuery = _m.isTabletQuery, isNarrowDesktopQuery = _m.isNarrowDesktopQuery, isDesktopQuery = _m.isDesktopQuery;
|
|
49
49
|
var isNarrowDesktop = isNarrowDesktopQuery && !isDesktopQuery;
|
|
50
50
|
var isTablet = isTabletQuery && !isNarrowDesktopQuery;
|
|
51
51
|
var isMobile = isMobileQuery && !isTabletQuery;
|
|
52
52
|
var isTabletOrMobile = isTablet || isMobile;
|
|
53
53
|
var isTouchScreen = isTouchDevice() || isMobile || isTablet;
|
|
54
54
|
var manual = isOpen !== undefined;
|
|
55
|
-
var
|
|
56
|
-
var
|
|
57
|
-
var
|
|
58
|
-
var
|
|
59
|
-
var
|
|
60
|
-
var
|
|
61
|
-
var
|
|
62
|
-
var
|
|
63
|
-
var
|
|
64
|
-
var
|
|
55
|
+
var _o = useState(isDesktopQuery), isOpened = _o[0], setIsOpened = _o[1];
|
|
56
|
+
var _p = useState(false), isBeingTransitioned = _p[0], setIsBeingTransitioned = _p[1];
|
|
57
|
+
var _q = useState(value), activeMenuItem = _q[0], setActiveMenuItem = _q[1];
|
|
58
|
+
var _r = useState(null), clickedButton = _r[0], setClickedButton = _r[1];
|
|
59
|
+
var _s = useState(false), isSeparatedMenuShown = _s[0], setIsSeparatedMenuShown = _s[1];
|
|
60
|
+
var _t = useState(true), isMouseOutside = _t[0], setIsMouseOutside = _t[1];
|
|
61
|
+
var _u = useState('top'), scrollState = _u[0], setScrollState = _u[1];
|
|
62
|
+
var _v = useState(false), hasScrollBar = _v[0], setHasScrollBar = _v[1];
|
|
63
|
+
var _w = useState(0), mousePositionX = _w[0], setMousePositionX = _w[1];
|
|
64
|
+
var _x = useState(0), headerHeight = _x[0], setHeaderHeight = _x[1];
|
|
65
|
+
var _y = useState(false), isCollapsable = _y[0], setIsCollapsable = _y[1];
|
|
66
|
+
var _z = useState(0), leftPosition = _z[0], setLeftPosition = _z[1];
|
|
67
|
+
var _0 = useState(false), isHovered = _0[0], setIsHovered = _0[1];
|
|
65
68
|
useEffect(function () {
|
|
69
|
+
var _a;
|
|
70
|
+
setLeftPosition(((_a = sideMenuRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0);
|
|
66
71
|
return function () {
|
|
67
72
|
if (transitionTimer.current) {
|
|
68
73
|
clearTimeout(transitionTimer.current);
|
|
@@ -122,30 +127,33 @@ var SideMenuInner = forwardRef(function (_a, ref) {
|
|
|
122
127
|
if ((isSeparatedMenu && isSeparatedMenuShown && isNarrowDesktop && manual) || isTouchScreen) {
|
|
123
128
|
return;
|
|
124
129
|
}
|
|
125
|
-
|
|
130
|
+
setIsHovered(true);
|
|
131
|
+
if (isNarrowDesktop || (isDesktopQuery && !isOpened && isCollapsable)) {
|
|
126
132
|
isMouseOutside && showMinimizedRoot(false);
|
|
127
133
|
setIsMouseOutside(false);
|
|
128
134
|
}
|
|
129
135
|
};
|
|
130
136
|
var handleMouseLeave = function () {
|
|
131
|
-
|
|
137
|
+
setIsHovered(false);
|
|
138
|
+
if (isNarrowDesktop || (isDesktopQuery && isCollapsable)) {
|
|
132
139
|
handleIsOpened(false, !manual);
|
|
133
140
|
}
|
|
134
|
-
if ((isNarrowDesktop || (isDesktopQuery &&
|
|
141
|
+
if ((isNarrowDesktop || (isDesktopQuery && isCollapsable)) && !manual) {
|
|
135
142
|
setIsMouseOutside(true);
|
|
136
143
|
}
|
|
137
144
|
};
|
|
138
145
|
var showMinimizedRootForNarrowDesktop = function (e) {
|
|
139
|
-
if (!
|
|
146
|
+
if (!isSeparatedMenuShown || !(isNarrowDesktop || (isDesktopQuery && isCollapsable)) || isTouchScreen)
|
|
140
147
|
return;
|
|
141
|
-
|
|
142
|
-
|
|
148
|
+
var relativeXCoordinate = e.clientX - leftPosition;
|
|
149
|
+
var sideMenuMinimizedWidth = parseInt(theme.sideMenuMinimizedWidth);
|
|
150
|
+
if (relativeXCoordinate <= sideMenuMinimizedWidth && mousePositionX >= sideMenuMinimizedWidth) {
|
|
143
151
|
showMinimizedRoot(false);
|
|
144
152
|
}
|
|
145
|
-
if (
|
|
153
|
+
else if (relativeXCoordinate > parseInt(theme.sideMenuWidth)) {
|
|
146
154
|
showMinimizedRoot(true);
|
|
147
155
|
}
|
|
148
|
-
setMousePositionX(
|
|
156
|
+
setMousePositionX(relativeXCoordinate);
|
|
149
157
|
};
|
|
150
158
|
var switchActiveMenuItem = function (id) {
|
|
151
159
|
if (id !== value) {
|
|
@@ -167,13 +175,14 @@ var SideMenuInner = forwardRef(function (_a, ref) {
|
|
|
167
175
|
}, burgerTransitionDuration);
|
|
168
176
|
}
|
|
169
177
|
};
|
|
170
|
-
var isSideMenuOverContent = (isNarrowDesktop || isMobile || (isTablet && !isSeparatedMenuShown)) &&
|
|
171
|
-
|
|
178
|
+
var isSideMenuOverContent = (isNarrowDesktop || isMobile || (isTablet && !isSeparatedMenuShown) || (isDesktopQuery && isCollapsable)) &&
|
|
179
|
+
isOpened;
|
|
180
|
+
var _1 = useAnimateOnMount(!!isTabletOrMobile && !!isOpened, burgerTransitionDuration, {
|
|
172
181
|
opacity: DEFAULT_THEME.sidePageBackingBgOpacity,
|
|
173
182
|
}, {
|
|
174
183
|
opacity: 0,
|
|
175
|
-
}), shouldShowBackdrop =
|
|
176
|
-
var isSideMenuOverflowing = (isTabletOrMobile || isNarrowDesktop) && isOpened;
|
|
184
|
+
}), shouldShowBackdrop = _1[0], backdropStyle = _1[1];
|
|
185
|
+
var isSideMenuOverflowing = (isTabletOrMobile || isNarrowDesktop || (isDesktopQuery && isCollapsable)) && isOpened;
|
|
177
186
|
var setScrollBar = function () {
|
|
178
187
|
var isSeparatedMenuShownInMobile = isMobile && isSeparatedMenuShown;
|
|
179
188
|
if (isOpened && !isBeingTransitioned && !isSeparatedMenuShownInMobile) {
|
|
@@ -181,8 +190,18 @@ var SideMenuInner = forwardRef(function (_a, ref) {
|
|
|
181
190
|
}
|
|
182
191
|
return 'never';
|
|
183
192
|
};
|
|
193
|
+
var handleRightBorderClick = function () {
|
|
194
|
+
if (isCollapsable) {
|
|
195
|
+
setIsCollapsable(false);
|
|
196
|
+
}
|
|
197
|
+
else {
|
|
198
|
+
setIsOpened(false);
|
|
199
|
+
setIsCollapsable(true);
|
|
200
|
+
}
|
|
201
|
+
};
|
|
184
202
|
return (React.createElement(SideMenuContext.Provider, { value: {
|
|
185
203
|
isOpened: isOpened,
|
|
204
|
+
isCollapsable: isCollapsable,
|
|
186
205
|
toggleIsOpened: function () { return showMenu(!isOpened); },
|
|
187
206
|
setIsMinimized: showMinimizedRoot,
|
|
188
207
|
isBeingTransitioned: isBeingTransitioned,
|
|
@@ -216,10 +235,11 @@ var SideMenuInner = forwardRef(function (_a, ref) {
|
|
|
216
235
|
_b[customStyles.rootForTabletsOrMobiles(headerHeight)] = isTabletOrMobile,
|
|
217
236
|
_b[jsStylesForSideMenu.shownRootForTabletsOrMobiles()] = isOpened && isTabletOrMobile,
|
|
218
237
|
_b[jsStylesForSideMenu.transitionedRootForTabletsOrMobiles()] = isBeingTransitioned && isTabletOrMobile,
|
|
219
|
-
_b[jsStylesForSideMenu.rootForNarrowDesktops(theme)] = isNarrowDesktop,
|
|
220
|
-
_b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = isSeparatedMenuShown && isNarrowDesktop,
|
|
221
|
-
_b[jsStylesForSideMenu.separatedRootForTouchScreens(theme)] = isSeparatedMenuShown && isTouchScreen && isNarrowDesktop,
|
|
222
|
-
_b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = isSeparatedMenuShown && isDesktopQuery,
|
|
238
|
+
_b[jsStylesForSideMenu.rootForNarrowDesktops(theme)] = isNarrowDesktop || (isDesktopQuery && isCollapsable),
|
|
239
|
+
_b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = isSeparatedMenuShown && (isNarrowDesktop || (isDesktopQuery && isCollapsable)),
|
|
240
|
+
_b[jsStylesForSideMenu.separatedRootForTouchScreens(theme)] = isSeparatedMenuShown && isTouchScreen && (isNarrowDesktop || (isDesktopQuery && isCollapsable)),
|
|
241
|
+
_b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = isSeparatedMenuShown && isDesktopQuery && !isCollapsable,
|
|
242
|
+
_b[jsStylesForSideMenu.separatedRootForTouchScreensForDesktops(theme)] = isDesktopQuery && isSeparatedMenuShown && isTouchScreen,
|
|
223
243
|
_b)) },
|
|
224
244
|
React.createElement(React.Fragment, null,
|
|
225
245
|
shouldShowBackdrop && React.createElement(Backdrop, { style: backdropStyle }),
|
|
@@ -244,7 +264,7 @@ var SideMenuInner = forwardRef(function (_a, ref) {
|
|
|
244
264
|
_e[jsStylesForSideMenu.contentWrapperForTouchScreens(theme)] = isTouchScreen,
|
|
245
265
|
_e[jsStylesForSideMenu.minimizedContentWrapper()] = !isOpened && !isTabletOrMobile,
|
|
246
266
|
_e)), ref: contentWrapperRef }, children))),
|
|
247
|
-
!disableSwipe && isDesktopQuery &&
|
|
267
|
+
!disableSwipe && !disableCollapsing && isDesktopQuery && isOpened && (React.createElement(RightBorder, { onClick: handleRightBorderClick, showButton: isHovered }))))))));
|
|
248
268
|
});
|
|
249
269
|
SideMenuInner.displayName = 'SideMenu';
|
|
250
270
|
var STATIC_PROPS = {
|
|
@@ -9,6 +9,7 @@ export declare const jsStylesForSideMenu: {
|
|
|
9
9
|
rootForNarrowDesktops(t: SideMenuTheme): string;
|
|
10
10
|
separatedRootForNarrowDesktops(t: SideMenuTheme): string;
|
|
11
11
|
separatedRootForTouchScreens(t: SideMenuTheme): string;
|
|
12
|
+
separatedRootForTouchScreensForDesktops(t: SideMenuTheme): string;
|
|
12
13
|
separatedRootForDesktops(t: SideMenuTheme): string;
|
|
13
14
|
container(t: SideMenuTheme): string;
|
|
14
15
|
minimizedContainer(t: SideMenuTheme): string;
|
|
@@ -21,51 +21,54 @@ var styles = {
|
|
|
21
21
|
separatedRootForTouchScreens: function (t) {
|
|
22
22
|
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: calc(", " + ", ");\n background: ", ";\n "], ["\n width: calc(", " + ", ");\n background: ", ";\n "])), t.sideMenuMinimizedWidth, t.sideMenuWidthForTouchScreens, t.sideMenuSeparatedSubMenuBgColor);
|
|
23
23
|
},
|
|
24
|
+
separatedRootForTouchScreensForDesktops: function (t) {
|
|
25
|
+
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: calc(", " + ", ");\n background: ", ";\n "], ["\n width: calc(", " + ", ");\n background: ", ";\n "])), t.sideMenuWidthForTouchScreens, t.sideMenuWidthForTouchScreens, t.sideMenuSeparatedSubMenuBgColor);
|
|
26
|
+
},
|
|
24
27
|
separatedRootForDesktops: function (t) {
|
|
25
|
-
return css(
|
|
28
|
+
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: calc(", " + ", ");\n background: ", ";\n "], ["\n width: calc(", " + ", ");\n background: ", ";\n "])), t.sideMenuWidth, t.sideMenuWidth, t.sideMenuSeparatedSubMenuBgColor);
|
|
26
29
|
},
|
|
27
30
|
container: function (t) {
|
|
28
|
-
return css(
|
|
31
|
+
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n background: ", ";\n position: relative;\n box-sizing: border-box;\n transition: width ", "ms ease-out;\n "], ["\n width: ", ";\n height: 100%;\n background: ", ";\n position: relative;\n box-sizing: border-box;\n transition: width ", "ms ease-out;\n "])), t.sideMenuWidth, t.sideMenuBgColor, transitionDuration);
|
|
29
32
|
},
|
|
30
33
|
minimizedContainer: function (t) {
|
|
31
|
-
return css(
|
|
34
|
+
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: ", " !important;\n "], ["\n width: ", " !important;\n "])), t.sideMenuMinimizedWidth);
|
|
32
35
|
},
|
|
33
36
|
containerForTouchScreens: function (t) {
|
|
34
|
-
return css(
|
|
37
|
+
return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), t.sideMenuWidthForTouchScreens);
|
|
35
38
|
},
|
|
36
39
|
separatedContainerForMobiles: function (t) {
|
|
37
|
-
return css(
|
|
40
|
+
return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), t.sideMenuSeparatedSubMenuBgColor);
|
|
38
41
|
},
|
|
39
42
|
contentWrapper: function (t) {
|
|
40
|
-
return css(
|
|
43
|
+
return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n min-height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: ", ";\n "], ["\n min-height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: ", ";\n "])), t.sideMenuWidth);
|
|
41
44
|
},
|
|
42
45
|
contentWrapperForTouchScreens: function (t) {
|
|
43
|
-
return css(
|
|
46
|
+
return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), t.sideMenuWidthForTouchScreens);
|
|
44
47
|
},
|
|
45
48
|
minimizedContentWrapper: function () {
|
|
46
|
-
return css(
|
|
49
|
+
return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n width: 100%;\n "], ["\n width: 100%;\n "])));
|
|
47
50
|
},
|
|
48
51
|
wrapper: function () {
|
|
49
|
-
return css(
|
|
52
|
+
return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n height: 100%;\n display: inline-flex;\n position: relative;\n "], ["\n height: 100%;\n display: inline-flex;\n position: relative;\n "])));
|
|
50
53
|
},
|
|
51
54
|
wrapperIE: function () {
|
|
52
55
|
var ieRootWrapperCorrection = 15;
|
|
53
|
-
return css(
|
|
56
|
+
return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n position: relative;\n top: -", ";\n height: calc(100% + ", ");\n "], ["\n position: relative;\n top: -", ";\n height: calc(100% + ", ");\n "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
|
|
54
57
|
},
|
|
55
58
|
wrapperWithShadow: function (t) {
|
|
56
|
-
return css(
|
|
59
|
+
return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n box-shadow: ", ";\n "], ["\n box-shadow: ", ";\n "])), t.sideMenuBoxShadow);
|
|
57
60
|
},
|
|
58
61
|
collapsedContainerForTabletsOrMobiles: function () {
|
|
59
|
-
return css(
|
|
62
|
+
return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n background-color: transparent;\n "], ["\n background-color: transparent;\n "])));
|
|
60
63
|
},
|
|
61
64
|
list: function () {
|
|
62
|
-
return css(
|
|
65
|
+
return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n list-style: none;\n padding: 0;\n margin: 0;\n "], ["\n list-style: none;\n padding: 0;\n margin: 0;\n "])));
|
|
63
66
|
},
|
|
64
67
|
};
|
|
65
68
|
export var customStyles = {
|
|
66
69
|
rootForTabletsOrMobiles: function (headerHeight) {
|
|
67
|
-
return css(
|
|
70
|
+
return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n height: ", "px;\n top: 0;\n transition: height ", "ms ease-out;\n "], ["\n height: ", "px;\n top: 0;\n transition: height ", "ms ease-out;\n "])), headerHeight, burgerTransitionDuration);
|
|
68
71
|
},
|
|
69
72
|
};
|
|
70
73
|
export var jsStylesForSideMenu = memoizeStyle(styles);
|
|
71
|
-
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;
|
|
74
|
+
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;
|
package/src/SideMenuContext.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export interface SideMenuContextType {
|
|
|
18
18
|
isMobile?: boolean;
|
|
19
19
|
isTouchScreen?: boolean;
|
|
20
20
|
isOpened?: boolean;
|
|
21
|
+
isCollapsable?: boolean;
|
|
21
22
|
toggleIsOpened?: () => void;
|
|
22
23
|
setIsMinimized?: (isMinimized: boolean) => void;
|
|
23
24
|
flattedArrayOfAllElements?: FlattedArrayElementType[];
|
|
@@ -50,10 +50,11 @@ var ClickableElement = forwardRef(function (_a, ref) {
|
|
|
50
50
|
};
|
|
51
51
|
var setIsMinimized = function (lastElementInTheHierarchy) {
|
|
52
52
|
var _a, _b;
|
|
53
|
-
if (context.isMobile || context.isTablet || context.isDesktop)
|
|
53
|
+
if (context.isMobile || context.isTablet || (context.isDesktop && !context.isCollapsable))
|
|
54
54
|
return;
|
|
55
55
|
var topLevelItemInSeparatedSideMenu = context.isSeparatedMenu && !_isSubMenu && children;
|
|
56
|
-
if (context.isNarrowDesktop
|
|
56
|
+
if ((context.isNarrowDesktop || (context.isCollapsable && context.isDesktop)) &&
|
|
57
|
+
(lastElementInTheHierarchy || topLevelItemInSeparatedSideMenu)) {
|
|
57
58
|
(_a = context.setIsMinimized) === null || _a === void 0 ? void 0 : _a.call(context, true);
|
|
58
59
|
}
|
|
59
60
|
if (!_isSubMenu) {
|
|
@@ -64,7 +64,7 @@ var InnerBody = function (_a) {
|
|
|
64
64
|
return;
|
|
65
65
|
var activeItemHasParent = activeMenuItemHasParent();
|
|
66
66
|
var isActive = activeItemHasParent || activeMenuItemHasChildren() || false;
|
|
67
|
-
var isMinimizedInWideDesktop = !context.isOpened && context.isDesktop;
|
|
67
|
+
var isMinimizedInWideDesktop = !context.isOpened && context.isDesktop && !context.isCollapsable;
|
|
68
68
|
if (context.isMobile && !activeItemHasParent && context.isSeparatedMenuShown) {
|
|
69
69
|
return (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
|
|
70
70
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface RightBorderProps {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
onClick: () => void;
|
|
4
|
+
showButton: boolean;
|
|
5
5
|
}
|
|
6
6
|
declare const RightBorderWithStaticFields: React.ForwardRefExoticComponent<RightBorderProps & React.RefAttributes<HTMLDivElement>> & {
|
|
7
7
|
__KONTUR_REACT_UI__: string;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import React, { forwardRef, useContext
|
|
1
|
+
import React, { forwardRef, useContext } from 'react';
|
|
2
2
|
import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
|
|
3
3
|
import { jsStyles } from './RightBorder.styles';
|
|
4
4
|
import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
|
|
5
|
-
import { ThemeContext } from '@skbkontur/react-ui';
|
|
5
|
+
import { Hint, ThemeContext } from '@skbkontur/react-ui';
|
|
6
|
+
import { useMemoBorderIcon } from '../../hooks/useMemoIcon';
|
|
7
|
+
import { SideMenuContext } from '../SideMenuContext';
|
|
8
|
+
import { SideMenuDataTids } from '../../SideMenuDataTids';
|
|
6
9
|
/**
|
|
7
10
|
* Элемент интерактивной правой границы
|
|
8
11
|
*
|
|
@@ -10,63 +13,20 @@ import { ThemeContext } from '@skbkontur/react-ui';
|
|
|
10
13
|
*/
|
|
11
14
|
var RightBorder = forwardRef(function (_a, ref) {
|
|
12
15
|
var _b;
|
|
13
|
-
var
|
|
16
|
+
var onClick = _a.onClick, showButton = _a.showButton;
|
|
14
17
|
var theme = getSideMenuTheme(useContext(ThemeContext));
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
setIsAbleToResize(false);
|
|
28
|
-
};
|
|
29
|
-
var isMouseDown = false, startX = 0;
|
|
30
|
-
var checkStart = function (event) {
|
|
31
|
-
startX = event.pageX;
|
|
32
|
-
isMouseDown = true;
|
|
33
|
-
};
|
|
34
|
-
var checkMove = function (event) {
|
|
35
|
-
if (!isMouseDown) {
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
if (event.pageX < startX) {
|
|
39
|
-
setIsOpened(false, !manual);
|
|
40
|
-
isMouseDown = false;
|
|
41
|
-
}
|
|
42
|
-
return;
|
|
43
|
-
};
|
|
44
|
-
var checkEnd = function () {
|
|
45
|
-
isMouseDown = false;
|
|
46
|
-
};
|
|
47
|
-
var swipe = function (rightBorder) {
|
|
48
|
-
if (rightBorder) {
|
|
49
|
-
rightBorder.addEventListener('mousedown', checkStart);
|
|
50
|
-
rightBorder.addEventListener('mousemove', checkMove);
|
|
51
|
-
document.addEventListener('mouseup', checkEnd);
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
useEffect(function () {
|
|
55
|
-
if (rightBorderRef.current) {
|
|
56
|
-
swipe(rightBorderRef.current);
|
|
57
|
-
}
|
|
58
|
-
return function () {
|
|
59
|
-
if (rightBorderRef.current) {
|
|
60
|
-
rightBorderRef.current.removeEventListener('mousedown', checkStart, true);
|
|
61
|
-
rightBorderRef.current.removeEventListener('mousemove', checkMove, true);
|
|
62
|
-
}
|
|
63
|
-
document.removeEventListener('mouseup', checkEnd, true);
|
|
64
|
-
};
|
|
65
|
-
}, []);
|
|
66
|
-
return (React.createElement("div", { className: cx((_b = {},
|
|
67
|
-
_b[jsStyles.root(theme)] = true,
|
|
68
|
-
_b[jsStyles.resizableRoot()] = isAbleToResize,
|
|
69
|
-
_b)), ref: rightBorderRef || ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, isAbleToResize && React.createElement("div", { className: jsStyles.rootHovered(theme) })));
|
|
18
|
+
var context = useContext(SideMenuContext);
|
|
19
|
+
var icon = useMemoBorderIcon(context.isCollapsable);
|
|
20
|
+
var hintText = context.isCollapsable ? 'Закрепить меню' : 'Свернуть меню';
|
|
21
|
+
return (React.createElement(Hint, { text: hintText, pos: 'right' },
|
|
22
|
+
React.createElement("div", { className: cx((_b = {},
|
|
23
|
+
_b[jsStyles.root(theme)] = true,
|
|
24
|
+
_b[jsStyles.rootWithButton()] = showButton,
|
|
25
|
+
_b)), ref: ref, onClick: onClick, onKeyDown: function (e) {
|
|
26
|
+
if (e.key === 'Enter' || e.key === 'Space') {
|
|
27
|
+
onClick();
|
|
28
|
+
}
|
|
29
|
+
}, role: "button", tabIndex: 0, "data-tid": SideMenuDataTids.rightBorder }, icon)));
|
|
70
30
|
});
|
|
71
31
|
RightBorder.displayName = 'RightBorder';
|
|
72
32
|
var RightBorderWithStaticFields = Object.assign(RightBorder, { __KONTUR_REACT_UI__: 'RightBorder' });
|
|
@@ -3,15 +3,11 @@ import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
|
|
|
3
3
|
import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
|
|
4
4
|
var styles = {
|
|
5
5
|
root: function (t) {
|
|
6
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: 100%;\n right:
|
|
6
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n width: ", ";\n height: 100%;\n right: 0;\n background: transparent;\n display: flex;\n color: ", ";\n transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n &:hover {\n color: ", ";\n }\n "], ["\n opacity: 0;\n position: absolute;\n width: ", ";\n height: 100%;\n right: 0;\n background: transparent;\n display: flex;\n color: ", ";\n transition: opacity, color 150ms cubic-bezier(0.5, 1, 0.89, 1);\n &:hover {\n color: ", ";\n }\n "])), t.sideMenuRightBorderWidth, t.sideMenuRightBorderIconColor, t.sideMenuRightBorderHoverIconColor);
|
|
7
7
|
},
|
|
8
|
-
|
|
9
|
-
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
10
|
-
},
|
|
11
|
-
rootHovered: function (t) {
|
|
12
|
-
var left = parseInt(t.sideMenuRightBorderWidth) / 2 - parseInt(t.sideMenuRightBorderHoverWidth) / 2; //левое положение подсвеченной границы: вычисляется как половина активной ширины (`10`) минус половина ширины подсвеченной границы (`1`)
|
|
13
|
-
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n background: ", ";\n height: 100%;\n left: ", "px;\n "], ["\n position: absolute;\n width: ", ";\n background: ", ";\n height: 100%;\n left: ", "px;\n "])), t.sideMenuRightBorderHoverWidth, t.sideMenuRightBorderColor, left);
|
|
8
|
+
rootWithButton: function () {
|
|
9
|
+
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n opacity: 1;\n "], ["\n opacity: 1;\n "])));
|
|
14
10
|
},
|
|
15
11
|
};
|
|
16
12
|
export var jsStyles = memoizeStyle(styles);
|
|
17
|
-
var templateObject_1, templateObject_2
|
|
13
|
+
var templateObject_1, templateObject_2;
|
|
@@ -55,9 +55,11 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
|
|
|
55
55
|
_b[jsStylesForSideMenu.containerForTouchScreens(theme)] = context.isTouchScreen,
|
|
56
56
|
_b[jsStyles.root(theme)] = true,
|
|
57
57
|
_b[customStyles.rootForMobiles(context.headerHeight)] = context.isMobile,
|
|
58
|
-
_b[jsStyles.rootForDesktop(
|
|
59
|
-
_b[jsStyles.rootForTouchScreens(theme)] = context.isTouchScreen &&
|
|
60
|
-
|
|
58
|
+
_b[jsStyles.rootForDesktop()] = context.isDesktop,
|
|
59
|
+
_b[jsStyles.rootForTouchScreens(theme)] = context.isTouchScreen &&
|
|
60
|
+
context.isOpened &&
|
|
61
|
+
(context.isNarrowDesktop || (context.isDesktop && context.isCollapsable)),
|
|
62
|
+
_b[jsStyles.rootForNarrowDesktop(theme)] = context.isNarrowDesktop || (context.isDesktop && context.isCollapsable),
|
|
61
63
|
_b[jsStyles.rootWithShadow(theme)] = context.isTablet && !isIE11,
|
|
62
64
|
_b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu },
|
|
63
65
|
React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
|
|
@@ -6,7 +6,7 @@ export declare const jsStyles: {
|
|
|
6
6
|
root(t: SideMenuTheme): string;
|
|
7
7
|
rootForTouchScreens(t: SideMenuTheme): string;
|
|
8
8
|
rootForNarrowDesktop(t: SideMenuTheme): string;
|
|
9
|
-
rootForDesktop(
|
|
9
|
+
rootForDesktop(): string;
|
|
10
10
|
rootWithShadow(t: SideMenuTheme): string;
|
|
11
11
|
contentWrapper(t: SideMenuTheme): string;
|
|
12
12
|
contentWrapperForMobiles(): string;
|
|
@@ -11,8 +11,8 @@ var styles = {
|
|
|
11
11
|
rootForNarrowDesktop: function (t) {
|
|
12
12
|
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n left: ", ";\n z-index: -1;\n "], ["\n left: ", ";\n z-index: -1;\n "])), t.sideMenuMinimizedWidth);
|
|
13
13
|
},
|
|
14
|
-
rootForDesktop: function (
|
|
15
|
-
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n
|
|
14
|
+
rootForDesktop: function () {
|
|
15
|
+
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n z-index: -1;\n "], ["\n z-index: -1;\n "])));
|
|
16
16
|
},
|
|
17
17
|
rootWithShadow: function (t) {
|
|
18
18
|
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-shadow: ", ";\n clip-path: inset(0 -", " 0 0);\n border-right: none;\n "], ["\n box-shadow: ", ";\n clip-path: inset(0 -", " 0 0);\n border-right: none;\n "])), t.sideMenuBoxShadow, t.sideMenuBoxShadowBlurRadius);
|