@gravity-ui/navigation 0.7.0 → 0.8.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 +7 -0
- package/build/cjs/components/Settings/Settings.d.ts +1 -0
- package/build/cjs/components/Settings/__stories__/SettingsDemo.d.ts +2 -1
- package/build/cjs/components/Settings/__stories__/SettingsMobileDemo.d.ts +2 -2
- package/build/cjs/components/Settings/collect-settings.d.ts +1 -1
- package/build/cjs/components/Title/Title.d.ts +12 -0
- package/build/cjs/components/Title/index.d.ts +1 -0
- package/build/cjs/components/index.d.ts +1 -0
- package/build/cjs/index.js +126 -91
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/Settings/Settings.d.ts +1 -0
- package/build/esm/components/Settings/__stories__/SettingsDemo.d.ts +2 -1
- package/build/esm/components/Settings/__stories__/SettingsMobileDemo.d.ts +2 -2
- package/build/esm/components/Settings/collect-settings.d.ts +1 -1
- package/build/esm/components/Title/Title.d.ts +12 -0
- package/build/esm/components/Title/index.d.ts +1 -0
- package/build/esm/components/index.d.ts +1 -0
- package/build/esm/index.js +127 -93
- package/build/esm/index.js.map +1 -1
- package/package.json +3 -1
package/build/cjs/index.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var uikit = require('@gravity-ui/uikit');
|
|
7
7
|
var ReactDOM = require('react-dom');
|
|
8
|
+
var icons = require('@gravity-ui/icons');
|
|
8
9
|
|
|
9
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
11
|
|
|
@@ -114,48 +115,48 @@ function styleInject(css, ref) {
|
|
|
114
115
|
}
|
|
115
116
|
}
|
|
116
117
|
|
|
117
|
-
var css_248z$
|
|
118
|
-
styleInject(css_248z$
|
|
118
|
+
var css_248z$f = ".ycn-action-bar-group {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-group_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-group_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-group_pull_center {\n margin-left: auto;\n margin-right: auto;\n}";
|
|
119
|
+
styleInject(css_248z$f);
|
|
119
120
|
|
|
120
|
-
const b$
|
|
121
|
+
const b$g = block('action-bar-group');
|
|
121
122
|
const ActionBarGroup = ({ children, className, pull }) => {
|
|
122
|
-
return (React__default["default"].createElement("ul", { className: b$
|
|
123
|
+
return (React__default["default"].createElement("ul", { className: b$g({ pull }, className), role: "group" }, children));
|
|
123
124
|
};
|
|
124
125
|
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
125
126
|
|
|
126
|
-
var css_248z$
|
|
127
|
-
styleInject(css_248z$
|
|
127
|
+
var css_248z$e = ".ycn-action-bar-item {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.ycn-action-bar-item_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.ycn-action-bar-item_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.ycn-action-bar-item_pull_center {\n margin-left: auto;\n margin-right: auto;\n}\n.ycn-action-bar-item + .ycn-action-bar-item_spacing {\n margin-left: 8px;\n}";
|
|
128
|
+
styleInject(css_248z$e);
|
|
128
129
|
|
|
129
|
-
const b$
|
|
130
|
+
const b$f = block('action-bar-item');
|
|
130
131
|
const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
131
|
-
return React__default["default"].createElement("li", { className: b$
|
|
132
|
+
return React__default["default"].createElement("li", { className: b$f({ pull, spacing }, className) }, children);
|
|
132
133
|
};
|
|
133
134
|
ActionBarItem.displayName = 'ActionBar.Item';
|
|
134
135
|
|
|
135
|
-
var css_248z$
|
|
136
|
-
styleInject(css_248z$
|
|
136
|
+
var css_248z$d = ".ycn-action-bar-section {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}\n.ycn-action-bar-section + .ycn-action-bar-section {\n border-left: solid 1px var(--yc-color-line-generic);\n}\n.ycn-action-bar-section_type_primary {\n flex: 1 1 auto;\n padding-left: 20px;\n padding-right: 20px;\n}\n.ycn-action-bar-section_type_secondary {\n padding-left: 6px;\n padding-right: 6px;\n}";
|
|
137
|
+
styleInject(css_248z$d);
|
|
137
138
|
|
|
138
|
-
const b$
|
|
139
|
+
const b$e = block('action-bar-section');
|
|
139
140
|
const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
140
|
-
return React__default["default"].createElement("div", { className: b$
|
|
141
|
+
return React__default["default"].createElement("div", { className: b$e({ type }) }, children);
|
|
141
142
|
};
|
|
142
143
|
ActionBarSection.displayName = 'ActionBar.Section';
|
|
143
144
|
|
|
144
|
-
var css_248z$
|
|
145
|
-
styleInject(css_248z$
|
|
145
|
+
var css_248z$c = ".ycn-action-bar-separator {\n list-style: none;\n margin: 0;\n padding: 0;\n margin-left: 6px;\n margin-right: 6px;\n border-right: solid 1px var(--yc-color-line-generic);\n height: 40px;\n}";
|
|
146
|
+
styleInject(css_248z$c);
|
|
146
147
|
|
|
147
|
-
const b$
|
|
148
|
+
const b$d = block('action-bar-separator');
|
|
148
149
|
const ActionBarSeparator = () => {
|
|
149
|
-
return React__default["default"].createElement("li", { role: "separator", className: b$
|
|
150
|
+
return React__default["default"].createElement("li", { role: "separator", className: b$d() });
|
|
150
151
|
};
|
|
151
152
|
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
152
153
|
|
|
153
|
-
var css_248z$
|
|
154
|
-
styleInject(css_248z$
|
|
154
|
+
var css_248z$b = ".ycn-action-bar {\n box-sizing: border-box;\n height: 40px;\n border-bottom: solid 1px var(--yc-color-line-generic);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}";
|
|
155
|
+
styleInject(css_248z$b);
|
|
155
156
|
|
|
156
|
-
const b$
|
|
157
|
+
const b$c = block('action-bar');
|
|
157
158
|
const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
|
|
158
|
-
return (React__default["default"].createElement("section", { className: b$
|
|
159
|
+
return (React__default["default"].createElement("section", { className: b$c(null, className), "aria-label": ariaLabel }, children));
|
|
159
160
|
};
|
|
160
161
|
ActionBar.displayName = 'ActionBar';
|
|
161
162
|
const PublicActionBar = Object.assign(ActionBar, {
|
|
@@ -180,7 +181,7 @@ exports.Dict = void 0;
|
|
|
180
181
|
const ASIDE_HEADER_FOOTER_ICON_SIZE = 20;
|
|
181
182
|
const ASIDE_HEADER_COMPACT_WIDTH = 56;
|
|
182
183
|
const ASIDE_HEADER_EXPANDED_WIDTH = 236;
|
|
183
|
-
const defaultDict$
|
|
184
|
+
const defaultDict$2 = {
|
|
184
185
|
[exports.Dict.CollapseButton]: 'Collapse',
|
|
185
186
|
[exports.Dict.ExpandButton]: 'Expand',
|
|
186
187
|
[exports.Dict.MoreButton]: 'More',
|
|
@@ -3207,15 +3208,15 @@ SwitchTransition.defaultProps = {
|
|
|
3207
3208
|
mode: modes.out
|
|
3208
3209
|
};
|
|
3209
3210
|
|
|
3210
|
-
var css_248z$
|
|
3211
|
-
styleInject(css_248z$
|
|
3211
|
+
var css_248z$a = ".ycn-drawer__item {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: 100%;\n will-change: transform;\n background-color: var(--yc-color-base-background);\n}\n.ycn-drawer__item_direction_right {\n left: auto;\n right: 0;\n}\n.ycn-drawer__item-transition-enter {\n transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-enter {\n transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-enter-active, .ycn-drawer__item-transition_direction_right-enter-active {\n transform: translate(0, 0);\n transition: transform 300ms;\n}\n.ycn-drawer__item-transition-enter-done, .ycn-drawer__item-transition_direction_right-enter-done {\n filter: blur(0px);\n transform: translateZ(0);\n}\n.ycn-drawer__item-transition-exit, .ycn-drawer__item-transition_direction_right-exit {\n transform: translate(0, 0);\n}\n.ycn-drawer__item-transition-exit-active, .ycn-drawer__item-transition_direction_right-exit-active {\n transition: transform 300ms;\n}\n.ycn-drawer__item-transition-exit-active {\n transform: translate(-100%, 0);\n}\n.ycn-drawer__item-transition_direction_right-exit-active {\n transform: translate(100%, 0);\n}\n.ycn-drawer__item-transition-exit-done, .ycn-drawer__item-transition_direction_right-exit-done {\n visibility: hidden;\n}\n.ycn-drawer__veil {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n background-color: var(--yc-color-sfx-veil);\n}\n.ycn-drawer__veil-transition-enter {\n opacity: 0;\n}\n.ycn-drawer__veil-transition-enter-active {\n opacity: 1;\n transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit {\n opacity: 1;\n}\n.ycn-drawer__veil-transition-exit-active {\n opacity: 0;\n transition: opacity 300ms;\n}\n.ycn-drawer__veil-transition-exit-done {\n visibility: hidden;\n}";
|
|
3212
|
+
styleInject(css_248z$a);
|
|
3212
3213
|
|
|
3213
|
-
const b$
|
|
3214
|
+
const b$b = block('drawer');
|
|
3214
3215
|
const TIMEOUT = 300;
|
|
3215
3216
|
const DrawerItem = ({ visible, content, direction, className }) => {
|
|
3216
3217
|
const itemRef = React__default["default"].useRef(null);
|
|
3217
|
-
return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3218
|
-
React__default["default"].createElement("div", { ref: itemRef, className: b$
|
|
3218
|
+
return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$b('item-transition', { direction }), nodeRef: itemRef },
|
|
3219
|
+
React__default["default"].createElement("div", { ref: itemRef, className: b$b('item', { direction }, className) }, content)));
|
|
3219
3220
|
};
|
|
3220
3221
|
const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
|
|
3221
3222
|
let someItemVisible = false;
|
|
@@ -3246,9 +3247,9 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3246
3247
|
const veilRef = React__default["default"].useRef(null);
|
|
3247
3248
|
return (React__default["default"].createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
|
|
3248
3249
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
3249
|
-
return (React__default["default"].createElement("div", { ref: containerRef, className: b$
|
|
3250
|
-
React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3251
|
-
React__default["default"].createElement("div", { ref: veilRef, className: b$
|
|
3250
|
+
return (React__default["default"].createElement("div", { ref: containerRef, className: b$b(null, className), style: style },
|
|
3251
|
+
React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$b('veil-transition'), nodeRef: veilRef },
|
|
3252
|
+
React__default["default"].createElement("div", { ref: veilRef, className: b$b('veil'), onClick: onVeilClick })),
|
|
3252
3253
|
React__default["default"].Children.map(children, (child) => {
|
|
3253
3254
|
const childElem = child;
|
|
3254
3255
|
if (childElem.type === DrawerItem) {
|
|
@@ -3260,10 +3261,10 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3260
3261
|
}));
|
|
3261
3262
|
};
|
|
3262
3263
|
|
|
3263
|
-
var css_248z$
|
|
3264
|
-
styleInject(css_248z$
|
|
3264
|
+
var css_248z$9 = ".ycn-logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n height: 40px;\n}\n.ycn-logo__logo-btn-place {\n flex-shrink: 0;\n width: var(--aside-header-min-width);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.ycn-logo__logo-btn-place .yc-button::before {\n background-color: transparent;\n}\n.ycn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n --yc-button-height: 38px;\n}\n.ycn-logo__logo {\n font-size: var(--yc-text-body-2-font-size);\n line-height: var(--yc-text-body-2-line-height);\n font-weight: var(--yc-text-body-font-weight);\n vertical-align: middle;\n cursor: pointer;\n}\n.ycn-logo__logo-link, .ycn-logo__logo-link:hover, .ycn-logo__logo-link:active, .ycn-logo__logo-link:visited, .ycn-logo__logo-link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.yc-root .ycn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n background-color: transparent;\n}";
|
|
3265
|
+
styleInject(css_248z$9);
|
|
3265
3266
|
|
|
3266
|
-
const b$
|
|
3267
|
+
const b$a = block('logo');
|
|
3267
3268
|
const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href = '/', wrapper, onClick, }) => {
|
|
3268
3269
|
const hasClickHandler = typeof onClick === 'function';
|
|
3269
3270
|
const hasWrapper = typeof wrapper === 'function';
|
|
@@ -3281,18 +3282,18 @@ const Logo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 24, text
|
|
|
3281
3282
|
else if (icon) {
|
|
3282
3283
|
buttonIcon = React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: iconClassName });
|
|
3283
3284
|
}
|
|
3284
|
-
const button = (React__default["default"].createElement(uikit.Button, Object.assign({ view: "flat", size: "l", className: b$
|
|
3285
|
+
const button = (React__default["default"].createElement(uikit.Button, Object.assign({ view: "flat", size: "l", className: b$a('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick }, linkProps), buttonIcon));
|
|
3285
3286
|
let logo;
|
|
3286
3287
|
if (typeof text === 'function') {
|
|
3287
3288
|
logo = text();
|
|
3288
3289
|
}
|
|
3289
3290
|
else {
|
|
3290
|
-
logo = (React__default["default"].createElement("div", { className: b$
|
|
3291
|
+
logo = (React__default["default"].createElement("div", { className: b$a('logo'), style: { fontSize: textSize } }, text));
|
|
3291
3292
|
}
|
|
3292
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
3293
|
-
React__default["default"].createElement("div", { className: b$
|
|
3293
|
+
return (React__default["default"].createElement("div", { className: b$a() },
|
|
3294
|
+
React__default["default"].createElement("div", { className: b$a('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3294
3295
|
!compact &&
|
|
3295
|
-
(hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$
|
|
3296
|
+
(hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", Object.assign({}, linkProps, { className: b$a('logo-link'), onClick: onClick }), logo)))));
|
|
3296
3297
|
};
|
|
3297
3298
|
|
|
3298
3299
|
var classCallCheck = function (instance, Constructor) {
|
|
@@ -3824,16 +3825,16 @@ function getItemsMinHeight(items) {
|
|
|
3824
3825
|
(pinnedItems.length === items.length ? 0 : ITEM_HEIGHT));
|
|
3825
3826
|
}
|
|
3826
3827
|
|
|
3827
|
-
var css_248z$
|
|
3828
|
-
styleInject(css_248z$
|
|
3828
|
+
var css_248z$8 = ".ycn-composite-bar-item {\n --composite-bar-item-action-size: 36px;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n cursor: pointer;\n}\n.ycn-composite-bar-item__icon {\n color: var(--yc-color-text-misc);\n}\n.ycn-composite-bar-item__icon-place {\n flex-shrink: 0;\n width: var(--aside-header-min-width);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n.ycn-composite-bar-item__title {\n display: flex;\n overflow: hidden;\n}\n.ycn-composite-bar-item__title-text {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.ycn-composite-bar-item__title-adornment {\n margin: 0 10px;\n}\n.ycn-composite-bar-item__collapse-item {\n display: flex;\n padding: 0 16px;\n align-items: center;\n width: 100%;\n height: 100%;\n cursor: pointer;\n}\n.ycn-composite-bar-item__collapse-item .ycn-composite-bar-item__title-adornment {\n margin-right: 0;\n}\n.ycn-composite-bar-item__menu-divider {\n margin: 0 8px;\n width: 100%;\n border-top: 1px solid var(--yc-color-line-generic);\n cursor: default;\n}\n.ycn-composite-bar-item__collapse-items-popup-content {\n padding: 4px 0;\n}\n.ycn-composite-bar-item__link {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n}\n.ycn-composite-bar-item__link, .ycn-composite-bar-item__link:hover, .ycn-composite-bar-item__link:active, .ycn-composite-bar-item__link:visited, .ycn-composite-bar-item__link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.ycn-composite-bar-item__btn-icon {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ycn-composite-bar-item_type_action {\n justify-content: center;\n height: var(--composite-bar-item-action-size);\n margin: 0 10px 8px;\n background: var(--yc-color-base-float);\n box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n border-radius: var(--composite-bar-item-action-size);\n transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.ycn-composite-bar-item_type_action:focus {\n box-shadow: 0 0 0 2px var(--yc-color-line-misc);\n}\n.ycn-composite-bar-item_type_action:focus:not(:focus-visible) {\n box-shadow: none;\n}\n.ycn-composite-bar-item_type_action:hover {\n background-color: var(--yc-color-base-float-hover);\n}\n.ycn-composite-bar-item_type_action:active {\n box-shadow: 0 1px 2px var(--yc-color-sfx-shadow);\n transition: none;\n transform: scale(0.96);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__icon-place {\n width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n margin-right: 16px;\n}\n.ycn-composite-bar-item__icon-tooltip_item-type_action {\n margin-left: 10px;\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact).ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular {\n background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item:not(.ycn-composite-bar-item_compact):not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular {\n background-color: var(--yc-color-base-simple-hover);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action {\n width: var(--composite-bar-item-action-size);\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_type_action .ycn-composite-bar-item__title {\n margin: 0;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: 38px;\n height: 38px;\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.ycn-composite-bar-item_compact.ycn-composite-bar-item_current.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n background-color: var(--yc-color-base-selection);\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: 38px;\n height: 38px;\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.ycn-composite-bar-item_compact:not(.ycn-composite-bar-item_current):hover.ycn-composite-bar-item_type_regular .ycn-composite-bar-item__btn-icon::before {\n background-color: var(--yc-color-base-simple-hover);\n}";
|
|
3829
|
+
styleInject(css_248z$8);
|
|
3829
3830
|
|
|
3830
|
-
const b$
|
|
3831
|
+
const b$9 = block('composite-bar-item');
|
|
3831
3832
|
function renderItemTitle(item) {
|
|
3832
|
-
let titleNode = React__default["default"].createElement("div", { className: b$
|
|
3833
|
+
let titleNode = React__default["default"].createElement("div", { className: b$9('title-text') }, item.title);
|
|
3833
3834
|
if (item.rightAdornment) {
|
|
3834
3835
|
titleNode = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
3835
3836
|
titleNode,
|
|
3836
|
-
React__default["default"].createElement("div", { className: b$
|
|
3837
|
+
React__default["default"].createElement("div", { className: b$9('title-adornment') }, item.rightAdornment)));
|
|
3837
3838
|
}
|
|
3838
3839
|
return titleNode;
|
|
3839
3840
|
}
|
|
@@ -3842,7 +3843,7 @@ const defaultPopupOffset = [-20, 8];
|
|
|
3842
3843
|
const Item = (props) => {
|
|
3843
3844
|
const { item, compact, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, } = props;
|
|
3844
3845
|
if (item.type === 'divider') {
|
|
3845
|
-
return React__default["default"].createElement("div", { className: b$
|
|
3846
|
+
return React__default["default"].createElement("div", { className: b$9('menu-divider') });
|
|
3846
3847
|
}
|
|
3847
3848
|
const [open, toggleOpen] = React__default["default"].useState(false);
|
|
3848
3849
|
const ref = React__default["default"].useRef(null);
|
|
@@ -3863,7 +3864,7 @@ const Item = (props) => {
|
|
|
3863
3864
|
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
3864
3865
|
}, [onClosePopup]);
|
|
3865
3866
|
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
3866
|
-
const createdNode = (React__default["default"].createElement("div", { className: b$
|
|
3867
|
+
const createdNode = (React__default["default"].createElement("div", { className: b$9({ type, current, compact }, className), ref: ref, onClick: () => {
|
|
3867
3868
|
if (collapsedItem) {
|
|
3868
3869
|
/**
|
|
3869
3870
|
* If we call onItemClick for collapsedItem then:
|
|
@@ -3884,13 +3885,13 @@ const Item = (props) => {
|
|
|
3884
3885
|
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3885
3886
|
}
|
|
3886
3887
|
} },
|
|
3887
|
-
React__default["default"].createElement("div", { className: b$
|
|
3888
|
-
React__default["default"].createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$
|
|
3889
|
-
React__default["default"].createElement("div", { className: b$
|
|
3890
|
-
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { className: b$
|
|
3891
|
-
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$
|
|
3888
|
+
React__default["default"].createElement("div", { className: b$9('icon-place') }, compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open), placement: "right", className: b$9('icon-tooltip', { 'item-type': type }) },
|
|
3889
|
+
React__default["default"].createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$9('btn-icon') }, iconEl))) : (iconEl)),
|
|
3890
|
+
React__default["default"].createElement("div", { className: b$9('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3891
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { className: b$9('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
3892
|
+
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$9('link') }, createdNode)) : (createdNode);
|
|
3892
3893
|
};
|
|
3893
|
-
const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$
|
|
3894
|
+
const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$9('icon') }) : null;
|
|
3894
3895
|
const titleNode = renderItemTitle(item);
|
|
3895
3896
|
const params = { icon: iconNode, title: titleNode };
|
|
3896
3897
|
let node;
|
|
@@ -3908,13 +3909,13 @@ const Item = (props) => {
|
|
|
3908
3909
|
Item.displayName = 'Item';
|
|
3909
3910
|
function CollapsedPopup({ compact, onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
3910
3911
|
return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default["default"].createElement(uikit.Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
|
|
3911
|
-
React__default["default"].createElement("div", { className: b$
|
|
3912
|
-
React__default["default"].createElement(uikit.List, { itemClassName: b$
|
|
3912
|
+
React__default["default"].createElement("div", { className: b$9('collapse-items-popup-content') },
|
|
3913
|
+
React__default["default"].createElement(uikit.List, { itemClassName: b$9('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) => {
|
|
3913
3914
|
const makeCollapseNode = ({ title: titleEl }) => {
|
|
3914
|
-
const res = (React__default["default"].createElement("div", { className: b$
|
|
3915
|
+
const res = (React__default["default"].createElement("div", { className: b$9('collapse-item'), onClick: () => {
|
|
3915
3916
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true);
|
|
3916
3917
|
} }, titleEl));
|
|
3917
|
-
return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$
|
|
3918
|
+
return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$9('link') }, res)) : (res);
|
|
3918
3919
|
};
|
|
3919
3920
|
const titleNode = renderItemTitle(collapseItem);
|
|
3920
3921
|
const params = { title: titleNode };
|
|
@@ -3944,10 +3945,10 @@ var SvgDots = function SvgDots(props) {
|
|
|
3944
3945
|
};
|
|
3945
3946
|
var dotsIcon = SvgDots;
|
|
3946
3947
|
|
|
3947
|
-
var css_248z$
|
|
3948
|
-
styleInject(css_248z$
|
|
3948
|
+
var css_248z$7 = ".ycn-composite-bar {\n flex: 1 0 auto;\n width: 100%;\n min-height: 40px;\n}\n.ycn-composite-bar .ycn-composite-bar__root-menu-item[class] {\n background-color: transparent;\n}";
|
|
3949
|
+
styleInject(css_248z$7);
|
|
3949
3950
|
|
|
3950
|
-
const b$
|
|
3951
|
+
const b$8 = block('composite-bar');
|
|
3951
3952
|
class CompositeBar extends React__default["default"].Component {
|
|
3952
3953
|
constructor() {
|
|
3953
3954
|
super(...arguments);
|
|
@@ -3962,10 +3963,10 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
3962
3963
|
return null;
|
|
3963
3964
|
}
|
|
3964
3965
|
if (!enableCollapsing) {
|
|
3965
|
-
return React__default["default"].createElement("div", { className: b$
|
|
3966
|
+
return React__default["default"].createElement("div", { className: b$8() }, this.renderMenu());
|
|
3966
3967
|
}
|
|
3967
3968
|
const minHeight = getItemsMinHeight(items);
|
|
3968
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
3969
|
+
return (React__default["default"].createElement("div", { className: b$8({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
|
|
3969
3970
|
const style = {
|
|
3970
3971
|
width,
|
|
3971
3972
|
height,
|
|
@@ -3976,7 +3977,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
3976
3977
|
renderAutosizeMenu(height) {
|
|
3977
3978
|
const { compact, onItemClick } = this.props;
|
|
3978
3979
|
const { listItems, collapseItems } = this.getAutosizeListItems(height);
|
|
3979
|
-
return (React__default["default"].createElement(uikit.List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex(listItems), itemHeight: getItemHeight, itemClassName: b$
|
|
3980
|
+
return (React__default["default"].createElement(uikit.List, { ref: this.listRef, items: listItems, selectedItemIndex: getSelectedItemIndex(listItems), itemHeight: getItemHeight, itemClassName: b$8('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default["default"].createElement(Item, { item: item, onMouseLeave: () => {
|
|
3980
3981
|
var _a;
|
|
3981
3982
|
if (compact) {
|
|
3982
3983
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -3985,7 +3986,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
3985
3986
|
}
|
|
3986
3987
|
renderMenu() {
|
|
3987
3988
|
const { items, onItemClick, compact } = this.props;
|
|
3988
|
-
return (React__default["default"].createElement(uikit.List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$
|
|
3989
|
+
return (React__default["default"].createElement(uikit.List, { ref: this.listRef, items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getItemHeight, itemClassName: b$8('root-menu-item'), itemsHeight: getItemsHeight, virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default["default"].createElement(Item, { item: item, onMouseLeave: () => {
|
|
3989
3990
|
var _a;
|
|
3990
3991
|
if (compact) {
|
|
3991
3992
|
(_a = this.listRef.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
@@ -3995,7 +3996,7 @@ class CompositeBar extends React__default["default"].Component {
|
|
|
3995
3996
|
getMoreButtonItem() {
|
|
3996
3997
|
var _a;
|
|
3997
3998
|
const { dict } = this.props;
|
|
3998
|
-
const title = (_a = dict === null || dict === void 0 ? void 0 : dict[exports.Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict$
|
|
3999
|
+
const title = (_a = dict === null || dict === void 0 ? void 0 : dict[exports.Dict.MoreButton]) !== null && _a !== void 0 ? _a : defaultDict$2[exports.Dict.MoreButton];
|
|
3999
4000
|
return {
|
|
4000
4001
|
id: COLLAPSE_ITEM_ID,
|
|
4001
4002
|
title,
|
|
@@ -4085,10 +4086,10 @@ var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
|
4085
4086
|
};
|
|
4086
4087
|
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4087
4088
|
|
|
4088
|
-
var css_248z$
|
|
4089
|
-
styleInject(css_248z$
|
|
4089
|
+
var css_248z$6 = ".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}\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__aside-content_with-decoration {\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_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_with-decoration::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_with-decoration .ycn-aside-header__header-divider {\n display: block;\n}\n.ycn-aside-header_compact .ycn-aside-header__header_with-decoration::after {\n display: none;\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}";
|
|
4090
|
+
styleInject(css_248z$6);
|
|
4090
4091
|
|
|
4091
|
-
const b$
|
|
4092
|
+
const b$7 = block('aside-header');
|
|
4092
4093
|
class AsideHeader extends React__default["default"].Component {
|
|
4093
4094
|
constructor() {
|
|
4094
4095
|
super(...arguments);
|
|
@@ -4096,26 +4097,26 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4096
4097
|
this.renderFirstPane = (size) => {
|
|
4097
4098
|
const { dict, menuItems, panelItems, compact, headerDecoration } = this.props;
|
|
4098
4099
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4099
|
-
React__default["default"].createElement("div", { className: b$
|
|
4100
|
-
React__default["default"].createElement("div", { className: b$
|
|
4101
|
-
React__default["default"].createElement("div", { className: b$
|
|
4100
|
+
React__default["default"].createElement("div", { className: b$7('aside'), style: { width: size } },
|
|
4101
|
+
React__default["default"].createElement("div", { className: b$7('aside-popup-anchor'), ref: this.asideRef }),
|
|
4102
|
+
React__default["default"].createElement("div", { className: b$7('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4102
4103
|
this.renderHeader(),
|
|
4103
|
-
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default["default"].createElement("div", { className: b$
|
|
4104
|
+
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { items: menuItems, compact: compact, enableCollapsing: true, dict: dict, onItemClick: this.onItemClick })) : (React__default["default"].createElement("div", { className: b$7('menu-items') })),
|
|
4104
4105
|
this.renderFooter(size),
|
|
4105
4106
|
this.renderCollapseButton())),
|
|
4106
4107
|
panelItems && this.renderPanels(size)));
|
|
4107
4108
|
};
|
|
4108
4109
|
this.renderSecondPane = (size) => {
|
|
4109
|
-
return (React__default["default"].createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$
|
|
4110
|
+
return (React__default["default"].createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$7('content') }));
|
|
4110
4111
|
};
|
|
4111
4112
|
this.renderLogo = () => (React__default["default"].createElement(Logo, Object.assign({}, this.props.logo, { compact: this.props.compact, onClick: this.onLogoClick })));
|
|
4112
|
-
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$
|
|
4113
|
+
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$7('header', { ['with-decoration']: this.props.headerDecoration }) },
|
|
4113
4114
|
this.renderLogo(),
|
|
4114
4115
|
React__default["default"].createElement(CompositeBar, { items: this.props.subheaderItems, compact: this.props.compact, enableCollapsing: false, onItemClick: this.onItemClick }),
|
|
4115
|
-
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$
|
|
4116
|
+
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$7('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
4116
4117
|
this.renderFooter = (size) => {
|
|
4117
4118
|
const { compact, renderFooter } = this.props;
|
|
4118
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
4119
|
+
return (React__default["default"].createElement("div", { className: b$7('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
4119
4120
|
size,
|
|
4120
4121
|
compact,
|
|
4121
4122
|
asideRef: this.asideRef,
|
|
@@ -4123,14 +4124,14 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4123
4124
|
};
|
|
4124
4125
|
this.renderPanels = (size) => {
|
|
4125
4126
|
const { panelItems } = this.props;
|
|
4126
|
-
return (React__default["default"].createElement(Drawer, { className: b$
|
|
4127
|
+
return (React__default["default"].createElement(Drawer, { className: b$7('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default["default"].createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
|
|
4127
4128
|
};
|
|
4128
4129
|
this.renderCollapseButton = () => {
|
|
4129
4130
|
var _a;
|
|
4130
4131
|
const { compact, dict } = this.props;
|
|
4131
4132
|
const typeButton = compact ? exports.Dict.ExpandButton : exports.Dict.CollapseButton;
|
|
4132
|
-
return (React__default["default"].createElement(uikit.Button, { className: b$
|
|
4133
|
-
React__default["default"].createElement(uikit.Icon, { data: controlMenuButtonIcon, className: b$
|
|
4133
|
+
return (React__default["default"].createElement(uikit.Button, { className: b$7('collapse-button', { compact }), view: "flat", onClick: this.onCollapseButtonClick, title: (_a = dict === null || dict === void 0 ? void 0 : dict[typeButton]) !== null && _a !== void 0 ? _a : defaultDict$2[typeButton] },
|
|
4134
|
+
React__default["default"].createElement(uikit.Icon, { data: controlMenuButtonIcon, className: b$7('collapse-icon'), width: "16", height: "10" })));
|
|
4134
4135
|
};
|
|
4135
4136
|
this.onCollapseButtonClick = () => {
|
|
4136
4137
|
var _a, _b;
|
|
@@ -4154,8 +4155,8 @@ class AsideHeader extends React__default["default"].Component {
|
|
|
4154
4155
|
render() {
|
|
4155
4156
|
const { className, compact } = this.props;
|
|
4156
4157
|
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
4157
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
4158
|
-
React__default["default"].createElement("div", { className: b$
|
|
4158
|
+
return (React__default["default"].createElement("div", { className: b$7({ compact }, className) },
|
|
4159
|
+
React__default["default"].createElement("div", { className: b$7('pane-container') },
|
|
4159
4160
|
this.renderFirstPane(size),
|
|
4160
4161
|
this.renderSecondPane(size))));
|
|
4161
4162
|
}
|
|
@@ -4194,14 +4195,31 @@ function __rest(s, e) {
|
|
|
4194
4195
|
return t;
|
|
4195
4196
|
}
|
|
4196
4197
|
|
|
4197
|
-
var css_248z$
|
|
4198
|
-
styleInject(css_248z$
|
|
4198
|
+
var css_248z$5 = ".ycn-footer-item {\n width: 100%;\n height: 40px;\n}";
|
|
4199
|
+
styleInject(css_248z$5);
|
|
4199
4200
|
|
|
4200
|
-
const b$
|
|
4201
|
+
const b$6 = block('footer-item');
|
|
4201
4202
|
const FooterItem = (_a) => {
|
|
4202
4203
|
var { item } = _a, props = __rest(_a, ["item"]);
|
|
4203
|
-
return (React__default["default"].createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$
|
|
4204
|
+
return (React__default["default"].createElement(Item, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$6({ compact: props.compact }), onItemClick: item.onItemClick })));
|
|
4205
|
+
};
|
|
4206
|
+
|
|
4207
|
+
var css_248z$4 = ".ycn-title {\n box-sizing: border-box;\n padding: 14px 10px 14px 20px;\n min-height: 64px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.ycn-title_separator {\n border-bottom: 1px solid var(--yc-color-line-generic);\n}\n.ycn-title__text {\n margin: 0;\n margin-right: 20px;\n}";
|
|
4208
|
+
styleInject(css_248z$4);
|
|
4209
|
+
|
|
4210
|
+
const b$5 = block('title');
|
|
4211
|
+
const defaultDict$1 = {
|
|
4212
|
+
close: 'Close',
|
|
4213
|
+
};
|
|
4214
|
+
const Title = ({ children, closeIconSize = 23, hasSeparator, dict = defaultDict$1, onClose, }) => {
|
|
4215
|
+
return (React__default["default"].createElement("div", { className: b$5({ separator: hasSeparator }) },
|
|
4216
|
+
React__default["default"].createElement(uikit.Text, { className: b$5('text'), as: 'h3', variant: 'subheader-3' }, children),
|
|
4217
|
+
onClose && (React__default["default"].createElement(uikit.Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
|
|
4218
|
+
'aria-label': dict['close'],
|
|
4219
|
+
} },
|
|
4220
|
+
React__default["default"].createElement(uikit.Icon, { data: icons.Xmark, size: closeIconSize })))));
|
|
4204
4221
|
};
|
|
4222
|
+
Title.displayName = 'Title';
|
|
4205
4223
|
|
|
4206
4224
|
function flattenHotkeyGroups(hotkeys) {
|
|
4207
4225
|
const result = [];
|
|
@@ -5080,7 +5098,7 @@ function getSettingsItemsFromChildren(children, filterRe) {
|
|
|
5080
5098
|
return { items, hidden };
|
|
5081
5099
|
}
|
|
5082
5100
|
|
|
5083
|
-
var css_248z = ".ycn-settings {\n display: grid;\n grid-template-columns: 216px 1fr;\n width: 834px;\n height: 100%;\n}\n.ycn-settings_view_mobile {\n display: block;\n width: auto;\n height: calc(80vh - 56px);\n overflow-x: hidden;\n}\n@supports (height: 90dvh) {\n .ycn-settings_view_mobile {\n /* stylelint-disable-next-line */\n height: calc(90dvh - 56px);\n }\n}\n.ycn-settings_view_mobile.ycn-settings_loading {\n text-align: center;\n}\n.ycn-settings_view_mobile .ycn-settings__loader {\n margin-top: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__search {\n padding: 0 20px;\n margin: 4px 0 16px;\n}\n.ycn-settings_view_mobile .ycn-settings__page {\n
|
|
5101
|
+
var css_248z = ".ycn-settings {\n display: grid;\n grid-template-columns: 216px 1fr;\n width: 834px;\n height: 100%;\n}\n.ycn-settings_view_mobile {\n display: block;\n width: auto;\n height: calc(80vh - 56px);\n overflow-x: hidden;\n}\n@supports (height: 90dvh) {\n .ycn-settings_view_mobile {\n /* stylelint-disable-next-line */\n height: calc(90dvh - 56px);\n }\n}\n.ycn-settings_view_mobile.ycn-settings_loading {\n text-align: center;\n}\n.ycn-settings_view_mobile .ycn-settings__loader {\n margin-top: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__search {\n padding: 0 20px;\n margin: 4px 0 16px;\n}\n.ycn-settings_view_mobile .ycn-settings__page {\n overflow-y: visible;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:first-child {\n margin-left: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__tabs .yc-tabs__item:last-child {\n margin-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading {\n font-size: var(--yc-text-subheader-3-font-size);\n line-height: var(--yc-text-subheader-3-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__section-subheader {\n color: var(--yc-color-text-secondary);\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings-subheader {\n margin-top: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item {\n margin-top: 0;\n}\n.ycn-settings_view_mobile .ycn-settings__section-heading + .ycn-settings__section-item, .ycn-settings_view_mobile .ycn-settings__section-subheader + .ycn-settings__section-item {\n margin-top: 30px;\n}\n.ycn-settings_view_mobile .ycn-settings__section-item + .ycn-settings__section-item {\n margin-top: 22px;\n}\n.ycn-settings_view_mobile .ycn-settings__item:not(.ycn-settings_view_mobile .ycn-settings__item_mode_row) {\n grid-template-columns: 1fr;\n gap: 8px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-heading {\n font-size: var(--yc-text-body-2-font-size);\n line-height: var(--yc-text-body-2-line-height);\n font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__item-description {\n font-size: var(--yc-text-body-1-font-size);\n line-height: var(--yc-text-body-1-line-height);\n font-weight: var(--yc-text-body-font-weight);\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row {\n grid-template-columns: 1fr auto;\n}\n.ycn-settings_view_mobile .ycn-settings__item_mode_row .ycn-settings__item-heading {\n padding-right: 20px;\n}\n.ycn-settings_view_mobile .ycn-settings__item-content {\n width: 100%;\n}\n.ycn-settings_loading {\n grid-template-columns: auto;\n}\n.ycn-settings__loader {\n align-self: center;\n justify-self: center;\n}\n.ycn-settings__not-found {\n display: grid;\n align-items: center;\n justify-items: center;\n height: 100%;\n}\n.ycn-settings__menu {\n border-right: 1px solid var(--yc-color-line-generic);\n}\n.ycn-settings__heading {\n font-size: var(--yc-text-subheader-2-font-size);\n line-height: var(--yc-text-subheader-2-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n margin: 20px 20px 0;\n}\n.ycn-settings__search {\n margin: 0 20px 16px;\n}\n.ycn-settings__page {\n overflow-y: auto;\n}\n.ycn-settings__content {\n padding: 20px;\n}\n.ycn-settings__section-heading {\n font-size: var(--yc-text-subheader-2-font-size);\n line-height: var(--yc-text-subheader-2-line-height);\n font-weight: var(--yc-text-subheader-font-weight);\n margin: 0;\n}\n.ycn-settings__section-item {\n margin-top: 24px;\n}\n.ycn-settings__section + .ycn-settings__section {\n margin-top: 32px;\n}\n.ycn-settings__item {\n display: grid;\n grid-template-columns: 216px 1fr;\n justify-items: start;\n}\n.ycn-settings__item_align_top {\n align-items: start;\n}\n.ycn-settings__item_align_center {\n align-items: center;\n}\n.ycn-settings__item-title_badge {\n position: relative;\n}\n.ycn-settings__item-title_badge::after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--yc-color-text-danger);\n position: absolute;\n right: -8px;\n top: 1px;\n}\n.ycn-settings__item-description {\n font-size: var(--yc-text-caption-2-font-size);\n line-height: var(--yc-text-caption-2-line-height);\n font-weight: var(--yc-text-caption-font-weight);\n display: block;\n margin-top: 2px;\n padding-right: 20px;\n color: var(--yc-color-text-secondary);\n}\n.ycn-settings__found {\n font-weight: var(--yc-text-accent-font-weight);\n background: var(--yc-color-base-selection);\n}";
|
|
5084
5102
|
styleInject(css_248z);
|
|
5085
5103
|
|
|
5086
5104
|
const b = block('settings');
|
|
@@ -5096,10 +5114,22 @@ function Settings(_a) {
|
|
|
5096
5114
|
}
|
|
5097
5115
|
return (React__default["default"].createElement(SettingsContent, Object.assign({ view: view }, props), children));
|
|
5098
5116
|
}
|
|
5117
|
+
const getPageTitleById = (menu, activePage) => {
|
|
5118
|
+
for (const firstLevel of menu) {
|
|
5119
|
+
if ('groupTitle' in firstLevel) {
|
|
5120
|
+
for (const secondLevel of firstLevel.items)
|
|
5121
|
+
if (secondLevel.id === activePage)
|
|
5122
|
+
return secondLevel.title;
|
|
5123
|
+
}
|
|
5124
|
+
else if (firstLevel.id === activePage)
|
|
5125
|
+
return firstLevel.title;
|
|
5126
|
+
}
|
|
5127
|
+
return '';
|
|
5128
|
+
};
|
|
5099
5129
|
Settings.defaultProps = {
|
|
5100
5130
|
dict: defaultDict,
|
|
5101
5131
|
};
|
|
5102
|
-
function SettingsContent({ initialPage,
|
|
5132
|
+
function SettingsContent({ initialPage, children, renderNotFound, dict, view, onPageChange, onClose, }) {
|
|
5103
5133
|
var _a, _b;
|
|
5104
5134
|
const [search, setSearch] = React__default["default"].useState('');
|
|
5105
5135
|
const { menu, pages } = getSettingsFromChildren(children, search);
|
|
@@ -5143,12 +5173,16 @@ function SettingsContent({ initialPage, onPageChange, children, renderNotFound,
|
|
|
5143
5173
|
if (!activePage) {
|
|
5144
5174
|
return typeof renderNotFound === 'function' ? (renderNotFound()) : (React__default["default"].createElement("div", { className: b('not-found') }, dict === null || dict === void 0 ? void 0 : dict.not_found));
|
|
5145
5175
|
}
|
|
5146
|
-
|
|
5147
|
-
|
|
5148
|
-
|
|
5149
|
-
|
|
5150
|
-
|
|
5151
|
-
|
|
5176
|
+
const filteredSections = pages[activePage].sections.filter((section) => !section.hidden);
|
|
5177
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
5178
|
+
!isMobile && (React__default["default"].createElement(Title, { hasSeparator: true, onClose: onClose }, getPageTitleById(menu, activePage))),
|
|
5179
|
+
React__default["default"].createElement("div", { className: b('content') }, filteredSections.map((section) => (React__default["default"].createElement("div", { key: section.title, className: b('section') },
|
|
5180
|
+
section.showTitle && (React__default["default"].createElement("h3", { className: b('section-heading') }, section.title)),
|
|
5181
|
+
section.header &&
|
|
5182
|
+
(isMobile ? (React__default["default"].createElement("div", { className: b('section-subheader') }, section.header)) : (section.header)),
|
|
5183
|
+
section.items.map(({ hidden, title, element }) => hidden ? null : (React__default["default"].createElement("div", { key: title, className: b('section-item') }, React__default["default"].cloneElement(element, Object.assign(Object.assign({}, element.props), { title: search && title
|
|
5184
|
+
? prepareTitle(title, search)
|
|
5185
|
+
: title })))))))))));
|
|
5152
5186
|
};
|
|
5153
5187
|
return (React__default["default"].createElement("div", { className: b({ view }) },
|
|
5154
5188
|
isMobile ? (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -5164,7 +5198,7 @@ function SettingsContent({ initialPage, onPageChange, children, renderNotFound,
|
|
|
5164
5198
|
}
|
|
5165
5199
|
}
|
|
5166
5200
|
} },
|
|
5167
|
-
React__default["default"].createElement(
|
|
5201
|
+
React__default["default"].createElement(Title, null, dict === null || dict === void 0 ? void 0 : dict.heading_settings),
|
|
5168
5202
|
React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), onChange: setSearch, placeholder: dict === null || dict === void 0 ? void 0 : dict.placeholder_search, autoFocus: true }),
|
|
5169
5203
|
React__default["default"].createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
|
|
5170
5204
|
React__default["default"].createElement("div", { className: b('page') }, renderPageContent())));
|
|
@@ -5216,4 +5250,5 @@ exports.DrawerItem = DrawerItem;
|
|
|
5216
5250
|
exports.FooterItem = FooterItem;
|
|
5217
5251
|
exports.HotkeysPanel = HotkeysPanel;
|
|
5218
5252
|
exports.Settings = Settings;
|
|
5253
|
+
exports.Title = Title;
|
|
5219
5254
|
//# sourceMappingURL=index.js.map
|