@gravity-ui/navigation 0.2.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/build/cjs/components/types.d.ts +9 -1
- package/build/cjs/index.js +72 -48
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/types.d.ts +9 -1
- package/build/esm/index.js +72 -48
- package/build/esm/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IconProps } from '@gravity-ui/uikit';
|
|
3
3
|
export declare type MenuItemType = 'regular' | 'action' | 'divider';
|
|
4
|
+
export interface MakeItemParams {
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
title: React.ReactNode;
|
|
7
|
+
}
|
|
4
8
|
export interface MenuItem {
|
|
5
9
|
id: string;
|
|
6
10
|
title: React.ReactNode;
|
|
@@ -11,7 +15,11 @@ export interface MenuItem {
|
|
|
11
15
|
current?: boolean;
|
|
12
16
|
pinned?: boolean;
|
|
13
17
|
onItemClick?: (item: MenuItem, collapsed: boolean) => void;
|
|
14
|
-
itemWrapper?: (
|
|
18
|
+
itemWrapper?: (p: MakeItemParams, makeItem: (p: MakeItemParams) => React.ReactNode, opts: {
|
|
19
|
+
collapsed: boolean;
|
|
20
|
+
compact: boolean;
|
|
21
|
+
item: MenuItem;
|
|
22
|
+
}) => React.ReactNode;
|
|
15
23
|
rightAdornment?: React.ReactNode;
|
|
16
24
|
type?: MenuItemType;
|
|
17
25
|
afterMoreButton?: boolean;
|
package/build/esm/index.js
CHANGED
|
@@ -3849,7 +3849,8 @@ function renderItemTitle(item) {
|
|
|
3849
3849
|
}
|
|
3850
3850
|
const defaultPopupPlacement = ['right-end'];
|
|
3851
3851
|
const defaultPopupOffset = [-20, 8];
|
|
3852
|
-
const Item = (
|
|
3852
|
+
const Item = (props) => {
|
|
3853
|
+
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3853
3854
|
if (item.type === 'divider') {
|
|
3854
3855
|
return React__default.createElement("div", { className: b$6('menu-divider') });
|
|
3855
3856
|
}
|
|
@@ -3872,58 +3873,81 @@ const Item = ({ item, compact, className, collapseItems, onMouseLeave, onMouseEn
|
|
|
3872
3873
|
}
|
|
3873
3874
|
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
3874
3875
|
}, [onClosePopup]);
|
|
3875
|
-
const
|
|
3876
|
-
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
}
|
|
3885
|
-
else {
|
|
3886
|
-
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false);
|
|
3887
|
-
}
|
|
3888
|
-
}, onMouseEnter: () => {
|
|
3889
|
-
if (!compact) {
|
|
3890
|
-
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
3891
|
-
}
|
|
3892
|
-
}, onMouseLeave: () => {
|
|
3893
|
-
if (!compact) {
|
|
3894
|
-
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3895
|
-
}
|
|
3896
|
-
} },
|
|
3897
|
-
React__default.createElement("div", { className: b$6('icon-place') }, compact ? (React__default.createElement(React__default.Fragment, null,
|
|
3898
|
-
React__default.createElement("div", { onMouseEnter: (event) => {
|
|
3899
|
-
if (!open) {
|
|
3900
|
-
setTooltipAnchor(event.currentTarget);
|
|
3901
|
-
}
|
|
3902
|
-
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
3903
|
-
}, onMouseLeave: () => {
|
|
3876
|
+
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
3877
|
+
const createdNode = (React__default.createElement("div", { className: b$6({ type, current, compact }, className), ref: ref, onClick: () => {
|
|
3878
|
+
if (collapsedItem) {
|
|
3879
|
+
/**
|
|
3880
|
+
* If we call onItemClick for collapsedItem then:
|
|
3881
|
+
* - User get unexpected item in onItemClick callback
|
|
3882
|
+
* - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
|
|
3883
|
+
*/
|
|
3884
|
+
toggleOpen(!open);
|
|
3904
3885
|
setTooltipAnchor(null);
|
|
3886
|
+
}
|
|
3887
|
+
else {
|
|
3888
|
+
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false);
|
|
3889
|
+
}
|
|
3890
|
+
}, onMouseEnter: () => {
|
|
3891
|
+
if (!compact) {
|
|
3892
|
+
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
3893
|
+
}
|
|
3894
|
+
}, onMouseLeave: () => {
|
|
3895
|
+
if (!compact) {
|
|
3905
3896
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3906
|
-
}
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
|
|
3912
|
-
const collapseNode = (React__default.createElement("div", { className: b$6('collapse-item'), onClick: () => {
|
|
3913
|
-
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
|
|
3914
|
-
} }, renderItemTitle(collapseItem)));
|
|
3915
|
-
if (typeof collapseItem.itemWrapper === 'function') {
|
|
3916
|
-
return collapseItem.itemWrapper(collapseNode, collapseItem, true, compact);
|
|
3897
|
+
}
|
|
3898
|
+
} },
|
|
3899
|
+
React__default.createElement("div", { className: b$6('icon-place') }, compact ? (React__default.createElement(React__default.Fragment, null,
|
|
3900
|
+
React__default.createElement("div", { onMouseEnter: (event) => {
|
|
3901
|
+
if (!open) {
|
|
3902
|
+
setTooltipAnchor(event.currentTarget);
|
|
3917
3903
|
}
|
|
3918
|
-
|
|
3919
|
-
}
|
|
3920
|
-
|
|
3904
|
+
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
3905
|
+
}, onMouseLeave: () => {
|
|
3906
|
+
setTooltipAnchor(null);
|
|
3907
|
+
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3908
|
+
}, className: b$6('btn-icon') }, iconEl),
|
|
3909
|
+
enableTooltip && (React__default.createElement(ItemTooltip, { anchor: tooltipAnchor, text: tooltipText })))) : (iconEl)),
|
|
3910
|
+
React__default.createElement("div", { className: b$6('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3911
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { className: b$6('popup'), open: popupVisible, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
3912
|
+
return item.link ? (React__default.createElement("a", { href: item.link, className: b$6('link') }, createdNode)) : (createdNode);
|
|
3913
|
+
};
|
|
3914
|
+
const iconNode = icon ? React__default.createElement(Icon, { data: icon, size: iconSize, className: b$6('icon') }) : null;
|
|
3915
|
+
const titleNode = renderItemTitle(item);
|
|
3916
|
+
const params = { icon: iconNode, title: titleNode };
|
|
3917
|
+
let node;
|
|
3918
|
+
const opts = { compact, collapsed: false, item };
|
|
3921
3919
|
if (typeof item.itemWrapper === 'function') {
|
|
3922
|
-
|
|
3920
|
+
node = item.itemWrapper(params, makeNode, opts);
|
|
3921
|
+
}
|
|
3922
|
+
else {
|
|
3923
|
+
node = makeNode(params);
|
|
3923
3924
|
}
|
|
3924
|
-
return
|
|
3925
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
3926
|
+
node,
|
|
3927
|
+
open && collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
|
|
3925
3928
|
};
|
|
3926
3929
|
Item.displayName = 'Item';
|
|
3930
|
+
function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
3931
|
+
return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default.createElement(Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
|
|
3932
|
+
React__default.createElement("div", { className: b$6('collapse-items-popup-content') },
|
|
3933
|
+
React__default.createElement(List, { itemClassName: b$6('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
|
|
3934
|
+
const makeCollapseNode = ({ title: titleEl }) => {
|
|
3935
|
+
const res = (React__default.createElement("div", { className: b$6('collapse-item'), onClick: () => {
|
|
3936
|
+
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
|
|
3937
|
+
} }, titleEl));
|
|
3938
|
+
return collapseItem.link ? (React__default.createElement("a", { href: collapseItem.link, className: b$6('link') }, res)) : (res);
|
|
3939
|
+
};
|
|
3940
|
+
const titleNode = renderItemTitle(collapseItem);
|
|
3941
|
+
const params = { title: titleNode };
|
|
3942
|
+
const opts = { compact, collapsed: true, item: collapseItem };
|
|
3943
|
+
if (typeof collapseItem.itemWrapper === 'function') {
|
|
3944
|
+
return collapseItem.itemWrapper(params, makeCollapseNode, opts);
|
|
3945
|
+
}
|
|
3946
|
+
else {
|
|
3947
|
+
return makeCollapseNode(params);
|
|
3948
|
+
}
|
|
3949
|
+
} })))) : null;
|
|
3950
|
+
}
|
|
3927
3951
|
|
|
3928
3952
|
var _path$2;
|
|
3929
3953
|
function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
|
|
@@ -4078,7 +4102,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4078
4102
|
};
|
|
4079
4103
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4080
4104
|
|
|
4081
|
-
var css_248z$3 = ".yc-root {\n --aside-header-background-color: var(--yc-color-base-info);\n --aside-header-collapse-button-divider-line-color: var(\n --aside-header-header-divider-line-color\n );\n}\n\n.yc-root_theme_light {\n --aside-header-divider-line-color: transparent;\n --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark {\n --aside-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n --aside-header-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n}\n\n.ycn-aside-header {\n --aside-header-min-width: 56px;\n height: 100%;\n width: 100%;\n position: relative;\n background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n position: sticky;\n top: 0;\n left: 0;\n height: 100vh;\n width: inherit;\n display: flex;\n flex-direction: column;\n background-color: var(--yc-color-base-background);\n z-index: 100;\n box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n width: 1px;\n height: 100%;\n content: \"\";\n background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n}\n.ycn-aside-header__aside-content {\n --gradient-height: 334px;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n width: inherit;\n height: inherit;\n position: relative;\n z-index: 2;\n user-select: none;\n background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header__aside-content::after {\n position: absolute;\n top: 0;\n right: -100px;\n bottom: 0;\n width: 100px;\n content: \"\";\n box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n margin: 8px 0;\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n background: transparent;\n}\n.ycn-aside-header__header {\n --aside-header-header-divider-height: 29px;\n position: relative;\n z-index: 1;\n flex: none;\n box-sizing: border-box;\n width: 100%;\n padding-top: 8px;\n padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -2;\n display: none;\n color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::before {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -2;\n display: none;\n width: 100%;\n height: calc(100% - var(--aside-header-header-divider-height));\n content: \"\";\n background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n position: absolute;\n bottom: 12px;\n left: 0;\n z-index: -2;\n width: 100%;\n height: 1px;\n content: \"\";\n background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header::after {\n display: none;\n}\n.ycn-aside-header_compact .ycn-aside-header__header .ycn-aside-header__header-divider {\n display: block;\n}\n.ycn-aside-header__footer {\n flex-shrink: 0;\n width: 100%;\n margin: 8px 0;\n display: flex;\n flex-direction: column;\n}\n.ycn-aside-header__panels {\n z-index: 98;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n overflow: auto;\n}\n.ycn-aside-header__panel {\n height: 100%;\n}\n.ycn-aside-header__pane-container {\n display: flex;\n outline: none;\n overflow: visible;\n user-select: text;\n flex-direction: row;\n}\n.ycn-aside-header__content {\n width: calc(100% - var(--aside-header-size));\n z-index: 95;\n}\n.ycn-aside-header__collapse-button {\n --yc-button-background-color-hover: transparent;\n overflow: hidden;\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: 20px;\n border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n margin-top: auto;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-primary);\n}";
|
|
4105
|
+
var css_248z$3 = ".yc-root {\n --aside-header-background-color: var(--yc-color-base-info);\n --aside-header-collapse-button-divider-line-color: var(\n --aside-header-header-divider-line-color\n );\n}\n\n.yc-root_theme_light {\n --aside-header-divider-line-color: transparent;\n --aside-header-header-divider-line-color: var(--yc-color-line-generic);\n}\n\n.yc-root_theme_dark {\n --aside-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n --aside-header-header-divider-line-color: var(--yc-color-base-light-simple-hover);\n}\n\n.ycn-aside-header {\n --aside-header-min-width: 56px;\n height: 100%;\n width: 100%;\n position: relative;\n background-color: var(--yc-color-base-background);\n}\n.ycn-aside-header__aside {\n position: sticky;\n top: 0;\n left: 0;\n height: 100vh;\n width: inherit;\n display: flex;\n flex-direction: column;\n background-color: var(--yc-color-base-background);\n z-index: 100;\n box-sizing: border-box;\n}\n.ycn-aside-header__aside::after {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n width: 1px;\n height: 100%;\n content: \"\";\n background-color: var(--aside-header-divider-line-color);\n}\n.ycn-aside-header__aside-popup-anchor {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n}\n.ycn-aside-header__aside-content {\n --gradient-height: 334px;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n width: inherit;\n height: inherit;\n position: relative;\n z-index: 2;\n user-select: none;\n background: linear-gradient(180deg, var(--aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.ycn-aside-header__aside-content::after {\n position: absolute;\n top: 0;\n right: -100px;\n bottom: 0;\n width: 100px;\n content: \"\";\n box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.ycn-aside-header__aside-content > .ycn-aside-header-logo {\n margin: 8px 0;\n}\n.ycn-aside-header_compact .ycn-aside-header__aside-content {\n background: transparent;\n}\n.ycn-aside-header__header {\n --aside-header-header-divider-height: 29px;\n position: relative;\n z-index: 1;\n flex: none;\n box-sizing: border-box;\n width: 100%;\n padding-top: 8px;\n padding-bottom: 22px;\n}\n.ycn-aside-header__header .ycn-aside-header__header-divider {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -2;\n display: none;\n color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::before {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -2;\n display: none;\n width: 100%;\n height: calc(100% - var(--aside-header-header-divider-height));\n content: \"\";\n background-color: var(--aside-header-background-color);\n}\n.ycn-aside-header__header::after {\n position: absolute;\n bottom: 12px;\n left: 0;\n z-index: -2;\n width: 100%;\n height: 1px;\n content: \"\";\n background-color: var(--aside-header-header-divider-line-color);\n}\n.ycn-aside-header_compact .ycn-aside-header__header::before {\n display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header::after {\n display: none;\n}\n.ycn-aside-header_compact .ycn-aside-header__header .ycn-aside-header__header-divider {\n display: block;\n}\n.ycn-aside-header__menu-items {\n flex-grow: 1;\n}\n.ycn-aside-header__footer {\n flex-shrink: 0;\n width: 100%;\n margin: 8px 0;\n display: flex;\n flex-direction: column;\n}\n.ycn-aside-header__panels {\n z-index: 98;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n overflow: auto;\n}\n.ycn-aside-header__panel {\n height: 100%;\n}\n.ycn-aside-header__pane-container {\n display: flex;\n outline: none;\n overflow: visible;\n user-select: text;\n flex-direction: row;\n}\n.ycn-aside-header__content {\n width: calc(100% - var(--aside-header-size));\n z-index: 95;\n}\n.ycn-aside-header__collapse-button {\n --yc-button-background-color-hover: transparent;\n overflow: hidden;\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: 20px;\n border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);\n margin-top: auto;\n}\n.ycn-aside-header__collapse-button:not(.ycn-aside-header__collapse-button_compact) .ycn-aside-header__collapse-icon {\n transform: rotate(180deg);\n}\n.ycn-aside-header__collapse-button .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-secondary);\n}\n.ycn-aside-header__collapse-button:hover .ycn-aside-header__collapse-icon {\n color: var(--yc-color-text-primary);\n}";
|
|
4082
4106
|
styleInject(css_248z$3);
|
|
4083
4107
|
|
|
4084
4108
|
const b$4 = block('aside-header');
|
|
@@ -4093,7 +4117,7 @@ class AsideHeader extends React__default.Component {
|
|
|
4093
4117
|
React__default.createElement("div", { className: b$4('aside-popup-anchor'), ref: this.asideRef }),
|
|
4094
4118
|
React__default.createElement("div", { className: b$4('aside-content') },
|
|
4095
4119
|
this.renderHeader(),
|
|
4096
|
-
React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick }),
|
|
4120
|
+
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default.createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default.createElement("div", { className: b$4('menu-items') })),
|
|
4097
4121
|
this.renderFooter(size),
|
|
4098
4122
|
this.renderCollapseButton())),
|
|
4099
4123
|
panelItems && this.renderPanels(size)));
|