@gravity-ui/navigation 0.16.0 → 0.17.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/README.md +17 -1
- package/build/cjs/components/CompositeBar/HighlightedItem/HighlightedItem.d.ts +12 -0
- package/build/cjs/components/CompositeBar/Item/Item.d.ts +3 -0
- package/build/cjs/components/CompositeBar/constants.d.ts +0 -1
- package/build/cjs/components/constants.d.ts +1 -1
- package/build/cjs/components/utils/cn.d.ts +3 -3
- package/build/cjs/index.js +1328 -1315
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/CompositeBar/HighlightedItem/HighlightedItem.d.ts +12 -0
- package/build/esm/components/CompositeBar/Item/Item.d.ts +3 -0
- package/build/esm/components/CompositeBar/constants.d.ts +0 -1
- package/build/esm/components/constants.d.ts +1 -1
- package/build/esm/components/utils/cn.d.ts +3 -3
- package/build/esm/index.js +1313 -1300
- package/build/esm/index.js.map +1 -1
- package/package.json +3 -1
package/build/cjs/index.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var classname = require('@bem-react/classname');
|
|
6
7
|
var uikit = require('@gravity-ui/uikit');
|
|
7
8
|
var ReactDOM = require('react-dom');
|
|
8
9
|
var icons = require('@gravity-ui/icons');
|
|
@@ -10,91 +11,32 @@ var icons = require('@gravity-ui/icons');
|
|
|
10
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
12
|
|
|
12
13
|
function _interopNamespace(e) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
14
|
+
if (e && e.__esModule) return e;
|
|
15
|
+
var n = Object.create(null);
|
|
16
|
+
if (e) {
|
|
17
|
+
Object.keys(e).forEach(function (k) {
|
|
18
|
+
if (k !== 'default') {
|
|
19
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
20
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function () { return e[k]; }
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
n["default"] = e;
|
|
28
|
+
return Object.freeze(n);
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
31
32
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
32
33
|
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
|
33
34
|
|
|
34
|
-
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
35
|
-
|
|
36
|
-
var lib$1 = {};
|
|
37
|
-
|
|
38
|
-
var lib = {exports: {}};
|
|
39
|
-
|
|
40
|
-
/*!
|
|
41
|
-
* bem-cn v3.0.1
|
|
42
|
-
* Friendly BEM class names generator, greate for React
|
|
43
|
-
* @author Alexander Burtsev, https://github.com/albburtsev
|
|
44
|
-
*/
|
|
45
|
-
|
|
46
|
-
(function (module, exports) {
|
|
47
|
-
!function(n,t){module.exports=t();}(commonjsGlobal,function(){return function(n){var t={};function e(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return n[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=n,e.c=t,e.d=function(n,t,r){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:r});},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0});},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var o in n)e.d(r,o,function(t){return n[t]}.bind(null,o));return r},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=0)}([function(n,t,e){Object.defineProperty(t,"__esModule",{value:!0});var r=e(1);t.ERROR_BLOCK_NAME_TYPE="Block name should be a string",t.ERROR_BLOCK_NAME_EMPTY="Block name should be non-empty";var o={ns:"",el:"__",mod:"_",modValue:"_"},i=function(n){return "string"==typeof n},u=function(n){return "string"!=typeof n},s=function(n,t){for(var e=[],o=2;o<arguments.length;o++)e[o-2]=arguments[o];var i=r.assign({},t);return i.mixes=i.mixes.concat(e),c(i,n)},a=function(n,t,e){for(var o=[],i=3;i<arguments.length;i++)o[i-3]=arguments[i];var u=r.assign({},t),s=r.assign({},u.states||{});return s[e]=r.assign.apply(void 0,[{},s[e]||{}].concat(o)),u.states=s,c(u,n)},l=function(n,t,e,r){return String.prototype.split.call(f(n,t),e,r)},f=function(n,t){var e=t.name,r=t.mods,o=t.mixes,i=t.states,u=[e];if(r&&(u=u.concat(Object.keys(r).filter(function(n){return r[n]}).map(function(t){var o=r[t];return !0===o?e+n.mod+t:e+n.mod+t+n.modValue+o}))),i&&Object.keys(i).forEach(function(n){var t=i[n];u=u.concat(Object.keys(t).filter(function(n){return t[n]}).map(function(t){return n+t}));}),n.ns&&(u=u.map(function(t){return n.ns+t})),o&&(u=u.concat(function(n){return void 0===n&&(n=[]),n.map(function(n){return Array.isArray(n)?n.join(" "):"object"==typeof n&&null!==n?n.toString():"function"==typeof n?n.toString():"string"==typeof n?n:""}).filter(function(n){return !!n})}(o))),n.classMap){var s=n.classMap;u=u.map(function(n){return s[n]||n});}return u.join(" ")},c=function(n,t){return {mix:s.bind(null,t,n),split:l.bind(null,t,n),is:a.bind(null,t,n,"is-"),has:a.bind(null,t,n,"has-"),state:a.bind(null,t,n,"is-"),toString:f.bind(null,t,n)}},d=function(n,t){var e={name:n,mods:{},mixes:[],states:{"is-":{},"has-":{}}},o=function(n,t){for(var e=[],o=2;o<arguments.length;o++)e[o-2]=arguments[o];if(!e.length)return f(n,t);var s=r.assign({},t),a=e.filter(i).reduce(function(t,e){return t+n.el+e},"");a&&(s.name=s.name+a);var l=e.filter(u).reduce(function(n,t){return r.assign(n,t)},{});return s.mods=r.assign({},s.mods,l),c(s,n)}.bind(null,t,e);return o.mix=s.bind(null,t,e),o.split=l.bind(null,t,e),o.is=a.bind(null,t,e,"is-"),o.has=a.bind(null,t,e,"has-"),o.state=a.bind(null,t,e,"is-"),o.toString=f.bind(null,t,e),o};t.setup=function(n){return void 0===n&&(n={}),function(e){if("string"!=typeof e)throw new Error(t.ERROR_BLOCK_NAME_TYPE);var i=e.trim();if(!i)throw new Error(t.ERROR_BLOCK_NAME_EMPTY);return d(i,r.assign({},o,n))}},t.block=t.setup(),t.default=t.block;},function(n,t,e){Object.defineProperty(t,"__esModule",{value:!0}),t.assign=function(n){for(var t=[],e=1;e<arguments.length;e++)t[e-1]=arguments[e];for(var r=0;r<t.length;r++){var o=t[r];for(var i in o)o.hasOwnProperty(i)&&(n[i]=o[i]);}return n};}])});
|
|
48
|
-
} (lib));
|
|
49
|
-
|
|
50
|
-
Object.defineProperty(lib$1, "__esModule", { value: true });
|
|
51
|
-
var bem_cn_1 = lib.exports;
|
|
52
|
-
var block$1 = (0, bem_cn_1.setup)();
|
|
53
|
-
function isString(data) {
|
|
54
|
-
return typeof data === 'string';
|
|
55
|
-
}
|
|
56
|
-
function hasMixinShape(data) {
|
|
57
|
-
return isString(data) || (Array.isArray(data) && data.every(isString));
|
|
58
|
-
}
|
|
59
|
-
function bemClassNameLite(blockName) {
|
|
60
|
-
var b = block$1(blockName);
|
|
61
|
-
function element() {
|
|
62
|
-
var args = [];
|
|
63
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
64
|
-
args[_i] = arguments[_i];
|
|
65
|
-
}
|
|
66
|
-
var elementName = args.shift();
|
|
67
|
-
var modifiers = args[0], mixin = args[1];
|
|
68
|
-
var result;
|
|
69
|
-
if (typeof elementName !== 'string' || hasMixinShape(modifiers)) {
|
|
70
|
-
mixin = modifiers;
|
|
71
|
-
modifiers = null;
|
|
72
|
-
}
|
|
73
|
-
result = b(elementName, modifiers);
|
|
74
|
-
if (mixin) {
|
|
75
|
-
result = result.mix(mixin);
|
|
76
|
-
}
|
|
77
|
-
return result.toString();
|
|
78
|
-
}
|
|
79
|
-
element.builder = function () {
|
|
80
|
-
return b;
|
|
81
|
-
};
|
|
82
|
-
return element;
|
|
83
|
-
}
|
|
84
|
-
bemClassNameLite.setup = function (config) {
|
|
85
|
-
block$1 = (0, bem_cn_1.setup)(config);
|
|
86
|
-
};
|
|
87
|
-
bemClassNameLite.reset = function () {
|
|
88
|
-
block$1 = (0, bem_cn_1.setup)();
|
|
89
|
-
};
|
|
90
|
-
var _default = lib$1.default = bemClassNameLite;
|
|
91
|
-
|
|
92
35
|
const NAMESPACE = 'gn-';
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
36
|
+
classname.withNaming({ e: '__', m: '_' });
|
|
37
|
+
const block = classname.withNaming({ n: NAMESPACE, e: '__', m: '_' });
|
|
96
38
|
|
|
97
|
-
const
|
|
39
|
+
const ASIDE_HEADER_ICON_SIZE = 18;
|
|
98
40
|
const ASIDE_HEADER_COMPACT_WIDTH = 56;
|
|
99
41
|
const ASIDE_HEADER_EXPANDED_WIDTH = 236;
|
|
100
42
|
|
|
@@ -140,6 +82,8 @@ function _inheritsLoose(subClass, superClass) {
|
|
|
140
82
|
_setPrototypeOf(subClass, superClass);
|
|
141
83
|
}
|
|
142
84
|
|
|
85
|
+
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
86
|
+
|
|
143
87
|
var propTypes = {exports: {}};
|
|
144
88
|
|
|
145
89
|
var reactIs = {exports: {}};
|
|
@@ -3144,15 +3088,15 @@ function styleInject(css, ref) {
|
|
|
3144
3088
|
}
|
|
3145
3089
|
}
|
|
3146
3090
|
|
|
3147
|
-
var css_248z$
|
|
3148
|
-
styleInject(css_248z$
|
|
3091
|
+
var css_248z$n = ".gn-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(--g-color-base-background);\n}\n.gn-drawer__item_direction_right {\n left: auto;\n right: 0;\n}\n.gn-drawer__item-transition-enter {\n transform: translate(-100%, 0);\n}\n.gn-drawer__item-transition_direction_right-enter {\n transform: translate(100%, 0);\n}\n.gn-drawer__item-transition-enter-active, .gn-drawer__item-transition_direction_right-enter-active {\n transform: translate(0, 0);\n transition: transform 300ms;\n}\n.gn-drawer__item-transition-enter-done, .gn-drawer__item-transition_direction_right-enter-done {\n filter: blur(0px);\n transform: translateZ(0);\n}\n.gn-drawer__item-transition-exit, .gn-drawer__item-transition_direction_right-exit {\n transform: translate(0, 0);\n}\n.gn-drawer__item-transition-exit-active, .gn-drawer__item-transition_direction_right-exit-active {\n transition: transform 300ms;\n}\n.gn-drawer__item-transition-exit-active {\n transform: translate(-100%, 0);\n}\n.gn-drawer__item-transition_direction_right-exit-active {\n transform: translate(100%, 0);\n}\n.gn-drawer__item-transition-exit-done, .gn-drawer__item-transition_direction_right-exit-done {\n visibility: hidden;\n}\n.gn-drawer__veil {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n background-color: var(--g-color-sfx-veil);\n}\n.gn-drawer__veil-transition-enter {\n opacity: 0;\n}\n.gn-drawer__veil-transition-enter-active {\n opacity: 1;\n transition: opacity 300ms;\n}\n.gn-drawer__veil-transition-exit {\n opacity: 1;\n}\n.gn-drawer__veil-transition-exit-active {\n opacity: 0;\n transition: opacity 300ms;\n}\n.gn-drawer__veil-transition-exit-done {\n visibility: hidden;\n}";
|
|
3092
|
+
styleInject(css_248z$n);
|
|
3149
3093
|
|
|
3150
|
-
const b$
|
|
3094
|
+
const b$o = block('drawer');
|
|
3151
3095
|
const TIMEOUT = 300;
|
|
3152
3096
|
const DrawerItem = ({ visible, content, direction, className }) => {
|
|
3153
3097
|
const itemRef = React__default["default"].useRef(null);
|
|
3154
|
-
return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3155
|
-
React__default["default"].createElement("div", { ref: itemRef, className: b$
|
|
3098
|
+
return (React__default["default"].createElement(CSSTransition, { in: visible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$o('item-transition', { direction }), nodeRef: itemRef },
|
|
3099
|
+
React__default["default"].createElement("div", { ref: itemRef, className: b$o('item', { direction }, className) }, content)));
|
|
3156
3100
|
};
|
|
3157
3101
|
const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScrollBody = true, }) => {
|
|
3158
3102
|
let someItemVisible = false;
|
|
@@ -3183,9 +3127,9 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
|
|
|
3183
3127
|
const veilRef = React__default["default"].useRef(null);
|
|
3184
3128
|
return (React__default["default"].createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: true, unmountOnExit: true, nodeRef: containerRef }, (state) => {
|
|
3185
3129
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
3186
|
-
return (React__default["default"].createElement("div", { ref: containerRef, className: b$
|
|
3187
|
-
React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$
|
|
3188
|
-
React__default["default"].createElement("div", { ref: veilRef, className: b$
|
|
3130
|
+
return (React__default["default"].createElement("div", { ref: containerRef, className: b$o(null, className), style: style },
|
|
3131
|
+
React__default["default"].createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b$o('veil-transition'), nodeRef: veilRef },
|
|
3132
|
+
React__default["default"].createElement("div", { ref: veilRef, className: b$o('veil'), onClick: onVeilClick })),
|
|
3189
3133
|
React__default["default"].Children.map(children, (child) => {
|
|
3190
3134
|
const childElem = child;
|
|
3191
3135
|
if (childElem.type === DrawerItem) {
|
|
@@ -3204,10 +3148,10 @@ const AsideHeaderContext = React__default["default"].createContext({
|
|
|
3204
3148
|
const AsideHeaderContextProvider = AsideHeaderContext.Provider;
|
|
3205
3149
|
const useAsideHeaderContext = () => React__default["default"].useContext(AsideHeaderContext);
|
|
3206
3150
|
|
|
3207
|
-
var css_248z$
|
|
3208
|
-
styleInject(css_248z$
|
|
3151
|
+
var css_248z$m = ".gn-logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n height: 40px;\n}\n.gn-logo__logo-btn-place {\n flex-shrink: 0;\n width: var(--gn-aside-header-min-width);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.gn-logo__logo-btn-place .yc-button::before {\n background-color: transparent;\n}\n.gn-logo__btn-logo.yc-button_view_flat.yc-button_size_l {\n --yc-button-height: var(--gn-aside-header-item-icon-background-size);\n}\n.gn-logo__logo {\n font-size: var(--g-text-body-2-font-size);\n line-height: var(--g-text-body-2-line-height);\n font-weight: var(--g-text-body-font-weight);\n vertical-align: middle;\n cursor: pointer;\n}\n.gn-logo__logo-link, .gn-logo__logo-link:hover, .gn-logo__logo-link:active, .gn-logo__logo-link:visited, .gn-logo__logo-link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.g-root .gn-logo__btn-logo.button2_theme_flat.button2_hovered_yes::before {\n background-color: transparent;\n}";
|
|
3152
|
+
styleInject(css_248z$m);
|
|
3209
3153
|
|
|
3210
|
-
const b$
|
|
3154
|
+
const b$n = block('logo');
|
|
3211
3155
|
const Logo$1 = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href, wrapper, onClick, }) => {
|
|
3212
3156
|
const { compact } = useAsideHeaderContext();
|
|
3213
3157
|
const hasWrapper = typeof wrapper === 'function';
|
|
@@ -3219,18 +3163,18 @@ const Logo$1 = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize =
|
|
|
3219
3163
|
else if (icon) {
|
|
3220
3164
|
buttonIcon = React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: iconClassName });
|
|
3221
3165
|
}
|
|
3222
|
-
const button = (React__default["default"].createElement(uikit.Button, { view: "flat", size: "l", className: b$
|
|
3166
|
+
const button = (React__default["default"].createElement(uikit.Button, { view: "flat", size: "l", className: b$n('btn-logo'), component: hasWrapper ? 'span' : undefined, onClick: onClick, target: "_self", href: href }, buttonIcon));
|
|
3223
3167
|
let logo;
|
|
3224
3168
|
if (typeof text === 'function') {
|
|
3225
3169
|
logo = text();
|
|
3226
3170
|
}
|
|
3227
3171
|
else {
|
|
3228
|
-
logo = (React__default["default"].createElement("div", { className: b$
|
|
3172
|
+
logo = (React__default["default"].createElement("div", { className: b$n('logo'), style: { fontSize: textSize } }, text));
|
|
3229
3173
|
}
|
|
3230
|
-
return (React__default["default"].createElement("div", { className: b$
|
|
3231
|
-
React__default["default"].createElement("div", { className: b$
|
|
3174
|
+
return (React__default["default"].createElement("div", { className: b$n() },
|
|
3175
|
+
React__default["default"].createElement("div", { className: b$n('logo-btn-place') }, hasWrapper ? wrapper(button, compact) : button),
|
|
3232
3176
|
!compact &&
|
|
3233
|
-
(hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", { href: href !== null && href !== void 0 ? href : '/', target: "_self", className: b$
|
|
3177
|
+
(hasWrapper ? (React__default["default"].createElement("div", { onClick: onClick }, wrapper(logo, compact))) : (React__default["default"].createElement("a", { href: href !== null && href !== void 0 ? href : '/', target: "_self", className: b$n('logo-link'), onClick: onClick }, logo)))));
|
|
3234
3178
|
};
|
|
3235
3179
|
|
|
3236
3180
|
/**
|
|
@@ -3608,7 +3552,6 @@ class AutoSizer extends React.Component {
|
|
|
3608
3552
|
}
|
|
3609
3553
|
}
|
|
3610
3554
|
|
|
3611
|
-
const ICON_SIZE = 24;
|
|
3612
3555
|
const ITEM_HEIGHT = 40;
|
|
3613
3556
|
const ITEM_TYPE_REGULAR = 'regular';
|
|
3614
3557
|
const COLLAPSE_ITEM_ID = 'collapse-item-id';
|
|
@@ -3707,1358 +3650,1428 @@ function isMenuItem(item) {
|
|
|
3707
3650
|
return (item === null || item === void 0 ? void 0 : item.id) !== undefined;
|
|
3708
3651
|
}
|
|
3709
3652
|
|
|
3710
|
-
|
|
3711
|
-
|
|
3653
|
+
/**
|
|
3654
|
+
* Checks if `value` is the
|
|
3655
|
+
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
|
|
3656
|
+
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
|
|
3657
|
+
*
|
|
3658
|
+
* @static
|
|
3659
|
+
* @memberOf _
|
|
3660
|
+
* @since 0.1.0
|
|
3661
|
+
* @category Lang
|
|
3662
|
+
* @param {*} value The value to check.
|
|
3663
|
+
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
|
|
3664
|
+
* @example
|
|
3665
|
+
*
|
|
3666
|
+
* _.isObject({});
|
|
3667
|
+
* // => true
|
|
3668
|
+
*
|
|
3669
|
+
* _.isObject([1, 2, 3]);
|
|
3670
|
+
* // => true
|
|
3671
|
+
*
|
|
3672
|
+
* _.isObject(_.noop);
|
|
3673
|
+
* // => true
|
|
3674
|
+
*
|
|
3675
|
+
* _.isObject(null);
|
|
3676
|
+
* // => false
|
|
3677
|
+
*/
|
|
3712
3678
|
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
if (item.rightAdornment) {
|
|
3717
|
-
titleNode = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
3718
|
-
titleNode,
|
|
3719
|
-
React__default["default"].createElement("div", { className: b$l('title-adornment') }, item.rightAdornment)));
|
|
3720
|
-
}
|
|
3721
|
-
return titleNode;
|
|
3722
|
-
}
|
|
3723
|
-
const defaultPopupPlacement = ['right-end'];
|
|
3724
|
-
const defaultPopupOffset = [-20, 8];
|
|
3725
|
-
const Item$1 = (props) => {
|
|
3726
|
-
const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, onItemClickCapture, } = props;
|
|
3727
|
-
const { compact } = useAsideHeaderContext();
|
|
3728
|
-
if (item.type === 'divider') {
|
|
3729
|
-
return React__default["default"].createElement("div", { className: b$l('menu-divider') });
|
|
3730
|
-
}
|
|
3731
|
-
const [open, toggleOpen] = React__default["default"].useState(false);
|
|
3732
|
-
const ref = React__default["default"].useRef(null);
|
|
3733
|
-
const anchorRef = popupAnchor || ref;
|
|
3734
|
-
const type = item.type || ITEM_TYPE_REGULAR;
|
|
3735
|
-
const current = item.current || false;
|
|
3736
|
-
const tooltipText = item.tooltipText || item.title;
|
|
3737
|
-
const icon = item.icon;
|
|
3738
|
-
const iconSize = item.iconSize || ICON_SIZE;
|
|
3739
|
-
const collapsedItem = item.id === COLLAPSE_ITEM_ID;
|
|
3740
|
-
const onClose = React__default["default"].useCallback((event) => {
|
|
3741
|
-
var _a;
|
|
3742
|
-
if (event instanceof MouseEvent &&
|
|
3743
|
-
event.target &&
|
|
3744
|
-
((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
3745
|
-
return;
|
|
3746
|
-
}
|
|
3747
|
-
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
3748
|
-
}, [onClosePopup]);
|
|
3749
|
-
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
3750
|
-
const createdNode = (React__default["default"].createElement("div", { className: b$l({ type, current, compact }, className), ref: ref, onClick: (event) => {
|
|
3751
|
-
if (collapsedItem) {
|
|
3752
|
-
/**
|
|
3753
|
-
* If we call onItemClick for collapsedItem then:
|
|
3754
|
-
* - User get unexpected item in onItemClick callback
|
|
3755
|
-
* - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
|
|
3756
|
-
*/
|
|
3757
|
-
toggleOpen(!open);
|
|
3758
|
-
}
|
|
3759
|
-
else {
|
|
3760
|
-
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event);
|
|
3761
|
-
}
|
|
3762
|
-
}, onClickCapture: onItemClickCapture, onMouseEnter: () => {
|
|
3763
|
-
if (!compact) {
|
|
3764
|
-
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
3765
|
-
}
|
|
3766
|
-
}, onMouseLeave: () => {
|
|
3767
|
-
if (!compact) {
|
|
3768
|
-
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
3769
|
-
}
|
|
3770
|
-
} },
|
|
3771
|
-
React__default["default"].createElement("div", { className: b$l('icon-place') }, compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$l('icon-tooltip', { 'item-type': type }) },
|
|
3772
|
-
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$l('btn-icon') }, iconEl))) : (iconEl)),
|
|
3773
|
-
React__default["default"].createElement("div", { className: b$l('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
3774
|
-
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { contentClassName: b$l('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
3775
|
-
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$l('link') }, createdNode)) : (createdNode);
|
|
3776
|
-
};
|
|
3777
|
-
const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$l('icon') }) : null;
|
|
3778
|
-
const titleNode = renderItemTitle(item);
|
|
3779
|
-
const params = { icon: iconNode, title: titleNode };
|
|
3780
|
-
let node;
|
|
3781
|
-
const opts = { compact, collapsed: false, item, ref };
|
|
3782
|
-
if (typeof item.itemWrapper === 'function') {
|
|
3783
|
-
node = item.itemWrapper(params, makeNode, opts);
|
|
3784
|
-
}
|
|
3785
|
-
else {
|
|
3786
|
-
node = makeNode(params);
|
|
3787
|
-
}
|
|
3788
|
-
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
3789
|
-
node,
|
|
3790
|
-
open && collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
|
|
3791
|
-
};
|
|
3792
|
-
Item$1.displayName = 'Item';
|
|
3793
|
-
function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
3794
|
-
const { compact } = useAsideHeaderContext();
|
|
3795
|
-
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 },
|
|
3796
|
-
React__default["default"].createElement("div", { className: b$l('collapse-items-popup-content') },
|
|
3797
|
-
React__default["default"].createElement(uikit.List, { itemClassName: b$l('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
|
|
3798
|
-
const makeCollapseNode = ({ title: titleEl }) => {
|
|
3799
|
-
const res = (React__default["default"].createElement("div", { className: b$l('collapse-item'), onClick: (event) => {
|
|
3800
|
-
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true, event);
|
|
3801
|
-
} }, titleEl));
|
|
3802
|
-
return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$l('link') }, res)) : (res);
|
|
3803
|
-
};
|
|
3804
|
-
const titleNode = renderItemTitle(collapseItem);
|
|
3805
|
-
const params = { title: titleNode };
|
|
3806
|
-
const opts = { compact, collapsed: true, item: collapseItem, ref: anchorRef };
|
|
3807
|
-
if (typeof collapseItem.itemWrapper === 'function') {
|
|
3808
|
-
return collapseItem.itemWrapper(params, makeCollapseNode, opts);
|
|
3809
|
-
}
|
|
3810
|
-
else {
|
|
3811
|
-
return makeCollapseNode(params);
|
|
3812
|
-
}
|
|
3813
|
-
} })))) : null;
|
|
3679
|
+
function isObject$2(value) {
|
|
3680
|
+
var type = typeof value;
|
|
3681
|
+
return value != null && (type == 'object' || type == 'function');
|
|
3814
3682
|
}
|
|
3815
3683
|
|
|
3816
|
-
|
|
3817
|
-
active: false,
|
|
3818
|
-
activeIndex: undefined,
|
|
3819
|
-
hideCollapseItemTooltip: false,
|
|
3820
|
-
lastClickedItemIndex: undefined,
|
|
3821
|
-
setValue: () => { },
|
|
3822
|
-
};
|
|
3823
|
-
const MultipleTooltipContext = React__default["default"].createContext(multipleTooltipContextDefaults);
|
|
3824
|
-
class MultipleTooltipProvider extends React__default["default"].PureComponent {
|
|
3825
|
-
constructor() {
|
|
3826
|
-
super(...arguments);
|
|
3827
|
-
this.state = Object.assign({}, multipleTooltipContextDefaults);
|
|
3828
|
-
this.setValue = (value) => {
|
|
3829
|
-
this.setState(Object.assign({}, value));
|
|
3830
|
-
};
|
|
3831
|
-
}
|
|
3832
|
-
render() {
|
|
3833
|
-
const { children } = this.props;
|
|
3834
|
-
return (React__default["default"].createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
|
|
3835
|
-
}
|
|
3836
|
-
}
|
|
3684
|
+
var isObject_1 = isObject$2;
|
|
3837
3685
|
|
|
3838
|
-
|
|
3839
|
-
styleInject(css_248z$j);
|
|
3686
|
+
/** Detect free variable `global` from Node.js. */
|
|
3840
3687
|
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
3844
|
-
|
|
3845
|
-
|
|
3846
|
-
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
|
|
3856
|
-
|
|
3857
|
-
|
|
3858
|
-
|
|
3859
|
-
|
|
3860
|
-
|
|
3861
|
-
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
3865
|
-
|
|
3688
|
+
var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
|
|
3689
|
+
|
|
3690
|
+
var _freeGlobal = freeGlobal$1;
|
|
3691
|
+
|
|
3692
|
+
var freeGlobal = _freeGlobal;
|
|
3693
|
+
|
|
3694
|
+
/** Detect free variable `self`. */
|
|
3695
|
+
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
|
|
3696
|
+
|
|
3697
|
+
/** Used as a reference to the global object. */
|
|
3698
|
+
var root$2 = freeGlobal || freeSelf || Function('return this')();
|
|
3699
|
+
|
|
3700
|
+
var _root = root$2;
|
|
3701
|
+
|
|
3702
|
+
var root$1 = _root;
|
|
3703
|
+
|
|
3704
|
+
/**
|
|
3705
|
+
* Gets the timestamp of the number of milliseconds that have elapsed since
|
|
3706
|
+
* the Unix epoch (1 January 1970 00:00:00 UTC).
|
|
3707
|
+
*
|
|
3708
|
+
* @static
|
|
3709
|
+
* @memberOf _
|
|
3710
|
+
* @since 2.4.0
|
|
3711
|
+
* @category Date
|
|
3712
|
+
* @returns {number} Returns the timestamp.
|
|
3713
|
+
* @example
|
|
3714
|
+
*
|
|
3715
|
+
* _.defer(function(stamp) {
|
|
3716
|
+
* console.log(_.now() - stamp);
|
|
3717
|
+
* }, _.now());
|
|
3718
|
+
* // => Logs the number of milliseconds it took for the deferred invocation.
|
|
3719
|
+
*/
|
|
3720
|
+
var now$1 = function() {
|
|
3721
|
+
return root$1.Date.now();
|
|
3866
3722
|
};
|
|
3867
3723
|
|
|
3868
|
-
var
|
|
3869
|
-
styleInject(css_248z$i);
|
|
3724
|
+
var now_1 = now$1;
|
|
3870
3725
|
|
|
3871
|
-
|
|
3872
|
-
const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
|
|
3873
|
-
const ref = React.useRef(null);
|
|
3874
|
-
const tooltipRef = React.useRef(null);
|
|
3875
|
-
const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext);
|
|
3876
|
-
const { compact } = useAsideHeaderContext();
|
|
3877
|
-
const onTooltipMouseEnter = React.useCallback((e) => {
|
|
3878
|
-
if (!multipleTooltipActive &&
|
|
3879
|
-
activeIndex !== lastClickedItemIndex &&
|
|
3880
|
-
e.clientX <= ASIDE_HEADER_COMPACT_WIDTH) {
|
|
3881
|
-
setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
|
|
3882
|
-
active: true,
|
|
3883
|
-
});
|
|
3884
|
-
}
|
|
3885
|
-
}, [multipleTooltipActive, activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
|
|
3886
|
-
const onTooltipMouseLeave = React.useCallback(() => {
|
|
3887
|
-
if (multipleTooltipActive) {
|
|
3888
|
-
setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
|
|
3889
|
-
active: false,
|
|
3890
|
-
lastClickedItemIndex: undefined,
|
|
3891
|
-
});
|
|
3892
|
-
}
|
|
3893
|
-
}, [multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
3894
|
-
const onMouseEnterByIndex = React.useCallback((itemIndex) => () => {
|
|
3895
|
-
if (multipleTooltip) {
|
|
3896
|
-
let multipleTooltipActiveValue = multipleTooltipActive;
|
|
3897
|
-
if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
|
|
3898
|
-
multipleTooltipActiveValue = true;
|
|
3899
|
-
}
|
|
3900
|
-
if (activeIndex === itemIndex &&
|
|
3901
|
-
multipleTooltipActive === multipleTooltipActiveValue) {
|
|
3902
|
-
return;
|
|
3903
|
-
}
|
|
3904
|
-
setMultipleTooltipContextValue({
|
|
3905
|
-
activeIndex: itemIndex,
|
|
3906
|
-
active: multipleTooltipActiveValue,
|
|
3907
|
-
});
|
|
3908
|
-
}
|
|
3909
|
-
}, [multipleTooltipActive, activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
|
|
3910
|
-
const onMouseLeave = React.useCallback(() => {
|
|
3911
|
-
var _a;
|
|
3912
|
-
if (compact) {
|
|
3913
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
3914
|
-
if (multipleTooltip &&
|
|
3915
|
-
(activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
|
|
3916
|
-
setMultipleTooltipContextValue({
|
|
3917
|
-
activeIndex: undefined,
|
|
3918
|
-
lastClickedItemIndex: undefined,
|
|
3919
|
-
});
|
|
3920
|
-
}
|
|
3921
|
-
}
|
|
3922
|
-
}, [activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
|
|
3923
|
-
const onItemClickByIndex = React.useCallback((itemIndex) => (item, collapsed, event) => {
|
|
3924
|
-
if (compact &&
|
|
3925
|
-
multipleTooltip &&
|
|
3926
|
-
itemIndex !== lastClickedItemIndex &&
|
|
3927
|
-
item.id !== COLLAPSE_ITEM_ID) {
|
|
3928
|
-
setMultipleTooltipContextValue({
|
|
3929
|
-
lastClickedItemIndex: itemIndex,
|
|
3930
|
-
active: false,
|
|
3931
|
-
});
|
|
3932
|
-
}
|
|
3933
|
-
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
|
|
3934
|
-
}, [lastClickedItemIndex, setMultipleTooltipContextValue]);
|
|
3935
|
-
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
3936
|
-
React__default["default"].createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
3937
|
-
React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$j('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
|
|
3938
|
-
const itemExtraProps = isMenuItem(item) ? { item } : item;
|
|
3939
|
-
const enableTooltip = isMenuItem(item)
|
|
3940
|
-
? !multipleTooltip
|
|
3941
|
-
: item.enableTooltip;
|
|
3942
|
-
return (React__default["default"].createElement(Item$1, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
|
|
3943
|
-
} })),
|
|
3944
|
-
type === 'menu' && (React__default["default"].createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
|
|
3945
|
-
};
|
|
3946
|
-
const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip = false, }) => {
|
|
3947
|
-
if (items.length === 0) {
|
|
3948
|
-
return null;
|
|
3949
|
-
}
|
|
3950
|
-
let node;
|
|
3951
|
-
if (type === 'menu') {
|
|
3952
|
-
const minHeight = getItemsMinHeight(items);
|
|
3953
|
-
const collapseItem = getMoreButtonItem(menuMoreTitle);
|
|
3954
|
-
node = (React__default["default"].createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
|
|
3955
|
-
const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
|
|
3956
|
-
return (React__default["default"].createElement("div", { style: { width, height } },
|
|
3957
|
-
React__default["default"].createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
3958
|
-
}))));
|
|
3959
|
-
}
|
|
3960
|
-
else {
|
|
3961
|
-
node = (React__default["default"].createElement("div", { className: b$j() },
|
|
3962
|
-
React__default["default"].createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
|
|
3963
|
-
}
|
|
3964
|
-
return React__default["default"].createElement(MultipleTooltipProvider, null, node);
|
|
3965
|
-
};
|
|
3726
|
+
/** Used to match a single whitespace character. */
|
|
3966
3727
|
|
|
3967
|
-
|
|
3968
|
-
const RenderContent = React__default["default"].memo(({ renderContent, size }) => {
|
|
3969
|
-
return React__default["default"].createElement(React__default["default"].Fragment, null, renderContent({ size }));
|
|
3970
|
-
});
|
|
3971
|
-
RenderContent.displayName = 'RenderContent';
|
|
3972
|
-
const Content = ({ size, // TODO: move to context when MobileHeader will support it
|
|
3973
|
-
className, cssSizeVariableName = '--aside-header-size', renderContent, }) => {
|
|
3974
|
-
return (React__default["default"].createElement("div", { className: className, style: Object.assign({}, { [cssSizeVariableName]: `${size}px` }) }, typeof renderContent === 'function' && (React__default["default"].createElement(RenderContent, { size: size, renderContent: renderContent }))));
|
|
3975
|
-
};
|
|
3728
|
+
var reWhitespace = /\s/;
|
|
3976
3729
|
|
|
3977
|
-
|
|
3978
|
-
|
|
3979
|
-
|
|
3980
|
-
|
|
3730
|
+
/**
|
|
3731
|
+
* Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
|
|
3732
|
+
* character of `string`.
|
|
3733
|
+
*
|
|
3734
|
+
* @private
|
|
3735
|
+
* @param {string} string The string to inspect.
|
|
3736
|
+
* @returns {number} Returns the index of the last non-whitespace character.
|
|
3737
|
+
*/
|
|
3738
|
+
function trimmedEndIndex$1(string) {
|
|
3739
|
+
var index = string.length;
|
|
3740
|
+
|
|
3741
|
+
while (index-- && reWhitespace.test(string.charAt(index))) {}
|
|
3742
|
+
return index;
|
|
3981
3743
|
}
|
|
3982
3744
|
|
|
3983
|
-
|
|
3984
|
-
|
|
3985
|
-
|
|
3986
|
-
|
|
3987
|
-
|
|
3988
|
-
|
|
3989
|
-
|
|
3990
|
-
|
|
3991
|
-
|
|
3992
|
-
|
|
3993
|
-
|
|
3994
|
-
|
|
3995
|
-
|
|
3996
|
-
|
|
3997
|
-
|
|
3998
|
-
|
|
3999
|
-
|
|
4000
|
-
|
|
4001
|
-
if (lastIndex < keyValue.length) {
|
|
4002
|
-
result += keyValue.slice(lastIndex);
|
|
4003
|
-
}
|
|
4004
|
-
return result;
|
|
3745
|
+
var _trimmedEndIndex = trimmedEndIndex$1;
|
|
3746
|
+
|
|
3747
|
+
var trimmedEndIndex = _trimmedEndIndex;
|
|
3748
|
+
|
|
3749
|
+
/** Used to match leading whitespace. */
|
|
3750
|
+
var reTrimStart = /^\s+/;
|
|
3751
|
+
|
|
3752
|
+
/**
|
|
3753
|
+
* The base implementation of `_.trim`.
|
|
3754
|
+
*
|
|
3755
|
+
* @private
|
|
3756
|
+
* @param {string} string The string to trim.
|
|
3757
|
+
* @returns {string} Returns the trimmed string.
|
|
3758
|
+
*/
|
|
3759
|
+
function baseTrim$1(string) {
|
|
3760
|
+
return string
|
|
3761
|
+
? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
|
|
3762
|
+
: string;
|
|
4005
3763
|
}
|
|
4006
3764
|
|
|
4007
|
-
var
|
|
4008
|
-
(function (PluralForm) {
|
|
4009
|
-
PluralForm[PluralForm["One"] = 0] = "One";
|
|
4010
|
-
PluralForm[PluralForm["Few"] = 1] = "Few";
|
|
4011
|
-
PluralForm[PluralForm["Many"] = 2] = "Many";
|
|
4012
|
-
PluralForm[PluralForm["None"] = 3] = "None";
|
|
4013
|
-
})(PluralForm || (PluralForm = {}));
|
|
3765
|
+
var _baseTrim = baseTrim$1;
|
|
4014
3766
|
|
|
4015
|
-
|
|
4016
|
-
|
|
4017
|
-
|
|
4018
|
-
|
|
4019
|
-
|
|
4020
|
-
|
|
3767
|
+
var root = _root;
|
|
3768
|
+
|
|
3769
|
+
/** Built-in value references. */
|
|
3770
|
+
var Symbol$3 = root.Symbol;
|
|
3771
|
+
|
|
3772
|
+
var _Symbol = Symbol$3;
|
|
3773
|
+
|
|
3774
|
+
var Symbol$2 = _Symbol;
|
|
3775
|
+
|
|
3776
|
+
/** Used for built-in method references. */
|
|
3777
|
+
var objectProto$1 = Object.prototype;
|
|
3778
|
+
|
|
3779
|
+
/** Used to check objects for own properties. */
|
|
3780
|
+
var hasOwnProperty = objectProto$1.hasOwnProperty;
|
|
3781
|
+
|
|
3782
|
+
/**
|
|
3783
|
+
* Used to resolve the
|
|
3784
|
+
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
|
|
3785
|
+
* of values.
|
|
3786
|
+
*/
|
|
3787
|
+
var nativeObjectToString$1 = objectProto$1.toString;
|
|
3788
|
+
|
|
3789
|
+
/** Built-in value references. */
|
|
3790
|
+
var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : undefined;
|
|
3791
|
+
|
|
3792
|
+
/**
|
|
3793
|
+
* A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
|
|
3794
|
+
*
|
|
3795
|
+
* @private
|
|
3796
|
+
* @param {*} value The value to query.
|
|
3797
|
+
* @returns {string} Returns the raw `toStringTag`.
|
|
3798
|
+
*/
|
|
3799
|
+
function getRawTag$1(value) {
|
|
3800
|
+
var isOwn = hasOwnProperty.call(value, symToStringTag$1),
|
|
3801
|
+
tag = value[symToStringTag$1];
|
|
3802
|
+
|
|
3803
|
+
try {
|
|
3804
|
+
value[symToStringTag$1] = undefined;
|
|
3805
|
+
var unmasked = true;
|
|
3806
|
+
} catch (e) {}
|
|
3807
|
+
|
|
3808
|
+
var result = nativeObjectToString$1.call(value);
|
|
3809
|
+
if (unmasked) {
|
|
3810
|
+
if (isOwn) {
|
|
3811
|
+
value[symToStringTag$1] = tag;
|
|
3812
|
+
} else {
|
|
3813
|
+
delete value[symToStringTag$1];
|
|
4021
3814
|
}
|
|
4022
|
-
|
|
3815
|
+
}
|
|
3816
|
+
return result;
|
|
4023
3817
|
}
|
|
4024
3818
|
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
|
|
4035
|
-
|
|
4036
|
-
|
|
4037
|
-
|
|
4038
|
-
|
|
3819
|
+
var _getRawTag = getRawTag$1;
|
|
3820
|
+
|
|
3821
|
+
/** Used for built-in method references. */
|
|
3822
|
+
|
|
3823
|
+
var objectProto = Object.prototype;
|
|
3824
|
+
|
|
3825
|
+
/**
|
|
3826
|
+
* Used to resolve the
|
|
3827
|
+
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
|
|
3828
|
+
* of values.
|
|
3829
|
+
*/
|
|
3830
|
+
var nativeObjectToString = objectProto.toString;
|
|
3831
|
+
|
|
3832
|
+
/**
|
|
3833
|
+
* Converts `value` to a string using `Object.prototype.toString`.
|
|
3834
|
+
*
|
|
3835
|
+
* @private
|
|
3836
|
+
* @param {*} value The value to convert.
|
|
3837
|
+
* @returns {string} Returns the converted string.
|
|
3838
|
+
*/
|
|
3839
|
+
function objectToString$1(value) {
|
|
3840
|
+
return nativeObjectToString.call(value);
|
|
4039
3841
|
}
|
|
4040
3842
|
|
|
4041
|
-
|
|
4042
|
-
constructor(options) {
|
|
4043
|
-
this.data = {};
|
|
4044
|
-
this.lang = undefined;
|
|
4045
|
-
this.pluralizers = {
|
|
4046
|
-
en: pluralizerEn,
|
|
4047
|
-
ru: pluralizerRu,
|
|
4048
|
-
};
|
|
4049
|
-
this.logger = null;
|
|
4050
|
-
this.logger = (options === null || options === void 0 ? void 0 : options.logger) || null;
|
|
4051
|
-
}
|
|
4052
|
-
setLang(lang) {
|
|
4053
|
-
this.lang = lang;
|
|
4054
|
-
}
|
|
4055
|
-
configurePluralization(pluralizers) {
|
|
4056
|
-
this.pluralizers = Object.assign({}, this.pluralizers, pluralizers);
|
|
4057
|
-
}
|
|
4058
|
-
registerKeyset(lang, keysetName, data = {}) {
|
|
4059
|
-
if (this.data[lang] && Object.prototype.hasOwnProperty.call(this.data[lang], keysetName)) {
|
|
4060
|
-
throw new Error(`Keyset '${keysetName}' is already registered, aborting!`);
|
|
4061
|
-
}
|
|
4062
|
-
this.data[lang] = Object.assign({}, this.data[lang], { [keysetName]: data });
|
|
4063
|
-
}
|
|
4064
|
-
registerKeysets(lang, data) {
|
|
4065
|
-
Object.keys(data).forEach((keysetName) => {
|
|
4066
|
-
this.registerKeyset(lang, keysetName, data[keysetName]);
|
|
4067
|
-
});
|
|
4068
|
-
}
|
|
4069
|
-
has(keysetName, key, lang) {
|
|
4070
|
-
const languageData = this.getLanguageData(lang);
|
|
4071
|
-
return Boolean(languageData && languageData[keysetName] && languageData[keysetName][key]);
|
|
4072
|
-
}
|
|
4073
|
-
i18n(keysetName, key, params) {
|
|
4074
|
-
const languageData = this.getLanguageData(this.lang);
|
|
4075
|
-
if (typeof languageData === 'undefined') {
|
|
4076
|
-
throw new Error(`Language '${this.lang}' is not defined, make sure you call setLang for the same language you called registerKeysets for!`);
|
|
4077
|
-
}
|
|
4078
|
-
if (Object.keys(languageData).length === 0) {
|
|
4079
|
-
this.warn('Language data is empty.');
|
|
4080
|
-
return key;
|
|
4081
|
-
}
|
|
4082
|
-
const keyset = languageData[keysetName];
|
|
4083
|
-
if (!keyset) {
|
|
4084
|
-
this.warn('Keyset not found.', keysetName);
|
|
4085
|
-
return key;
|
|
4086
|
-
}
|
|
4087
|
-
if (Object.keys(keyset).length === 0) {
|
|
4088
|
-
this.warn('Keyset is empty.', keysetName);
|
|
4089
|
-
return key;
|
|
4090
|
-
}
|
|
4091
|
-
const keyValue = keyset && keyset[key];
|
|
4092
|
-
let result;
|
|
4093
|
-
if (typeof keyValue === 'undefined') {
|
|
4094
|
-
this.warn('Missing key.', keysetName, key);
|
|
4095
|
-
return key;
|
|
4096
|
-
}
|
|
4097
|
-
if (Array.isArray(keyValue)) {
|
|
4098
|
-
if (keyValue.length < 3) {
|
|
4099
|
-
this.warn('Missing required plurals', keysetName, key);
|
|
4100
|
-
return key;
|
|
4101
|
-
}
|
|
4102
|
-
const count = Number(params === null || params === void 0 ? void 0 : params.count);
|
|
4103
|
-
if (Number.isNaN(count)) {
|
|
4104
|
-
this.warn('Missing params.count for key.', keysetName, key);
|
|
4105
|
-
return key;
|
|
4106
|
-
}
|
|
4107
|
-
const pluralizer = this.getLanguagePluralizer(this.lang);
|
|
4108
|
-
result = keyValue[pluralizer(count, PluralForm)] || keyValue[PluralForm.Many];
|
|
4109
|
-
if (keyValue[PluralForm.None] === undefined) {
|
|
4110
|
-
this.warn('Missing key for 0', keysetName, key);
|
|
4111
|
-
}
|
|
4112
|
-
}
|
|
4113
|
-
else {
|
|
4114
|
-
result = keyValue;
|
|
4115
|
-
}
|
|
4116
|
-
if (params) {
|
|
4117
|
-
result = replaceParams(result, params);
|
|
4118
|
-
}
|
|
4119
|
-
return result;
|
|
4120
|
-
}
|
|
4121
|
-
keyset(keysetName) {
|
|
4122
|
-
return (key, params) => {
|
|
4123
|
-
return this.i18n(keysetName, key, params);
|
|
4124
|
-
};
|
|
4125
|
-
}
|
|
4126
|
-
warn(msg, keyset, key) {
|
|
4127
|
-
var _a;
|
|
4128
|
-
let cacheKey = '';
|
|
4129
|
-
if (keyset) {
|
|
4130
|
-
cacheKey += keyset;
|
|
4131
|
-
if (key) {
|
|
4132
|
-
cacheKey += `.${key}`;
|
|
4133
|
-
}
|
|
4134
|
-
}
|
|
4135
|
-
else {
|
|
4136
|
-
cacheKey = 'languageData';
|
|
4137
|
-
}
|
|
4138
|
-
(_a = this.logger) === null || _a === void 0 ? void 0 : _a.log(`I18n: ${msg}`, {
|
|
4139
|
-
level: 'info',
|
|
4140
|
-
logger: cacheKey,
|
|
4141
|
-
extra: {
|
|
4142
|
-
type: 'i18n'
|
|
4143
|
-
}
|
|
4144
|
-
});
|
|
4145
|
-
}
|
|
4146
|
-
getLanguageData(lang) {
|
|
4147
|
-
const langCode = lang || this.lang;
|
|
4148
|
-
return langCode ? this.data[langCode] : undefined;
|
|
4149
|
-
}
|
|
4150
|
-
getLanguagePluralizer(lang) {
|
|
4151
|
-
const pluralizer = lang ? this.pluralizers[lang] : undefined;
|
|
4152
|
-
if (!pluralizer) {
|
|
4153
|
-
this.warn(`Pluralization is not configured for language '${lang}', falling back to the english ruleset`);
|
|
4154
|
-
}
|
|
4155
|
-
return pluralizer || pluralizerEn;
|
|
4156
|
-
}
|
|
4157
|
-
}
|
|
3843
|
+
var _objectToString = objectToString$1;
|
|
4158
3844
|
|
|
4159
|
-
|
|
4160
|
-
|
|
4161
|
-
|
|
4162
|
-
Lang["En"] = "en";
|
|
4163
|
-
})(exports.Lang || (exports.Lang = {}));
|
|
4164
|
-
let subs = [];
|
|
4165
|
-
const config = {
|
|
4166
|
-
lang: exports.Lang.En,
|
|
4167
|
-
};
|
|
4168
|
-
const configure = (newConfig) => {
|
|
4169
|
-
Object.assign(config, newConfig);
|
|
4170
|
-
subs.forEach((sub) => {
|
|
4171
|
-
sub(config);
|
|
4172
|
-
});
|
|
4173
|
-
};
|
|
4174
|
-
const subscribeConfigure = (sub) => {
|
|
4175
|
-
subs.push(sub);
|
|
4176
|
-
return () => {
|
|
4177
|
-
subs = subs.filter((item) => item !== sub);
|
|
4178
|
-
};
|
|
4179
|
-
};
|
|
4180
|
-
const getConfig = () => config;
|
|
3845
|
+
var Symbol$1 = _Symbol,
|
|
3846
|
+
getRawTag = _getRawTag,
|
|
3847
|
+
objectToString = _objectToString;
|
|
4181
3848
|
|
|
4182
|
-
|
|
4183
|
-
|
|
4184
|
-
|
|
4185
|
-
i18n$4.setLang(config.lang);
|
|
4186
|
-
});
|
|
3849
|
+
/** `Object#toString` result references. */
|
|
3850
|
+
var nullTag = '[object Null]',
|
|
3851
|
+
undefinedTag = '[object Undefined]';
|
|
4187
3852
|
|
|
4188
|
-
|
|
4189
|
-
|
|
4190
|
-
|
|
3853
|
+
/** Built-in value references. */
|
|
3854
|
+
var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
|
|
3855
|
+
|
|
3856
|
+
/**
|
|
3857
|
+
* The base implementation of `getTag` without fallbacks for buggy environments.
|
|
3858
|
+
*
|
|
3859
|
+
* @private
|
|
3860
|
+
* @param {*} value The value to query.
|
|
3861
|
+
* @returns {string} Returns the `toStringTag`.
|
|
3862
|
+
*/
|
|
3863
|
+
function baseGetTag$1(value) {
|
|
3864
|
+
if (value == null) {
|
|
3865
|
+
return value === undefined ? undefinedTag : nullTag;
|
|
3866
|
+
}
|
|
3867
|
+
return (symToStringTag && symToStringTag in Object(value))
|
|
3868
|
+
? getRawTag(value)
|
|
3869
|
+
: objectToString(value);
|
|
4191
3870
|
}
|
|
4192
3871
|
|
|
4193
|
-
var
|
|
4194
|
-
var button_expand$1 = "Expand";
|
|
4195
|
-
var label_more$1 = "More";
|
|
4196
|
-
var en$3 = {
|
|
4197
|
-
button_collapse: button_collapse$1,
|
|
4198
|
-
button_expand: button_expand$1,
|
|
4199
|
-
label_more: label_more$1
|
|
4200
|
-
};
|
|
3872
|
+
var _baseGetTag = baseGetTag$1;
|
|
4201
3873
|
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
|
|
4205
|
-
|
|
4206
|
-
|
|
4207
|
-
|
|
4208
|
-
|
|
4209
|
-
|
|
3874
|
+
/**
|
|
3875
|
+
* Checks if `value` is object-like. A value is object-like if it's not `null`
|
|
3876
|
+
* and has a `typeof` result of "object".
|
|
3877
|
+
*
|
|
3878
|
+
* @static
|
|
3879
|
+
* @memberOf _
|
|
3880
|
+
* @since 4.0.0
|
|
3881
|
+
* @category Lang
|
|
3882
|
+
* @param {*} value The value to check.
|
|
3883
|
+
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
|
|
3884
|
+
* @example
|
|
3885
|
+
*
|
|
3886
|
+
* _.isObjectLike({});
|
|
3887
|
+
* // => true
|
|
3888
|
+
*
|
|
3889
|
+
* _.isObjectLike([1, 2, 3]);
|
|
3890
|
+
* // => true
|
|
3891
|
+
*
|
|
3892
|
+
* _.isObjectLike(_.noop);
|
|
3893
|
+
* // => false
|
|
3894
|
+
*
|
|
3895
|
+
* _.isObjectLike(null);
|
|
3896
|
+
* // => false
|
|
3897
|
+
*/
|
|
4210
3898
|
|
|
4211
|
-
|
|
4212
|
-
|
|
3899
|
+
function isObjectLike$1(value) {
|
|
3900
|
+
return value != null && typeof value == 'object';
|
|
3901
|
+
}
|
|
4213
3902
|
|
|
4214
|
-
var
|
|
4215
|
-
function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
|
|
4216
|
-
var SvgControlMenuButton = function SvgControlMenuButton(props) {
|
|
4217
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
4218
|
-
width: 8,
|
|
4219
|
-
height: 8,
|
|
4220
|
-
viewBox: "0 0 8 8",
|
|
4221
|
-
fill: "currentColor",
|
|
4222
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
4223
|
-
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
4224
|
-
d: "m.72 7.64 6.39-3.2a.5.5 0 0 0 0-.89L.72.36A.5.5 0 0 0 0 .81v6.38c0 .37.4.61.72.45Z"
|
|
4225
|
-
})));
|
|
4226
|
-
};
|
|
4227
|
-
var controlMenuButtonIcon = SvgControlMenuButton;
|
|
3903
|
+
var isObjectLike_1 = isObjectLike$1;
|
|
4228
3904
|
|
|
4229
|
-
var
|
|
4230
|
-
|
|
4231
|
-
var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
4232
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
4233
|
-
width: 56,
|
|
4234
|
-
height: 29,
|
|
4235
|
-
viewBox: "0 0 56 29",
|
|
4236
|
-
fill: "currentColor",
|
|
4237
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
4238
|
-
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
4239
|
-
d: "M56 0v29c-.8-1-7-6.1-17.7-8.4L13 15.7A16 16 0 0 1 0 0Z"
|
|
4240
|
-
})));
|
|
4241
|
-
};
|
|
4242
|
-
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
3905
|
+
var baseGetTag = _baseGetTag,
|
|
3906
|
+
isObjectLike = isObjectLike_1;
|
|
4243
3907
|
|
|
4244
|
-
|
|
4245
|
-
|
|
3908
|
+
/** `Object#toString` result references. */
|
|
3909
|
+
var symbolTag = '[object Symbol]';
|
|
4246
3910
|
|
|
4247
|
-
|
|
4248
|
-
|
|
4249
|
-
|
|
4250
|
-
|
|
4251
|
-
|
|
4252
|
-
|
|
4253
|
-
|
|
4254
|
-
|
|
4255
|
-
|
|
4256
|
-
|
|
4257
|
-
|
|
4258
|
-
|
|
4259
|
-
|
|
4260
|
-
|
|
4261
|
-
|
|
4262
|
-
|
|
4263
|
-
|
|
4264
|
-
|
|
4265
|
-
|
|
4266
|
-
|
|
4267
|
-
return (React__default["default"].createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$i('content') }));
|
|
4268
|
-
};
|
|
4269
|
-
this.renderLogo = () => React__default["default"].createElement(Logo$1, Object.assign({}, this.props.logo, { onClick: this.onLogoClick }));
|
|
4270
|
-
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$i('header', { ['with-decoration']: this.props.headerDecoration }) },
|
|
4271
|
-
this.renderLogo(),
|
|
4272
|
-
React__default["default"].createElement(CompositeBar, { type: "subheader", items: this.props.subheaderItems, onItemClick: this.onItemClick }),
|
|
4273
|
-
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$i('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
4274
|
-
this.renderFooter = (size) => {
|
|
4275
|
-
const { renderFooter, compact } = this.props;
|
|
4276
|
-
return (React__default["default"].createElement("div", { className: b$i('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
4277
|
-
size,
|
|
4278
|
-
compact,
|
|
4279
|
-
asideRef: this.asideRef,
|
|
4280
|
-
})));
|
|
4281
|
-
};
|
|
4282
|
-
this.renderPanels = (size) => {
|
|
4283
|
-
const { panelItems } = this.props;
|
|
4284
|
-
return (React__default["default"].createElement(Drawer, { className: b$i('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default["default"].createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
|
|
4285
|
-
};
|
|
4286
|
-
this.renderCollapseButton = () => {
|
|
4287
|
-
const { expandTitle, collapseTitle, compact } = this.props;
|
|
4288
|
-
const buttonTitle = compact
|
|
4289
|
-
? expandTitle || i18n$3('button_expand')
|
|
4290
|
-
: collapseTitle || i18n$3('button_collapse');
|
|
4291
|
-
return (React__default["default"].createElement(uikit.Button, { className: b$i('collapse-button', { compact }), view: "flat", onClick: this.onCollapseButtonClick, title: buttonTitle },
|
|
4292
|
-
React__default["default"].createElement(NotIcon, { data: controlMenuButtonIcon, className: b$i('collapse-icon'), width: "16", height: "10" })));
|
|
4293
|
-
};
|
|
4294
|
-
this.onCollapseButtonClick = () => {
|
|
4295
|
-
var _a, _b;
|
|
4296
|
-
(_b = (_a = this.props).onChangeCompact) === null || _b === void 0 ? void 0 : _b.call(_a, !this.props.compact);
|
|
4297
|
-
};
|
|
4298
|
-
this.onCloseDrawer = () => {
|
|
4299
|
-
var _a, _b;
|
|
4300
|
-
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4301
|
-
};
|
|
4302
|
-
this.onItemClick = (item, collapsed, event) => {
|
|
4303
|
-
var _a, _b, _c;
|
|
4304
|
-
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4305
|
-
(_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed, event);
|
|
4306
|
-
};
|
|
4307
|
-
this.onLogoClick = (event) => {
|
|
4308
|
-
var _a, _b, _c, _d;
|
|
4309
|
-
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4310
|
-
(_d = (_c = this.props.logo).onClick) === null || _d === void 0 ? void 0 : _d.call(_c, event);
|
|
4311
|
-
};
|
|
4312
|
-
}
|
|
4313
|
-
render() {
|
|
4314
|
-
const { className, compact } = this.props;
|
|
4315
|
-
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
4316
|
-
return (React__default["default"].createElement(AsideHeaderContextProvider, { value: { compact, size } },
|
|
4317
|
-
React__default["default"].createElement("div", { className: b$i({ compact }, className) },
|
|
4318
|
-
React__default["default"].createElement("div", { className: b$i('pane-container') },
|
|
4319
|
-
this.renderFirstPane(size),
|
|
4320
|
-
this.renderSecondPane(size)))));
|
|
4321
|
-
}
|
|
4322
|
-
}
|
|
4323
|
-
AsideHeader.defaultProps = {
|
|
4324
|
-
panelItems: [],
|
|
4325
|
-
subheaderItems: [],
|
|
4326
|
-
menuItems: [],
|
|
4327
|
-
headerDecoration: true,
|
|
4328
|
-
};
|
|
4329
|
-
|
|
4330
|
-
/******************************************************************************
|
|
4331
|
-
Copyright (c) Microsoft Corporation.
|
|
4332
|
-
|
|
4333
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
4334
|
-
purpose with or without fee is hereby granted.
|
|
4335
|
-
|
|
4336
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
4337
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
4338
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
4339
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
4340
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
4341
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
4342
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
4343
|
-
***************************************************************************** */
|
|
4344
|
-
|
|
4345
|
-
function __rest(s, e) {
|
|
4346
|
-
var t = {};
|
|
4347
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4348
|
-
t[p] = s[p];
|
|
4349
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
4350
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
4351
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
4352
|
-
t[p[i]] = s[p[i]];
|
|
4353
|
-
}
|
|
4354
|
-
return t;
|
|
3911
|
+
/**
|
|
3912
|
+
* Checks if `value` is classified as a `Symbol` primitive or object.
|
|
3913
|
+
*
|
|
3914
|
+
* @static
|
|
3915
|
+
* @memberOf _
|
|
3916
|
+
* @since 4.0.0
|
|
3917
|
+
* @category Lang
|
|
3918
|
+
* @param {*} value The value to check.
|
|
3919
|
+
* @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
|
|
3920
|
+
* @example
|
|
3921
|
+
*
|
|
3922
|
+
* _.isSymbol(Symbol.iterator);
|
|
3923
|
+
* // => true
|
|
3924
|
+
*
|
|
3925
|
+
* _.isSymbol('abc');
|
|
3926
|
+
* // => false
|
|
3927
|
+
*/
|
|
3928
|
+
function isSymbol$1(value) {
|
|
3929
|
+
return typeof value == 'symbol' ||
|
|
3930
|
+
(isObjectLike(value) && baseGetTag(value) == symbolTag);
|
|
4355
3931
|
}
|
|
4356
3932
|
|
|
4357
|
-
|
|
4358
|
-
var e = new Error(message);
|
|
4359
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
4360
|
-
};
|
|
4361
|
-
|
|
4362
|
-
var css_248z$g = ".gn-footer-item {\n width: 100%;\n height: 40px;\n}";
|
|
4363
|
-
styleInject(css_248z$g);
|
|
4364
|
-
|
|
4365
|
-
const b$h = block('footer-item');
|
|
4366
|
-
const FooterItem$1 = (_a) => {
|
|
4367
|
-
var { item } = _a, props = __rest(_a, ["item"]);
|
|
4368
|
-
return (React__default["default"].createElement(Item$1, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_FOOTER_ICON_SIZE }, item), className: b$h({ compact: props.compact }), onItemClick: item.onItemClick, onItemClickCapture: item.onItemClickCapture })));
|
|
4369
|
-
};
|
|
4370
|
-
|
|
4371
|
-
var css_248z$f = ".gn-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.gn-action-bar-group_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.gn-action-bar-group_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.gn-action-bar-group_pull_center {\n margin-left: auto;\n margin-right: auto;\n}";
|
|
4372
|
-
styleInject(css_248z$f);
|
|
4373
|
-
|
|
4374
|
-
const b$g = block('action-bar-group');
|
|
4375
|
-
const ActionBarGroup = ({ children, className, pull }) => {
|
|
4376
|
-
return (React__default["default"].createElement("ul", { className: b$g({ pull }, className), role: "group" }, children));
|
|
4377
|
-
};
|
|
4378
|
-
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
4379
|
-
|
|
4380
|
-
var css_248z$e = ".gn-action-bar-item {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.gn-action-bar-item_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.gn-action-bar-item_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.gn-action-bar-item_pull_center {\n margin-left: auto;\n margin-right: auto;\n}\n.gn-action-bar-item + .gn-action-bar-item_spacing {\n margin-left: 8px;\n}";
|
|
4381
|
-
styleInject(css_248z$e);
|
|
3933
|
+
var isSymbol_1 = isSymbol$1;
|
|
4382
3934
|
|
|
4383
|
-
|
|
4384
|
-
|
|
4385
|
-
|
|
4386
|
-
};
|
|
4387
|
-
ActionBarItem.displayName = 'ActionBar.Item';
|
|
3935
|
+
var baseTrim = _baseTrim,
|
|
3936
|
+
isObject$1 = isObject_1,
|
|
3937
|
+
isSymbol = isSymbol_1;
|
|
4388
3938
|
|
|
4389
|
-
|
|
4390
|
-
|
|
3939
|
+
/** Used as references for various `Number` constants. */
|
|
3940
|
+
var NAN = 0 / 0;
|
|
4391
3941
|
|
|
4392
|
-
|
|
4393
|
-
|
|
4394
|
-
return React__default["default"].createElement("div", { className: b$e({ type }) }, children);
|
|
4395
|
-
};
|
|
4396
|
-
ActionBarSection.displayName = 'ActionBar.Section';
|
|
3942
|
+
/** Used to detect bad signed hexadecimal string values. */
|
|
3943
|
+
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
|
|
4397
3944
|
|
|
4398
|
-
|
|
4399
|
-
|
|
3945
|
+
/** Used to detect binary string values. */
|
|
3946
|
+
var reIsBinary = /^0b[01]+$/i;
|
|
4400
3947
|
|
|
4401
|
-
|
|
4402
|
-
|
|
4403
|
-
return React__default["default"].createElement("li", { role: "separator", className: b$d() });
|
|
4404
|
-
};
|
|
4405
|
-
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
3948
|
+
/** Used to detect octal string values. */
|
|
3949
|
+
var reIsOctal = /^0o[0-7]+$/i;
|
|
4406
3950
|
|
|
4407
|
-
|
|
4408
|
-
|
|
3951
|
+
/** Built-in method references without a dependency on `root`. */
|
|
3952
|
+
var freeParseInt = parseInt;
|
|
4409
3953
|
|
|
4410
|
-
|
|
4411
|
-
|
|
4412
|
-
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
3954
|
+
/**
|
|
3955
|
+
* Converts `value` to a number.
|
|
3956
|
+
*
|
|
3957
|
+
* @static
|
|
3958
|
+
* @memberOf _
|
|
3959
|
+
* @since 4.0.0
|
|
3960
|
+
* @category Lang
|
|
3961
|
+
* @param {*} value The value to process.
|
|
3962
|
+
* @returns {number} Returns the number.
|
|
3963
|
+
* @example
|
|
3964
|
+
*
|
|
3965
|
+
* _.toNumber(3.2);
|
|
3966
|
+
* // => 3.2
|
|
3967
|
+
*
|
|
3968
|
+
* _.toNumber(Number.MIN_VALUE);
|
|
3969
|
+
* // => 5e-324
|
|
3970
|
+
*
|
|
3971
|
+
* _.toNumber(Infinity);
|
|
3972
|
+
* // => Infinity
|
|
3973
|
+
*
|
|
3974
|
+
* _.toNumber('3.2');
|
|
3975
|
+
* // => 3.2
|
|
3976
|
+
*/
|
|
3977
|
+
function toNumber$1(value) {
|
|
3978
|
+
if (typeof value == 'number') {
|
|
3979
|
+
return value;
|
|
3980
|
+
}
|
|
3981
|
+
if (isSymbol(value)) {
|
|
3982
|
+
return NAN;
|
|
3983
|
+
}
|
|
3984
|
+
if (isObject$1(value)) {
|
|
3985
|
+
var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
|
|
3986
|
+
value = isObject$1(other) ? (other + '') : other;
|
|
3987
|
+
}
|
|
3988
|
+
if (typeof value != 'string') {
|
|
3989
|
+
return value === 0 ? value : +value;
|
|
3990
|
+
}
|
|
3991
|
+
value = baseTrim(value);
|
|
3992
|
+
var isBinary = reIsBinary.test(value);
|
|
3993
|
+
return (isBinary || reIsOctal.test(value))
|
|
3994
|
+
? freeParseInt(value.slice(2), isBinary ? 2 : 8)
|
|
3995
|
+
: (reIsBadHex.test(value) ? NAN : +value);
|
|
3996
|
+
}
|
|
4421
3997
|
|
|
4422
|
-
var
|
|
4423
|
-
var en$2 = {
|
|
4424
|
-
button_close: button_close$1
|
|
4425
|
-
};
|
|
3998
|
+
var toNumber_1 = toNumber$1;
|
|
4426
3999
|
|
|
4427
|
-
var
|
|
4428
|
-
|
|
4429
|
-
|
|
4430
|
-
};
|
|
4000
|
+
var isObject = isObject_1,
|
|
4001
|
+
now = now_1,
|
|
4002
|
+
toNumber = toNumber_1;
|
|
4431
4003
|
|
|
4432
|
-
|
|
4433
|
-
var
|
|
4004
|
+
/** Error message constants. */
|
|
4005
|
+
var FUNC_ERROR_TEXT = 'Expected a function';
|
|
4434
4006
|
|
|
4435
|
-
|
|
4436
|
-
|
|
4437
|
-
|
|
4438
|
-
const b$b = block('title');
|
|
4439
|
-
const Title = ({ children, closeIconSize = 23, hasSeparator, closeTitle = i18n$2('button_close'), onClose, }) => {
|
|
4440
|
-
return (React__default["default"].createElement("div", { className: b$b({ separator: hasSeparator }) },
|
|
4441
|
-
React__default["default"].createElement(uikit.Text, { className: b$b('text'), as: 'h3', variant: 'subheader-3' }, children),
|
|
4442
|
-
onClose && (React__default["default"].createElement(uikit.Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
|
|
4443
|
-
'aria-label': closeTitle,
|
|
4444
|
-
} },
|
|
4445
|
-
React__default["default"].createElement(uikit.Icon, { data: icons.Xmark, size: closeIconSize })))));
|
|
4446
|
-
};
|
|
4447
|
-
Title.displayName = 'Title';
|
|
4448
|
-
|
|
4449
|
-
function flattenHotkeyGroups(hotkeys) {
|
|
4450
|
-
const result = [];
|
|
4451
|
-
for (const hotkeysGroup of hotkeys) {
|
|
4452
|
-
result.push({
|
|
4453
|
-
title: hotkeysGroup.title,
|
|
4454
|
-
group: true,
|
|
4455
|
-
});
|
|
4456
|
-
result.push(...hotkeysGroup.items);
|
|
4457
|
-
}
|
|
4458
|
-
return result;
|
|
4459
|
-
}
|
|
4460
|
-
|
|
4461
|
-
function filterHotkeys(hotkeys, filter) {
|
|
4462
|
-
if (filter) {
|
|
4463
|
-
const result = [];
|
|
4464
|
-
const normalizedFilter = filter.toLowerCase();
|
|
4465
|
-
for (const hotkeysBlock of hotkeys) {
|
|
4466
|
-
const filteredItems = hotkeysBlock.items.filter((item) => item.title.toLowerCase().includes(normalizedFilter));
|
|
4467
|
-
if (filteredItems.length > 0) {
|
|
4468
|
-
result.push(Object.assign(Object.assign({}, hotkeysBlock), { items: filteredItems }));
|
|
4469
|
-
}
|
|
4470
|
-
}
|
|
4471
|
-
return result;
|
|
4472
|
-
}
|
|
4473
|
-
return hotkeys;
|
|
4474
|
-
}
|
|
4475
|
-
|
|
4476
|
-
var css_248z$9 = ".gn-hotkeys-panel {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n --hotkeys-panel-width: 400px;\n --hotkeys-panel-vertical-padding: 18px;\n --hotkeys-panel-horizontal-padding: 24px;\n}\n.gn-hotkeys-panel__drawer-item {\n width: var(--hotkeys-panel-width);\n padding: var(--hotkeys-panel-vertical-padding) 0;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n}\n.gn-hotkeys-panel__title {\n margin: 0 var(--hotkeys-panel-horizontal-padding) 16px var(--hotkeys-panel-horizontal-padding);\n}\n.gn-hotkeys-panel__search {\n padding: 0 var(--hotkeys-panel-horizontal-padding);\n margin-bottom: 14px;\n}\n.gn-hotkeys-panel__list {\n flex: 1;\n overflow-y: auto;\n}\n.gn-hotkeys-panel__item {\n height: auto;\n padding: 8px var(--hotkeys-panel-horizontal-padding);\n}\n.gn-hotkeys-panel__item.yc-list__item_active {\n background: inherit;\n}\n.gn-hotkeys-panel__item-content {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n width: 100%;\n font-size: var(--g-text-body-1-font-size);\n line-height: var(--g-text-body-1-line-height);\n color: var(--g-color-text-primary);\n}\n.gn-hotkeys-panel__item-content_group {\n font-size: var(--g-text-body-2-font-size);\n font-weight: 500;\n line-height: var(--g-text-body-2-line-height);\n}\n.gn-hotkeys-panel__hotkey {\n color: var(--g-color-text-complementary);\n}";
|
|
4477
|
-
styleInject(css_248z$9);
|
|
4478
|
-
|
|
4479
|
-
const b$a = block('hotkeys-panel');
|
|
4480
|
-
function HotkeysPanel(_a) {
|
|
4481
|
-
var { visible, onClose, leftOffset, topOffset, className, preventScrollBody, hotkeys, itemClassName, filterPlaceholder, title, emptyState } = _a, listProps = __rest(_a, ["visible", "onClose", "leftOffset", "topOffset", "className", "preventScrollBody", "hotkeys", "itemClassName", "filterPlaceholder", "title", "emptyState"]);
|
|
4482
|
-
const [filter, setFilter] = React.useState('');
|
|
4483
|
-
const hotkeysList = React.useMemo(() => {
|
|
4484
|
-
const filteredHotkeys = filterHotkeys(hotkeys, filter);
|
|
4485
|
-
return flattenHotkeyGroups(filteredHotkeys);
|
|
4486
|
-
}, [hotkeys, filter]);
|
|
4487
|
-
const renderItem = React.useCallback((item) => (React__default["default"].createElement("div", { className: b$a('item-content', { group: item.group }), key: item.title },
|
|
4488
|
-
item.title,
|
|
4489
|
-
item.value && React__default["default"].createElement(uikit.Hotkey, { className: b$a('hotkey'), value: item.value }))), []);
|
|
4490
|
-
const drawerItemContent = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4491
|
-
React__default["default"].createElement("h2", { className: b$a('title') }, title),
|
|
4492
|
-
React__default["default"].createElement(uikit.TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$a('search') }),
|
|
4493
|
-
React__default["default"].createElement(uikit.List, Object.assign({ className: b$a('list'), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$a('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
|
|
4494
|
-
return (React__default["default"].createElement(Drawer, { className: b$a(null, className), onVeilClick: onClose, onEscape: onClose, preventScrollBody: preventScrollBody, style: {
|
|
4495
|
-
left: leftOffset,
|
|
4496
|
-
top: topOffset,
|
|
4497
|
-
} },
|
|
4498
|
-
React__default["default"].createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$a('drawer-item'), content: drawerItemContent })));
|
|
4499
|
-
}
|
|
4007
|
+
/* Built-in method references for those with the same name as other `lodash` methods. */
|
|
4008
|
+
var nativeMax = Math.max,
|
|
4009
|
+
nativeMin = Math.min;
|
|
4500
4010
|
|
|
4501
4011
|
/**
|
|
4502
|
-
*
|
|
4012
|
+
* Creates a debounced function that delays invoking `func` until after `wait`
|
|
4013
|
+
* milliseconds have elapsed since the last time the debounced function was
|
|
4014
|
+
* invoked. The debounced function comes with a `cancel` method to cancel
|
|
4015
|
+
* delayed `func` invocations and a `flush` method to immediately invoke them.
|
|
4016
|
+
* Provide `options` to indicate whether `func` should be invoked on the
|
|
4017
|
+
* leading and/or trailing edge of the `wait` timeout. The `func` is invoked
|
|
4018
|
+
* with the last arguments provided to the debounced function. Subsequent
|
|
4019
|
+
* calls to the debounced function return the result of the last `func`
|
|
4020
|
+
* invocation.
|
|
4503
4021
|
*
|
|
4504
|
-
*
|
|
4505
|
-
*
|
|
4506
|
-
*
|
|
4507
|
-
* @category Util
|
|
4508
|
-
* @param {*} value Any value.
|
|
4509
|
-
* @returns {*} Returns `value`.
|
|
4510
|
-
* @example
|
|
4022
|
+
* **Note:** If `leading` and `trailing` options are `true`, `func` is
|
|
4023
|
+
* invoked on the trailing edge of the timeout only if the debounced function
|
|
4024
|
+
* is invoked more than once during the `wait` timeout.
|
|
4511
4025
|
*
|
|
4512
|
-
*
|
|
4026
|
+
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
|
|
4027
|
+
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
|
|
4513
4028
|
*
|
|
4514
|
-
*
|
|
4515
|
-
*
|
|
4516
|
-
*/
|
|
4517
|
-
|
|
4518
|
-
function identity(value) {
|
|
4519
|
-
return value;
|
|
4520
|
-
}
|
|
4521
|
-
|
|
4522
|
-
var identity_1 = identity;
|
|
4523
|
-
|
|
4524
|
-
/**
|
|
4525
|
-
* Checks if `value` is the
|
|
4526
|
-
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
|
|
4527
|
-
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
|
|
4029
|
+
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
|
|
4030
|
+
* for details over the differences between `_.debounce` and `_.throttle`.
|
|
4528
4031
|
*
|
|
4529
4032
|
* @static
|
|
4530
4033
|
* @memberOf _
|
|
4531
4034
|
* @since 0.1.0
|
|
4532
|
-
* @category
|
|
4533
|
-
* @param {
|
|
4534
|
-
* @
|
|
4035
|
+
* @category Function
|
|
4036
|
+
* @param {Function} func The function to debounce.
|
|
4037
|
+
* @param {number} [wait=0] The number of milliseconds to delay.
|
|
4038
|
+
* @param {Object} [options={}] The options object.
|
|
4039
|
+
* @param {boolean} [options.leading=false]
|
|
4040
|
+
* Specify invoking on the leading edge of the timeout.
|
|
4041
|
+
* @param {number} [options.maxWait]
|
|
4042
|
+
* The maximum time `func` is allowed to be delayed before it's invoked.
|
|
4043
|
+
* @param {boolean} [options.trailing=true]
|
|
4044
|
+
* Specify invoking on the trailing edge of the timeout.
|
|
4045
|
+
* @returns {Function} Returns the new debounced function.
|
|
4535
4046
|
* @example
|
|
4536
4047
|
*
|
|
4537
|
-
*
|
|
4538
|
-
*
|
|
4048
|
+
* // Avoid costly calculations while the window size is in flux.
|
|
4049
|
+
* jQuery(window).on('resize', _.debounce(calculateLayout, 150));
|
|
4539
4050
|
*
|
|
4540
|
-
*
|
|
4541
|
-
*
|
|
4051
|
+
* // Invoke `sendMail` when clicked, debouncing subsequent calls.
|
|
4052
|
+
* jQuery(element).on('click', _.debounce(sendMail, 300, {
|
|
4053
|
+
* 'leading': true,
|
|
4054
|
+
* 'trailing': false
|
|
4055
|
+
* }));
|
|
4542
4056
|
*
|
|
4543
|
-
*
|
|
4544
|
-
*
|
|
4057
|
+
* // Ensure `batchLog` is invoked once after 1 second of debounced calls.
|
|
4058
|
+
* var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
|
|
4059
|
+
* var source = new EventSource('/stream');
|
|
4060
|
+
* jQuery(source).on('message', debounced);
|
|
4545
4061
|
*
|
|
4546
|
-
*
|
|
4547
|
-
*
|
|
4062
|
+
* // Cancel the trailing debounced invocation.
|
|
4063
|
+
* jQuery(window).on('popstate', debounced.cancel);
|
|
4548
4064
|
*/
|
|
4065
|
+
function debounce(func, wait, options) {
|
|
4066
|
+
var lastArgs,
|
|
4067
|
+
lastThis,
|
|
4068
|
+
maxWait,
|
|
4069
|
+
result,
|
|
4070
|
+
timerId,
|
|
4071
|
+
lastCallTime,
|
|
4072
|
+
lastInvokeTime = 0,
|
|
4073
|
+
leading = false,
|
|
4074
|
+
maxing = false,
|
|
4075
|
+
trailing = true;
|
|
4549
4076
|
|
|
4550
|
-
|
|
4551
|
-
|
|
4552
|
-
|
|
4553
|
-
|
|
4077
|
+
if (typeof func != 'function') {
|
|
4078
|
+
throw new TypeError(FUNC_ERROR_TEXT);
|
|
4079
|
+
}
|
|
4080
|
+
wait = toNumber(wait) || 0;
|
|
4081
|
+
if (isObject(options)) {
|
|
4082
|
+
leading = !!options.leading;
|
|
4083
|
+
maxing = 'maxWait' in options;
|
|
4084
|
+
maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
|
|
4085
|
+
trailing = 'trailing' in options ? !!options.trailing : trailing;
|
|
4086
|
+
}
|
|
4554
4087
|
|
|
4555
|
-
|
|
4088
|
+
function invokeFunc(time) {
|
|
4089
|
+
var args = lastArgs,
|
|
4090
|
+
thisArg = lastThis;
|
|
4556
4091
|
|
|
4557
|
-
|
|
4092
|
+
lastArgs = lastThis = undefined;
|
|
4093
|
+
lastInvokeTime = time;
|
|
4094
|
+
result = func.apply(thisArg, args);
|
|
4095
|
+
return result;
|
|
4096
|
+
}
|
|
4558
4097
|
|
|
4559
|
-
|
|
4098
|
+
function leadingEdge(time) {
|
|
4099
|
+
// Reset any `maxWait` timer.
|
|
4100
|
+
lastInvokeTime = time;
|
|
4101
|
+
// Start the timer for the trailing edge.
|
|
4102
|
+
timerId = setTimeout(timerExpired, wait);
|
|
4103
|
+
// Invoke the leading edge.
|
|
4104
|
+
return leading ? invokeFunc(time) : result;
|
|
4105
|
+
}
|
|
4560
4106
|
|
|
4561
|
-
|
|
4107
|
+
function remainingWait(time) {
|
|
4108
|
+
var timeSinceLastCall = time - lastCallTime,
|
|
4109
|
+
timeSinceLastInvoke = time - lastInvokeTime,
|
|
4110
|
+
timeWaiting = wait - timeSinceLastCall;
|
|
4562
4111
|
|
|
4563
|
-
|
|
4112
|
+
return maxing
|
|
4113
|
+
? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
|
|
4114
|
+
: timeWaiting;
|
|
4115
|
+
}
|
|
4564
4116
|
|
|
4565
|
-
|
|
4566
|
-
var
|
|
4117
|
+
function shouldInvoke(time) {
|
|
4118
|
+
var timeSinceLastCall = time - lastCallTime,
|
|
4119
|
+
timeSinceLastInvoke = time - lastInvokeTime;
|
|
4567
4120
|
|
|
4568
|
-
|
|
4569
|
-
|
|
4121
|
+
// Either this is the first call, activity has stopped and we're at the
|
|
4122
|
+
// trailing edge, the system time has gone backwards and we're treating
|
|
4123
|
+
// it as the trailing edge, or we've hit the `maxWait` limit.
|
|
4124
|
+
return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
|
|
4125
|
+
(timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
|
|
4126
|
+
}
|
|
4570
4127
|
|
|
4571
|
-
|
|
4128
|
+
function timerExpired() {
|
|
4129
|
+
var time = now();
|
|
4130
|
+
if (shouldInvoke(time)) {
|
|
4131
|
+
return trailingEdge(time);
|
|
4132
|
+
}
|
|
4133
|
+
// Restart the timer.
|
|
4134
|
+
timerId = setTimeout(timerExpired, remainingWait(time));
|
|
4135
|
+
}
|
|
4572
4136
|
|
|
4573
|
-
|
|
4137
|
+
function trailingEdge(time) {
|
|
4138
|
+
timerId = undefined;
|
|
4574
4139
|
|
|
4575
|
-
|
|
4576
|
-
|
|
4577
|
-
|
|
4578
|
-
|
|
4579
|
-
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4583
|
-
* @returns {number} Returns the timestamp.
|
|
4584
|
-
* @example
|
|
4585
|
-
*
|
|
4586
|
-
* _.defer(function(stamp) {
|
|
4587
|
-
* console.log(_.now() - stamp);
|
|
4588
|
-
* }, _.now());
|
|
4589
|
-
* // => Logs the number of milliseconds it took for the deferred invocation.
|
|
4590
|
-
*/
|
|
4591
|
-
var now$1 = function() {
|
|
4592
|
-
return root$1.Date.now();
|
|
4593
|
-
};
|
|
4140
|
+
// Only invoke if we have `lastArgs` which means `func` has been
|
|
4141
|
+
// debounced at least once.
|
|
4142
|
+
if (trailing && lastArgs) {
|
|
4143
|
+
return invokeFunc(time);
|
|
4144
|
+
}
|
|
4145
|
+
lastArgs = lastThis = undefined;
|
|
4146
|
+
return result;
|
|
4147
|
+
}
|
|
4594
4148
|
|
|
4595
|
-
|
|
4149
|
+
function cancel() {
|
|
4150
|
+
if (timerId !== undefined) {
|
|
4151
|
+
clearTimeout(timerId);
|
|
4152
|
+
}
|
|
4153
|
+
lastInvokeTime = 0;
|
|
4154
|
+
lastArgs = lastCallTime = lastThis = timerId = undefined;
|
|
4155
|
+
}
|
|
4596
4156
|
|
|
4597
|
-
|
|
4157
|
+
function flush() {
|
|
4158
|
+
return timerId === undefined ? result : trailingEdge(now());
|
|
4159
|
+
}
|
|
4598
4160
|
|
|
4599
|
-
|
|
4161
|
+
function debounced() {
|
|
4162
|
+
var time = now(),
|
|
4163
|
+
isInvoking = shouldInvoke(time);
|
|
4600
4164
|
|
|
4601
|
-
|
|
4602
|
-
|
|
4603
|
-
|
|
4604
|
-
*
|
|
4605
|
-
* @private
|
|
4606
|
-
* @param {string} string The string to inspect.
|
|
4607
|
-
* @returns {number} Returns the index of the last non-whitespace character.
|
|
4608
|
-
*/
|
|
4609
|
-
function trimmedEndIndex$1(string) {
|
|
4610
|
-
var index = string.length;
|
|
4611
|
-
|
|
4612
|
-
while (index-- && reWhitespace.test(string.charAt(index))) {}
|
|
4613
|
-
return index;
|
|
4614
|
-
}
|
|
4615
|
-
|
|
4616
|
-
var _trimmedEndIndex = trimmedEndIndex$1;
|
|
4617
|
-
|
|
4618
|
-
var trimmedEndIndex = _trimmedEndIndex;
|
|
4619
|
-
|
|
4620
|
-
/** Used to match leading whitespace. */
|
|
4621
|
-
var reTrimStart = /^\s+/;
|
|
4622
|
-
|
|
4623
|
-
/**
|
|
4624
|
-
* The base implementation of `_.trim`.
|
|
4625
|
-
*
|
|
4626
|
-
* @private
|
|
4627
|
-
* @param {string} string The string to trim.
|
|
4628
|
-
* @returns {string} Returns the trimmed string.
|
|
4629
|
-
*/
|
|
4630
|
-
function baseTrim$1(string) {
|
|
4631
|
-
return string
|
|
4632
|
-
? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
|
|
4633
|
-
: string;
|
|
4634
|
-
}
|
|
4635
|
-
|
|
4636
|
-
var _baseTrim = baseTrim$1;
|
|
4637
|
-
|
|
4638
|
-
var root = _root;
|
|
4639
|
-
|
|
4640
|
-
/** Built-in value references. */
|
|
4641
|
-
var Symbol$3 = root.Symbol;
|
|
4642
|
-
|
|
4643
|
-
var _Symbol = Symbol$3;
|
|
4644
|
-
|
|
4645
|
-
var Symbol$2 = _Symbol;
|
|
4646
|
-
|
|
4647
|
-
/** Used for built-in method references. */
|
|
4648
|
-
var objectProto$1 = Object.prototype;
|
|
4649
|
-
|
|
4650
|
-
/** Used to check objects for own properties. */
|
|
4651
|
-
var hasOwnProperty = objectProto$1.hasOwnProperty;
|
|
4652
|
-
|
|
4653
|
-
/**
|
|
4654
|
-
* Used to resolve the
|
|
4655
|
-
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
|
|
4656
|
-
* of values.
|
|
4657
|
-
*/
|
|
4658
|
-
var nativeObjectToString$1 = objectProto$1.toString;
|
|
4659
|
-
|
|
4660
|
-
/** Built-in value references. */
|
|
4661
|
-
var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : undefined;
|
|
4662
|
-
|
|
4663
|
-
/**
|
|
4664
|
-
* A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
|
|
4665
|
-
*
|
|
4666
|
-
* @private
|
|
4667
|
-
* @param {*} value The value to query.
|
|
4668
|
-
* @returns {string} Returns the raw `toStringTag`.
|
|
4669
|
-
*/
|
|
4670
|
-
function getRawTag$1(value) {
|
|
4671
|
-
var isOwn = hasOwnProperty.call(value, symToStringTag$1),
|
|
4672
|
-
tag = value[symToStringTag$1];
|
|
4673
|
-
|
|
4674
|
-
try {
|
|
4675
|
-
value[symToStringTag$1] = undefined;
|
|
4676
|
-
var unmasked = true;
|
|
4677
|
-
} catch (e) {}
|
|
4165
|
+
lastArgs = arguments;
|
|
4166
|
+
lastThis = this;
|
|
4167
|
+
lastCallTime = time;
|
|
4678
4168
|
|
|
4679
|
-
|
|
4680
|
-
|
|
4681
|
-
|
|
4682
|
-
|
|
4683
|
-
|
|
4684
|
-
|
|
4169
|
+
if (isInvoking) {
|
|
4170
|
+
if (timerId === undefined) {
|
|
4171
|
+
return leadingEdge(lastCallTime);
|
|
4172
|
+
}
|
|
4173
|
+
if (maxing) {
|
|
4174
|
+
// Handle invocations in a tight loop.
|
|
4175
|
+
clearTimeout(timerId);
|
|
4176
|
+
timerId = setTimeout(timerExpired, wait);
|
|
4177
|
+
return invokeFunc(lastCallTime);
|
|
4178
|
+
}
|
|
4179
|
+
}
|
|
4180
|
+
if (timerId === undefined) {
|
|
4181
|
+
timerId = setTimeout(timerExpired, wait);
|
|
4685
4182
|
}
|
|
4183
|
+
return result;
|
|
4686
4184
|
}
|
|
4687
|
-
|
|
4185
|
+
debounced.cancel = cancel;
|
|
4186
|
+
debounced.flush = flush;
|
|
4187
|
+
return debounced;
|
|
4688
4188
|
}
|
|
4689
4189
|
|
|
4690
|
-
var
|
|
4190
|
+
var debounce_1 = debounce;
|
|
4691
4191
|
|
|
4692
|
-
|
|
4192
|
+
var css_248z$l = ".gn-composite-bar-highlighted-item {\n position: absolute;\n z-index: 10000;\n display: flex;\n justify-content: center;\n}\n.gn-composite-bar-highlighted-item__icon {\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n border-radius: 7px;\n cursor: pointer;\n background-color: var(--g-color-base-background);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n transform: translateY(1px);\n overflow: hidden;\n box-shadow: 0 8px 20px 0 var(--g-color-sfx-shadow);\n}\n.gn-composite-bar-highlighted-item__icon::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-highlighted-item__icon:hover::before {\n background-color: var(--g-color-base-selection-hover);\n}";
|
|
4193
|
+
styleInject(css_248z$l);
|
|
4693
4194
|
|
|
4694
|
-
|
|
4195
|
+
const b$m = block('composite-bar-highlighted-item');
|
|
4196
|
+
const DEBOUNCE_TIME = 200;
|
|
4197
|
+
const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, openModalSubscriber, }) => {
|
|
4198
|
+
const [{ top, left, width, height }, setPosition] = React.useState({
|
|
4199
|
+
top: 0,
|
|
4200
|
+
left: 0,
|
|
4201
|
+
width: 0,
|
|
4202
|
+
height: 0,
|
|
4203
|
+
});
|
|
4204
|
+
const [isModalOpen, setIsModalOpen] = React.useState(false);
|
|
4205
|
+
const handleResize = React.useCallback(debounce_1(() => {
|
|
4206
|
+
var _a;
|
|
4207
|
+
const { top = 0, left = 0, width = 0, height = 0, } = ((_a = iconRef === null || iconRef === void 0 ? void 0 : iconRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
|
|
4208
|
+
setPosition({
|
|
4209
|
+
top: top + window.scrollY,
|
|
4210
|
+
left: left + window.scrollX,
|
|
4211
|
+
width,
|
|
4212
|
+
height,
|
|
4213
|
+
});
|
|
4214
|
+
}, DEBOUNCE_TIME, { leading: true }), []);
|
|
4215
|
+
React.useEffect(() => {
|
|
4216
|
+
if (!isModalOpen) {
|
|
4217
|
+
return;
|
|
4218
|
+
}
|
|
4219
|
+
handleResize();
|
|
4220
|
+
window.addEventListener('resize', handleResize);
|
|
4221
|
+
return () => window.removeEventListener('resize', handleResize);
|
|
4222
|
+
}, [handleResize, isModalOpen]);
|
|
4223
|
+
openModalSubscriber === null || openModalSubscriber === void 0 ? void 0 : openModalSubscriber((open) => {
|
|
4224
|
+
setIsModalOpen(open);
|
|
4225
|
+
});
|
|
4226
|
+
if (!iconNode || !isModalOpen) {
|
|
4227
|
+
return null;
|
|
4228
|
+
}
|
|
4229
|
+
return (React__default["default"].createElement(uikit.Portal, null,
|
|
4230
|
+
React__default["default"].createElement("div", { className: b$m(), style: { left, top, width, height }, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
|
|
4231
|
+
React__default["default"].createElement("div", { className: b$m('icon') }, iconNode))));
|
|
4232
|
+
};
|
|
4233
|
+
HighlightedItem.displayName = 'HighlightedItem';
|
|
4695
4234
|
|
|
4696
|
-
|
|
4697
|
-
|
|
4698
|
-
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
|
|
4699
|
-
* of values.
|
|
4700
|
-
*/
|
|
4701
|
-
var nativeObjectToString = objectProto.toString;
|
|
4235
|
+
var css_248z$k = ".gn-composite-bar-item {\n --gn-composite-bar-item-action-size: 36px;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n cursor: pointer;\n}\n.gn-composite-bar-item__icon {\n color: var(--g-color-text-misc);\n}\n.gn-footer-item .gn-composite-bar-item__icon, .gn-composite-bar-highlighted-item .gn-composite-bar-item__icon {\n color: var(--gn-aside-header-footer-item-icon-color);\n}\n.gn-composite-bar_subheader .gn-composite-bar-item__icon {\n color: var(--gn-aside-header-subheader-item-icon-color);\n}\n.gn-composite-bar-item__icon-place {\n flex-shrink: 0;\n width: var(--gn-aside-header-min-width);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n.gn-composite-bar-item__title {\n display: flex;\n overflow: hidden;\n}\n.gn-composite-bar-item__title-text {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.gn-composite-bar-item__title-adornment {\n margin: 0 10px;\n}\n.gn-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.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment {\n margin-right: 0;\n}\n.gn-composite-bar-item__menu-divider {\n margin: 0 8px;\n width: 100%;\n border-top: 1px solid var(--g-color-line-generic);\n cursor: default;\n}\n.gn-composite-bar-item__collapse-items-popup-content {\n padding: 4px 0;\n}\n.gn-composite-bar-item__link {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n}\n.gn-composite-bar-item__link, .gn-composite-bar-item__link:hover, .gn-composite-bar-item__link:active, .gn-composite-bar-item__link:visited, .gn-composite-bar-item__link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.gn-composite-bar-item__btn-icon {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.gn-composite-bar-item_type_action {\n justify-content: center;\n height: var(--gn-composite-bar-item-action-size);\n margin: 0 10px 8px;\n background: var(--g-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(--gn-composite-bar-item-action-size);\n transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.gn-composite-bar-item_type_action:focus {\n box-shadow: 0 0 0 2px var(--g-color-line-misc);\n}\n.gn-composite-bar-item_type_action:focus:not(:focus-visible) {\n box-shadow: none;\n}\n.gn-composite-bar-item_type_action:hover {\n background-color: var(--g-color-base-float-hover);\n}\n.gn-composite-bar-item_type_action:active {\n box-shadow: 0 1px 2px var(--g-color-sfx-shadow);\n transition: none;\n transform: scale(0.96);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place {\n width: var(--gn-composite-bar-item-action-size);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n margin-right: 16px;\n}\n.gn-composite-bar-item__icon-tooltip_item-type_action {\n margin-left: 10px;\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular {\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular {\n background-color: var(--g-color-base-simple-hover);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action {\n width: var(--gn-composite-bar-item-action-size);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n margin: 0;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n background-color: var(--g-color-base-simple-hover);\n}";
|
|
4236
|
+
styleInject(css_248z$k);
|
|
4702
4237
|
|
|
4703
|
-
|
|
4704
|
-
|
|
4705
|
-
|
|
4706
|
-
|
|
4707
|
-
|
|
4708
|
-
|
|
4709
|
-
|
|
4710
|
-
|
|
4711
|
-
|
|
4238
|
+
const b$l = block('composite-bar-item');
|
|
4239
|
+
function renderItemTitle(item) {
|
|
4240
|
+
let titleNode = React__default["default"].createElement("div", { className: b$l('title-text') }, item.title);
|
|
4241
|
+
if (item.rightAdornment) {
|
|
4242
|
+
titleNode = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4243
|
+
titleNode,
|
|
4244
|
+
React__default["default"].createElement("div", { className: b$l('title-adornment') }, item.rightAdornment)));
|
|
4245
|
+
}
|
|
4246
|
+
return titleNode;
|
|
4247
|
+
}
|
|
4248
|
+
const defaultPopupPlacement = ['right-end'];
|
|
4249
|
+
const defaultPopupOffset = [-20, 8];
|
|
4250
|
+
const Item$1 = (props) => {
|
|
4251
|
+
const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, onItemClickCapture, bringForward, openModalSubscriber, } = props;
|
|
4252
|
+
const { compact } = useAsideHeaderContext();
|
|
4253
|
+
if (item.type === 'divider') {
|
|
4254
|
+
return React__default["default"].createElement("div", { className: b$l('menu-divider') });
|
|
4255
|
+
}
|
|
4256
|
+
const [open, toggleOpen] = React__default["default"].useState(false);
|
|
4257
|
+
const ref = React__default["default"].useRef(null);
|
|
4258
|
+
const anchorRef = popupAnchor || ref;
|
|
4259
|
+
const highlightedRef = React__default["default"].useRef(null);
|
|
4260
|
+
const type = item.type || ITEM_TYPE_REGULAR;
|
|
4261
|
+
const current = item.current || false;
|
|
4262
|
+
const tooltipText = item.tooltipText || item.title;
|
|
4263
|
+
const icon = item.icon;
|
|
4264
|
+
const iconSize = item.iconSize || ASIDE_HEADER_ICON_SIZE;
|
|
4265
|
+
const collapsedItem = item.id === COLLAPSE_ITEM_ID;
|
|
4266
|
+
const onClose = React__default["default"].useCallback((event) => {
|
|
4267
|
+
var _a;
|
|
4268
|
+
if (event instanceof MouseEvent &&
|
|
4269
|
+
event.target &&
|
|
4270
|
+
((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
4271
|
+
return;
|
|
4272
|
+
}
|
|
4273
|
+
onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
|
|
4274
|
+
}, [onClosePopup]);
|
|
4275
|
+
const makeIconNode = (iconEl) => {
|
|
4276
|
+
return compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$l('icon-tooltip', { 'item-type': type }) },
|
|
4277
|
+
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$l('btn-icon') }, iconEl))) : (iconEl);
|
|
4278
|
+
};
|
|
4279
|
+
const makeNode = ({ icon: iconEl, title: titleEl }) => {
|
|
4280
|
+
const createdNode = (React__default["default"].createElement("div", { className: b$l({ type, current, compact }, className), ref: ref, onClick: (event) => {
|
|
4281
|
+
if (collapsedItem) {
|
|
4282
|
+
/**
|
|
4283
|
+
* If we call onItemClick for collapsedItem then:
|
|
4284
|
+
* - User get unexpected item in onItemClick callback
|
|
4285
|
+
* - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
|
|
4286
|
+
*/
|
|
4287
|
+
toggleOpen(!open);
|
|
4288
|
+
}
|
|
4289
|
+
else {
|
|
4290
|
+
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event);
|
|
4291
|
+
}
|
|
4292
|
+
}, onClickCapture: onItemClickCapture, onMouseEnter: () => {
|
|
4293
|
+
if (!compact) {
|
|
4294
|
+
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
|
|
4295
|
+
}
|
|
4296
|
+
}, onMouseLeave: () => {
|
|
4297
|
+
if (!compact) {
|
|
4298
|
+
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
4299
|
+
}
|
|
4300
|
+
} },
|
|
4301
|
+
React__default["default"].createElement("div", { className: b$l('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
|
|
4302
|
+
React__default["default"].createElement("div", { className: b$l('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
|
|
4303
|
+
renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { contentClassName: b$l('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
|
|
4304
|
+
return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$l('link') }, createdNode)) : (createdNode);
|
|
4305
|
+
};
|
|
4306
|
+
const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$l('icon') }) : null;
|
|
4307
|
+
const titleNode = renderItemTitle(item);
|
|
4308
|
+
const params = { icon: iconNode, title: titleNode };
|
|
4309
|
+
let node;
|
|
4310
|
+
const opts = { compact, collapsed: false, item, ref };
|
|
4311
|
+
if (typeof item.itemWrapper === 'function') {
|
|
4312
|
+
node = item.itemWrapper(params, makeNode, opts);
|
|
4313
|
+
}
|
|
4314
|
+
else {
|
|
4315
|
+
node = makeNode(params);
|
|
4316
|
+
}
|
|
4317
|
+
const highlightedNode = makeIconNode(iconNode);
|
|
4318
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4319
|
+
bringForward && (React__default["default"].createElement(HighlightedItem, { iconNode: highlightedNode, iconRef: highlightedRef, onClick: (event) => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event), onClickCapture: onItemClickCapture, openModalSubscriber: openModalSubscriber })),
|
|
4320
|
+
node,
|
|
4321
|
+
open && collapsedItem && (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(CollapsedPopup, Object.assign({}, props, { anchorRef: ref, onClose: () => toggleOpen(false) })))));
|
|
4322
|
+
};
|
|
4323
|
+
Item$1.displayName = 'Item';
|
|
4324
|
+
function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
|
|
4325
|
+
const { compact } = useAsideHeaderContext();
|
|
4326
|
+
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 },
|
|
4327
|
+
React__default["default"].createElement("div", { className: b$l('collapse-items-popup-content') },
|
|
4328
|
+
React__default["default"].createElement(uikit.List, { itemClassName: b$l('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
|
|
4329
|
+
const makeCollapseNode = ({ title: titleEl }) => {
|
|
4330
|
+
const res = (React__default["default"].createElement("div", { className: b$l('collapse-item'), onClick: (event) => {
|
|
4331
|
+
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true, event);
|
|
4332
|
+
} }, titleEl));
|
|
4333
|
+
return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$l('link') }, res)) : (res);
|
|
4334
|
+
};
|
|
4335
|
+
const titleNode = renderItemTitle(collapseItem);
|
|
4336
|
+
const params = { title: titleNode };
|
|
4337
|
+
const opts = { compact, collapsed: true, item: collapseItem, ref: anchorRef };
|
|
4338
|
+
if (typeof collapseItem.itemWrapper === 'function') {
|
|
4339
|
+
return collapseItem.itemWrapper(params, makeCollapseNode, opts);
|
|
4340
|
+
}
|
|
4341
|
+
else {
|
|
4342
|
+
return makeCollapseNode(params);
|
|
4343
|
+
}
|
|
4344
|
+
} })))) : null;
|
|
4712
4345
|
}
|
|
4713
4346
|
|
|
4714
|
-
|
|
4347
|
+
const multipleTooltipContextDefaults = {
|
|
4348
|
+
active: false,
|
|
4349
|
+
activeIndex: undefined,
|
|
4350
|
+
hideCollapseItemTooltip: false,
|
|
4351
|
+
lastClickedItemIndex: undefined,
|
|
4352
|
+
setValue: () => { },
|
|
4353
|
+
};
|
|
4354
|
+
const MultipleTooltipContext = React__default["default"].createContext(multipleTooltipContextDefaults);
|
|
4355
|
+
class MultipleTooltipProvider extends React__default["default"].PureComponent {
|
|
4356
|
+
constructor() {
|
|
4357
|
+
super(...arguments);
|
|
4358
|
+
this.state = Object.assign({}, multipleTooltipContextDefaults);
|
|
4359
|
+
this.setValue = (value) => {
|
|
4360
|
+
this.setState(Object.assign({}, value));
|
|
4361
|
+
};
|
|
4362
|
+
}
|
|
4363
|
+
render() {
|
|
4364
|
+
const { children } = this.props;
|
|
4365
|
+
return (React__default["default"].createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
|
|
4366
|
+
}
|
|
4367
|
+
}
|
|
4715
4368
|
|
|
4716
|
-
var
|
|
4717
|
-
|
|
4718
|
-
objectToString = _objectToString;
|
|
4369
|
+
var css_248z$j = ".g-root_theme_dark .gn-multiple-tooltip,\n.g-root_theme_dark-hc .gn-multiple-tooltip {\n --multiple-tooltip-item-bg-color: #424147;\n --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n --multiple-tooltip-backdrop-background: linear-gradient(\n 90deg,\n #313036 0%,\n rgba(49, 48, 54, 0.3) 100%\n );\n --multiple-tooltip-backdrop-filter: blur(16px);\n}\n\n.g-root_theme_light .gn-multiple-tooltip,\n.g-root_theme_light-hc .gn-multiple-tooltip {\n --multiple-tooltip-item-bg-color: #7a7a7a;\n --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n --multiple-tooltip-backdrop-background: linear-gradient(\n 90deg,\n #ffffff 0%,\n rgba(255, 255, 255, 0.3) 100%\n );\n --multiple-tooltip-backdrop-filter: blur(12px);\n}\n\n.gn-multiple-tooltip {\n background-color: transparent;\n box-shadow: none;\n}\n.gn-multiple-tooltip::before {\n content: \"\";\n box-shadow: none;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n background: var(--multiple-tooltip-backdrop-background);\n filter: var(--multiple-tooltip-backdrop-filter);\n}\n.gn-multiple-tooltip__items-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 32px 40px 32px 12px;\n}\n.gn-multiple-tooltip__item {\n display: flex;\n box-sizing: border-box;\n height: 30px;\n padding: 8px 12px;\n background-color: var(--multiple-tooltip-item-bg-color);\n position: relative;\n border-radius: 5px;\n align-items: center;\n color: var(--g-color-text-light-primary);\n margin-bottom: 5px;\n transition: transform 100ms ease-in-out;\n}\n.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider), .gn-multiple-tooltip__item:first-child {\n margin-top: 5px;\n}\n.gn-multiple-tooltip__item_divider + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) {\n margin-top: 4px;\n}\n.gn-multiple-tooltip__item_active {\n background-color: var(--multiple-tooltip-item-active-bg-color);\n transform: translateX(-12px);\n}\n.gn-multiple-tooltip__item_divider {\n height: 15px;\n visibility: hidden;\n margin: 0;\n}";
|
|
4370
|
+
styleInject(css_248z$j);
|
|
4719
4371
|
|
|
4720
|
-
|
|
4721
|
-
|
|
4722
|
-
|
|
4372
|
+
const b$k = block('multiple-tooltip');
|
|
4373
|
+
const POPUP_OFFSET = [-32, 4];
|
|
4374
|
+
const POPUP_MODIFIERS = [
|
|
4375
|
+
{
|
|
4376
|
+
name: 'preventOverflow',
|
|
4377
|
+
enabled: false,
|
|
4378
|
+
},
|
|
4379
|
+
];
|
|
4380
|
+
const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
|
|
4381
|
+
const { activeIndex, hideCollapseItemTooltip } = React__default["default"].useContext(MultipleTooltipContext);
|
|
4382
|
+
const activeItem = activeIndex === undefined ? null : items[activeIndex];
|
|
4383
|
+
return (React__default["default"].createElement(uikit.Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$k(null), modifiers: POPUP_MODIFIERS },
|
|
4384
|
+
React__default["default"].createElement("div", { className: b$k('items-container') }, items
|
|
4385
|
+
.filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
|
|
4386
|
+
(id !== COLLAPSE_ITEM_ID && type !== 'action'))
|
|
4387
|
+
.map((item, idx) => {
|
|
4388
|
+
switch (item.type) {
|
|
4389
|
+
case 'divider':
|
|
4390
|
+
return (React__default["default"].createElement("div", { className: b$k('item', { divider: true }), key: idx }, item.title));
|
|
4391
|
+
default:
|
|
4392
|
+
return (React__default["default"].createElement("div", { className: b$k('item', {
|
|
4393
|
+
active: item === activeItem,
|
|
4394
|
+
}), key: idx }, item.title));
|
|
4395
|
+
}
|
|
4396
|
+
}))));
|
|
4397
|
+
};
|
|
4723
4398
|
|
|
4724
|
-
|
|
4725
|
-
|
|
4399
|
+
var css_248z$i = ".gn-composite-bar {\n flex: 1 0 auto;\n width: 100%;\n min-height: 40px;\n}\n.gn-composite-bar .gn-composite-bar__root-menu-item[class] {\n background-color: transparent;\n}";
|
|
4400
|
+
styleInject(css_248z$i);
|
|
4726
4401
|
|
|
4727
|
-
|
|
4728
|
-
|
|
4729
|
-
|
|
4730
|
-
|
|
4731
|
-
|
|
4732
|
-
|
|
4733
|
-
|
|
4734
|
-
function
|
|
4735
|
-
|
|
4736
|
-
|
|
4737
|
-
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
|
|
4741
|
-
|
|
4402
|
+
const b$j = block('composite-bar');
|
|
4403
|
+
const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
|
|
4404
|
+
const ref = React.useRef(null);
|
|
4405
|
+
const tooltipRef = React.useRef(null);
|
|
4406
|
+
const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = React.useContext(MultipleTooltipContext);
|
|
4407
|
+
const { compact } = useAsideHeaderContext();
|
|
4408
|
+
React__default["default"].useEffect(() => {
|
|
4409
|
+
function handleBlurWindow() {
|
|
4410
|
+
if (multipleTooltip && multipleTooltipActive) {
|
|
4411
|
+
setMultipleTooltipContextValue({ active: false });
|
|
4412
|
+
}
|
|
4413
|
+
}
|
|
4414
|
+
window.addEventListener('blur', handleBlurWindow);
|
|
4415
|
+
return () => {
|
|
4416
|
+
window.removeEventListener('blur', handleBlurWindow);
|
|
4417
|
+
};
|
|
4418
|
+
}, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
4419
|
+
const onTooltipMouseEnter = React.useCallback((e) => {
|
|
4420
|
+
if (multipleTooltip &&
|
|
4421
|
+
compact &&
|
|
4422
|
+
!multipleTooltipActive &&
|
|
4423
|
+
document.hasFocus() &&
|
|
4424
|
+
activeIndex !== lastClickedItemIndex &&
|
|
4425
|
+
e.clientX <= ASIDE_HEADER_COMPACT_WIDTH) {
|
|
4426
|
+
setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
|
|
4427
|
+
active: true,
|
|
4428
|
+
});
|
|
4429
|
+
}
|
|
4430
|
+
}, [
|
|
4431
|
+
multipleTooltip,
|
|
4432
|
+
compact,
|
|
4433
|
+
multipleTooltipActive,
|
|
4434
|
+
activeIndex,
|
|
4435
|
+
lastClickedItemIndex,
|
|
4436
|
+
setMultipleTooltipContextValue,
|
|
4437
|
+
]);
|
|
4438
|
+
const onTooltipMouseLeave = React.useCallback(() => {
|
|
4439
|
+
if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
|
|
4440
|
+
setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
|
|
4441
|
+
active: false,
|
|
4442
|
+
lastClickedItemIndex: undefined,
|
|
4443
|
+
});
|
|
4444
|
+
}
|
|
4445
|
+
}, [multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
4446
|
+
const onMouseEnterByIndex = React.useCallback((itemIndex) => () => {
|
|
4447
|
+
if (multipleTooltip) {
|
|
4448
|
+
let multipleTooltipActiveValue = multipleTooltipActive;
|
|
4449
|
+
if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
|
|
4450
|
+
multipleTooltipActiveValue = true;
|
|
4451
|
+
}
|
|
4452
|
+
if (activeIndex === itemIndex &&
|
|
4453
|
+
multipleTooltipActive === multipleTooltipActiveValue) {
|
|
4454
|
+
return;
|
|
4455
|
+
}
|
|
4456
|
+
setMultipleTooltipContextValue({
|
|
4457
|
+
activeIndex: itemIndex,
|
|
4458
|
+
active: multipleTooltipActiveValue,
|
|
4459
|
+
});
|
|
4460
|
+
}
|
|
4461
|
+
}, [multipleTooltipActive, activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
|
|
4462
|
+
const onMouseLeave = React.useCallback(() => {
|
|
4463
|
+
var _a;
|
|
4464
|
+
if (compact) {
|
|
4465
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
4466
|
+
if (multipleTooltip &&
|
|
4467
|
+
(activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
|
|
4468
|
+
setMultipleTooltipContextValue({
|
|
4469
|
+
activeIndex: undefined,
|
|
4470
|
+
lastClickedItemIndex: undefined,
|
|
4471
|
+
});
|
|
4472
|
+
}
|
|
4473
|
+
}
|
|
4474
|
+
}, [activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
|
|
4475
|
+
const onItemClickByIndex = React.useCallback((itemIndex) => (item, collapsed, event) => {
|
|
4476
|
+
if (compact &&
|
|
4477
|
+
multipleTooltip &&
|
|
4478
|
+
itemIndex !== lastClickedItemIndex &&
|
|
4479
|
+
item.id !== COLLAPSE_ITEM_ID) {
|
|
4480
|
+
setMultipleTooltipContextValue({
|
|
4481
|
+
lastClickedItemIndex: itemIndex,
|
|
4482
|
+
active: false,
|
|
4483
|
+
});
|
|
4484
|
+
}
|
|
4485
|
+
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
|
|
4486
|
+
}, [lastClickedItemIndex, setMultipleTooltipContextValue]);
|
|
4487
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4488
|
+
React__default["default"].createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
4489
|
+
React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$j('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
|
|
4490
|
+
const itemExtraProps = isMenuItem(item) ? { item } : item;
|
|
4491
|
+
const enableTooltip = isMenuItem(item)
|
|
4492
|
+
? !multipleTooltip
|
|
4493
|
+
: item.enableTooltip;
|
|
4494
|
+
return (React__default["default"].createElement(Item$1, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), collapseItems: collapseItems })));
|
|
4495
|
+
} })),
|
|
4496
|
+
type === 'menu' && (React__default["default"].createElement(MultipleTooltip, { open: compact && multipleTooltip && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
|
|
4497
|
+
};
|
|
4498
|
+
const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip = false, }) => {
|
|
4499
|
+
if (items.length === 0) {
|
|
4500
|
+
return null;
|
|
4501
|
+
}
|
|
4502
|
+
let node;
|
|
4503
|
+
if (type === 'menu') {
|
|
4504
|
+
const minHeight = getItemsMinHeight(items);
|
|
4505
|
+
const collapseItem = getMoreButtonItem(menuMoreTitle);
|
|
4506
|
+
node = (React__default["default"].createElement("div", { className: b$j({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
|
|
4507
|
+
const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
|
|
4508
|
+
return (React__default["default"].createElement("div", { style: { width, height } },
|
|
4509
|
+
React__default["default"].createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
4510
|
+
}))));
|
|
4511
|
+
}
|
|
4512
|
+
else {
|
|
4513
|
+
node = (React__default["default"].createElement("div", { className: b$j({ subheader: true }) },
|
|
4514
|
+
React__default["default"].createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
|
|
4515
|
+
}
|
|
4516
|
+
return React__default["default"].createElement(MultipleTooltipProvider, null, node);
|
|
4517
|
+
};
|
|
4742
4518
|
|
|
4743
|
-
|
|
4519
|
+
/* Used by renderContent AsideHeader prop */
|
|
4520
|
+
const RenderContent = React__default["default"].memo(({ renderContent, size }) => {
|
|
4521
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, renderContent({ size }));
|
|
4522
|
+
});
|
|
4523
|
+
RenderContent.displayName = 'RenderContent';
|
|
4524
|
+
const Content = ({ size, // TODO: move to context when MobileHeader will support it
|
|
4525
|
+
className, cssSizeVariableName = '--gn-aside-header-size', renderContent, }) => {
|
|
4526
|
+
return (React__default["default"].createElement("div", { className: className, style: Object.assign({}, { [cssSizeVariableName]: `${size}px` }) }, typeof renderContent === 'function' && (React__default["default"].createElement(RenderContent, { size: size, renderContent: renderContent }))));
|
|
4527
|
+
};
|
|
4744
4528
|
|
|
4745
|
-
|
|
4746
|
-
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
* @memberOf _
|
|
4751
|
-
* @since 4.0.0
|
|
4752
|
-
* @category Lang
|
|
4753
|
-
* @param {*} value The value to check.
|
|
4754
|
-
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
|
|
4755
|
-
* @example
|
|
4756
|
-
*
|
|
4757
|
-
* _.isObjectLike({});
|
|
4758
|
-
* // => true
|
|
4759
|
-
*
|
|
4760
|
-
* _.isObjectLike([1, 2, 3]);
|
|
4761
|
-
* // => true
|
|
4762
|
-
*
|
|
4763
|
-
* _.isObjectLike(_.noop);
|
|
4764
|
-
* // => false
|
|
4765
|
-
*
|
|
4766
|
-
* _.isObjectLike(null);
|
|
4767
|
-
* // => false
|
|
4768
|
-
*/
|
|
4529
|
+
function fakeDisplayName(newDisplayName, Component) {
|
|
4530
|
+
const Fake = (props) => React__default["default"].createElement(Component, Object.assign({}, props));
|
|
4531
|
+
Fake.displayName = newDisplayName;
|
|
4532
|
+
return Fake;
|
|
4533
|
+
}
|
|
4769
4534
|
|
|
4770
|
-
|
|
4771
|
-
|
|
4535
|
+
const PARAM_REGEXP = /{{(.*?)}}/g;
|
|
4536
|
+
function replaceParams(keyValue, params) {
|
|
4537
|
+
let result = '';
|
|
4538
|
+
let lastIndex = (PARAM_REGEXP.lastIndex = 0);
|
|
4539
|
+
let match;
|
|
4540
|
+
while ((match = PARAM_REGEXP.exec(keyValue))) {
|
|
4541
|
+
if (lastIndex !== match.index) {
|
|
4542
|
+
result += keyValue.slice(lastIndex, match.index);
|
|
4543
|
+
}
|
|
4544
|
+
lastIndex = PARAM_REGEXP.lastIndex;
|
|
4545
|
+
const [all, key] = match;
|
|
4546
|
+
if (Object.prototype.hasOwnProperty.call(params, key)) {
|
|
4547
|
+
result += params[key];
|
|
4548
|
+
}
|
|
4549
|
+
else {
|
|
4550
|
+
result += all;
|
|
4551
|
+
}
|
|
4552
|
+
}
|
|
4553
|
+
if (lastIndex < keyValue.length) {
|
|
4554
|
+
result += keyValue.slice(lastIndex);
|
|
4555
|
+
}
|
|
4556
|
+
return result;
|
|
4772
4557
|
}
|
|
4773
4558
|
|
|
4774
|
-
var
|
|
4559
|
+
var PluralForm;
|
|
4560
|
+
(function (PluralForm) {
|
|
4561
|
+
PluralForm[PluralForm["One"] = 0] = "One";
|
|
4562
|
+
PluralForm[PluralForm["Few"] = 1] = "Few";
|
|
4563
|
+
PluralForm[PluralForm["Many"] = 2] = "Many";
|
|
4564
|
+
PluralForm[PluralForm["None"] = 3] = "None";
|
|
4565
|
+
})(PluralForm || (PluralForm = {}));
|
|
4775
4566
|
|
|
4776
|
-
|
|
4777
|
-
|
|
4567
|
+
function pluralizerEn (count, pluralForms) {
|
|
4568
|
+
if (count === 0) {
|
|
4569
|
+
return pluralForms.None;
|
|
4570
|
+
}
|
|
4571
|
+
if (count === 1 || count === -1) {
|
|
4572
|
+
return pluralForms.One;
|
|
4573
|
+
}
|
|
4574
|
+
return pluralForms.Many;
|
|
4575
|
+
}
|
|
4778
4576
|
|
|
4779
|
-
|
|
4780
|
-
|
|
4577
|
+
function pluralizerRu (count, pluralForms) {
|
|
4578
|
+
// the rules for negative numbers are the same
|
|
4579
|
+
const lastDigit = Math.abs(count % 10);
|
|
4580
|
+
const last2Digits = Math.abs(count % 100);
|
|
4581
|
+
if (count === 0) {
|
|
4582
|
+
return pluralForms.None;
|
|
4583
|
+
}
|
|
4584
|
+
if (lastDigit === 1 && last2Digits !== 11) {
|
|
4585
|
+
return pluralForms.One;
|
|
4586
|
+
}
|
|
4587
|
+
if ((lastDigit > 1 && lastDigit < 5) && (last2Digits < 10 || last2Digits > 20)) {
|
|
4588
|
+
return pluralForms.Few;
|
|
4589
|
+
}
|
|
4590
|
+
return pluralForms.Many;
|
|
4591
|
+
}
|
|
4781
4592
|
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4787
|
-
|
|
4788
|
-
|
|
4789
|
-
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
|
|
4797
|
-
|
|
4798
|
-
|
|
4799
|
-
|
|
4800
|
-
|
|
4801
|
-
|
|
4593
|
+
class I18N {
|
|
4594
|
+
constructor(options) {
|
|
4595
|
+
this.data = {};
|
|
4596
|
+
this.lang = undefined;
|
|
4597
|
+
this.pluralizers = {
|
|
4598
|
+
en: pluralizerEn,
|
|
4599
|
+
ru: pluralizerRu,
|
|
4600
|
+
};
|
|
4601
|
+
this.logger = null;
|
|
4602
|
+
this.logger = (options === null || options === void 0 ? void 0 : options.logger) || null;
|
|
4603
|
+
}
|
|
4604
|
+
setLang(lang) {
|
|
4605
|
+
this.lang = lang;
|
|
4606
|
+
}
|
|
4607
|
+
configurePluralization(pluralizers) {
|
|
4608
|
+
this.pluralizers = Object.assign({}, this.pluralizers, pluralizers);
|
|
4609
|
+
}
|
|
4610
|
+
registerKeyset(lang, keysetName, data = {}) {
|
|
4611
|
+
if (this.data[lang] && Object.prototype.hasOwnProperty.call(this.data[lang], keysetName)) {
|
|
4612
|
+
throw new Error(`Keyset '${keysetName}' is already registered, aborting!`);
|
|
4613
|
+
}
|
|
4614
|
+
this.data[lang] = Object.assign({}, this.data[lang], { [keysetName]: data });
|
|
4615
|
+
}
|
|
4616
|
+
registerKeysets(lang, data) {
|
|
4617
|
+
Object.keys(data).forEach((keysetName) => {
|
|
4618
|
+
this.registerKeyset(lang, keysetName, data[keysetName]);
|
|
4619
|
+
});
|
|
4620
|
+
}
|
|
4621
|
+
has(keysetName, key, lang) {
|
|
4622
|
+
const languageData = this.getLanguageData(lang);
|
|
4623
|
+
return Boolean(languageData && languageData[keysetName] && languageData[keysetName][key]);
|
|
4624
|
+
}
|
|
4625
|
+
i18n(keysetName, key, params) {
|
|
4626
|
+
const languageData = this.getLanguageData(this.lang);
|
|
4627
|
+
if (typeof languageData === 'undefined') {
|
|
4628
|
+
throw new Error(`Language '${this.lang}' is not defined, make sure you call setLang for the same language you called registerKeysets for!`);
|
|
4629
|
+
}
|
|
4630
|
+
if (Object.keys(languageData).length === 0) {
|
|
4631
|
+
this.warn('Language data is empty.');
|
|
4632
|
+
return key;
|
|
4633
|
+
}
|
|
4634
|
+
const keyset = languageData[keysetName];
|
|
4635
|
+
if (!keyset) {
|
|
4636
|
+
this.warn('Keyset not found.', keysetName);
|
|
4637
|
+
return key;
|
|
4638
|
+
}
|
|
4639
|
+
if (Object.keys(keyset).length === 0) {
|
|
4640
|
+
this.warn('Keyset is empty.', keysetName);
|
|
4641
|
+
return key;
|
|
4642
|
+
}
|
|
4643
|
+
const keyValue = keyset && keyset[key];
|
|
4644
|
+
let result;
|
|
4645
|
+
if (typeof keyValue === 'undefined') {
|
|
4646
|
+
this.warn('Missing key.', keysetName, key);
|
|
4647
|
+
return key;
|
|
4648
|
+
}
|
|
4649
|
+
if (Array.isArray(keyValue)) {
|
|
4650
|
+
if (keyValue.length < 3) {
|
|
4651
|
+
this.warn('Missing required plurals', keysetName, key);
|
|
4652
|
+
return key;
|
|
4653
|
+
}
|
|
4654
|
+
const count = Number(params === null || params === void 0 ? void 0 : params.count);
|
|
4655
|
+
if (Number.isNaN(count)) {
|
|
4656
|
+
this.warn('Missing params.count for key.', keysetName, key);
|
|
4657
|
+
return key;
|
|
4658
|
+
}
|
|
4659
|
+
const pluralizer = this.getLanguagePluralizer(this.lang);
|
|
4660
|
+
result = keyValue[pluralizer(count, PluralForm)] || keyValue[PluralForm.Many];
|
|
4661
|
+
if (keyValue[PluralForm.None] === undefined) {
|
|
4662
|
+
this.warn('Missing key for 0', keysetName, key);
|
|
4663
|
+
}
|
|
4664
|
+
}
|
|
4665
|
+
else {
|
|
4666
|
+
result = keyValue;
|
|
4667
|
+
}
|
|
4668
|
+
if (params) {
|
|
4669
|
+
result = replaceParams(result, params);
|
|
4670
|
+
}
|
|
4671
|
+
return result;
|
|
4672
|
+
}
|
|
4673
|
+
keyset(keysetName) {
|
|
4674
|
+
return (key, params) => {
|
|
4675
|
+
return this.i18n(keysetName, key, params);
|
|
4676
|
+
};
|
|
4677
|
+
}
|
|
4678
|
+
warn(msg, keyset, key) {
|
|
4679
|
+
var _a;
|
|
4680
|
+
let cacheKey = '';
|
|
4681
|
+
if (keyset) {
|
|
4682
|
+
cacheKey += keyset;
|
|
4683
|
+
if (key) {
|
|
4684
|
+
cacheKey += `.${key}`;
|
|
4685
|
+
}
|
|
4686
|
+
}
|
|
4687
|
+
else {
|
|
4688
|
+
cacheKey = 'languageData';
|
|
4689
|
+
}
|
|
4690
|
+
(_a = this.logger) === null || _a === void 0 ? void 0 : _a.log(`I18n: ${msg}`, {
|
|
4691
|
+
level: 'info',
|
|
4692
|
+
logger: cacheKey,
|
|
4693
|
+
extra: {
|
|
4694
|
+
type: 'i18n'
|
|
4695
|
+
}
|
|
4696
|
+
});
|
|
4697
|
+
}
|
|
4698
|
+
getLanguageData(lang) {
|
|
4699
|
+
const langCode = lang || this.lang;
|
|
4700
|
+
return langCode ? this.data[langCode] : undefined;
|
|
4701
|
+
}
|
|
4702
|
+
getLanguagePluralizer(lang) {
|
|
4703
|
+
const pluralizer = lang ? this.pluralizers[lang] : undefined;
|
|
4704
|
+
if (!pluralizer) {
|
|
4705
|
+
this.warn(`Pluralization is not configured for language '${lang}', falling back to the english ruleset`);
|
|
4706
|
+
}
|
|
4707
|
+
return pluralizer || pluralizerEn;
|
|
4708
|
+
}
|
|
4802
4709
|
}
|
|
4803
4710
|
|
|
4804
|
-
|
|
4711
|
+
exports.Lang = void 0;
|
|
4712
|
+
(function (Lang) {
|
|
4713
|
+
Lang["Ru"] = "ru";
|
|
4714
|
+
Lang["En"] = "en";
|
|
4715
|
+
})(exports.Lang || (exports.Lang = {}));
|
|
4716
|
+
let subs = [];
|
|
4717
|
+
const config = {
|
|
4718
|
+
lang: exports.Lang.En,
|
|
4719
|
+
};
|
|
4720
|
+
const configure = (newConfig) => {
|
|
4721
|
+
Object.assign(config, newConfig);
|
|
4722
|
+
subs.forEach((sub) => {
|
|
4723
|
+
sub(config);
|
|
4724
|
+
});
|
|
4725
|
+
};
|
|
4726
|
+
const subscribeConfigure = (sub) => {
|
|
4727
|
+
subs.push(sub);
|
|
4728
|
+
return () => {
|
|
4729
|
+
subs = subs.filter((item) => item !== sub);
|
|
4730
|
+
};
|
|
4731
|
+
};
|
|
4732
|
+
const getConfig = () => config;
|
|
4805
4733
|
|
|
4806
|
-
|
|
4807
|
-
|
|
4808
|
-
|
|
4734
|
+
const i18n$4 = new I18N();
|
|
4735
|
+
i18n$4.setLang(getConfig().lang);
|
|
4736
|
+
subscribeConfigure((config) => {
|
|
4737
|
+
i18n$4.setLang(config.lang);
|
|
4738
|
+
});
|
|
4739
|
+
|
|
4740
|
+
function registerKeyset(data, keysetName) {
|
|
4741
|
+
Object.entries(data).forEach(([lang, keys]) => i18n$4.registerKeyset(lang, keysetName, keys));
|
|
4742
|
+
return i18n$4.keyset(keysetName);
|
|
4743
|
+
}
|
|
4744
|
+
|
|
4745
|
+
var button_collapse$1 = "Collapse";
|
|
4746
|
+
var button_expand$1 = "Expand";
|
|
4747
|
+
var label_more$1 = "More";
|
|
4748
|
+
var en$3 = {
|
|
4749
|
+
button_collapse: button_collapse$1,
|
|
4750
|
+
button_expand: button_expand$1,
|
|
4751
|
+
label_more: label_more$1
|
|
4752
|
+
};
|
|
4809
4753
|
|
|
4810
|
-
|
|
4811
|
-
var
|
|
4754
|
+
var button_collapse = "Свернуть";
|
|
4755
|
+
var button_expand = "Развернуть";
|
|
4756
|
+
var label_more = "Ещё";
|
|
4757
|
+
var ru$3 = {
|
|
4758
|
+
button_collapse: button_collapse,
|
|
4759
|
+
button_expand: button_expand,
|
|
4760
|
+
label_more: label_more
|
|
4761
|
+
};
|
|
4812
4762
|
|
|
4813
|
-
|
|
4814
|
-
var
|
|
4763
|
+
const COMPONENT$3 = 'AsideHeader';
|
|
4764
|
+
var i18n$3 = registerKeyset({ en: en$3, ru: ru$3 }, COMPONENT$3);
|
|
4815
4765
|
|
|
4816
|
-
|
|
4817
|
-
var
|
|
4766
|
+
var _path$1;
|
|
4767
|
+
function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
|
|
4768
|
+
var SvgControlMenuButton = function SvgControlMenuButton(props) {
|
|
4769
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
4770
|
+
width: 8,
|
|
4771
|
+
height: 8,
|
|
4772
|
+
viewBox: "0 0 8 8",
|
|
4773
|
+
fill: "currentColor",
|
|
4774
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
4775
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
4776
|
+
d: "m.72 7.64 6.39-3.2a.5.5 0 0 0 0-.89L.72.36A.5.5 0 0 0 0 .81v6.38c0 .37.4.61.72.45Z"
|
|
4777
|
+
})));
|
|
4778
|
+
};
|
|
4779
|
+
var controlMenuButtonIcon = SvgControlMenuButton;
|
|
4818
4780
|
|
|
4819
|
-
|
|
4820
|
-
var
|
|
4781
|
+
var _path;
|
|
4782
|
+
function _extends() { _extends = 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.apply(this, arguments); }
|
|
4783
|
+
var SvgDividerCollapsed = function SvgDividerCollapsed(props) {
|
|
4784
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
4785
|
+
width: 56,
|
|
4786
|
+
height: 29,
|
|
4787
|
+
viewBox: "0 0 56 29",
|
|
4788
|
+
fill: "currentColor",
|
|
4789
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
4790
|
+
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
4791
|
+
d: "M56 0v29c-.8-1-7-6.1-17.7-8.4L13 15.7A16 16 0 0 1 0 0Z"
|
|
4792
|
+
})));
|
|
4793
|
+
};
|
|
4794
|
+
var headerDividerCollapsedIcon = SvgDividerCollapsed;
|
|
4821
4795
|
|
|
4822
|
-
|
|
4823
|
-
|
|
4796
|
+
var css_248z$h = ".g-root {\n --gn-aside-header-background-color: var(--g-color-base-warning-light);\n --gn-aside-header-collapse-button-divider-line-color: var(\n --gn-aside-header-subheader-divider-line-color\n );\n --gn-aside-header-footer-item-icon-color: var(--g-color-text-primary);\n --gn-aside-header-subheader-item-icon-color: var(--g-color-text-primary);\n --gn-aside-header-item-icon-background-size: 38px;\n}\n\n.g-root_theme_light,\n.g-root_theme_light-hc {\n --gn-aside-header-divider-line-color: transparent;\n --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic);\n}\n\n.g-root_theme_dark,\n.g-root_theme_dark-hc {\n --gn-aside-header-divider-line-color: var(--g-color-line-generic-solid);\n --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic-solid);\n}\n\n.gn-aside-header {\n --gn-aside-header-min-width: 56px;\n height: 100%;\n width: 100%;\n position: relative;\n background-color: var(--g-color-base-background);\n}\n.gn-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(--g-color-base-background);\n z-index: 100;\n box-sizing: border-box;\n}\n.gn-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(--gn-aside-header-divider-line-color);\n}\n.gn-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.gn-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.gn-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.gn-aside-header__aside-content > .gn-aside-header-logo {\n margin: 8px 0;\n}\n.gn-aside-header__aside-content_with-decoration {\n background: linear-gradient(180deg, var(--gn-aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.gn-aside-header_compact .gn-aside-header__aside-content {\n background: transparent;\n}\n.gn-aside-header__header {\n --gn-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.gn-aside-header__header .gn-aside-header__header-divider {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -2;\n display: none;\n color: var(--gn-aside-header-background-color);\n}\n.gn-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(--gn-aside-header-header-divider-height));\n content: \"\";\n background-color: var(--gn-aside-header-background-color);\n}\n.gn-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(--gn-aside-header-subheader-divider-line-color);\n}\n.gn-aside-header_compact .gn-aside-header__header::before {\n display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider {\n display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration::after {\n display: none;\n}\n.gn-aside-header__menu-items {\n flex-grow: 1;\n}\n.gn-aside-header__footer {\n flex-shrink: 0;\n width: 100%;\n margin: 8px 0;\n display: flex;\n flex-direction: column;\n}\n.gn-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.gn-aside-header__panel {\n height: 100%;\n}\n.gn-aside-header__pane-container {\n display: flex;\n outline: none;\n overflow: visible;\n user-select: text;\n flex-direction: row;\n}\n.gn-aside-header__content {\n width: calc(100% - var(--gn-aside-header-size));\n z-index: 95;\n}\n.gn-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(--gn-aside-header-collapse-button-divider-line-color);\n margin-top: auto;\n}\n.gn-aside-header__collapse-button > .yc-button__text {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n}\n.gn-aside-header__collapse-button:not(.gn-aside-header__collapse-button_compact) .gn-aside-header__collapse-icon {\n transform: rotate(180deg);\n}\n.gn-aside-header__collapse-button .gn-aside-header__collapse-icon {\n color: var(--g-color-text-secondary);\n}\n.gn-aside-header__collapse-button:hover .gn-aside-header__collapse-icon {\n color: var(--g-color-text-primary);\n}";
|
|
4797
|
+
styleInject(css_248z$h);
|
|
4824
4798
|
|
|
4825
|
-
|
|
4826
|
-
|
|
4827
|
-
|
|
4828
|
-
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
4833
|
-
|
|
4834
|
-
|
|
4835
|
-
|
|
4836
|
-
|
|
4837
|
-
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
|
|
4842
|
-
|
|
4843
|
-
|
|
4844
|
-
|
|
4845
|
-
|
|
4846
|
-
|
|
4847
|
-
|
|
4848
|
-
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
|
|
4853
|
-
|
|
4854
|
-
|
|
4855
|
-
|
|
4856
|
-
|
|
4857
|
-
|
|
4858
|
-
|
|
4859
|
-
|
|
4860
|
-
|
|
4861
|
-
|
|
4862
|
-
|
|
4863
|
-
|
|
4864
|
-
|
|
4865
|
-
|
|
4866
|
-
|
|
4799
|
+
// TODO: remove temporary fix for expand button
|
|
4800
|
+
const NotIcon = fakeDisplayName('NotIcon', uikit.Icon);
|
|
4801
|
+
const b$i = block('aside-header');
|
|
4802
|
+
class AsideHeader extends React__default["default"].Component {
|
|
4803
|
+
constructor() {
|
|
4804
|
+
super(...arguments);
|
|
4805
|
+
this.asideRef = React__default["default"].createRef();
|
|
4806
|
+
this.renderFirstPane = (size) => {
|
|
4807
|
+
const { menuItems, panelItems, headerDecoration, multipleTooltip, menuMoreTitle } = this.props;
|
|
4808
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
4809
|
+
React__default["default"].createElement("div", { className: b$i('aside'), style: { width: size } },
|
|
4810
|
+
React__default["default"].createElement("div", { className: b$i('aside-popup-anchor'), ref: this.asideRef }),
|
|
4811
|
+
React__default["default"].createElement("div", { className: b$i('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
4812
|
+
this.renderHeader(),
|
|
4813
|
+
(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { type: "menu", items: menuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n$3('label_more'), onItemClick: this.onItemClick, multipleTooltip: multipleTooltip })) : (React__default["default"].createElement("div", { className: b$i('menu-items') })),
|
|
4814
|
+
this.renderFooter(size),
|
|
4815
|
+
this.renderCollapseButton())),
|
|
4816
|
+
panelItems && this.renderPanels(size)));
|
|
4817
|
+
};
|
|
4818
|
+
this.renderSecondPane = (size) => {
|
|
4819
|
+
return (React__default["default"].createElement(Content, { size: size, renderContent: this.props.renderContent, className: b$i('content') }));
|
|
4820
|
+
};
|
|
4821
|
+
this.renderLogo = () => React__default["default"].createElement(Logo$1, Object.assign({}, this.props.logo, { onClick: this.onLogoClick }));
|
|
4822
|
+
this.renderHeader = () => (React__default["default"].createElement("div", { className: b$i('header', { ['with-decoration']: this.props.headerDecoration }) },
|
|
4823
|
+
this.renderLogo(),
|
|
4824
|
+
React__default["default"].createElement(CompositeBar, { type: "subheader", items: this.props.subheaderItems, onItemClick: this.onItemClick }),
|
|
4825
|
+
React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$i('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
|
|
4826
|
+
this.renderFooter = (size) => {
|
|
4827
|
+
const { renderFooter, compact } = this.props;
|
|
4828
|
+
return (React__default["default"].createElement("div", { className: b$i('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
4829
|
+
size,
|
|
4830
|
+
compact,
|
|
4831
|
+
asideRef: this.asideRef,
|
|
4832
|
+
})));
|
|
4833
|
+
};
|
|
4834
|
+
this.renderPanels = (size) => {
|
|
4835
|
+
const { panelItems } = this.props;
|
|
4836
|
+
return (React__default["default"].createElement(Drawer, { className: b$i('panels'), onVeilClick: this.onCloseDrawer, onEscape: this.onCloseDrawer, style: { left: size } }, panelItems.map((item) => (React__default["default"].createElement(DrawerItem, Object.assign({ key: item.id }, item))))));
|
|
4837
|
+
};
|
|
4838
|
+
this.renderCollapseButton = () => {
|
|
4839
|
+
const { expandTitle, collapseTitle, compact } = this.props;
|
|
4840
|
+
const buttonTitle = compact
|
|
4841
|
+
? expandTitle || i18n$3('button_expand')
|
|
4842
|
+
: collapseTitle || i18n$3('button_collapse');
|
|
4843
|
+
return (React__default["default"].createElement(uikit.Button, { className: b$i('collapse-button', { compact }), view: "flat", onClick: this.onCollapseButtonClick, title: buttonTitle },
|
|
4844
|
+
React__default["default"].createElement(NotIcon, { data: controlMenuButtonIcon, className: b$i('collapse-icon'), width: "16", height: "10" })));
|
|
4845
|
+
};
|
|
4846
|
+
this.onCollapseButtonClick = () => {
|
|
4847
|
+
var _a, _b;
|
|
4848
|
+
(_b = (_a = this.props).onChangeCompact) === null || _b === void 0 ? void 0 : _b.call(_a, !this.props.compact);
|
|
4849
|
+
};
|
|
4850
|
+
this.onCloseDrawer = () => {
|
|
4851
|
+
var _a, _b;
|
|
4852
|
+
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4853
|
+
};
|
|
4854
|
+
this.onItemClick = (item, collapsed, event) => {
|
|
4855
|
+
var _a, _b, _c;
|
|
4856
|
+
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4857
|
+
(_c = item.onItemClick) === null || _c === void 0 ? void 0 : _c.call(item, item, collapsed, event);
|
|
4858
|
+
};
|
|
4859
|
+
this.onLogoClick = (event) => {
|
|
4860
|
+
var _a, _b, _c, _d;
|
|
4861
|
+
(_b = (_a = this.props).onClosePanel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
4862
|
+
(_d = (_c = this.props.logo).onClick) === null || _d === void 0 ? void 0 : _d.call(_c, event);
|
|
4863
|
+
};
|
|
4864
|
+
}
|
|
4865
|
+
render() {
|
|
4866
|
+
const { className, compact } = this.props;
|
|
4867
|
+
const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
|
|
4868
|
+
return (React__default["default"].createElement(AsideHeaderContextProvider, { value: { compact, size } },
|
|
4869
|
+
React__default["default"].createElement("div", { className: b$i({ compact }, className) },
|
|
4870
|
+
React__default["default"].createElement("div", { className: b$i('pane-container') },
|
|
4871
|
+
this.renderFirstPane(size),
|
|
4872
|
+
this.renderSecondPane(size)))));
|
|
4873
|
+
}
|
|
4867
4874
|
}
|
|
4875
|
+
AsideHeader.defaultProps = {
|
|
4876
|
+
panelItems: [],
|
|
4877
|
+
subheaderItems: [],
|
|
4878
|
+
menuItems: [],
|
|
4879
|
+
headerDecoration: true,
|
|
4880
|
+
};
|
|
4868
4881
|
|
|
4869
|
-
|
|
4870
|
-
|
|
4871
|
-
var isObject = isObject_1,
|
|
4872
|
-
now = now_1,
|
|
4873
|
-
toNumber = toNumber_1;
|
|
4874
|
-
|
|
4875
|
-
/** Error message constants. */
|
|
4876
|
-
var FUNC_ERROR_TEXT = 'Expected a function';
|
|
4882
|
+
/******************************************************************************
|
|
4883
|
+
Copyright (c) Microsoft Corporation.
|
|
4877
4884
|
|
|
4878
|
-
|
|
4879
|
-
|
|
4880
|
-
nativeMin = Math.min;
|
|
4885
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
4886
|
+
purpose with or without fee is hereby granted.
|
|
4881
4887
|
|
|
4882
|
-
|
|
4883
|
-
|
|
4884
|
-
|
|
4885
|
-
|
|
4886
|
-
|
|
4887
|
-
|
|
4888
|
-
|
|
4889
|
-
|
|
4890
|
-
* calls to the debounced function return the result of the last `func`
|
|
4891
|
-
* invocation.
|
|
4892
|
-
*
|
|
4893
|
-
* **Note:** If `leading` and `trailing` options are `true`, `func` is
|
|
4894
|
-
* invoked on the trailing edge of the timeout only if the debounced function
|
|
4895
|
-
* is invoked more than once during the `wait` timeout.
|
|
4896
|
-
*
|
|
4897
|
-
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
|
|
4898
|
-
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
|
|
4899
|
-
*
|
|
4900
|
-
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
|
|
4901
|
-
* for details over the differences between `_.debounce` and `_.throttle`.
|
|
4902
|
-
*
|
|
4903
|
-
* @static
|
|
4904
|
-
* @memberOf _
|
|
4905
|
-
* @since 0.1.0
|
|
4906
|
-
* @category Function
|
|
4907
|
-
* @param {Function} func The function to debounce.
|
|
4908
|
-
* @param {number} [wait=0] The number of milliseconds to delay.
|
|
4909
|
-
* @param {Object} [options={}] The options object.
|
|
4910
|
-
* @param {boolean} [options.leading=false]
|
|
4911
|
-
* Specify invoking on the leading edge of the timeout.
|
|
4912
|
-
* @param {number} [options.maxWait]
|
|
4913
|
-
* The maximum time `func` is allowed to be delayed before it's invoked.
|
|
4914
|
-
* @param {boolean} [options.trailing=true]
|
|
4915
|
-
* Specify invoking on the trailing edge of the timeout.
|
|
4916
|
-
* @returns {Function} Returns the new debounced function.
|
|
4917
|
-
* @example
|
|
4918
|
-
*
|
|
4919
|
-
* // Avoid costly calculations while the window size is in flux.
|
|
4920
|
-
* jQuery(window).on('resize', _.debounce(calculateLayout, 150));
|
|
4921
|
-
*
|
|
4922
|
-
* // Invoke `sendMail` when clicked, debouncing subsequent calls.
|
|
4923
|
-
* jQuery(element).on('click', _.debounce(sendMail, 300, {
|
|
4924
|
-
* 'leading': true,
|
|
4925
|
-
* 'trailing': false
|
|
4926
|
-
* }));
|
|
4927
|
-
*
|
|
4928
|
-
* // Ensure `batchLog` is invoked once after 1 second of debounced calls.
|
|
4929
|
-
* var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
|
|
4930
|
-
* var source = new EventSource('/stream');
|
|
4931
|
-
* jQuery(source).on('message', debounced);
|
|
4932
|
-
*
|
|
4933
|
-
* // Cancel the trailing debounced invocation.
|
|
4934
|
-
* jQuery(window).on('popstate', debounced.cancel);
|
|
4935
|
-
*/
|
|
4936
|
-
function debounce(func, wait, options) {
|
|
4937
|
-
var lastArgs,
|
|
4938
|
-
lastThis,
|
|
4939
|
-
maxWait,
|
|
4940
|
-
result,
|
|
4941
|
-
timerId,
|
|
4942
|
-
lastCallTime,
|
|
4943
|
-
lastInvokeTime = 0,
|
|
4944
|
-
leading = false,
|
|
4945
|
-
maxing = false,
|
|
4946
|
-
trailing = true;
|
|
4888
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
4889
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
4890
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
4891
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
4892
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
4893
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
4894
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
4895
|
+
***************************************************************************** */
|
|
4947
4896
|
|
|
4948
|
-
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
if (
|
|
4953
|
-
|
|
4954
|
-
|
|
4955
|
-
|
|
4956
|
-
|
|
4957
|
-
|
|
4897
|
+
function __rest(s, e) {
|
|
4898
|
+
var t = {};
|
|
4899
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4900
|
+
t[p] = s[p];
|
|
4901
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
4902
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
4903
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
4904
|
+
t[p[i]] = s[p[i]];
|
|
4905
|
+
}
|
|
4906
|
+
return t;
|
|
4907
|
+
}
|
|
4958
4908
|
|
|
4959
|
-
|
|
4960
|
-
|
|
4961
|
-
|
|
4909
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
4910
|
+
var e = new Error(message);
|
|
4911
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
4912
|
+
};
|
|
4962
4913
|
|
|
4963
|
-
|
|
4964
|
-
|
|
4965
|
-
result = func.apply(thisArg, args);
|
|
4966
|
-
return result;
|
|
4967
|
-
}
|
|
4914
|
+
var css_248z$g = ".gn-footer-item {\n width: 100%;\n height: 40px;\n}";
|
|
4915
|
+
styleInject(css_248z$g);
|
|
4968
4916
|
|
|
4969
|
-
|
|
4970
|
-
|
|
4971
|
-
|
|
4972
|
-
|
|
4973
|
-
|
|
4974
|
-
// Invoke the leading edge.
|
|
4975
|
-
return leading ? invokeFunc(time) : result;
|
|
4976
|
-
}
|
|
4917
|
+
const b$h = block('footer-item');
|
|
4918
|
+
const FooterItem$1 = (_a) => {
|
|
4919
|
+
var { item } = _a, props = __rest(_a, ["item"]);
|
|
4920
|
+
return (React__default["default"].createElement(Item$1, Object.assign({}, props, { item: Object.assign({ iconSize: ASIDE_HEADER_ICON_SIZE }, item), className: b$h({ compact: props.compact }), onItemClick: item.onItemClick, onItemClickCapture: item.onItemClickCapture })));
|
|
4921
|
+
};
|
|
4977
4922
|
|
|
4978
|
-
|
|
4979
|
-
|
|
4980
|
-
timeSinceLastInvoke = time - lastInvokeTime,
|
|
4981
|
-
timeWaiting = wait - timeSinceLastCall;
|
|
4923
|
+
var css_248z$f = ".gn-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.gn-action-bar-group_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.gn-action-bar-group_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.gn-action-bar-group_pull_center {\n margin-left: auto;\n margin-right: auto;\n}";
|
|
4924
|
+
styleInject(css_248z$f);
|
|
4982
4925
|
|
|
4983
|
-
|
|
4984
|
-
|
|
4985
|
-
|
|
4986
|
-
|
|
4926
|
+
const b$g = block('action-bar-group');
|
|
4927
|
+
const ActionBarGroup = ({ children, className, pull }) => {
|
|
4928
|
+
return (React__default["default"].createElement("ul", { className: b$g({ pull }, className), role: "group" }, children));
|
|
4929
|
+
};
|
|
4930
|
+
ActionBarGroup.displayName = 'ActionBar.Group';
|
|
4987
4931
|
|
|
4988
|
-
|
|
4989
|
-
|
|
4990
|
-
timeSinceLastInvoke = time - lastInvokeTime;
|
|
4932
|
+
var css_248z$e = ".gn-action-bar-item {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.gn-action-bar-item_pull_left {\n margin-left: 0;\n margin-right: auto;\n}\n.gn-action-bar-item_pull_right {\n margin-left: auto;\n margin-right: 0;\n}\n.gn-action-bar-item_pull_center {\n margin-left: auto;\n margin-right: auto;\n}\n.gn-action-bar-item + .gn-action-bar-item_spacing {\n margin-left: 8px;\n}";
|
|
4933
|
+
styleInject(css_248z$e);
|
|
4991
4934
|
|
|
4992
|
-
|
|
4993
|
-
|
|
4994
|
-
|
|
4995
|
-
|
|
4996
|
-
|
|
4997
|
-
}
|
|
4935
|
+
const b$f = block('action-bar-item');
|
|
4936
|
+
const ActionBarItem = ({ children, className, pull, spacing = true }) => {
|
|
4937
|
+
return React__default["default"].createElement("li", { className: b$f({ pull, spacing }, className) }, children);
|
|
4938
|
+
};
|
|
4939
|
+
ActionBarItem.displayName = 'ActionBar.Item';
|
|
4998
4940
|
|
|
4999
|
-
|
|
5000
|
-
|
|
5001
|
-
if (shouldInvoke(time)) {
|
|
5002
|
-
return trailingEdge(time);
|
|
5003
|
-
}
|
|
5004
|
-
// Restart the timer.
|
|
5005
|
-
timerId = setTimeout(timerExpired, remainingWait(time));
|
|
5006
|
-
}
|
|
4941
|
+
var css_248z$d = ".gn-action-bar-section {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}\n.gn-action-bar-section + .gn-action-bar-section {\n border-left: solid 1px var(--g-color-line-generic);\n}\n.gn-action-bar-section_type_primary {\n flex: 1 1 auto;\n padding-left: 20px;\n padding-right: 20px;\n}\n.gn-action-bar-section_type_secondary {\n padding-left: 6px;\n padding-right: 6px;\n}";
|
|
4942
|
+
styleInject(css_248z$d);
|
|
5007
4943
|
|
|
5008
|
-
|
|
5009
|
-
|
|
4944
|
+
const b$e = block('action-bar-section');
|
|
4945
|
+
const ActionBarSection = ({ children, type = 'primary' }) => {
|
|
4946
|
+
return React__default["default"].createElement("div", { className: b$e({ type }) }, children);
|
|
4947
|
+
};
|
|
4948
|
+
ActionBarSection.displayName = 'ActionBar.Section';
|
|
5010
4949
|
|
|
5011
|
-
|
|
5012
|
-
|
|
5013
|
-
|
|
5014
|
-
|
|
4950
|
+
var css_248z$c = ".gn-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(--g-color-line-generic);\n height: 40px;\n}";
|
|
4951
|
+
styleInject(css_248z$c);
|
|
4952
|
+
|
|
4953
|
+
const b$d = block('action-bar-separator');
|
|
4954
|
+
const ActionBarSeparator = () => {
|
|
4955
|
+
return React__default["default"].createElement("li", { role: "separator", className: b$d() });
|
|
4956
|
+
};
|
|
4957
|
+
ActionBarSeparator.displayName = 'ActionBar.Separator';
|
|
4958
|
+
|
|
4959
|
+
var css_248z$b = ".gn-action-bar {\n box-sizing: border-box;\n height: 40px;\n border-bottom: solid 1px var(--g-color-line-generic);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: stretch;\n}";
|
|
4960
|
+
styleInject(css_248z$b);
|
|
4961
|
+
|
|
4962
|
+
const b$c = block('action-bar');
|
|
4963
|
+
const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
|
|
4964
|
+
return (React__default["default"].createElement("section", { className: b$c(null, className), "aria-label": ariaLabel }, children));
|
|
4965
|
+
};
|
|
4966
|
+
ActionBar.displayName = 'ActionBar';
|
|
4967
|
+
const PublicActionBar = Object.assign(ActionBar, {
|
|
4968
|
+
Section: ActionBarSection,
|
|
4969
|
+
Group: ActionBarGroup,
|
|
4970
|
+
Item: ActionBarItem,
|
|
4971
|
+
Separator: ActionBarSeparator,
|
|
4972
|
+
});
|
|
4973
|
+
|
|
4974
|
+
var button_close$1 = "Close";
|
|
4975
|
+
var en$2 = {
|
|
4976
|
+
button_close: button_close$1
|
|
4977
|
+
};
|
|
4978
|
+
|
|
4979
|
+
var button_close = "Закрыть";
|
|
4980
|
+
var ru$2 = {
|
|
4981
|
+
button_close: button_close
|
|
4982
|
+
};
|
|
4983
|
+
|
|
4984
|
+
const COMPONENT$2 = 'Title';
|
|
4985
|
+
var i18n$2 = registerKeyset({ en: en$2, ru: ru$2 }, COMPONENT$2);
|
|
4986
|
+
|
|
4987
|
+
var css_248z$a = ".gn-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.gn-title_separator {\n border-bottom: 1px solid var(--g-color-line-generic);\n}\n.gn-title__text {\n margin: 0;\n margin-right: 20px;\n}";
|
|
4988
|
+
styleInject(css_248z$a);
|
|
4989
|
+
|
|
4990
|
+
const b$b = block('title');
|
|
4991
|
+
const Title = ({ children, closeIconSize = 23, hasSeparator, closeTitle = i18n$2('button_close'), onClose, }) => {
|
|
4992
|
+
return (React__default["default"].createElement("div", { className: b$b({ separator: hasSeparator }) },
|
|
4993
|
+
React__default["default"].createElement(uikit.Text, { className: b$b('text'), as: 'h3', variant: 'subheader-3' }, children),
|
|
4994
|
+
onClose && (React__default["default"].createElement(uikit.Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
|
|
4995
|
+
'aria-label': closeTitle,
|
|
4996
|
+
} },
|
|
4997
|
+
React__default["default"].createElement(uikit.Icon, { data: icons.Xmark, size: closeIconSize })))));
|
|
4998
|
+
};
|
|
4999
|
+
Title.displayName = 'Title';
|
|
5000
|
+
|
|
5001
|
+
function flattenHotkeyGroups(hotkeys) {
|
|
5002
|
+
const result = [];
|
|
5003
|
+
for (const hotkeysGroup of hotkeys) {
|
|
5004
|
+
result.push({
|
|
5005
|
+
title: hotkeysGroup.title,
|
|
5006
|
+
group: true,
|
|
5007
|
+
});
|
|
5008
|
+
result.push(...hotkeysGroup.items);
|
|
5015
5009
|
}
|
|
5016
|
-
lastArgs = lastThis = undefined;
|
|
5017
5010
|
return result;
|
|
5018
|
-
|
|
5011
|
+
}
|
|
5019
5012
|
|
|
5020
|
-
|
|
5021
|
-
if (
|
|
5022
|
-
|
|
5013
|
+
function filterHotkeys(hotkeys, filter) {
|
|
5014
|
+
if (filter) {
|
|
5015
|
+
const result = [];
|
|
5016
|
+
const normalizedFilter = filter.toLowerCase();
|
|
5017
|
+
for (const hotkeysBlock of hotkeys) {
|
|
5018
|
+
const filteredItems = hotkeysBlock.items.filter((item) => item.title.toLowerCase().includes(normalizedFilter));
|
|
5019
|
+
if (filteredItems.length > 0) {
|
|
5020
|
+
result.push(Object.assign(Object.assign({}, hotkeysBlock), { items: filteredItems }));
|
|
5021
|
+
}
|
|
5022
|
+
}
|
|
5023
|
+
return result;
|
|
5023
5024
|
}
|
|
5024
|
-
|
|
5025
|
-
|
|
5026
|
-
}
|
|
5025
|
+
return hotkeys;
|
|
5026
|
+
}
|
|
5027
5027
|
|
|
5028
|
-
|
|
5029
|
-
|
|
5030
|
-
}
|
|
5028
|
+
var css_248z$9 = ".gn-hotkeys-panel {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n --hotkeys-panel-width: 400px;\n --hotkeys-panel-vertical-padding: 18px;\n --hotkeys-panel-horizontal-padding: 24px;\n}\n.gn-hotkeys-panel__drawer-item {\n width: var(--hotkeys-panel-width);\n padding: var(--hotkeys-panel-vertical-padding) 0;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n}\n.gn-hotkeys-panel__title {\n margin: 0 var(--hotkeys-panel-horizontal-padding) 16px var(--hotkeys-panel-horizontal-padding);\n}\n.gn-hotkeys-panel__search {\n padding: 0 var(--hotkeys-panel-horizontal-padding);\n margin-bottom: 14px;\n}\n.gn-hotkeys-panel__list {\n flex: 1;\n overflow-y: auto;\n}\n.gn-hotkeys-panel__item {\n height: auto;\n padding: 8px var(--hotkeys-panel-horizontal-padding);\n}\n.gn-hotkeys-panel__item.yc-list__item_active {\n background: inherit;\n}\n.gn-hotkeys-panel__item-content {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n width: 100%;\n font-size: var(--g-text-body-1-font-size);\n line-height: var(--g-text-body-1-line-height);\n color: var(--g-color-text-primary);\n}\n.gn-hotkeys-panel__item-content_group {\n font-size: var(--g-text-body-2-font-size);\n font-weight: 500;\n line-height: var(--g-text-body-2-line-height);\n}\n.gn-hotkeys-panel__hotkey {\n color: var(--g-color-text-complementary);\n}";
|
|
5029
|
+
styleInject(css_248z$9);
|
|
5031
5030
|
|
|
5032
|
-
|
|
5033
|
-
|
|
5034
|
-
|
|
5031
|
+
const b$a = block('hotkeys-panel');
|
|
5032
|
+
function HotkeysPanel(_a) {
|
|
5033
|
+
var { visible, onClose, leftOffset, topOffset, className, preventScrollBody, hotkeys, itemClassName, filterPlaceholder, title, emptyState } = _a, listProps = __rest(_a, ["visible", "onClose", "leftOffset", "topOffset", "className", "preventScrollBody", "hotkeys", "itemClassName", "filterPlaceholder", "title", "emptyState"]);
|
|
5034
|
+
const [filter, setFilter] = React.useState('');
|
|
5035
|
+
const hotkeysList = React.useMemo(() => {
|
|
5036
|
+
const filteredHotkeys = filterHotkeys(hotkeys, filter);
|
|
5037
|
+
return flattenHotkeyGroups(filteredHotkeys);
|
|
5038
|
+
}, [hotkeys, filter]);
|
|
5039
|
+
const renderItem = React.useCallback((item) => (React__default["default"].createElement("div", { className: b$a('item-content', { group: item.group }), key: item.title },
|
|
5040
|
+
item.title,
|
|
5041
|
+
item.value && React__default["default"].createElement(uikit.Hotkey, { className: b$a('hotkey'), value: item.value }))), []);
|
|
5042
|
+
const drawerItemContent = (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
5043
|
+
React__default["default"].createElement("h2", { className: b$a('title') }, title),
|
|
5044
|
+
React__default["default"].createElement(uikit.TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b$a('search') }),
|
|
5045
|
+
React__default["default"].createElement(uikit.List, Object.assign({ className: b$a('list'), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b$a('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
|
|
5046
|
+
return (React__default["default"].createElement(Drawer, { className: b$a(null, className), onVeilClick: onClose, onEscape: onClose, preventScrollBody: preventScrollBody, style: {
|
|
5047
|
+
left: leftOffset,
|
|
5048
|
+
top: topOffset,
|
|
5049
|
+
} },
|
|
5050
|
+
React__default["default"].createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$a('drawer-item'), content: drawerItemContent })));
|
|
5051
|
+
}
|
|
5035
5052
|
|
|
5036
|
-
|
|
5037
|
-
|
|
5038
|
-
|
|
5053
|
+
/**
|
|
5054
|
+
* This method returns the first argument it receives.
|
|
5055
|
+
*
|
|
5056
|
+
* @static
|
|
5057
|
+
* @since 0.1.0
|
|
5058
|
+
* @memberOf _
|
|
5059
|
+
* @category Util
|
|
5060
|
+
* @param {*} value Any value.
|
|
5061
|
+
* @returns {*} Returns `value`.
|
|
5062
|
+
* @example
|
|
5063
|
+
*
|
|
5064
|
+
* var object = { 'a': 1 };
|
|
5065
|
+
*
|
|
5066
|
+
* console.log(_.identity(object) === object);
|
|
5067
|
+
* // => true
|
|
5068
|
+
*/
|
|
5039
5069
|
|
|
5040
|
-
|
|
5041
|
-
|
|
5042
|
-
return leadingEdge(lastCallTime);
|
|
5043
|
-
}
|
|
5044
|
-
if (maxing) {
|
|
5045
|
-
// Handle invocations in a tight loop.
|
|
5046
|
-
clearTimeout(timerId);
|
|
5047
|
-
timerId = setTimeout(timerExpired, wait);
|
|
5048
|
-
return invokeFunc(lastCallTime);
|
|
5049
|
-
}
|
|
5050
|
-
}
|
|
5051
|
-
if (timerId === undefined) {
|
|
5052
|
-
timerId = setTimeout(timerExpired, wait);
|
|
5053
|
-
}
|
|
5054
|
-
return result;
|
|
5055
|
-
}
|
|
5056
|
-
debounced.cancel = cancel;
|
|
5057
|
-
debounced.flush = flush;
|
|
5058
|
-
return debounced;
|
|
5070
|
+
function identity(value) {
|
|
5071
|
+
return value;
|
|
5059
5072
|
}
|
|
5060
5073
|
|
|
5061
|
-
var
|
|
5074
|
+
var identity_1 = identity;
|
|
5062
5075
|
|
|
5063
5076
|
function useStableCallback(func) {
|
|
5064
5077
|
const funcRef = React__namespace.useRef();
|