@skbkontur/side-menu 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.1.0...@skbkontur/side-menu@0.1.1) (2022-06-02)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+# 0.1.0 (2022-06-02)
+
+
+### Features
+
+* **SideMenu:** implement component ([47f73f5](https://git.skbkontur.ru/ui/ui-parking/commits/47f73f5011893fa8bd0812da83cafdaa89f7e407))

package/README.md

@@ -0,0 +1,186 @@
+### Бета-версия компонента SideMenu
+
+SideMenu в фирменном стиле (макеты живут [здесь](https://www.figma.com/file/XA8Ytcx8bxemYAkF7eGVSv/%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82-%D0%BB%D0%B5%D0%B2%D0%BE%D0%B3%D0%BE-%D0%BC%D0%B5%D0%BD%D1%8E?node-id=0%3A1)).
+
+```jsx harmony
+import {getKonturAvatarUrl} from '@skbkontur/react-ui-addons';
+import {Kontur, Ofd} from '@skbkontur/logos';
+import {MenuItem, ThemeContext, ThemeFactory} from '@skbkontur/react-ui';
+import {SideMenu} from './index';
+import {
+    CheckIcon24Regular,
+  InfoSquareIcon24Regular,
+  DoubleCheckIcon24Regular,
+  QuestionSquareIcon24Regular,
+  DivideCircleIcon24Regular,
+  PlusSquareIcon24Regular,
+  WarningTriangleIcon24Regular
+} from '@skbkontur/icons';
+
+
+const myTheme = ThemeFactory.create({addonsSideMenuHeaderPosition: 'sticky', addonsSideMenuBodyMarginTop: '0px'});
+
+<div style={{height: '600px'}}>
+    <ThemeContext.Provider value={myTheme}>
+        <SideMenu>
+            <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
+            <SideMenu.Body>
+                <SideMenu.Item icon={<DoubleCheckIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'}>
+                    <SideMenu.SubItem caption={'Входящие'}/>
+                    <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
+                        <SideMenu.SubItem caption={'Исходящие1'}/>
+                        <SideMenu.SubItem caption={'Исходящие2'}/>
+                    </SideMenu.SubItem>
+                    <SideMenu.SubItem caption={'Внутренние'}/>
+                    <SideMenu.SubItem caption={'Черновики'}/>
+                    <SideMenu.SubItem caption={'Удаленные'}/>
+                    <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
+                    <SideMenu.SubItem caption={'Требуют обработки'}/>
+                    <SideMenu.SubItem caption={'Обработанные'}/>
+                </SideMenu.Item>
+                <SideMenu.Item caption={'Контрагенты'}/>
+                <SideMenu.Item icon={<CheckIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
+                    <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
+                    <SideMenu.SubItem caption={'Исходящие'}/>
+                    <SideMenu.SubItem caption={'Внутренние'}/>
+                    <SideMenu.SubItem caption={'Черновики'}/>
+                    <SideMenu.SubItem caption={'Удаленные'}/>
+                </SideMenu.Item>
+                <SideMenu.Item icon={<QuestionSquareIcon24Regular/>} caption={'Справочная'}/>
+                <SideMenu.Divider/>
+                <SideMenu.Item icon={<InfoSquareIcon24Regular/>} caption={'Еще раздел'}/>
+                <SideMenu.Item icon={<DivideCircleIcon24Regular/>} caption={'Отчетность'}/>
+            </SideMenu.Body>
+            <SideMenu.Footer>
+                <SideMenu.Organisations icon={<PlusSquareIcon24Regular/>}>
+                    <MenuItem>СКБ Контур</MenuItem>
+                    <MenuItem>Сириус Базинес</MenuItem>
+                    <MenuItem>Контур НТТ</MenuItem>
+                    <MenuItem>Промэлектроника</MenuItem>
+                    <SideMenu.DropdownMenuSeparator/>
+                    <MenuItem>Список организаций</MenuItem>
+                </SideMenu.Organisations>
+                <SideMenu.Item icon={<WarningTriangleIcon24Regular/>} caption={'Реквизиты и настройки'}/>
+                <SideMenu.Avatar
+                    userName={'Ишматова Елена'}
+                    avatarUrl={getKonturAvatarUrl({
+                        userId: ''
+                    })}
+                />
+            </SideMenu.Footer>
+        </SideMenu>
+    </ThemeContext.Provider>
+</div>
+```
+
+SideMenu с меню второго уровня в отдельной колонке
+
+```jsx harmony
+import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
+import { Buhgalteria, Kontur } from '@skbkontur/logos';
+import { MenuItem, Button, Modal, Input, ThemeContext, ThemeFactory} from '@skbkontur/react-ui';
+import { SideMenu } from './index';
+import {
+    CheckIcon24Regular,
+  InfoSquareIcon24Regular,
+  DoubleCheckIcon24Regular,
+  QuestionSquareIcon24Regular,
+  DivideCircleIcon24Regular,
+  PlusSquareIcon24Regular,
+  WarningTriangleIcon24Regular
+} from '@skbkontur/icons';
+
+const [opened, setOpened] = React.useState(false);
+const [panel, setPanel] = React.useState(false);
+
+const open = () => {
+  setOpened(true);
+}
+
+const close = () => {
+  setOpened(false);
+}
+
+const renderModal = () => {
+  return (
+    <Modal onClose={close}>
+      <Modal.Header>Выбор организации</Modal.Header>
+      <Modal.Body>
+        <Input/>
+        <div>Список организаций</div>
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+const myTheme = ThemeFactory.create({ addonsSideMenuHeaderPosition: 'sticky', addonsSideMenuBodyMarginTop: '0px' });
+
+<div style={{height: '600px', width: '100%', background: '#E5E5E5'}}>
+  <ThemeContext.Provider value={myTheme} >
+    <SideMenu isSeparatedMenu={true}>
+      <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>}/>
+      <SideMenu.Body>
+        <SideMenu.Item caption={'Документы'} marker={'новое'}>
+          <SideMenu.SubItemButtons>
+          <Button use="primary">Создать</Button>
+          <Button>Загрузить</Button>
+          </SideMenu.SubItemButtons>
+          <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
+            <SideMenu.SubItem caption={'Входящие бла-бла-бла'}>
+              <SideMenu.SubItem caption={'Входящие11'}>
+                <SideMenu.SubItem caption={'Входящие111'}/>
+                <SideMenu.SubItem caption={'Входящие112'}/>
+                <SideMenu.SubItem caption={'Входящие113'}/>
+              </SideMenu.SubItem>
+              <SideMenu.SubItem caption={'Входящие12'}/>
+              <SideMenu.SubItem caption={'Входящие13'}/>
+            </SideMenu.SubItem>
+            <SideMenu.SubItem caption={'Входящие2'}>
+              <SideMenu.SubItem caption={'Входящие21'}>
+                <SideMenu.SubItem caption={'Входящие211'}/>
+                <SideMenu.SubItem caption={'Входящие212'}/>
+                <SideMenu.SubItem caption={'Входящие213'}/>
+              </SideMenu.SubItem>
+              <SideMenu.SubItem caption={'Входящие22'}/>
+              <SideMenu.SubItem caption={'Входящие23'}/>
+            </SideMenu.SubItem>
+            <SideMenu.SubItem caption={'Входящие3'}/>
+          </SideMenu.SubItem>
+          <SideMenu.SubItem caption={'Исходящие'}/>
+          <SideMenu.SubItem caption={'Внутренние'}/>
+          <SideMenu.SubItem caption={'Черновики'}/>
+          <SideMenu.SubItem caption={'Удаленные'}/>
+          <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
+          <SideMenu.SubItem caption={'Требуют обработки'}/>
+          <SideMenu.SubItem caption={'Обработанные'}/>
+        </SideMenu.Item>
+        <SideMenu.Item caption={'Контрагенты'}/>
+        <SideMenu.Item caption={'Сообщения'} marker={'5'}>
+          <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
+          <SideMenu.SubItem caption={'Исходящие'}/>
+          <SideMenu.SubItem caption={'Внутренние'}/>
+          <SideMenu.SubItem caption={'Черновики'}/>
+          <SideMenu.SubItem caption={'Удаленные'}/>
+        </SideMenu.Item>
+        <SideMenu.Item caption={'Справочная'}/>
+        <SideMenu.Divider />
+        <SideMenu.Item caption={'Еще раздел'}/>
+        <SideMenu.Item caption={'Отчетность'}/>
+      </SideMenu.Body>
+      <SideMenu.Footer>
+        <div>
+          {opened && renderModal()}
+          <SideMenu.Item icon={<PlusSquareIcon24Regular/>} caption={'СКБ Контур'} _onClick={open}/>
+        </div>
+        <SideMenu.Item icon={<WarningTriangleIcon24Regular/>} caption={'Реквизиты и настройки'}/>
+        <SideMenu.Avatar
+          userName={'Ишматова Елена'}
+          avatarUrl={getKonturAvatarUrl({
+            userId: ''
+          })}
+        />
+      </SideMenu.Footer>
+    </SideMenu>
+  </ThemeContext.Provider>
+</div>
+```

package/index.d.ts

@@ -0,0 +1,11 @@
+export * from './src/SideMenu';
+export * from './src/SideMenuOrganisations';
+export * from './src/SideMenuBody';
+export * from './src/SideMenuFooter';
+export * from './src/SideMenuHeader';
+export * from './src/SideMenuItem';
+export * from './src/SideMenuAvatar';
+export * from './src/SideMenuSubItem';
+export * from './src/SideMenuDivider';
+export * from './src/SideMenuSubItemHeader';
+export * from './src/SideMenuSubItemButtons';

package/index.js

@@ -0,0 +1,11 @@
+export * from './src/SideMenu';
+export * from './src/SideMenuOrganisations';
+export * from './src/SideMenuBody';
+export * from './src/SideMenuFooter';
+export * from './src/SideMenuHeader';
+export * from './src/SideMenuItem';
+export * from './src/SideMenuAvatar';
+export * from './src/SideMenuSubItem';
+export * from './src/SideMenuDivider';
+export * from './src/SideMenuSubItemHeader';
+export * from './src/SideMenuSubItemButtons';

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@skbkontur/side-menu",
+  "version": "0.1.1",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "private": false,
+  "license": "UNLICENSED",
+  "scripts": {
+    "clean": "git clean -fdxqe node_modules",
+    "build": "yarn tsc",
+    "lint": "yarn tsc --noEmit"
+  },
+  "author": "Kontur",
+  "peerDependencies": {
+    "@skbkontur/react-ui": ">=4 <5",
+    "@skbkontur/react-ui-addons": ">=4.0.1",
+    "react": ">=16.9",
+    "react-dom": ">=16.9"
+  },
+  "devDependencies": {
+    "@skbkontur/react-ui": "4.0.0"
+  },
+  "dependencies": {
+    "@skbkontur/react-icons": "^5.2.3",
+    "tslib": "^1"
+  }
+}

package/src/SideMenu.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Nullable } from '@skbkontur/react-ui-addons/typings/utility-types';
+import { SideMenuOrganisations } from './SideMenuOrganisations';
+import { SideMenuHeader } from './SideMenuHeader';
+import { SideMenuItem } from './SideMenuItem';
+import { SideMenuAvatar } from './SideMenuAvatar';
+import { SideMenuSubItem } from './SideMenuSubItem';
+import { SideMenuDivider } from './SideMenuDivider';
+import { SideMenuSubItemHeader } from './SideMenuSubItemHeader';
+import { SideMenuSubItemButtons } from './SideMenuSubItemButtons';
+import { SideMenuDropdownMenuSeparator } from './SideMenuDropdownMenuSeparator';
+declare type SideMenuInterface = {
+    children?: React.ReactNode;
+};
+declare type DefaultProps = {
+    size: 'small' | 'large';
+    isSeparatedMenu: boolean;
+};
+export declare type SideMenuProps = SideMenuInterface & Partial<DefaultProps>;
+declare type SideMenuComponentProps = SideMenuInterface & DefaultProps;
+declare type SideMenuState = {
+    isMinimised: boolean;
+    isAbleToResize: boolean;
+    activeItem: Nullable<React.ReactNode>;
+    activeSubItem: Nullable<React.ReactNode>;
+    hasScrollBar: boolean;
+    isTransitioned: boolean;
+};
+export declare class SideMenu extends React.Component<SideMenuComponentProps, SideMenuState> {
+    static __KONTUR_REACT_UI__: string;
+    private scrollTimer;
+    private transitionTimer;
+    static defaultProps: DefaultProps;
+    constructor(props: SideMenuComponentProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    static Body: React.FC<import("@skbkontur/react-ui/internal/CommonWrapper").CommonProps>;
+    static Footer: React.FC<import("@skbkontur/react-ui/internal/CommonWrapper").CommonProps>;
+    static Header: typeof SideMenuHeader;
+    static Item: typeof SideMenuItem;
+    static SubItem: typeof SideMenuSubItem;
+    static SubItemHeader: typeof SideMenuSubItemHeader;
+    static Avatar: typeof SideMenuAvatar;
+    static Organisations: typeof SideMenuOrganisations;
+    static Divider: typeof SideMenuDivider;
+    static SubItemButtons: typeof SideMenuSubItemButtons;
+    static DropdownMenuSeparator: typeof SideMenuDropdownMenuSeparator;
+    private resizeTimer;
+    private readonly rightBorderRef;
+    render(): JSX.Element;
+    private renderMain;
+    private setActiveItem;
+    private setActiveSubItem;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private showMinimisedRoot;
+    private handleScroll;
+    private swipe;
+}
+export {};

package/src/SideMenu.js

@@ -0,0 +1,163 @@
+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 { isIE11, isSafari } from '@skbkontur/react-ui/lib/client';
+import { jsStyles } from './SideMenu.styles';
+import { SideMenuOrganisations } from './SideMenuOrganisations';
+import { SideMenuThemeContext } from './SideMenuContext';
+import { SideMenuBody } from './SideMenuBody';
+import { SideMenuFooter } from './SideMenuFooter';
+import { SideMenuHeader } from './SideMenuHeader';
+import { SideMenuItem } from './SideMenuItem';
+import { SideMenuAvatar } from './SideMenuAvatar';
+import { SideMenuSubItem } from './SideMenuSubItem';
+import { SideMenuDivider } from './SideMenuDivider';
+import { SideMenuSubItemHeader } from './SideMenuSubItemHeader';
+import { SideMenuSubItemButtons } from './SideMenuSubItemButtons';
+import { SideMenuDropdownMenuSeparator } from './SideMenuDropdownMenuSeparator';
+var SideMenu = /** @class */ (function (_super) {
+    __extends(SideMenu, _super);
+    function SideMenu(props) {
+        var _this = _super.call(this, props) || this;
+        _this.scrollTimer = null;
+        _this.transitionTimer = null;
+        _this.setActiveItem = function (item) {
+            _this.setState({ activeItem: item });
+        };
+        _this.setActiveSubItem = function (item) {
+            _this.setState({ activeSubItem: item });
+        };
+        _this.handleMouseEnter = function () {
+            _this.resizeTimer = setTimeout(function () {
+                _this.setState({ isAbleToResize: true });
+            }, 500);
+        };
+        _this.handleMouseLeave = function () {
+            if (_this.resizeTimer) {
+                clearTimeout(_this.resizeTimer);
+            }
+            _this.setState({ isAbleToResize: false });
+        };
+        _this.showMinimisedRoot = function () {
+            if (_this.state.isMinimised) {
+                _this.setState({ isTransitioned: true });
+                _this.setState({ isMinimised: false });
+                if (_this.transitionTimer) {
+                    clearTimeout(_this.transitionTimer);
+                }
+                _this.transitionTimer = setTimeout(function () {
+                    _this.setState({ isTransitioned: false });
+                }, 1000);
+            }
+        };
+        _this.handleScroll = function (event) {
+            var element = event.target;
+            if (Math.floor(element.scrollHeight - element.scrollTop) === element.clientHeight) {
+                return;
+            }
+            if (!_this.state.hasScrollBar) {
+                _this.setState({ hasScrollBar: true });
+            }
+            if (_this.scrollTimer) {
+                clearTimeout(_this.scrollTimer);
+            }
+            _this.scrollTimer = setTimeout(function () {
+                _this.setState({ hasScrollBar: false });
+            }, 200);
+        };
+        _this.swipe = function (rightBorder) {
+            var isMouseDown = false, startX = 0;
+            var checkStart = function (event) {
+                startX = event.pageX;
+                isMouseDown = true;
+            };
+            var checkMove = function (event) {
+                if (!isMouseDown) {
+                    return;
+                }
+                if (event.pageX < startX && _this.state.isAbleToResize) {
+                    _this.setState({ isMinimised: true });
+                }
+                return;
+            };
+            var checkEnd = function () {
+                isMouseDown = false;
+            };
+            rightBorder.addEventListener('mousedown', checkStart);
+            rightBorder.addEventListener('mousemove', checkMove);
+            document.addEventListener('mouseup', checkEnd);
+        };
+        _this.rightBorderRef = React.createRef();
+        _this.state = {
+            isMinimised: false,
+            isAbleToResize: false,
+            activeItem: null,
+            activeSubItem: null,
+            hasScrollBar: false,
+            isTransitioned: false,
+        };
+        return _this;
+    }
+    SideMenu.prototype.componentDidMount = function () {
+        if (this.rightBorderRef.current) {
+            this.swipe(this.rightBorderRef.current);
+        }
+    };
+    SideMenu.prototype.componentWillUnmount = function () {
+        if (this.scrollTimer) {
+            clearTimeout(this.scrollTimer);
+        }
+        if (this.transitionTimer) {
+            clearTimeout(this.transitionTimer);
+        }
+    };
+    SideMenu.prototype.render = function () {
+        return this.renderMain();
+    };
+    SideMenu.prototype.renderMain = function () {
+        var _a, _b, _c;
+        var rootClasses = cx((_a = {},
+            _a[jsStyles.root()] = true,
+            _a[jsStyles.rootSafari()] = isSafari,
+            _a[jsStyles.minimisedRoot()] = this.state.isMinimised,
+            _a[jsStyles.rootWithInnerSubMenu()] = !this.props.isSeparatedMenu,
+            _a[jsStyles.rootWithoutScrollBar()] = !this.state.hasScrollBar,
+            _a));
+        return (React.createElement(SideMenuThemeContext.Provider, { value: {
+                isMinimised: this.state.isMinimised,
+                isTransitioned: this.state.isTransitioned,
+                isSeparatedMenu: this.props.isSeparatedMenu,
+                size: this.props.size,
+                activeItem: this.state.activeItem,
+                setActiveItem: this.setActiveItem,
+                activeSubItem: this.state.activeSubItem,
+                setActiveSubItem: this.setActiveSubItem,
+            } },
+            React.createElement(CommonWrapper, __assign({}, this.props),
+                React.createElement("aside", { className: cx((_b = {}, _b[jsStyles.rootWrapper()] = true, _b[jsStyles.rootWrapperIE()] = isIE11, _b)), "data-tid": "SideMenu" },
+                    React.createElement("div", { className: rootClasses, onMouseOver: this.showMinimisedRoot, onFocus: this.showMinimisedRoot, onScroll: this.handleScroll }, this.props.children),
+                    React.createElement("div", { className: cx((_c = {},
+                            _c[jsStyles.rightBorder()] = true,
+                            _c[jsStyles.resizableRightBorder()] = this.state.isAbleToResize,
+                            _c)), ref: this.rightBorderRef, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave })))));
+    };
+    SideMenu.__KONTUR_REACT_UI__ = 'SideMenu';
+    SideMenu.defaultProps = {
+        size: 'small',
+        isSeparatedMenu: false,
+    };
+    SideMenu.Body = SideMenuBody;
+    SideMenu.Footer = SideMenuFooter;
+    SideMenu.Header = SideMenuHeader;
+    SideMenu.Item = SideMenuItem;
+    SideMenu.SubItem = SideMenuSubItem;
+    SideMenu.SubItemHeader = SideMenuSubItemHeader;
+    SideMenu.Avatar = SideMenuAvatar;
+    SideMenu.Organisations = SideMenuOrganisations;
+    SideMenu.Divider = SideMenuDivider;
+    SideMenu.SubItemButtons = SideMenuSubItemButtons;
+    SideMenu.DropdownMenuSeparator = SideMenuDropdownMenuSeparator;
+    return SideMenu;
+}(React.Component));
+export { SideMenu };

package/src/SideMenu.styles.d.ts

@@ -0,0 +1,54 @@
+export declare const jsStyles: {
+    root(): string;
+    rootSafari(): string;
+    rootWithoutScrollBar(): string;
+    minimisedRoot(): string;
+    rootWithInnerSubMenu(): string;
+    rootWrapper(): string;
+    rootWrapperIE(): string;
+    rightBorder(): string;
+    resizableRightBorder(): string;
+    body(): string;
+    footer(): string;
+    headerWrapper(): string;
+    headerMinimisedWrapper(): string;
+    headerFixedWrapper(): string;
+    item(): string;
+    subItem(): string;
+    focusedItem(): string;
+    activeItem(): string;
+    activeSubItem(): string;
+    itemWrapper(): string;
+    itemMultilineWrapper(): string;
+    itemLargeWrapper(): string;
+    subItemLargeWrapper(): string;
+    itemLargeMultilineWrapper(): string;
+    itemLargeWrapperWithoutIcon(): string;
+    subItemWrapper(): string;
+    itemWrapperWithoutIcon(): string;
+    itemText(): string;
+    itemTextTransitioned(): string;
+    itemTextMultiline(): string;
+    subItemText(): string;
+    itemTextWithoutItemIcon(): string;
+    itemTextWithoutColumnIcons(): string;
+    subItemTextWithoutColumnIcons(): string;
+    itemTextLarge(): string;
+    divider(): string;
+    icon(): string;
+    iconMultiline(): string;
+    iconLarge(): string;
+    iconSubItemLarge(): string;
+    iconSubItem(): string;
+    avatarIcon(): string;
+    headerIcon(): string;
+    marker(): string;
+    markerMultiline(): string;
+    dropdownMenuSeparator(): string;
+    subItemHeader(): string;
+    separatedMenu(): string;
+    buttonsGroup(): string;
+    dropdownWrapper(): string;
+    dropdownLabel(): string;
+    subItemMenu(): string;
+};