@skbkontur/side-menu 3.2.7 → 3.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/README.md +25 -6
- package/SideMenuDataTids.d.ts +3 -0
- package/SideMenuDataTids.js +7 -1
- package/hooks/useAnimateOnMount.js +9 -6
- package/hooks/useMemoIcon.js +18 -12
- package/index.js +17 -14
- package/internal/themes/SideMenuTheme.d.ts +5 -0
- package/internal/themes/SideMenuTheme.js +22 -10
- package/lib/theming/ThemeHelpers.js +20 -14
- package/lib/theming/ThemeTypes.js +2 -1
- package/lib/utils/memo.js +5 -1
- package/lib/utils/scripts.js +11 -5
- package/package.json +8 -4
- package/src/Navigation.js +21 -18
- package/src/SideMenu/SideMenu.d.ts +2 -0
- package/src/SideMenu/SideMenu.js +147 -113
- package/src/SideMenu/SideMenu.styles.js +31 -28
- package/src/SideMenuAvatar/SideMenuAvatar.js +14 -11
- package/src/SideMenuBody/SideMenuBody.js +21 -18
- package/src/SideMenuBody/SideMenuBody.styles.js +9 -6
- package/src/SideMenuContext.d.ts +3 -0
- package/src/SideMenuContext.js +5 -2
- package/src/SideMenuDivider/SideMenuDivider.js +14 -11
- package/src/SideMenuDivider/SideMenuDivider.styles.js +8 -5
- package/src/SideMenuDropdown/SideMenuDropdown.js +34 -21
- package/src/SideMenuDropdown/SideMenuDropdown.styles.js +12 -9
- package/src/SideMenuFooter/SideMenuFooter.js +24 -21
- package/src/SideMenuFooter/SideMenuFooter.styles.js +10 -7
- package/src/SideMenuHeader/SideMenuHeader.js +29 -26
- package/src/SideMenuHeader/SideMenuHeader.styles.js +12 -9
- package/src/SideMenuItem/SideMenuItem.js +10 -7
- package/src/SideMenuLink/SideMenuLink.js +12 -9
- package/src/SideMenuLink/SideMenuLink.styles.js +7 -4
- package/src/SideMenuNotifications/BellWidget.d.ts +11 -0
- package/src/SideMenuNotifications/BellWidget.js +87 -0
- package/src/SideMenuNotifications/BellWidgetError.d.ts +9 -0
- package/src/SideMenuNotifications/BellWidgetError.js +26 -0
- package/src/SideMenuNotifications/BellWidgetView.styles.d.ts +10 -0
- package/src/SideMenuNotifications/BellWidgetView.styles.js +31 -0
- package/src/SideMenuNotifications/SideMenuNotifications.d.ts +41 -0
- package/src/SideMenuNotifications/SideMenuNotifications.js +49 -0
- package/src/SideMenuNotifications/SideMenuNotifications.md +75 -0
- package/src/SideMenuNotifications/utils/getMarker.d.ts +1 -0
- package/src/SideMenuNotifications/utils/getMarker.js +12 -0
- package/src/SideMenuNotifications/utils/getNotificationsErrorMessages.d.ts +6 -0
- package/src/SideMenuNotifications/utils/getNotificationsErrorMessages.js +19 -0
- package/src/SideMenuOrganisations/SideMenuOrganisations.js +10 -7
- package/src/SideMenuSubItem/SideMenuSubItem.js +11 -8
- package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.js +18 -15
- package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.styles.js +9 -6
- package/src/SideMenuSubLink/SideMenuSubLink.js +10 -7
- package/src/Tree.js +12 -9
- package/src/internal/BackButton.js +14 -11
- package/src/internal/Backdrop.js +15 -11
- package/src/internal/Backdrop.styles.js +8 -5
- package/src/internal/Burger.js +17 -12
- package/src/internal/Burger.styles.js +9 -6
- package/src/internal/ClickableElement.js +47 -44
- package/src/internal/ClickableElement.styles.js +15 -12
- package/src/internal/InnerSubMenu.js +14 -10
- package/src/internal/ItemContent/Caption.js +34 -31
- package/src/internal/ItemContent/Caption.styles.js +23 -20
- package/src/internal/ItemContent/Icon.js +25 -20
- package/src/internal/ItemContent/Icon.styles.js +14 -11
- package/src/internal/ItemContent/ItemContent.d.ts +1 -1
- package/src/internal/ItemContent/ItemContent.js +36 -33
- package/src/internal/ItemContent/ItemContent.styles.js +18 -15
- package/src/internal/ItemContent/Marker.js +21 -16
- package/src/internal/ItemContent/Marker.styles.js +15 -12
- package/src/internal/NestedMenu.js +19 -15
- package/src/internal/NestedMenu.styles.js +8 -5
- package/src/internal/RightBorder.js +22 -18
- package/src/internal/RightBorder.styles.js +9 -6
- package/src/internal/SeparatedSubMenu.js +40 -37
- package/src/internal/SeparatedSubMenu.styles.js +16 -13
- package/src/internal/SideMenuLogotype.js +34 -31
- package/src/internal/SideMenuLogotype.styles.js +17 -14
- package/src/internal/SubMenu.js +15 -11
package/src/internal/Burger.js
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Burger = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
6
|
+
var UiMenuBars3HIcon24Regular_1 = require("@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon24Regular");
|
|
7
|
+
var react_ui_1 = require("@skbkontur/react-ui");
|
|
8
|
+
var SideMenuContext_1 = require("../SideMenuContext");
|
|
9
|
+
var SideMenuDataTids_1 = require("../../SideMenuDataTids");
|
|
10
|
+
var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
|
|
11
|
+
var Burger_styles_1 = require("./Burger.styles");
|
|
12
|
+
var Burger = function () {
|
|
13
|
+
var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
|
|
14
|
+
var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
|
|
15
|
+
return (react_1.default.createElement("button", { className: Burger_styles_1.jsStyles.rootForTabletsOrMobiles(theme), onClick: context.toggleIsOpened, "data-tid": SideMenuDataTids_1.SideMenuDataTids.burger },
|
|
16
|
+
react_1.default.createElement(UiMenuBars3HIcon24Regular_1.UiMenuBars3HIcon24Regular, null)));
|
|
13
17
|
};
|
|
18
|
+
exports.Burger = Burger;
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.jsStyles = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
|
|
6
|
+
var Mixins_1 = require("@skbkontur/react-ui/lib/styles/Mixins");
|
|
7
|
+
var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
|
|
5
8
|
var styles = {
|
|
6
9
|
rootForTabletsOrMobiles: function (t) {
|
|
7
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n margin-right: ", ";\n cursor: pointer;\n "], ["\n ", ";\n margin-right: ", ";\n cursor: pointer;\n "])), resetButton(), t.sideMenuBurgerMarginRight);
|
|
10
|
+
return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n ", ";\n margin-right: ", ";\n cursor: pointer;\n "], ["\n ", ";\n margin-right: ", ";\n cursor: pointer;\n "])), (0, Mixins_1.resetButton)(), t.sideMenuBurgerMarginRight);
|
|
8
11
|
},
|
|
9
12
|
};
|
|
10
|
-
|
|
13
|
+
exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
|
|
11
14
|
var templateObject_1;
|
|
@@ -1,38 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ClickableElement = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
6
|
+
var keyListener_1 = require("@skbkontur/react-ui/lib/events/keyListener");
|
|
7
|
+
var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
|
|
8
|
+
var react_ui_1 = require("@skbkontur/react-ui");
|
|
9
|
+
var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
|
|
10
|
+
var SideMenuContext_1 = require("../SideMenuContext");
|
|
11
|
+
var useMemoIcon_1 = require("../../hooks/useMemoIcon");
|
|
12
|
+
var SideMenuDataTids_1 = require("../../SideMenuDataTids");
|
|
13
|
+
var Navigation_1 = require("../Navigation");
|
|
14
|
+
var scripts_1 = require("../../lib/utils/scripts");
|
|
15
|
+
var ClickableElement_styles_1 = require("./ClickableElement.styles");
|
|
16
|
+
var SubMenu_1 = require("./SubMenu");
|
|
17
|
+
var ItemContent_1 = require("./ItemContent/ItemContent");
|
|
15
18
|
/**
|
|
16
19
|
* Элемент списка (пункт меню либо ссылка)
|
|
17
20
|
*
|
|
18
21
|
* @visibleName ClickableElement
|
|
19
22
|
*/
|
|
20
|
-
var ClickableElement = forwardRef(function (_a, ref) {
|
|
23
|
+
var ClickableElement = (0, react_1.forwardRef)(function (_a, ref) {
|
|
21
24
|
var _b, _c;
|
|
22
|
-
var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, isButton = _a.isButton, href = _a.href, disabled = _a.disabled, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
|
|
23
|
-
var context = useContext(SideMenuContext);
|
|
24
|
-
var theme = getSideMenuTheme(useContext(ThemeContext));
|
|
25
|
-
var _d = __read(useState(false), 2), isActive = _d[0], setIsActive = _d[1];
|
|
26
|
-
var _e = __read(useState(false), 2), isFirstLevelParentOfActiveMenuItem = _e[0], setIsFirstLevelParentOfActiveMenuItem = _e[1];
|
|
27
|
-
var _f = __read(useState(false), 2), isOpened = _f[0], setIsOpened = _f[1];
|
|
28
|
-
var _g = __read(useState(false), 2), isNestedSubMenu = _g[0], setIsNestedSubMenu = _g[1];
|
|
29
|
-
var _h = __read(useState(false), 2), hasSubIcons = _h[0], setHasSubIcons = _h[1];
|
|
30
|
-
var _j = __read(useState(false), 2), isFocusedByTab = _j[0], setIsFocusedByTab = _j[1];
|
|
31
|
-
var _k = __read(useState(id || href || ''), 2), currentId = _k[0], setCurrentId = _k[1];
|
|
32
|
-
useEffect(function () {
|
|
25
|
+
var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, isButton = _a.isButton, href = _a.href, disabled = _a.disabled, rest = tslib_1.__rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
|
|
26
|
+
var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
|
|
27
|
+
var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
|
|
28
|
+
var _d = tslib_1.__read((0, react_1.useState)(false), 2), isActive = _d[0], setIsActive = _d[1];
|
|
29
|
+
var _e = tslib_1.__read((0, react_1.useState)(false), 2), isFirstLevelParentOfActiveMenuItem = _e[0], setIsFirstLevelParentOfActiveMenuItem = _e[1];
|
|
30
|
+
var _f = tslib_1.__read((0, react_1.useState)(false), 2), isOpened = _f[0], setIsOpened = _f[1];
|
|
31
|
+
var _g = tslib_1.__read((0, react_1.useState)(false), 2), isNestedSubMenu = _g[0], setIsNestedSubMenu = _g[1];
|
|
32
|
+
var _h = tslib_1.__read((0, react_1.useState)(false), 2), hasSubIcons = _h[0], setHasSubIcons = _h[1];
|
|
33
|
+
var _j = tslib_1.__read((0, react_1.useState)(false), 2), isFocusedByTab = _j[0], setIsFocusedByTab = _j[1];
|
|
34
|
+
var _k = tslib_1.__read((0, react_1.useState)(id || href || ''), 2), currentId = _k[0], setCurrentId = _k[1];
|
|
35
|
+
(0, react_1.useEffect)(function () {
|
|
33
36
|
var _a;
|
|
34
37
|
if (!currentId) {
|
|
35
|
-
var generatedId = generateId();
|
|
38
|
+
var generatedId = (0, scripts_1.generateId)();
|
|
36
39
|
setCurrentId(generatedId);
|
|
37
40
|
}
|
|
38
41
|
(_a = context.navigation) === null || _a === void 0 ? void 0 : _a.addValue(currentId, {
|
|
@@ -97,7 +100,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
|
|
|
97
100
|
var handleFocus = function (e) {
|
|
98
101
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
|
|
99
102
|
requestAnimationFrame(function () {
|
|
100
|
-
if (keyListener.isTabPressed) {
|
|
103
|
+
if (keyListener_1.keyListener.isTabPressed) {
|
|
101
104
|
setIsFocusedByTab(true);
|
|
102
105
|
}
|
|
103
106
|
});
|
|
@@ -118,25 +121,25 @@ var ClickableElement = forwardRef(function (_a, ref) {
|
|
|
118
121
|
e.stopPropagation();
|
|
119
122
|
(_d = (_c = (_b = (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.navigationTree) === null || _b === void 0 ? void 0 : _b.find(currentId)) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.setIsOpened(false);
|
|
120
123
|
};
|
|
121
|
-
var newProps = __assign({ className: cx((_b = {},
|
|
122
|
-
_b[jsStyles.root(theme)] = true,
|
|
123
|
-
_b[jsStyles.rootButton(theme)] = isButton,
|
|
124
|
-
_b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
|
|
125
|
-
_b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
|
|
126
|
-
_b[jsStyles.disabledRoot(theme)] = disabled,
|
|
127
|
-
_b[jsStyles.activeRoot(theme)] = isHighlighted,
|
|
128
|
-
_b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
|
|
129
|
-
_b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (
|
|
124
|
+
var newProps = tslib_1.__assign({ className: (0, Emotion_1.cx)((_b = {},
|
|
125
|
+
_b[ClickableElement_styles_1.jsStyles.root(theme)] = true,
|
|
126
|
+
_b[ClickableElement_styles_1.jsStyles.rootButton(theme)] = isButton,
|
|
127
|
+
_b[ClickableElement_styles_1.jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
|
|
128
|
+
_b[ClickableElement_styles_1.jsStyles.focusedRoot(theme)] = isFocusedByTab,
|
|
129
|
+
_b[ClickableElement_styles_1.jsStyles.disabledRoot(theme)] = disabled,
|
|
130
|
+
_b[ClickableElement_styles_1.jsStyles.activeRoot(theme)] = isHighlighted,
|
|
131
|
+
_b[ClickableElement_styles_1.jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
|
|
132
|
+
_b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (react_1.default.createElement(ItemContent_1.ItemContent, { _isSubMenu: _isSubMenu,
|
|
130
133
|
// @ts-expect-error: SideMenuItem should have icon
|
|
131
|
-
icon: _isSubMenu && !_isBackButton ? useMemoIcon(children, { isOpened: isOpened, onClick: handleCollapse }) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })), ref: ref, href: href }, rest);
|
|
132
|
-
return (
|
|
133
|
-
|
|
134
|
-
? __assign(__assign({}, newProps), { 'aria-expanded': children ? isOpened : undefined, 'aria-controls': children ? currentId : undefined }) : __assign({}, newProps)),
|
|
135
|
-
|
|
136
|
-
|
|
134
|
+
icon: _isSubMenu && !_isBackButton ? (0, useMemoIcon_1.useMemoIcon)(children, { isOpened: isOpened, onClick: handleCollapse }) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })), ref: ref, href: href }, rest);
|
|
135
|
+
return (react_1.default.createElement(Component, (_c = { "data-tid": SideMenuDataTids_1.SideMenuDataTids.clickableElement }, _c[Navigation_1.navigationAttribute] = currentId, _c),
|
|
136
|
+
react_1.default.cloneElement(react_1.default.createElement(Tag, { state: isActive ? 'active' : undefined }), children
|
|
137
|
+
? tslib_1.__assign(tslib_1.__assign({}, newProps), { 'aria-expanded': children ? isOpened : undefined, 'aria-controls': children ? currentId : undefined }) : tslib_1.__assign({}, newProps)),
|
|
138
|
+
react_1.default.createElement(SubMenu_1.SubMenu, { caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, htmlId: currentId, isOpened: isOpened },
|
|
139
|
+
react_1.default.createElement(SideMenuContext_1.SideMenuContext.Provider, { value: tslib_1.__assign({ hasSubIcons: hasSubIcons }, context) }, children))));
|
|
137
140
|
});
|
|
138
141
|
ClickableElement.displayName = 'ClickableElement';
|
|
139
142
|
var ClickableElementWithStaticFields = Object.assign(ClickableElement, {
|
|
140
143
|
__KONTUR_REACT_UI__: 'ClickableElement',
|
|
141
144
|
});
|
|
142
|
-
|
|
145
|
+
exports.ClickableElement = ClickableElementWithStaticFields;
|
|
@@ -1,29 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.jsStyles = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
|
|
6
|
+
var Mixins_1 = require("@skbkontur/react-ui/lib/styles/Mixins");
|
|
7
|
+
var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
|
|
5
8
|
var styles = {
|
|
6
9
|
root: function (t) {
|
|
7
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n user-select: text;\n ", ";\n width: 100%;\n border-radius: ", ";\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "], ["\n user-select: text;\n ", ";\n width: 100%;\n border-radius: ", ";\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "])), resetButton(), t.sideMenuItemBorderRadius, t.sideMenuItemHoverBg);
|
|
10
|
+
return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n user-select: text;\n ", ";\n width: 100%;\n border-radius: ", ";\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "], ["\n user-select: text;\n ", ";\n width: 100%;\n border-radius: ", ";\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "])), (0, Mixins_1.resetButton)(), t.sideMenuItemBorderRadius, t.sideMenuItemHoverBg);
|
|
8
11
|
},
|
|
9
12
|
rootButton: function (t) {
|
|
10
|
-
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:active {\n background: ", ";\n }\n "], ["\n &:active {\n background: ", ";\n }\n "])), t.sideMenuItemActiveBg);
|
|
13
|
+
return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n &:active {\n background: ", ";\n }\n "], ["\n &:active {\n background: ", ";\n }\n "])), t.sideMenuItemActiveBg);
|
|
11
14
|
},
|
|
12
15
|
rootSubItemInSeparatedSubMenu: function (t) {
|
|
13
|
-
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &:hover {\n background: ", ";\n }\n "], ["\n &:hover {\n background: ", ";\n }\n "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
|
|
16
|
+
return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n &:hover {\n background: ", ";\n }\n "], ["\n &:hover {\n background: ", ";\n }\n "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
|
|
14
17
|
},
|
|
15
18
|
focusedRoot: function (t) {
|
|
16
|
-
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-shadow: ", ";\n "], ["\n box-shadow: ", ";\n "])), t.sideMenuFocusedItemBoxShadow);
|
|
19
|
+
return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n box-shadow: ", ";\n "], ["\n box-shadow: ", ";\n "])), t.sideMenuFocusedItemBoxShadow);
|
|
17
20
|
},
|
|
18
21
|
disabledRoot: function (t) {
|
|
19
|
-
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n pointer-events: none;\n "], ["\n color: ", ";\n pointer-events: none;\n "])), t.sideMenuItemDisabledColor);
|
|
22
|
+
return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n color: ", ";\n pointer-events: none;\n "], ["\n color: ", ";\n pointer-events: none;\n "])), t.sideMenuItemDisabledColor);
|
|
20
23
|
},
|
|
21
24
|
activeRoot: function (t) {
|
|
22
|
-
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuItemActiveBg);
|
|
25
|
+
return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuItemActiveBg);
|
|
23
26
|
},
|
|
24
27
|
activeRootSubItemInSeparatedSubMenu: function (t) {
|
|
25
|
-
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
|
|
28
|
+
return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n background: ", " !important;\n "], ["\n background: ", " !important;\n "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
|
|
26
29
|
},
|
|
27
30
|
};
|
|
28
|
-
|
|
31
|
+
exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
|
|
29
32
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -1,21 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.InnerSubMenu = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
6
|
+
var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
|
|
7
|
+
var SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
|
|
8
|
+
var SideMenuContext_1 = require("../SideMenuContext");
|
|
5
9
|
/**
|
|
6
10
|
* Подменю, раскрывающееся внутри основного меню
|
|
7
11
|
*
|
|
8
12
|
* @visibleName InnerSubMenu
|
|
9
13
|
*/
|
|
10
|
-
var InnerSubMenu = forwardRef(function (_a, ref) {
|
|
14
|
+
var InnerSubMenu = (0, react_1.forwardRef)(function (_a, ref) {
|
|
11
15
|
var _b;
|
|
12
16
|
var children = _a.children, htmlId = _a.htmlId, isOpened = _a.isOpened;
|
|
13
|
-
var context = useContext(SideMenuContext);
|
|
14
|
-
return (
|
|
15
|
-
_b[jsStylesForSideMenu.list()] = true,
|
|
16
|
-
_b[jsStylesForSideMenu.hidden()] = !isOpened || !context.isOpened,
|
|
17
|
+
var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
|
|
18
|
+
return (react_1.default.createElement("ul", { ref: ref, id: htmlId, className: (0, Emotion_1.cx)((_b = {},
|
|
19
|
+
_b[SideMenu_styles_1.jsStylesForSideMenu.list()] = true,
|
|
20
|
+
_b[SideMenu_styles_1.jsStylesForSideMenu.hidden()] = !isOpened || !context.isOpened,
|
|
17
21
|
_b)) }, children));
|
|
18
22
|
});
|
|
19
23
|
InnerSubMenu.displayName = 'InnerSubMenu';
|
|
20
24
|
var InnerSubMenuWithStaticFields = Object.assign(InnerSubMenu, { __KONTUR_REACT_UI__: 'InnerSubMenu' });
|
|
21
|
-
|
|
25
|
+
exports.InnerSubMenu = InnerSubMenuWithStaticFields;
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Caption = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
|
|
6
|
+
var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
|
|
7
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
8
|
+
var SideMenuContext_1 = require("../../SideMenuContext");
|
|
9
|
+
var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
|
|
10
|
+
var Caption_styles_1 = require("./Caption.styles");
|
|
8
11
|
var getTruncatedUserName = function (caption, visibleWidth, fullWidth) {
|
|
9
|
-
var _a = __read(caption.split(' '), 2), firstName = _a[0], lastName = _a[1];
|
|
12
|
+
var _a = tslib_1.__read(caption.split(' '), 2), firstName = _a[0], lastName = _a[1];
|
|
10
13
|
if (visibleWidth < fullWidth && lastName) {
|
|
11
14
|
return "".concat(firstName, " ").concat(lastName[0], ".");
|
|
12
15
|
}
|
|
@@ -21,15 +24,15 @@ var getCaptionTail = function (caption, visibleWidth, fullWidth) {
|
|
|
21
24
|
}
|
|
22
25
|
return '';
|
|
23
26
|
};
|
|
24
|
-
|
|
27
|
+
exports.Caption = (0, react_1.forwardRef)(function (_a, ref) {
|
|
25
28
|
var _b, _c;
|
|
26
29
|
var _isSubMenu = _a._isSubMenu, isNestedSubMenu = _a.isNestedSubMenu, hasIcon = _a.hasIcon, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
|
|
27
|
-
var theme = getSideMenuTheme(useContext(ThemeContext));
|
|
28
|
-
var _d = useContext(SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons;
|
|
29
|
-
var captionRef = useRef(null);
|
|
30
|
-
var _e = __read(useState(''), 2), tail = _e[0], setTail = _e[1];
|
|
30
|
+
var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
|
|
31
|
+
var _d = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons;
|
|
32
|
+
var captionRef = (0, react_1.useRef)(null);
|
|
33
|
+
var _e = tslib_1.__read((0, react_1.useState)(''), 2), tail = _e[0], setTail = _e[1];
|
|
31
34
|
var isCaptionPlainText = typeof caption === 'string';
|
|
32
|
-
useEffect(function () {
|
|
35
|
+
(0, react_1.useEffect)(function () {
|
|
33
36
|
if (!_isDropdown || !captionRef.current || !caption || !isCaptionPlainText) {
|
|
34
37
|
return;
|
|
35
38
|
}
|
|
@@ -49,26 +52,26 @@ export var Caption = forwardRef(function (_a, ref) {
|
|
|
49
52
|
return _isAvatar && userName.split(' ').length === 1;
|
|
50
53
|
};
|
|
51
54
|
var Component = isCaptionPlainText ? 'p' : 'div';
|
|
52
|
-
return (
|
|
53
|
-
_b[jsStyles.root()] = true,
|
|
54
|
-
_b[jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
|
|
55
|
+
return (react_1.default.createElement("div", { className: (0, Emotion_1.cx)((_b = {},
|
|
56
|
+
_b[Caption_styles_1.jsStyles.root()] = true,
|
|
57
|
+
_b[Caption_styles_1.jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
|
|
55
58
|
_b)), ref: ref },
|
|
56
|
-
|
|
57
|
-
_c[jsStyles.caption(theme)] = true,
|
|
58
|
-
_c[jsStyles.captionDropdown()] = _isDropdown,
|
|
59
|
-
_c[jsStyles.captionTruncated()] = isCaptionPlainText &&
|
|
59
|
+
react_1.default.createElement(Component, { className: (0, Emotion_1.cx)((_c = {},
|
|
60
|
+
_c[Caption_styles_1.jsStyles.caption(theme)] = true,
|
|
61
|
+
_c[Caption_styles_1.jsStyles.captionDropdown()] = _isDropdown,
|
|
62
|
+
_c[Caption_styles_1.jsStyles.captionTruncated()] = isCaptionPlainText &&
|
|
60
63
|
_isDropdown &&
|
|
61
64
|
(!_isAvatar || isAvatarCaptionSingleWord(caption, _isAvatar)),
|
|
62
|
-
_c[jsStyles.captionSubItem(theme)] = _isSubMenu,
|
|
63
|
-
_c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !isNestedSubMenu && _isSubMenu && !hasIcon,
|
|
64
|
-
_c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && isNestedSubMenu && !hasIcon,
|
|
65
|
-
_c[jsStyles.captionWithoutItemIcon()] = !hasIcon && !isSeparatedMenu,
|
|
66
|
-
_c[jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
|
|
67
|
-
_c[jsStyles.captionLarge(theme)] = size === 'large',
|
|
68
|
-
_c[jsStyles.captionForTouchScreens(theme)] = isTouchScreen,
|
|
69
|
-
_c[jsStyles.captionSubItemForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
|
|
70
|
-
_c[jsStyles.captionInBackButton(theme)] = _isBackButton,
|
|
65
|
+
_c[Caption_styles_1.jsStyles.captionSubItem(theme)] = _isSubMenu,
|
|
66
|
+
_c[Caption_styles_1.jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !isNestedSubMenu && _isSubMenu && !hasIcon,
|
|
67
|
+
_c[Caption_styles_1.jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && isNestedSubMenu && !hasIcon,
|
|
68
|
+
_c[Caption_styles_1.jsStyles.captionWithoutItemIcon()] = !hasIcon && !isSeparatedMenu,
|
|
69
|
+
_c[Caption_styles_1.jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
|
|
70
|
+
_c[Caption_styles_1.jsStyles.captionLarge(theme)] = size === 'large',
|
|
71
|
+
_c[Caption_styles_1.jsStyles.captionForTouchScreens(theme)] = isTouchScreen,
|
|
72
|
+
_c[Caption_styles_1.jsStyles.captionSubItemForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
|
|
73
|
+
_c[Caption_styles_1.jsStyles.captionInBackButton(theme)] = _isBackButton,
|
|
71
74
|
_c)), ref: captionRef, "data-tail": tail }, caption),
|
|
72
75
|
subCaption));
|
|
73
76
|
});
|
|
74
|
-
Caption.displayName = 'Caption';
|
|
77
|
+
exports.Caption.displayName = 'Caption';
|
|
@@ -1,51 +1,54 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.jsStyles = exports.sideMenuCaptionMarginRight = exports.sideMenuMultilineCaptionPaddingTop = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
|
|
6
|
+
var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
|
|
7
|
+
exports.sideMenuMultilineCaptionPaddingTop = '4px';
|
|
8
|
+
exports.sideMenuCaptionMarginRight = '8px';
|
|
6
9
|
var styles = {
|
|
7
10
|
root: function () {
|
|
8
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n "], ["\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n "])));
|
|
11
|
+
return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n "], ["\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n "])));
|
|
9
12
|
},
|
|
10
13
|
rootMultiline: function () {
|
|
11
|
-
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-top: ", ";\n align-self: flex-start;\n "], ["\n padding-top: ", ";\n align-self: flex-start;\n "])), sideMenuMultilineCaptionPaddingTop);
|
|
14
|
+
return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n padding-top: ", ";\n align-self: flex-start;\n "], ["\n padding-top: ", ";\n align-self: flex-start;\n "])), exports.sideMenuMultilineCaptionPaddingTop);
|
|
12
15
|
},
|
|
13
16
|
caption: function (t) {
|
|
14
|
-
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n margin: 0 ", " 0 0;\n overflow-wrap: anywhere;\n "], ["\n font-size: ", ";\n line-height: ", ";\n margin: 0 ", " 0 0;\n overflow-wrap: anywhere;\n "])), t.sideMenuCaptionFontSize, t.sideMenuCaptionLineHeight, sideMenuCaptionMarginRight);
|
|
17
|
+
return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n margin: 0 ", " 0 0;\n overflow-wrap: anywhere;\n "], ["\n font-size: ", ";\n line-height: ", ";\n margin: 0 ", " 0 0;\n overflow-wrap: anywhere;\n "])), t.sideMenuCaptionFontSize, t.sideMenuCaptionLineHeight, exports.sideMenuCaptionMarginRight);
|
|
15
18
|
},
|
|
16
19
|
captionForTouchScreens: function (t) {
|
|
17
|
-
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n "], ["\n font-size: ", ";\n line-height: ", ";\n "])), t.sideMenuCaptionFontSizeForTouchScreens, t.sideMenuCaptionLineHeightForTouchScreens);
|
|
20
|
+
return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n "], ["\n font-size: ", ";\n line-height: ", ";\n "])), t.sideMenuCaptionFontSizeForTouchScreens, t.sideMenuCaptionLineHeightForTouchScreens);
|
|
18
21
|
},
|
|
19
22
|
captionSubItem: function (t) {
|
|
20
|
-
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-left: ", ";\n "], ["\n margin-left: ", ";\n "])), t.sideMenuCaptionSubItemMarginLeft);
|
|
23
|
+
return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n margin-left: ", ";\n "], ["\n margin-left: ", ";\n "])), t.sideMenuCaptionSubItemMarginLeft);
|
|
21
24
|
},
|
|
22
25
|
captionSubItemForTouchScreens: function (t) {
|
|
23
|
-
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n "], ["\n font-size: ", ";\n line-height: ", ";\n "])), t.sideMenuCaptionSubItemFontSizeForTouchScreens, t.sideMenuCaptionSubItemLineHeightForTouchScreens);
|
|
26
|
+
return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n "], ["\n font-size: ", ";\n line-height: ", ";\n "])), t.sideMenuCaptionSubItemFontSizeForTouchScreens, t.sideMenuCaptionSubItemLineHeightForTouchScreens);
|
|
24
27
|
},
|
|
25
28
|
captionSubItemSeparatedMenuTopLevel: function () {
|
|
26
|
-
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: 0 8px;\n "], ["\n margin: 0 8px;\n "])));
|
|
29
|
+
return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n margin: 0 8px;\n "], ["\n margin: 0 8px;\n "])));
|
|
27
30
|
},
|
|
28
31
|
captionNestedItemSeparatedMenu: function () {
|
|
29
|
-
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin-left: 25px;\n "], ["\n margin-left: 25px;\n "])));
|
|
32
|
+
return (0, Emotion_1.css)(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n margin-left: 25px;\n "], ["\n margin-left: 25px;\n "])));
|
|
30
33
|
},
|
|
31
34
|
captionWithoutItemIcon: function () {
|
|
32
|
-
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin-left: 40px;\n "], ["\n margin-left: 40px;\n "])));
|
|
35
|
+
return (0, Emotion_1.css)(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n margin-left: 40px;\n "], ["\n margin-left: 40px;\n "])));
|
|
33
36
|
},
|
|
34
37
|
captionSubItemWithoutColumnIcons: function () {
|
|
35
|
-
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin-left: 8px;\n "], ["\n margin-left: 8px;\n "])));
|
|
38
|
+
return (0, Emotion_1.css)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n margin-left: 8px;\n "], ["\n margin-left: 8px;\n "])));
|
|
36
39
|
},
|
|
37
40
|
captionLarge: function (t) {
|
|
38
|
-
return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: ", " !important;\n line-height: ", " !important;\n "], ["\n font-size: ", " !important;\n line-height: ", " !important;\n "])), t.sideMenuCaptionLargeFontSize, t.sideMenuCaptionLargeLineHeight);
|
|
41
|
+
return (0, Emotion_1.css)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n font-size: ", " !important;\n line-height: ", " !important;\n "], ["\n font-size: ", " !important;\n line-height: ", " !important;\n "])), t.sideMenuCaptionLargeFontSize, t.sideMenuCaptionLargeLineHeight);
|
|
39
42
|
},
|
|
40
43
|
captionInBackButton: function (t) {
|
|
41
|
-
return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuBackButtonCaptionFontWeight, t.sideMenuBackButtonCaptionFontSize, t.sideMenuBackButtonCaptionLineHeight, t.sideMenuBackButtonCaptionPaddingY, t.sideMenuBackButtonCaptionPaddingY);
|
|
44
|
+
return (0, Emotion_1.css)(templateObject_12 || (templateObject_12 = tslib_1.__makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n "], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n "])), t.sideMenuBackButtonCaptionFontWeight, t.sideMenuBackButtonCaptionFontSize, t.sideMenuBackButtonCaptionLineHeight, t.sideMenuBackButtonCaptionPaddingY, t.sideMenuBackButtonCaptionPaddingY);
|
|
42
45
|
},
|
|
43
46
|
captionDropdown: function () {
|
|
44
|
-
return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n white-space: nowrap;\n overflow: hidden;\n "], ["\n white-space: nowrap;\n overflow: hidden;\n "])));
|
|
47
|
+
return (0, Emotion_1.css)(templateObject_13 || (templateObject_13 = tslib_1.__makeTemplateObject(["\n white-space: nowrap;\n overflow: hidden;\n "], ["\n white-space: nowrap;\n overflow: hidden;\n "])));
|
|
45
48
|
},
|
|
46
49
|
captionTruncated: function () {
|
|
47
|
-
return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n text-overflow: ellipsis;\n &::before {\n float: right;\n content: attr(data-tail);\n }\n "], ["\n text-overflow: ellipsis;\n &::before {\n float: right;\n content: attr(data-tail);\n }\n "])));
|
|
50
|
+
return (0, Emotion_1.css)(templateObject_14 || (templateObject_14 = tslib_1.__makeTemplateObject(["\n text-overflow: ellipsis;\n &::before {\n float: right;\n content: attr(data-tail);\n }\n "], ["\n text-overflow: ellipsis;\n &::before {\n float: right;\n content: attr(data-tail);\n }\n "])));
|
|
48
51
|
},
|
|
49
52
|
};
|
|
50
|
-
|
|
53
|
+
exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
|
|
51
54
|
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;
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Icon = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
6
|
+
var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
|
|
7
|
+
var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
|
|
8
|
+
var SideMenuContext_1 = require("../../SideMenuContext");
|
|
9
|
+
var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
|
|
10
|
+
var scripts_1 = require("../../../lib/utils/scripts");
|
|
11
|
+
var Icon_styles_1 = require("./Icon.styles");
|
|
8
12
|
var getIconSize = function (theme, _isSubMenu, _isBackButton) {
|
|
9
13
|
if (!_isSubMenu) {
|
|
10
14
|
return parseInt(theme.sideMenuIconSize);
|
|
@@ -13,16 +17,16 @@ var getIconSize = function (theme, _isSubMenu, _isBackButton) {
|
|
|
13
17
|
return parseInt(theme.sideMenuIconSubItemSize);
|
|
14
18
|
}
|
|
15
19
|
};
|
|
16
|
-
|
|
20
|
+
var Icon = function (_a) {
|
|
17
21
|
var _b;
|
|
18
22
|
var icon = _a.icon, _isSubMenu = _a._isSubMenu, isMultiline = _a.isMultiline, _c = _a._isBackButton, _isBackButton = _c === void 0 ? false : _c, disabled = _a.disabled;
|
|
19
|
-
var context = useContext(SideMenuContext);
|
|
23
|
+
var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
|
|
20
24
|
var isSeparatedMenu = context.isSeparatedMenu, size = context.size;
|
|
21
|
-
var theme = getSideMenuTheme(useContext(ThemeContext));
|
|
25
|
+
var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
|
|
22
26
|
var renderIcon = function () {
|
|
23
27
|
var iconColor = _isSubMenu && !disabled ? theme.sideMenuIconSubItemColor : undefined;
|
|
24
|
-
if (isKonturIcon(icon)) {
|
|
25
|
-
return
|
|
28
|
+
if ((0, scripts_1.isKonturIcon)(icon)) {
|
|
29
|
+
return react_1.default.cloneElement(icon, {
|
|
26
30
|
size: getIconSize(theme, _isSubMenu, _isBackButton),
|
|
27
31
|
color: iconColor,
|
|
28
32
|
align: _isBackButton ? 'baseline' : 'none',
|
|
@@ -30,13 +34,14 @@ export var Icon = function (_a) {
|
|
|
30
34
|
}
|
|
31
35
|
return icon;
|
|
32
36
|
};
|
|
33
|
-
return (
|
|
34
|
-
_b[jsStyles.root(theme)] = true,
|
|
35
|
-
_b[jsStyles.rootMultiline()] = isMultiline && (context.isOpened || _isSubMenu),
|
|
36
|
-
_b[jsStyles.rootLarge(theme)] = size === 'large',
|
|
37
|
-
_b[jsStyles.rootSubItem(theme)] = _isSubMenu,
|
|
38
|
-
_b[jsStyles.rootSubItemSeparatedMenu(theme)] = isSeparatedMenu && _isSubMenu,
|
|
39
|
-
_b[jsStyles.rootSubItemLarge(theme)] = _isSubMenu && size === 'large',
|
|
40
|
-
_b[jsStyles.rootBackButton(theme)] = _isBackButton,
|
|
37
|
+
return (react_1.default.createElement("span", { className: (0, Emotion_1.cx)((_b = {},
|
|
38
|
+
_b[Icon_styles_1.jsStyles.root(theme)] = true,
|
|
39
|
+
_b[Icon_styles_1.jsStyles.rootMultiline()] = isMultiline && (context.isOpened || _isSubMenu),
|
|
40
|
+
_b[Icon_styles_1.jsStyles.rootLarge(theme)] = size === 'large',
|
|
41
|
+
_b[Icon_styles_1.jsStyles.rootSubItem(theme)] = _isSubMenu,
|
|
42
|
+
_b[Icon_styles_1.jsStyles.rootSubItemSeparatedMenu(theme)] = isSeparatedMenu && _isSubMenu,
|
|
43
|
+
_b[Icon_styles_1.jsStyles.rootSubItemLarge(theme)] = _isSubMenu && size === 'large',
|
|
44
|
+
_b[Icon_styles_1.jsStyles.rootBackButton(theme)] = _isBackButton,
|
|
41
45
|
_b)) }, renderIcon()));
|
|
42
46
|
};
|
|
47
|
+
exports.Icon = Icon;
|
|
@@ -1,28 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.jsStyles = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
|
|
6
|
+
var ThemeHelpers_1 = require("../../../lib/theming/ThemeHelpers");
|
|
4
7
|
var styles = {
|
|
5
8
|
root: function (t) {
|
|
6
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin: ", " ", " ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "], ["\n display: flex;\n align-items: center;\n margin: ", " ", " ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "])), t.sideMenuIconMarginY, t.sideMenuIconMarginRight, t.sideMenuIconMarginY, t.sideMenuIconMarginLeft, t.sideMenuIconMinHeight, t.sideMenuIconLineHeight);
|
|
9
|
+
return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n margin: ", " ", " ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "], ["\n display: flex;\n align-items: center;\n margin: ", " ", " ", " ", ";\n min-height: ", ";\n line-height: ", ";\n flex-shrink: 0;\n box-sizing: content-box;\n "])), t.sideMenuIconMarginY, t.sideMenuIconMarginRight, t.sideMenuIconMarginY, t.sideMenuIconMarginLeft, t.sideMenuIconMinHeight, t.sideMenuIconLineHeight);
|
|
7
10
|
},
|
|
8
11
|
rootMultiline: function () {
|
|
9
|
-
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-self: flex-start;\n margin-top: -2px;\n "], ["\n align-self: flex-start;\n margin-top: -2px;\n "])));
|
|
12
|
+
return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n align-self: flex-start;\n margin-top: -2px;\n "], ["\n align-self: flex-start;\n margin-top: -2px;\n "])));
|
|
10
13
|
},
|
|
11
14
|
rootLarge: function (t) {
|
|
12
|
-
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n min-height: ", ";\n line-height: ", ";\n margin-top: 0;\n "], ["\n min-height: ", ";\n line-height: ", ";\n margin-top: 0;\n "])), t.sideMenuIconLargeMinHeight, t.sideMenuIconLargeLineHeight);
|
|
15
|
+
return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n min-height: ", ";\n line-height: ", ";\n margin-top: 0;\n "], ["\n min-height: ", ";\n line-height: ", ";\n margin-top: 0;\n "])), t.sideMenuIconLargeMinHeight, t.sideMenuIconLargeLineHeight);
|
|
13
16
|
},
|
|
14
17
|
rootSubItemLarge: function (t) {
|
|
15
|
-
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n min-height: ", ";\n "], ["\n min-height: ", ";\n "])), t.sideMenuIconLargeSubItemMinHeight);
|
|
18
|
+
return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n min-height: ", ";\n "], ["\n min-height: ", ";\n "])), t.sideMenuIconLargeSubItemMinHeight);
|
|
16
19
|
},
|
|
17
20
|
rootSubItem: function (t) {
|
|
18
|
-
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: 0;\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "], ["\n margin: 0;\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "])), t.sideMenuIconSubItemPaddingLeft, t.sideMenuIconSubItemPaddingRight, t.sideMenuIconSubItemMinHeight, t.sideMenuIconSubItemLineHeight);
|
|
21
|
+
return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n margin: 0;\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "], ["\n margin: 0;\n padding-left: ", ";\n padding-right: ", ";\n min-height: ", ";\n line-height: ", ";\n "])), t.sideMenuIconSubItemPaddingLeft, t.sideMenuIconSubItemPaddingRight, t.sideMenuIconSubItemMinHeight, t.sideMenuIconSubItemLineHeight);
|
|
19
22
|
},
|
|
20
23
|
rootSubItemSeparatedMenu: function (t) {
|
|
21
|
-
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), t.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft);
|
|
24
|
+
return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), t.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft);
|
|
22
25
|
},
|
|
23
26
|
rootBackButton: function (t) {
|
|
24
|
-
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n "], ["\n padding-left: ", ";\n padding-right: ", ";\n "])), t.sideMenuBackButtonIconPaddingLeft, t.sideMenuBackButtonIconPaddingRight);
|
|
27
|
+
return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n "], ["\n padding-left: ", ";\n padding-right: ", ";\n "])), t.sideMenuBackButtonIconPaddingLeft, t.sideMenuBackButtonIconPaddingRight);
|
|
25
28
|
},
|
|
26
29
|
};
|
|
27
|
-
|
|
30
|
+
exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
|
|
28
31
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
|
|
3
3
|
declare const ItemContentWithStaticFields: React.ForwardRefExoticComponent<SideMenuItemProps & {
|
|
4
|
-
isNestedSubMenu?: boolean
|
|
4
|
+
isNestedSubMenu?: boolean;
|
|
5
5
|
} & React.RefAttributes<HTMLDivElement>> & {
|
|
6
6
|
__KONTUR_REACT_UI__: string;
|
|
7
7
|
};
|