@gravity-ui/navigation 0.3.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -5
- package/README.md +4 -2
- package/build/cjs/components/AsideHeader/AsideHeader.d.ts +1 -0
- package/build/cjs/index.js +11 -3
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/AsideHeader/AsideHeader.d.ts +1 -0
- package/build/esm/index.js +11 -3
- package/build/esm/index.js.map +1 -1
- package/package.json +1 -1
package/build/esm/index.js
CHANGED
|
@@ -3285,7 +3285,7 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
|
|
|
3285
3285
|
return (React__default.createElement("div", { className: b$8() },
|
|
3286
3286
|
React__default.createElement("div", { className: b$8('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3287
3287
|
!compact &&
|
|
3288
|
-
(hasWrapper ? (wrapper(logo, compact)) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$8('logo-link'), onClick: onClick }), logo)))));
|
|
3288
|
+
(hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", Object.assign({}, linkProps, { className: b$8('logo-link'), onClick: onClick }), logo)))));
|
|
3289
3289
|
};
|
|
3290
3290
|
|
|
3291
3291
|
var classCallCheck = function (instance, Constructor) {
|
|
@@ -3954,6 +3954,7 @@ function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : func
|
|
|
3954
3954
|
var SvgDots = function SvgDots(props) {
|
|
3955
3955
|
return /*#__PURE__*/React.createElement("svg", _extends$2({
|
|
3956
3956
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3957
|
+
viewBox: "0 0 16 16",
|
|
3957
3958
|
width: 16,
|
|
3958
3959
|
height: 16
|
|
3959
3960
|
}, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
|
|
@@ -4080,6 +4081,7 @@ var SvgControlMenuButton = function SvgControlMenuButton(props) {
|
|
|
4080
4081
|
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
4081
4082
|
width: 8,
|
|
4082
4083
|
height: 8,
|
|
4084
|
+
viewBox: "0 0 8 8",
|
|
4083
4085
|
fill: "currentColor",
|
|
4084
4086
|
xmlns: "http://www.w3.org/2000/svg"
|
|
4085
4087
|
}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
|
|
@@ -4094,6 +4096,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4094
4096
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
4095
4097
|
width: 56,
|
|
4096
4098
|
height: 29,
|
|
4099
|
+
viewBox: "0 0 56 29",
|
|
4097
4100
|
fill: "currentColor",
|
|
4098
4101
|
xmlns: "http://www.w3.org/2000/svg"
|
|
4099
4102
|
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
@@ -4102,7 +4105,7 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4102
4105
|
};
|
|
4103
4106
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4104
4107
|
|
|
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-
|
|
4108
|
+
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.yc-root_theme_light-hc {\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.yc-root_theme_dark-hc {\n --aside-header-divider-line-color: var(--yc-color-line-solid);\n --aside-header-header-divider-line-color: var(--yc-color-line-solid);\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}";
|
|
4106
4109
|
styleInject(css_248z$3);
|
|
4107
4110
|
|
|
4108
4111
|
const b$4 = block('aside-header');
|
|
@@ -4125,7 +4128,7 @@ class AsideHeader extends React__default.Component {
|
|
|
4125
4128
|
this.renderSecondPane = (size) => {
|
|
4126
4129
|
return (React__default.createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$4('content') }));
|
|
4127
4130
|
};
|
|
4128
|
-
this.renderLogo = () => React__default.createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact }));
|
|
4131
|
+
this.renderLogo = () => (React__default.createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4129
4132
|
this.renderHeader = () => (React__default.createElement("div", { className: b$4('header') },
|
|
4130
4133
|
this.renderLogo(),
|
|
4131
4134
|
React__default.createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
|
|
@@ -4162,6 +4165,11 @@ class AsideHeader extends React__default.Component {
|
|
|
4162
4165
|
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4163
4166
|
(_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed);
|
|
4164
4167
|
};
|
|
4168
|
+
this.onLogoClick = (event) => {
|
|
4169
|
+
var _a, _b, _c, _d;
|
|
4170
|
+
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4171
|
+
(_d = (_c = this.props.logo).onClick) === null || _d === void 0 ? void 0 : _d.call(_c, event);
|
|
4172
|
+
};
|
|
4165
4173
|
}
|
|
4166
4174
|
render() {
|
|
4167
4175
|
const { className, compact } = this.props;
|