@skbkontur/side-menu 0.1.1

package/src/SideMenuItem.js

@@ -0,0 +1,184 @@
+import { __assign, __extends } from "tslib";
+import React from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { keyListener } from '@skbkontur/react-ui/lib/events/keyListener';
+import { jsStyles } from './SideMenu.styles';
+import { SideMenuThemeContext } from './SideMenuContext';
+/**
+ * Элемент списка
+ *
+ * @visibleName SideMenu.Item
+ */
+var SideMenuItem = /** @class */ (function (_super) {
+    __extends(SideMenuItem, _super);
+    function SideMenuItem(props) {
+        var _this = _super.call(this, props) || this;
+        _this.previousContext = {};
+        _this.renderInnerSubMenu = function () {
+            var childrenWithProps = React.Children.map(_this.props.children, function (child) {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, { parent: _this });
+                }
+                return child;
+            });
+            return _this.state.isOpened && !_this.context.isMinimised && !_this.props.isSubMenu && childrenWithProps;
+        };
+        _this.renderSeparatedSubMenu = function () {
+            var _a;
+            var hasSubItems = false;
+            var subItemHasChildren = function (subItem) {
+                return subItem &&
+                    typeof subItem === 'object' &&
+                    'type' in subItem &&
+                    typeof subItem.type === 'function' &&
+                    (subItem === null || subItem === void 0 ? void 0 : subItem.type.name) === 'SideMenuSubItem' &&
+                    subItem.props.children;
+            };
+            if (_this.state.isOpened) {
+                React.Children.map(_this.props.children, function (child) {
+                    if (subItemHasChildren(child)) {
+                        hasSubItems = true;
+                    }
+                });
+            }
+            return (_this.state.isOpened &&
+                !_this.props.isSubMenu && (React.createElement("div", { className: cx((_a = {}, _a[jsStyles.root()] = true, _a[jsStyles.separatedMenu()] = true, _a)), ref: function (node) { return (_this.separatedMenu = node); } },
+                React.createElement(SideMenuThemeContext.Provider, { value: __assign({ hasSubIcons: hasSubItems }, _this.context) }, _this.props.children))));
+        };
+        _this.handleClick = function (e) {
+            if (_this.props._onClick) {
+                _this.props._onClick(e);
+            }
+            _this.setActive();
+            _this.setState({ isOpened: !!_this.props.children });
+        };
+        _this.handleFocus = function () {
+            requestAnimationFrame(function () {
+                if (keyListener.isTabPressed) {
+                    _this.setState({ focusedByTab: true });
+                }
+            });
+        };
+        _this.handleBlur = function () {
+            _this.setState({ focusedByTab: false });
+        };
+        _this.handleKeyDown = function (e) {
+            var _a, _b;
+            if (e.key === 'Enter') {
+                _this.setState({ isOpened: !_this.props.children ? false : !_this.state.isOpened });
+                _this.setActive();
+            }
+            (_b = (_a = _this.props)._onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        };
+        _this.setActive = function () {
+            if (_this.props.isSubMenu) {
+                if (_this.props.parent) {
+                    _this.context.setActiveItem(_this.props.parent);
+                }
+                _this.context.setActiveSubItem(_this);
+            }
+            else {
+                if (!_this.context.isSeparatedMenu) {
+                    _this.context.setActiveSubItem(null);
+                }
+                _this.context.setActiveItem(_this);
+            }
+        };
+        _this.state = {
+            isOpened: false,
+            focusedByTab: false,
+            isMultiline: false,
+        };
+        _this.textRef = React.createRef();
+        return _this;
+    }
+    SideMenuItem.prototype.componentDidMount = function () {
+        var _a, _b;
+        if (this.props.icon && !this.props.isSubMenu) {
+            (_b = (_a = this.context).setHasIcons) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        if (this.textRef.current) {
+            var el = this.textRef.current;
+            var divHeight = +el.offsetHeight;
+            var lineHeight = parseInt(window.getComputedStyle(this.textRef.current).getPropertyValue('font-size')) * 1.14;
+            var lines = divHeight / lineHeight;
+            if (lines > 2) {
+                this.setState({ isMultiline: true });
+            }
+        }
+        this.previousContext = this.context;
+    };
+    SideMenuItem.prototype.componentDidUpdate = function () {
+        if (this.previousContext.activeItem !== this.context.activeItem && this.context.activeItem !== this) {
+            this.setState({ isOpened: false });
+        }
+        this.previousContext = this.context;
+    };
+    SideMenuItem.prototype.render = function () {
+        return this.renderMain();
+    };
+    SideMenuItem.prototype.renderMain = function () {
+        var _a, _b, _c, _d, _e;
+        var active = false;
+        if (this.context) {
+            active = this.context.activeItem === this || this.context.activeSubItem === this;
+        }
+        var _f = this.props, icon = _f.icon, marker = _f.marker, caption = _f.caption, isSubMenu = _f.isSubMenu;
+        var isIconUserAvatar = typeof icon === 'object' && typeof icon.type === 'function' && icon.type.name === 'UserAvatar';
+        var itemClasses = cx((_a = {},
+            _a[jsStyles.item()] = true,
+            _a[jsStyles.subItem()] = this.context.isSeparatedMenu && isSubMenu,
+            _a[jsStyles.focusedItem()] = this.state.focusedByTab,
+            _a[jsStyles.activeItem()] = (active && !this.state.isOpened) ||
+                (active && this.state.isOpened && !this.context.activeSubItem) ||
+                (active && this.state.isOpened && isSubMenu),
+            _a[jsStyles.activeSubItem()] = active && this.context.isSeparatedMenu && isSubMenu,
+            _a));
+        var iconClasses = cx((_b = {},
+            _b[jsStyles.icon()] = true,
+            _b[jsStyles.iconMultiline()] = this.state.isMultiline,
+            _b[jsStyles.iconLarge()] = this.context.size === 'large',
+            _b[jsStyles.iconSubItem()] = isSubMenu,
+            _b[jsStyles.iconSubItemLarge()] = isSubMenu && this.context.size === 'large',
+            _b[jsStyles.avatarIcon()] = isIconUserAvatar,
+            _b));
+        var textClasses = cx((_c = {},
+            _c[jsStyles.itemText()] = true,
+            _c[jsStyles.itemTextTransitioned()] = this.context.isTransitioned,
+            _c[jsStyles.subItemText()] = isSubMenu,
+            _c[jsStyles.itemTextWithoutItemIcon()] = !icon,
+            _c[jsStyles.itemTextWithoutColumnIcons()] = !this.context.hasIcons && !isSubMenu,
+            _c[jsStyles.subItemTextWithoutColumnIcons()] = isSubMenu && this.context.isSeparatedMenu && !this.context.hasSubIcons,
+            _c[jsStyles.itemTextLarge()] = this.context.size === 'large',
+            _c[jsStyles.itemTextMultiline()] = this.state.isMultiline,
+            _c));
+        var markerClasses = cx((_d = {},
+            _d[jsStyles.marker()] = true,
+            _d[jsStyles.markerMultiline()] = this.state.isMultiline,
+            _d));
+        var itemWrapperClasses = cx((_e = {},
+            _e[jsStyles.itemWrapper()] = true,
+            _e[jsStyles.itemMultilineWrapper()] = this.state.isMultiline,
+            _e[jsStyles.subItemWrapper()] = isSubMenu,
+            _e[jsStyles.itemWrapperWithoutIcon()] = !this.props.icon && !isSubMenu,
+            _e[jsStyles.itemLargeWrapper()] = this.context.size === 'large',
+            _e[jsStyles.subItemLargeWrapper()] = this.context.size === 'large' && isSubMenu,
+            _e[jsStyles.itemLargeMultilineWrapper()] = this.state.isMultiline && this.context.size === 'large',
+            _e[jsStyles.itemLargeWrapperWithoutIcon()] = !this.props.icon && !isSubMenu && this.context.size === 'large',
+            _e));
+        return (React.createElement(CommonWrapper, __assign({}, this.props),
+            React.createElement("div", null,
+                React.createElement("div", { className: itemClasses, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur },
+                    React.createElement("div", { className: itemWrapperClasses },
+                        icon && (React.createElement("span", { className: iconClasses }, React.cloneElement(icon, { size: isSubMenu ? 16 : 24, disableCompensation: true }))),
+                        !this.context.isMinimised && (React.createElement(React.Fragment, null,
+                            React.createElement("div", { className: textClasses, ref: this.textRef }, caption),
+                            marker && React.createElement("span", { className: markerClasses }, marker))))),
+                this.context.isSeparatedMenu ? this.renderSeparatedSubMenu() : this.renderInnerSubMenu())));
+    };
+    SideMenuItem.__KONTUR_REACT_UI__ = 'SideMenuItem';
+    SideMenuItem.contextType = SideMenuThemeContext;
+    return SideMenuItem;
+}(React.Component));
+export { SideMenuItem };

package/src/SideMenuOrganisations.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+declare type SideMenuOrganisationsProps = {
+    icon?: React.ReactElement;
+};
+/**
+ * Список организаций
+ *
+ * @visibleName SideMenu.Organisations
+ */
+export declare class SideMenuOrganisations extends React.Component<SideMenuOrganisationsProps> {
+    static __KONTUR_REACT_UI__: string;
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+}
+export {};

package/src/SideMenuOrganisations.js

@@ -0,0 +1,37 @@
+import { __assign, __extends } from "tslib";
+import React from 'react';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { DEFAULT_THEME, DropdownMenu, ThemeFactory } from '@skbkontur/react-ui';
+import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { SideMenuItem } from './SideMenuItem';
+import { jsStyles } from './SideMenu.styles';
+/**
+ * Список организаций
+ *
+ * @visibleName SideMenu.Organisations
+ */
+var SideMenuOrganisations = /** @class */ (function (_super) {
+    __extends(SideMenuOrganisations, _super);
+    function SideMenuOrganisations() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SideMenuOrganisations.prototype.render = function () {
+        return this.renderMain();
+    };
+    SideMenuOrganisations.prototype.renderMain = function () {
+        var label = (React.createElement("div", { className: jsStyles.dropdownLabel() },
+            React.createElement(SideMenuItem, { icon: this.props.icon, caption: 'СКБ Контур' })));
+        return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
+                menuItemHoverBg: '#f6f6f6',
+                menuItemHoverColor: '#222',
+                popupBorderRadius: '8px',
+                menuItemPaddingX: '32px',
+            }, DEFAULT_THEME) },
+            React.createElement(CommonWrapper, __assign({}, this.props),
+                React.createElement("div", { className: jsStyles.dropdownWrapper() },
+                    React.createElement(DropdownMenu, { caption: label, menuWidth: '240px', positions: ['top left'] }, this.props.children)))));
+    };
+    SideMenuOrganisations.__KONTUR_REACT_UI__ = 'SideMenuOrganisations';
+    return SideMenuOrganisations;
+}(React.Component));
+export { SideMenuOrganisations };

package/src/SideMenuSubItem.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { SideMenuItemProps } from './SideMenuItem';
+declare type SideMenuSubItemState = {
+    isOpened: boolean;
+};
+/**
+ * Элемент списка второго уровня
+ *
+ * @visibleName SideMenu.SubItem
+ */
+export declare class SideMenuSubItem extends React.Component<SideMenuItemProps, SideMenuSubItemState> {
+    static __KONTUR_REACT_UI__: string;
+    static contextType: React.Context<import("./SideMenuContext").SideMenuContextType>;
+    constructor(props: SideMenuItemProps);
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+    private handleClick;
+    private handleKeyDown;
+}
+export {};

package/src/SideMenuSubItem.js

@@ -0,0 +1,54 @@
+import { __assign, __extends } from "tslib";
+import React from 'react';
+import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { SideMenuThemeContext } from './SideMenuContext';
+import { SideMenuItem } from './SideMenuItem';
+import { jsStyles } from './SideMenu.styles';
+import { ArrowChevronDown, ArrowChevronRight } from '@skbkontur/react-icons';
+/**
+ * Элемент списка второго уровня
+ *
+ * @visibleName SideMenu.SubItem
+ */
+var SideMenuSubItem = /** @class */ (function (_super) {
+    __extends(SideMenuSubItem, _super);
+    function SideMenuSubItem(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleClick = function () {
+            _this.setState({ isOpened: true });
+        };
+        _this.handleKeyDown = function (e) {
+            var _a, _b;
+            if (e.key === 'Enter') {
+                _this.setState({ isOpened: true });
+            }
+            (_b = (_a = _this.props)._onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        };
+        _this.state = {
+            isOpened: false,
+        };
+        return _this;
+    }
+    SideMenuSubItem.prototype.render = function () {
+        return this.renderMain();
+    };
+    SideMenuSubItem.prototype.renderMain = function () {
+        var icon;
+        if (this.props.children) {
+            if (this.state.isOpened) {
+                icon = React.createElement(ArrowChevronDown, null);
+            }
+            else {
+                icon = React.createElement(ArrowChevronRight, null);
+            }
+        }
+        return (React.createElement(CommonWrapper, __assign({}, this.props),
+            React.createElement("div", null,
+                React.createElement(SideMenuItem, __assign({}, this.props, { _onClick: this.handleClick, icon: icon, isSubMenu: true, _onKeyDown: this.handleKeyDown })),
+                this.props.children && this.state.isOpened && (React.createElement("div", { className: jsStyles.subItemMenu() }, this.props.children)))));
+    };
+    SideMenuSubItem.__KONTUR_REACT_UI__ = 'SideMenuSubItem';
+    SideMenuSubItem.contextType = SideMenuThemeContext;
+    return SideMenuSubItem;
+}(React.Component));
+export { SideMenuSubItem };

package/src/SideMenuSubItemButtons.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Группа кнопок в отдельном подменю
+ *
+ * @visibleName SideMenu.SubItemButtons
+ */
+export declare class SideMenuSubItemButtons extends React.Component {
+    static __KONTUR_REACT_UI__: string;
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+}

package/src/SideMenuSubItemButtons.js

@@ -0,0 +1,25 @@
+import { __assign, __extends } from "tslib";
+import React from 'react';
+import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { jsStyles } from './SideMenu.styles';
+/**
+ * Группа кнопок в отдельном подменю
+ *
+ * @visibleName SideMenu.SubItemButtons
+ */
+var SideMenuSubItemButtons = /** @class */ (function (_super) {
+    __extends(SideMenuSubItemButtons, _super);
+    function SideMenuSubItemButtons() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SideMenuSubItemButtons.prototype.render = function () {
+        return this.renderMain();
+    };
+    SideMenuSubItemButtons.prototype.renderMain = function () {
+        return (React.createElement(CommonWrapper, __assign({}, this.props),
+            React.createElement("div", { className: jsStyles.buttonsGroup() }, this.props.children)));
+    };
+    SideMenuSubItemButtons.__KONTUR_REACT_UI__ = 'SideMenuSubItemButtons';
+    return SideMenuSubItemButtons;
+}(React.Component));
+export { SideMenuSubItemButtons };

package/src/SideMenuSubItemHeader.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+/**
+ * Заголовок списка второго уровня
+ *
+ * @visibleName SideMenu.SubItemHeader
+ */
+export declare class SideMenuSubItemHeader extends React.Component {
+    static __KONTUR_REACT_UI__: string;
+    static contextType: React.Context<import("./SideMenuContext").SideMenuContextType>;
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+}

package/src/SideMenuSubItemHeader.js

@@ -0,0 +1,27 @@
+import { __assign, __extends } from "tslib";
+import React from 'react';
+import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { jsStyles } from './SideMenu.styles';
+import { SideMenuThemeContext } from './SideMenuContext';
+/**
+ * Заголовок списка второго уровня
+ *
+ * @visibleName SideMenu.SubItemHeader
+ */
+var SideMenuSubItemHeader = /** @class */ (function (_super) {
+    __extends(SideMenuSubItemHeader, _super);
+    function SideMenuSubItemHeader() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SideMenuSubItemHeader.prototype.render = function () {
+        return this.renderMain();
+    };
+    SideMenuSubItemHeader.prototype.renderMain = function () {
+        return (React.createElement(CommonWrapper, __assign({}, this.props),
+            React.createElement("div", { className: jsStyles.subItemHeader() }, this.props.children)));
+    };
+    SideMenuSubItemHeader.__KONTUR_REACT_UI__ = 'SideMenuSubItemHeader';
+    SideMenuSubItemHeader.contextType = SideMenuThemeContext;
+    return SideMenuSubItemHeader;
+}(React.Component));
+export { SideMenuSubItemHeader };