@gravity-ui/navigation 2.33.0 → 3.0.0-beta-lunory.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 +1 -1
- package/build/cjs/components/ActionBar/ActionBar.d.ts +3 -3
- package/build/cjs/components/ActionBar/__stories__/ActionBar.stories.d.ts +17 -0
- package/build/cjs/components/ActionBar/__stories__/ActionBarShowcase.d.ts +2 -0
- package/build/cjs/components/ActionBar/__stories__/ActionBarSingleSection.d.ts +2 -0
- package/build/cjs/components/ActionBar/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/ActionBar/types.d.ts +1 -1
- package/build/cjs/components/AllPagesPanel/i18n/index.d.ts +5 -1
- package/build/cjs/components/AsideHeader/AsideHeaderContext.d.ts +1 -1
- package/build/cjs/components/AsideHeader/__stories__/AsideHeader.stories.d.ts +18 -0
- package/build/cjs/components/AsideHeader/__stories__/AsideHeaderShowcase.d.ts +14 -0
- package/build/cjs/components/AsideHeader/__stories__/getAsideHeaderWrapper.d.ts +3 -0
- package/build/cjs/components/AsideHeader/__stories__/moc.d.ts +6 -0
- package/build/cjs/components/AsideHeader/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/AsideHeader/components/index.d.ts +0 -1
- package/build/cjs/components/AsideHeader/i18n/index.d.ts +5 -1
- package/build/cjs/components/AsideHeader/types.d.ts +3 -4
- package/build/cjs/components/CompositeBar/CompositeBar.d.ts +1 -1
- package/build/cjs/components/CompositeBar/HighlightedItem/HighlightedItem.d.ts +1 -1
- package/build/cjs/components/CompositeBar/Item/Item.d.ts +15 -2
- package/build/cjs/components/Drawer/Drawer.d.ts +0 -5
- package/build/cjs/components/Drawer/__stories__/DisablePortal.d.ts +3 -0
- package/build/cjs/components/Drawer/__stories__/Drawer.stories.d.ts +7 -0
- package/build/cjs/components/Drawer/__stories__/DrawerShowcase.d.ts +3 -0
- package/build/cjs/components/Drawer/__stories__/HideVeil.d.ts +3 -0
- package/build/cjs/components/Drawer/__stories__/ResizableItem.d.ts +3 -0
- package/build/cjs/components/Drawer/__stories__/moc.d.ts +2 -0
- package/build/cjs/components/Drawer/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/Drawer/utils.d.ts +2 -3
- package/build/cjs/components/Footer/desktop/__stories__/Footer.stories.d.ts +8 -0
- package/build/cjs/components/Footer/desktop/__stories__/FooterShowcase.d.ts +4 -0
- package/build/cjs/components/Footer/desktop/__stories__/moc.d.ts +3 -0
- package/build/cjs/components/Footer/desktop/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/Footer/mobile/__stories__/MobileFooter.stories.d.ts +8 -0
- package/build/cjs/components/Footer/mobile/__stories__/MobileFooterShowcase.d.ts +4 -0
- package/build/cjs/components/Footer/mobile/__stories__/moc.d.ts +3 -0
- package/build/cjs/components/Footer/mobile/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/FooterItem/__stories__/FooterItem.stories.d.ts +6 -0
- package/build/cjs/components/FooterItem/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.d.ts +1 -3
- package/build/cjs/components/HotkeysPanel/__stories__/HotkeysPanel.stories.d.ts +5 -0
- package/build/cjs/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.d.ts +6 -0
- package/build/cjs/components/HotkeysPanel/__stories__/moc.d.ts +2 -0
- package/build/cjs/components/HotkeysPanel/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/Logo/Logo.d.ts +1 -1
- package/build/cjs/components/Logo/__stories__/Logo.stories.d.ts +6 -0
- package/build/cjs/components/Logo/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/MobileHeader/BurgerMenu/__stories__/BurgerMenu.stories.d.ts +6 -0
- package/build/cjs/components/MobileHeader/BurgerMenu/__stories__/moc.d.ts +2 -0
- package/build/cjs/components/MobileHeader/BurgerMenu/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/MobileHeader/MobileHeader.d.ts +2 -1
- package/build/cjs/components/MobileHeader/OverlapPanel/__stories__/OverlapPanel.stories.d.ts +6 -0
- package/build/cjs/components/MobileHeader/OverlapPanel/__stories__/moc.d.ts +2 -0
- package/build/cjs/components/MobileHeader/OverlapPanel/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/MobileHeader/__stories__/MobileHeader.stories.d.ts +4 -0
- package/build/cjs/components/MobileHeader/__stories__/MobileHeaderShowcase.d.ts +3 -0
- package/build/cjs/components/MobileHeader/__stories__/moc.d.ts +1 -0
- package/build/cjs/components/MobileHeader/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/MobileHeader/i18n/index.d.ts +5 -1
- package/build/cjs/components/MobileHeader/types.d.ts +0 -1
- package/build/cjs/components/MobileLogo/__stories__/MobileLogo.stories.d.ts +6 -0
- package/build/cjs/components/MobileLogo/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/Settings/Settings.d.ts +1 -3
- package/build/cjs/components/Settings/__stories__/Settings.stories.d.ts +5 -0
- package/build/cjs/components/Settings/__stories__/SettingsDemo.d.ts +14 -0
- package/build/cjs/components/Settings/__stories__/SettingsMobileDemo.d.ts +8 -0
- package/build/cjs/components/Settings/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/Settings/collect-settings.d.ts +0 -2
- package/build/cjs/components/Settings/i18n/index.d.ts +5 -1
- package/build/cjs/components/Title/i18n/index.d.ts +5 -1
- package/build/cjs/components/TopAlert/TopAlert.d.ts +10 -0
- package/build/cjs/components/TopAlert/index.d.ts +1 -0
- package/build/cjs/components/TopAlert/useTopAlertHeight.d.ts +10 -0
- package/build/cjs/components/types.d.ts +9 -5
- package/build/cjs/hooks/useForwardRef.d.ts +1 -1
- package/build/cjs/index-HbnaVyaN.js +69 -0
- package/build/cjs/index-HbnaVyaN.js.map +1 -0
- package/build/cjs/index-j1vouNtm.js +5734 -0
- package/build/cjs/index-j1vouNtm.js.map +1 -0
- package/build/cjs/index.js +32 -194
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/ActionBar/ActionBar.d.ts +3 -3
- package/build/esm/components/ActionBar/__stories__/ActionBar.stories.d.ts +17 -0
- package/build/esm/components/ActionBar/__stories__/ActionBarShowcase.d.ts +2 -0
- package/build/esm/components/ActionBar/__stories__/ActionBarSingleSection.d.ts +2 -0
- package/build/esm/components/ActionBar/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/ActionBar/types.d.ts +1 -1
- package/build/esm/components/AllPagesPanel/i18n/index.d.ts +5 -1
- package/build/esm/components/AsideHeader/AsideHeaderContext.d.ts +1 -1
- package/build/esm/components/AsideHeader/__stories__/AsideHeader.stories.d.ts +18 -0
- package/build/esm/components/AsideHeader/__stories__/AsideHeaderShowcase.d.ts +14 -0
- package/build/esm/components/AsideHeader/__stories__/getAsideHeaderWrapper.d.ts +3 -0
- package/build/esm/components/AsideHeader/__stories__/moc.d.ts +6 -0
- package/build/esm/components/AsideHeader/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/AsideHeader/components/index.d.ts +0 -1
- package/build/esm/components/AsideHeader/i18n/index.d.ts +5 -1
- package/build/esm/components/AsideHeader/types.d.ts +3 -4
- package/build/esm/components/CompositeBar/CompositeBar.d.ts +1 -1
- package/build/esm/components/CompositeBar/HighlightedItem/HighlightedItem.d.ts +1 -1
- package/build/esm/components/CompositeBar/Item/Item.d.ts +15 -2
- package/build/esm/components/Drawer/Drawer.d.ts +0 -5
- package/build/esm/components/Drawer/__stories__/DisablePortal.d.ts +3 -0
- package/build/esm/components/Drawer/__stories__/Drawer.stories.d.ts +7 -0
- package/build/esm/components/Drawer/__stories__/DrawerShowcase.d.ts +3 -0
- package/build/esm/components/Drawer/__stories__/HideVeil.d.ts +3 -0
- package/build/esm/components/Drawer/__stories__/ResizableItem.d.ts +3 -0
- package/build/esm/components/Drawer/__stories__/moc.d.ts +2 -0
- package/build/esm/components/Drawer/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/Drawer/utils.d.ts +2 -3
- package/build/esm/components/Footer/desktop/__stories__/Footer.stories.d.ts +8 -0
- package/build/esm/components/Footer/desktop/__stories__/FooterShowcase.d.ts +4 -0
- package/build/esm/components/Footer/desktop/__stories__/moc.d.ts +3 -0
- package/build/esm/components/Footer/desktop/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/Footer/mobile/__stories__/MobileFooter.stories.d.ts +8 -0
- package/build/esm/components/Footer/mobile/__stories__/MobileFooterShowcase.d.ts +4 -0
- package/build/esm/components/Footer/mobile/__stories__/moc.d.ts +3 -0
- package/build/esm/components/Footer/mobile/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/FooterItem/__stories__/FooterItem.stories.d.ts +6 -0
- package/build/esm/components/FooterItem/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/HotkeysPanel/HotkeysPanel.d.ts +1 -3
- package/build/esm/components/HotkeysPanel/__stories__/HotkeysPanel.stories.d.ts +5 -0
- package/build/esm/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.d.ts +6 -0
- package/build/esm/components/HotkeysPanel/__stories__/moc.d.ts +2 -0
- package/build/esm/components/HotkeysPanel/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/Logo/Logo.d.ts +1 -1
- package/build/esm/components/Logo/__stories__/Logo.stories.d.ts +6 -0
- package/build/esm/components/Logo/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/MobileHeader/BurgerMenu/__stories__/BurgerMenu.stories.d.ts +6 -0
- package/build/esm/components/MobileHeader/BurgerMenu/__stories__/moc.d.ts +2 -0
- package/build/esm/components/MobileHeader/BurgerMenu/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/MobileHeader/MobileHeader.d.ts +2 -1
- package/build/esm/components/MobileHeader/OverlapPanel/__stories__/OverlapPanel.stories.d.ts +6 -0
- package/build/esm/components/MobileHeader/OverlapPanel/__stories__/moc.d.ts +2 -0
- package/build/esm/components/MobileHeader/OverlapPanel/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/MobileHeader/__stories__/MobileHeader.stories.d.ts +4 -0
- package/build/esm/components/MobileHeader/__stories__/MobileHeaderShowcase.d.ts +3 -0
- package/build/esm/components/MobileHeader/__stories__/moc.d.ts +1 -0
- package/build/esm/components/MobileHeader/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/MobileHeader/i18n/index.d.ts +5 -1
- package/build/esm/components/MobileHeader/types.d.ts +0 -1
- package/build/esm/components/MobileLogo/__stories__/MobileLogo.stories.d.ts +6 -0
- package/build/esm/components/MobileLogo/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/Settings/Settings.d.ts +1 -3
- package/build/esm/components/Settings/__stories__/Settings.stories.d.ts +5 -0
- package/build/esm/components/Settings/__stories__/SettingsDemo.d.ts +14 -0
- package/build/esm/components/Settings/__stories__/SettingsMobileDemo.d.ts +8 -0
- package/build/esm/components/Settings/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/Settings/collect-settings.d.ts +0 -2
- package/build/esm/components/Settings/i18n/index.d.ts +5 -1
- package/build/esm/components/Title/i18n/index.d.ts +5 -1
- package/build/esm/components/TopAlert/TopAlert.d.ts +10 -0
- package/build/esm/components/TopAlert/index.d.ts +1 -0
- package/build/esm/components/TopAlert/useTopAlertHeight.d.ts +10 -0
- package/build/esm/components/types.d.ts +9 -5
- package/build/esm/hooks/useForwardRef.d.ts +1 -1
- package/build/esm/index-C7O46WxY.js +5689 -0
- package/build/esm/index-C7O46WxY.js.map +1 -0
- package/build/esm/index-DruPZQaT.js +67 -0
- package/build/esm/index-DruPZQaT.js.map +1 -0
- package/build/esm/index.js +6 -167
- package/build/esm/index.js.map +1 -1
- package/package.json +48 -45
- package/build/cjs/ActionBar-3c6cdf57.js +0 -63
- package/build/cjs/ActionBar-3c6cdf57.js.map +0 -1
- package/build/cjs/AsideFallback.js +0 -31
- package/build/cjs/AsideFallback.js.map +0 -1
- package/build/cjs/AsideHeader.js +0 -38
- package/build/cjs/AsideHeader.js.map +0 -1
- package/build/cjs/AsideHeaderContext.js +0 -44
- package/build/cjs/AsideHeaderContext.js.map +0 -1
- package/build/cjs/Content-64d5738a.js +0 -20
- package/build/cjs/Content-64d5738a.js.map +0 -1
- package/build/cjs/Drawer.js +0 -3201
- package/build/cjs/Drawer.js.map +0 -1
- package/build/cjs/FooterItem-d34d84ed.js +0 -336
- package/build/cjs/FooterItem-d34d84ed.js.map +0 -1
- package/build/cjs/FooterItem.js +0 -31
- package/build/cjs/FooterItem.js.map +0 -1
- package/build/cjs/HotkeysPanel-1c05ffa8.js +0 -67
- package/build/cjs/HotkeysPanel-1c05ffa8.js.map +0 -1
- package/build/cjs/Item-ff6bc440.js +0 -303
- package/build/cjs/Item-ff6bc440.js.map +0 -1
- package/build/cjs/PageLayout.js +0 -40
- package/build/cjs/PageLayout.js.map +0 -1
- package/build/cjs/PageLayoutAside-56a441a9.js +0 -1008
- package/build/cjs/PageLayoutAside-56a441a9.js.map +0 -1
- package/build/cjs/PageLayoutAside.js +0 -25
- package/build/cjs/PageLayoutAside.js.map +0 -1
- package/build/cjs/Settings-8dc2a8ee.js +0 -579
- package/build/cjs/Settings-8dc2a8ee.js.map +0 -1
- package/build/cjs/Title-54580605.js +0 -42
- package/build/cjs/Title-54580605.js.map +0 -1
- package/build/cjs/TopPanel-c6b83157.js +0 -82
- package/build/cjs/TopPanel-c6b83157.js.map +0 -1
- package/build/cjs/cn-9933321a.js +0 -11
- package/build/cjs/cn-9933321a.js.map +0 -1
- package/build/cjs/components/AsideHeader/components/TopPanel.d.ts +0 -7
- package/build/cjs/components/AsideHeader/useAsideHeaderTopPanel.d.ts +0 -10
- package/build/cjs/constants-d81c3867.js +0 -14
- package/build/cjs/constants-d81c3867.js.map +0 -1
- package/build/cjs/debounce-8772fd80.js +0 -545
- package/build/cjs/debounce-8772fd80.js.map +0 -1
- package/build/cjs/divider-collapsed-b743122e.js +0 -41
- package/build/cjs/divider-collapsed-b743122e.js.map +0 -1
- package/build/cjs/index2.js +0 -14
- package/build/cjs/index2.js.map +0 -1
- package/build/cjs/index3.js +0 -17
- package/build/cjs/index3.js.map +0 -1
- package/build/cjs/index4.js +0 -18
- package/build/cjs/index4.js.map +0 -1
- package/build/cjs/index5.js +0 -22
- package/build/cjs/index5.js.map +0 -1
- package/build/cjs/index6.js +0 -23
- package/build/cjs/index6.js.map +0 -1
- package/build/cjs/style-inject.es-dcee06b6.js +0 -31
- package/build/cjs/style-inject.es-dcee06b6.js.map +0 -1
- package/build/cjs/tslib.es6-705c6589.js +0 -36
- package/build/cjs/tslib.es6-705c6589.js.map +0 -1
- package/build/cjs/utils-db3e03c2.js +0 -8
- package/build/cjs/utils-db3e03c2.js.map +0 -1
- package/build/esm/ActionBar-834b178a.js +0 -57
- package/build/esm/ActionBar-834b178a.js.map +0 -1
- package/build/esm/AsideFallback.js +0 -23
- package/build/esm/AsideFallback.js.map +0 -1
- package/build/esm/AsideHeader.js +0 -30
- package/build/esm/AsideHeader.js.map +0 -1
- package/build/esm/AsideHeaderContext.js +0 -31
- package/build/esm/AsideHeaderContext.js.map +0 -1
- package/build/esm/Content-f94ba85d.js +0 -14
- package/build/esm/Content-f94ba85d.js.map +0 -1
- package/build/esm/Drawer.js +0 -3173
- package/build/esm/Drawer.js.map +0 -1
- package/build/esm/FooterItem-af3c4fa3.js +0 -326
- package/build/esm/FooterItem-af3c4fa3.js.map +0 -1
- package/build/esm/FooterItem.js +0 -23
- package/build/esm/FooterItem.js.map +0 -1
- package/build/esm/HotkeysPanel-c7bf8466.js +0 -61
- package/build/esm/HotkeysPanel-c7bf8466.js.map +0 -1
- package/build/esm/Item-55899ec8.js +0 -289
- package/build/esm/Item-55899ec8.js.map +0 -1
- package/build/esm/PageLayout.js +0 -32
- package/build/esm/PageLayout.js.map +0 -1
- package/build/esm/PageLayoutAside-edd59955.js +0 -983
- package/build/esm/PageLayoutAside-edd59955.js.map +0 -1
- package/build/esm/PageLayoutAside.js +0 -17
- package/build/esm/PageLayoutAside.js.map +0 -1
- package/build/esm/Settings-e660a4c5.js +0 -553
- package/build/esm/Settings-e660a4c5.js.map +0 -1
- package/build/esm/Title-03b4255a.js +0 -36
- package/build/esm/Title-03b4255a.js.map +0 -1
- package/build/esm/TopPanel-cd270f27.js +0 -76
- package/build/esm/TopPanel-cd270f27.js.map +0 -1
- package/build/esm/cn-ffe5e9f5.js +0 -8
- package/build/esm/cn-ffe5e9f5.js.map +0 -1
- package/build/esm/components/AsideHeader/components/TopPanel.d.ts +0 -7
- package/build/esm/components/AsideHeader/useAsideHeaderTopPanel.d.ts +0 -10
- package/build/esm/constants-b1604ff5.js +0 -8
- package/build/esm/constants-b1604ff5.js.map +0 -1
- package/build/esm/debounce-64cd2b4c.js +0 -543
- package/build/esm/debounce-64cd2b4c.js.map +0 -1
- package/build/esm/divider-collapsed-a0ef54c3.js +0 -19
- package/build/esm/divider-collapsed-a0ef54c3.js.map +0 -1
- package/build/esm/index2.js +0 -6
- package/build/esm/index2.js.map +0 -1
- package/build/esm/index3.js +0 -9
- package/build/esm/index3.js.map +0 -1
- package/build/esm/index4.js +0 -10
- package/build/esm/index4.js.map +0 -1
- package/build/esm/index5.js +0 -12
- package/build/esm/index5.js.map +0 -1
- package/build/esm/index6.js +0 -12
- package/build/esm/index6.js.map +0 -1
- package/build/esm/style-inject.es-1f59c1d0.js +0 -29
- package/build/esm/style-inject.es-1f59c1d0.js.map +0 -1
- package/build/esm/tslib.es6-3cd4e99f.js +0 -34
- package/build/esm/tslib.es6-3cd4e99f.js.map +0 -1
- package/build/esm/utils-117463a5.js +0 -6
- package/build/esm/utils-117463a5.js.map +0 -1
|
@@ -1,983 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import React__default, { useCallback, useMemo, useRef, useState, useEffect, Component, createElement, useContext } from 'react';
|
|
3
|
-
import { Icon, Button, Flex, Text, Tooltip, List, Popup, setRef } from '@gravity-ui/uikit';
|
|
4
|
-
import { Pin, PinFill, Ellipsis, Gear } from '@gravity-ui/icons';
|
|
5
|
-
import { useAsideHeaderInnerContext, useAsideHeaderContext, AsideHeaderInnerContextProvider } from './AsideHeaderContext.js';
|
|
6
|
-
import { b as block, N as NAMESPACE } from './cn-ffe5e9f5.js';
|
|
7
|
-
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
|
|
8
|
-
import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
|
|
9
|
-
import { a as ASIDE_HEADER_COMPACT_WIDTH, H as HEADER_DIVIDER_HEIGHT } from './constants-b1604ff5.js';
|
|
10
|
-
import { C as COLLAPSE_ITEM_ID, g as getItemsMinHeight, a as getAutosizeListItems, b as getSelectedItemIndex, c as getItemHeight, d as getItemsHeight, i as isMenuItem, I as Item, e as getMoreButtonItem } from './Item-55899ec8.js';
|
|
11
|
-
import { b as b$6 } from './utils-117463a5.js';
|
|
12
|
-
import { h as headerDividerCollapsedIcon } from './divider-collapsed-a0ef54c3.js';
|
|
13
|
-
import { Drawer, DrawerItem } from './Drawer.js';
|
|
14
|
-
import './debounce-64cd2b4c.js';
|
|
15
|
-
|
|
16
|
-
var css_248z$5 = ".gn-all-pages-list-item{align-items:center;column-gap:var(--g-spacing-4);display:flex;height:40px;padding:0 var(--g-spacing-6);width:100%}.gn-all-pages-list-item__text{flex:1}.gn-all-pages-list-item__icon{color:var(--g-color-text-misc)}.gn-all-pages-list-item_edit-mode{padding:0 0 0 var(--g-spacing-4)}";
|
|
17
|
-
styleInject(css_248z$5);
|
|
18
|
-
|
|
19
|
-
const b$5 = block('all-pages-list-item');
|
|
20
|
-
const AllPagesListItem = (props) => {
|
|
21
|
-
const { item, editMode, onToggle, enableSorting, onDragStart, onDragEnd } = props;
|
|
22
|
-
const onPinButtonClick = useCallback((e) => {
|
|
23
|
-
e.stopPropagation();
|
|
24
|
-
e.preventDefault();
|
|
25
|
-
onToggle();
|
|
26
|
-
}, [onToggle]);
|
|
27
|
-
const onItemClick = (e) => {
|
|
28
|
-
if (editMode) {
|
|
29
|
-
e.stopPropagation();
|
|
30
|
-
e.preventDefault();
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
const onItemDragStart = (e) => {
|
|
34
|
-
if (editMode && onDragStart) {
|
|
35
|
-
e.stopPropagation();
|
|
36
|
-
e.preventDefault();
|
|
37
|
-
onDragStart();
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
const onItemDragEnd = (e) => {
|
|
41
|
-
if (editMode && onDragEnd) {
|
|
42
|
-
e.stopPropagation();
|
|
43
|
-
e.preventDefault();
|
|
44
|
-
onDragEnd();
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
return (React__default.createElement("div", { key: item.id, className: b$5({ 'edit-mode': editMode && enableSorting }), onClick: onItemClick, draggable: editMode && enableSorting, onMouseDown: onItemDragStart, onMouseUp: onItemDragEnd },
|
|
48
|
-
item.icon ? (React__default.createElement(Icon, { className: b$5('icon'), data: item.icon, size: item.iconSize })) : null,
|
|
49
|
-
React__default.createElement("span", { className: b$5('text') }, item.title),
|
|
50
|
-
editMode && !item.preventUserRemoving && (React__default.createElement(Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
|
|
51
|
-
React__default.createElement(Button.Icon, null, item.hidden ? React__default.createElement(Pin, null) : React__default.createElement(PinFill, null))))));
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
var en$1 = {
|
|
55
|
-
"menu-item.all-pages.title": "All pages",
|
|
56
|
-
"all-panel.menu.category.allOther": "All other",
|
|
57
|
-
"all-panel.resetToDefault": "Reset to default",
|
|
58
|
-
"all-panel.title.editing": "Configuring the menu bar",
|
|
59
|
-
"all-panel.title.main": "All pages"
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
var ru$1 = {
|
|
63
|
-
"menu-item.all-pages.title": "Все страницы",
|
|
64
|
-
"all-panel.menu.category.allOther": "Остальное",
|
|
65
|
-
"all-panel.resetToDefault": "Сбросить по умолчанию",
|
|
66
|
-
"all-panel.title.editing": "Настройка панели меню",
|
|
67
|
-
"all-panel.title.main": "Все страницы"
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
const COMPONENT$1 = 'AllPagesPanel';
|
|
71
|
-
var i18n$1 = addComponentKeysets({ en: en$1, ru: ru$1 }, `${NAMESPACE}${COMPONENT$1}`);
|
|
72
|
-
|
|
73
|
-
const ALL_PAGES_ID = 'all-pages';
|
|
74
|
-
function getAllPagesMenuItem() {
|
|
75
|
-
return {
|
|
76
|
-
id: ALL_PAGES_ID,
|
|
77
|
-
title: i18n$1('menu-item.all-pages.title'),
|
|
78
|
-
tooltipText: i18n$1('menu-item.all-pages.title'),
|
|
79
|
-
icon: Ellipsis,
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
const useGroupedMenuItems = (items) => {
|
|
84
|
-
const allPagesMenuItems = useMemo(() => {
|
|
85
|
-
const filteredItems = items.filter((item) => item.type !== 'divider' && item.id !== ALL_PAGES_ID);
|
|
86
|
-
filteredItems.sort((a, b) => {
|
|
87
|
-
if (a.type === 'action') {
|
|
88
|
-
return 1;
|
|
89
|
-
}
|
|
90
|
-
if (b.type === 'action') {
|
|
91
|
-
return -1;
|
|
92
|
-
}
|
|
93
|
-
return 0;
|
|
94
|
-
});
|
|
95
|
-
const groupedItems = filteredItems.reduce((acc, item) => {
|
|
96
|
-
const category = item.category || i18n$1('all-panel.menu.category.allOther');
|
|
97
|
-
if (!acc[category]) {
|
|
98
|
-
acc[category] = [];
|
|
99
|
-
}
|
|
100
|
-
acc[category].push(item);
|
|
101
|
-
return acc;
|
|
102
|
-
}, {});
|
|
103
|
-
return groupedItems;
|
|
104
|
-
}, [items]);
|
|
105
|
-
return allPagesMenuItems;
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
var css_248z$4 = ".gn-all-pages-panel{box-sizing:border-box;height:100%;min-width:300px;padding:var(--g-spacing-4) var(--g-spacing-6)}.gn-all-pages-panel__content{flex:1;margin:0 calc(var(--g-spacing-6)*-1);overflow:auto}.gn-all-pages-panel__category{padding:0 var(--g-spacing-6)}.gn-all-pages-panel__discoverable-feature-wrapper{display:flex}.gn-all-pages-panel__item_editMode{padding:0 var(--g-spacing-6)}.gn-all-pages-panel__drag-placeholder{text-wrap:nowrap;padding-left:88px;padding-right:68px;visibility:hidden}";
|
|
109
|
-
styleInject(css_248z$4);
|
|
110
|
-
|
|
111
|
-
const b$4 = block('all-pages-panel');
|
|
112
|
-
const AllPagesPanel = (props) => {
|
|
113
|
-
const { startEditIcon, onEditModeChanged, className } = props;
|
|
114
|
-
const { menuItems, defaultMenuItems, onMenuItemsChanged, editMenuProps } = useAsideHeaderInnerContext();
|
|
115
|
-
const menuItemsRef = useRef(menuItems);
|
|
116
|
-
menuItemsRef.current = menuItems;
|
|
117
|
-
const [isEditMode, setIsEditMode] = useState(false);
|
|
118
|
-
const [draggingItemTitle, setDraggingItemTitle] = useState(null);
|
|
119
|
-
const toggleEditMode = useCallback(() => {
|
|
120
|
-
setIsEditMode((prev) => !prev);
|
|
121
|
-
}, []);
|
|
122
|
-
const groupedItems = useGroupedMenuItems(menuItems);
|
|
123
|
-
useEffect(() => {
|
|
124
|
-
var _a;
|
|
125
|
-
onEditModeChanged === null || onEditModeChanged === void 0 ? void 0 : onEditModeChanged(isEditMode);
|
|
126
|
-
if (isEditMode) {
|
|
127
|
-
(_a = editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.onOpenEditMode) === null || _a === void 0 ? void 0 : _a.call(editMenuProps);
|
|
128
|
-
}
|
|
129
|
-
}, [isEditMode, onEditModeChanged, editMenuProps]);
|
|
130
|
-
const onItemClick = useCallback((item) => {
|
|
131
|
-
var _a;
|
|
132
|
-
//@ts-ignore TODO fix when @gravity-ui/uikit/List will provide event arg on item click
|
|
133
|
-
(_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, false);
|
|
134
|
-
}, []);
|
|
135
|
-
const togglePageVisibility = useCallback((item) => {
|
|
136
|
-
var _a;
|
|
137
|
-
if (!onMenuItemsChanged) {
|
|
138
|
-
return;
|
|
139
|
-
}
|
|
140
|
-
const changedItem = Object.assign(Object.assign({}, item), { hidden: !item.hidden });
|
|
141
|
-
const originItems = menuItemsRef.current.filter((menuItem) => menuItem.id !== ALL_PAGES_ID);
|
|
142
|
-
(_a = editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.onToggleMenuItem) === null || _a === void 0 ? void 0 : _a.call(editMenuProps, changedItem);
|
|
143
|
-
onMenuItemsChanged(originItems.map((menuItem) => {
|
|
144
|
-
if (menuItem.id !== changedItem.id) {
|
|
145
|
-
return menuItem;
|
|
146
|
-
}
|
|
147
|
-
return changedItem;
|
|
148
|
-
}));
|
|
149
|
-
}, [onMenuItemsChanged, editMenuProps]);
|
|
150
|
-
const onDragEnd = useCallback(() => {
|
|
151
|
-
setDraggingItemTitle(null);
|
|
152
|
-
}, [setDraggingItemTitle]);
|
|
153
|
-
const itemRender = useCallback((item, _isActive, _itemIndex) => {
|
|
154
|
-
const onDragStart = () => {
|
|
155
|
-
setDraggingItemTitle(item.title);
|
|
156
|
-
};
|
|
157
|
-
return (React__default.createElement(AllPagesListItem, { item: item, onDragStart: onDragStart, onDragEnd: onDragEnd, editMode: isEditMode, onToggle: () => togglePageVisibility(item), enableSorting: editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.enableSorting }));
|
|
158
|
-
}, [isEditMode, togglePageVisibility, onDragEnd, setDraggingItemTitle, editMenuProps]);
|
|
159
|
-
const onResetToDefaultClick = useCallback(() => {
|
|
160
|
-
var _a;
|
|
161
|
-
if (!onMenuItemsChanged) {
|
|
162
|
-
return;
|
|
163
|
-
}
|
|
164
|
-
(_a = editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.onResetSettingsToDefault) === null || _a === void 0 ? void 0 : _a.call(editMenuProps);
|
|
165
|
-
const originItems = defaultMenuItems === null || defaultMenuItems === void 0 ? void 0 : defaultMenuItems.filter((item) => item.id !== ALL_PAGES_ID);
|
|
166
|
-
if (originItems) {
|
|
167
|
-
onMenuItemsChanged(originItems);
|
|
168
|
-
}
|
|
169
|
-
}, [onMenuItemsChanged, editMenuProps, defaultMenuItems]);
|
|
170
|
-
const changeItemsOrder = useCallback(({ oldIndex, newIndex }) => {
|
|
171
|
-
var _a;
|
|
172
|
-
const newItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
|
|
173
|
-
const element = newItems.splice(oldIndex, 1)[0];
|
|
174
|
-
newItems.splice(newIndex, 0, element);
|
|
175
|
-
onMenuItemsChanged === null || onMenuItemsChanged === void 0 ? void 0 : onMenuItemsChanged(newItems.filter((item) => item.type !== 'divider'));
|
|
176
|
-
setDraggingItemTitle(null);
|
|
177
|
-
(_a = editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.onChangeItemsOrder) === null || _a === void 0 ? void 0 : _a.call(editMenuProps, element, oldIndex, newIndex);
|
|
178
|
-
}, [onMenuItemsChanged, editMenuProps]);
|
|
179
|
-
const sortableItems = useMemo(() => {
|
|
180
|
-
return menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID && !item.afterMoreButton && item.type !== 'divider');
|
|
181
|
-
}, [menuItems]);
|
|
182
|
-
return (React__default.createElement(Flex, { className: b$4(null, className), gap: "5", direction: "column" },
|
|
183
|
-
React__default.createElement(Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
|
|
184
|
-
React__default.createElement(Text, { variant: "subheader-2" }, isEditMode ? i18n$1('all-panel.title.editing') : i18n$1('all-panel.title.main')),
|
|
185
|
-
React__default.createElement(Tooltip, { content: i18n$1('all-panel.title.editing') },
|
|
186
|
-
React__default.createElement(Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React__default.createElement(Icon, { data: Gear })))),
|
|
187
|
-
React__default.createElement(Flex, { className: b$4('content'), gap: "5", direction: "column" }, isEditMode && (editMenuProps === null || editMenuProps === void 0 ? void 0 : editMenuProps.enableSorting) ? (React__default.createElement("div", null,
|
|
188
|
-
React__default.createElement(List, { itemClassName: b$4('item', { editMode: true }), itemHeight: 40, onSortEnd: changeItemsOrder, sortable: true, virtualized: false, filterable: false, items: sortableItems, onItemClick: onItemClick, renderItem: itemRender }),
|
|
189
|
-
draggingItemTitle && (React__default.createElement("div", { className: b$4('drag-placeholder') }, draggingItemTitle)))) : (Object.keys(groupedItems).map((category) => {
|
|
190
|
-
return (React__default.createElement(Flex, { key: category, direction: "column", gap: "3" },
|
|
191
|
-
React__default.createElement(Text, { className: b$4('category'), variant: "body-1", color: "secondary" }, category),
|
|
192
|
-
React__default.createElement(List, { virtualized: false, filterable: false, items: groupedItems[category], onItemClick: onItemClick, renderItem: itemRender })));
|
|
193
|
-
}))),
|
|
194
|
-
isEditMode && (React__default.createElement(Button, { onClick: onResetToDefaultClick }, i18n$1('all-panel.resetToDefault')))));
|
|
195
|
-
};
|
|
196
|
-
|
|
197
|
-
const useVisibleMenuItems = () => {
|
|
198
|
-
const { menuItems, allPagesIsAvailable } = useAsideHeaderInnerContext();
|
|
199
|
-
return useMemo(() => {
|
|
200
|
-
if (!allPagesIsAvailable) {
|
|
201
|
-
return menuItems;
|
|
202
|
-
}
|
|
203
|
-
let lastVisibleIndex = 0;
|
|
204
|
-
return menuItems.filter((item, index, items) => {
|
|
205
|
-
if (item.hidden) {
|
|
206
|
-
return false;
|
|
207
|
-
}
|
|
208
|
-
if (index > 0 &&
|
|
209
|
-
item.type === 'divider' &&
|
|
210
|
-
(items[lastVisibleIndex].type === 'divider' || items[lastVisibleIndex].hidden)) {
|
|
211
|
-
return false;
|
|
212
|
-
}
|
|
213
|
-
lastVisibleIndex = index;
|
|
214
|
-
return true;
|
|
215
|
-
});
|
|
216
|
-
}, [allPagesIsAvailable, menuItems]);
|
|
217
|
-
};
|
|
218
|
-
|
|
219
|
-
/**
|
|
220
|
-
* Detect Element Resize.
|
|
221
|
-
* https://github.com/sdecima/javascript-detect-element-resize
|
|
222
|
-
* Sebastian Decima
|
|
223
|
-
*
|
|
224
|
-
* Forked from version 0.5.3; includes the following modifications:
|
|
225
|
-
* 1) Guard against unsafe 'window' and 'document' references (to support SSR).
|
|
226
|
-
* 2) Defer initialization code via a top-level function wrapper (to support SSR).
|
|
227
|
-
* 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
|
|
228
|
-
* 4) Add nonce for style element.
|
|
229
|
-
* 5) Use 'export' statement over 'module.exports' assignment
|
|
230
|
-
**/
|
|
231
|
-
|
|
232
|
-
// Check `document` and `window` in case of server-side rendering
|
|
233
|
-
let windowObject;
|
|
234
|
-
if (typeof window !== "undefined") {
|
|
235
|
-
windowObject = window;
|
|
236
|
-
|
|
237
|
-
// eslint-disable-next-line no-restricted-globals
|
|
238
|
-
} else if (typeof self !== "undefined") {
|
|
239
|
-
// eslint-disable-next-line no-restricted-globals
|
|
240
|
-
windowObject = self;
|
|
241
|
-
} else {
|
|
242
|
-
windowObject = global;
|
|
243
|
-
}
|
|
244
|
-
let cancelFrame = null;
|
|
245
|
-
let requestFrame = null;
|
|
246
|
-
const TIMEOUT_DURATION = 20;
|
|
247
|
-
const clearTimeoutFn = windowObject.clearTimeout;
|
|
248
|
-
const setTimeoutFn = windowObject.setTimeout;
|
|
249
|
-
const cancelAnimationFrameFn = windowObject.cancelAnimationFrame || windowObject.mozCancelAnimationFrame || windowObject.webkitCancelAnimationFrame;
|
|
250
|
-
const requestAnimationFrameFn = windowObject.requestAnimationFrame || windowObject.mozRequestAnimationFrame || windowObject.webkitRequestAnimationFrame;
|
|
251
|
-
if (cancelAnimationFrameFn == null || requestAnimationFrameFn == null) {
|
|
252
|
-
// For environments that don't support animation frame,
|
|
253
|
-
// fallback to a setTimeout based approach.
|
|
254
|
-
cancelFrame = clearTimeoutFn;
|
|
255
|
-
requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
|
|
256
|
-
return setTimeoutFn(callback, TIMEOUT_DURATION);
|
|
257
|
-
};
|
|
258
|
-
} else {
|
|
259
|
-
// Counter intuitively, environments that support animation frames can be trickier.
|
|
260
|
-
// Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
|
|
261
|
-
// In this case, we should fallback to a setTimeout() implementation.
|
|
262
|
-
cancelFrame = function cancelFrame([animationFrameID, timeoutID]) {
|
|
263
|
-
cancelAnimationFrameFn(animationFrameID);
|
|
264
|
-
clearTimeoutFn(timeoutID);
|
|
265
|
-
};
|
|
266
|
-
requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
|
|
267
|
-
const animationFrameID = requestAnimationFrameFn(function animationFrameCallback() {
|
|
268
|
-
clearTimeoutFn(timeoutID);
|
|
269
|
-
callback();
|
|
270
|
-
});
|
|
271
|
-
const timeoutID = setTimeoutFn(function timeoutCallback() {
|
|
272
|
-
cancelAnimationFrameFn(animationFrameID);
|
|
273
|
-
callback();
|
|
274
|
-
}, TIMEOUT_DURATION);
|
|
275
|
-
return [animationFrameID, timeoutID];
|
|
276
|
-
};
|
|
277
|
-
}
|
|
278
|
-
function createDetectElementResize(nonce) {
|
|
279
|
-
let animationKeyframes;
|
|
280
|
-
let animationName;
|
|
281
|
-
let animationStartEvent;
|
|
282
|
-
let animationStyle;
|
|
283
|
-
let checkTriggers;
|
|
284
|
-
let resetTriggers;
|
|
285
|
-
let scrollListener;
|
|
286
|
-
const attachEvent = typeof document !== "undefined" && document.attachEvent;
|
|
287
|
-
if (!attachEvent) {
|
|
288
|
-
resetTriggers = function (element) {
|
|
289
|
-
const triggers = element.__resizeTriggers__,
|
|
290
|
-
expand = triggers.firstElementChild,
|
|
291
|
-
contract = triggers.lastElementChild,
|
|
292
|
-
expandChild = expand.firstElementChild;
|
|
293
|
-
contract.scrollLeft = contract.scrollWidth;
|
|
294
|
-
contract.scrollTop = contract.scrollHeight;
|
|
295
|
-
expandChild.style.width = expand.offsetWidth + 1 + "px";
|
|
296
|
-
expandChild.style.height = expand.offsetHeight + 1 + "px";
|
|
297
|
-
expand.scrollLeft = expand.scrollWidth;
|
|
298
|
-
expand.scrollTop = expand.scrollHeight;
|
|
299
|
-
};
|
|
300
|
-
checkTriggers = function (element) {
|
|
301
|
-
return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
|
|
302
|
-
};
|
|
303
|
-
scrollListener = function (e) {
|
|
304
|
-
// Don't measure (which forces) reflow for scrolls that happen inside of children!
|
|
305
|
-
if (e.target.className && typeof e.target.className.indexOf === "function" && e.target.className.indexOf("contract-trigger") < 0 && e.target.className.indexOf("expand-trigger") < 0) {
|
|
306
|
-
return;
|
|
307
|
-
}
|
|
308
|
-
const element = this;
|
|
309
|
-
resetTriggers(this);
|
|
310
|
-
if (this.__resizeRAF__) {
|
|
311
|
-
cancelFrame(this.__resizeRAF__);
|
|
312
|
-
}
|
|
313
|
-
this.__resizeRAF__ = requestFrame(function animationFrame() {
|
|
314
|
-
if (checkTriggers(element)) {
|
|
315
|
-
element.__resizeLast__.width = element.offsetWidth;
|
|
316
|
-
element.__resizeLast__.height = element.offsetHeight;
|
|
317
|
-
element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
|
|
318
|
-
fn.call(element, e);
|
|
319
|
-
});
|
|
320
|
-
}
|
|
321
|
-
});
|
|
322
|
-
};
|
|
323
|
-
|
|
324
|
-
/* Detect CSS Animations support to detect element display/re-attach */
|
|
325
|
-
let animation = false;
|
|
326
|
-
let keyframeprefix = "";
|
|
327
|
-
animationStartEvent = "animationstart";
|
|
328
|
-
const domPrefixes = "Webkit Moz O ms".split(" ");
|
|
329
|
-
let startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" ");
|
|
330
|
-
let pfx = "";
|
|
331
|
-
{
|
|
332
|
-
const elm = document.createElement("fakeelement");
|
|
333
|
-
if (elm.style.animationName !== undefined) {
|
|
334
|
-
animation = true;
|
|
335
|
-
}
|
|
336
|
-
if (animation === false) {
|
|
337
|
-
for (let i = 0; i < domPrefixes.length; i++) {
|
|
338
|
-
if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
|
|
339
|
-
pfx = domPrefixes[i];
|
|
340
|
-
keyframeprefix = "-" + pfx.toLowerCase() + "-";
|
|
341
|
-
animationStartEvent = startEvents[i];
|
|
342
|
-
animation = true;
|
|
343
|
-
break;
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
animationName = "resizeanim";
|
|
349
|
-
animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
|
|
350
|
-
animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
|
|
351
|
-
}
|
|
352
|
-
const createStyles = function (doc) {
|
|
353
|
-
if (!doc.getElementById("detectElementResize")) {
|
|
354
|
-
//opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
|
|
355
|
-
const css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
|
|
356
|
-
head = doc.head || doc.getElementsByTagName("head")[0],
|
|
357
|
-
style = doc.createElement("style");
|
|
358
|
-
style.id = "detectElementResize";
|
|
359
|
-
style.type = "text/css";
|
|
360
|
-
if (nonce != null) {
|
|
361
|
-
style.setAttribute("nonce", nonce);
|
|
362
|
-
}
|
|
363
|
-
if (style.styleSheet) {
|
|
364
|
-
style.styleSheet.cssText = css;
|
|
365
|
-
} else {
|
|
366
|
-
style.appendChild(doc.createTextNode(css));
|
|
367
|
-
}
|
|
368
|
-
head.appendChild(style);
|
|
369
|
-
}
|
|
370
|
-
};
|
|
371
|
-
const addResizeListener = function (element, fn) {
|
|
372
|
-
if (attachEvent) {
|
|
373
|
-
element.attachEvent("onresize", fn);
|
|
374
|
-
} else {
|
|
375
|
-
if (!element.__resizeTriggers__) {
|
|
376
|
-
const doc = element.ownerDocument;
|
|
377
|
-
const elementStyle = windowObject.getComputedStyle(element);
|
|
378
|
-
if (elementStyle && elementStyle.position === "static") {
|
|
379
|
-
element.style.position = "relative";
|
|
380
|
-
}
|
|
381
|
-
createStyles(doc);
|
|
382
|
-
element.__resizeLast__ = {};
|
|
383
|
-
element.__resizeListeners__ = [];
|
|
384
|
-
(element.__resizeTriggers__ = doc.createElement("div")).className = "resize-triggers";
|
|
385
|
-
const expandTrigger = doc.createElement("div");
|
|
386
|
-
expandTrigger.className = "expand-trigger";
|
|
387
|
-
expandTrigger.appendChild(doc.createElement("div"));
|
|
388
|
-
const contractTrigger = doc.createElement("div");
|
|
389
|
-
contractTrigger.className = "contract-trigger";
|
|
390
|
-
element.__resizeTriggers__.appendChild(expandTrigger);
|
|
391
|
-
element.__resizeTriggers__.appendChild(contractTrigger);
|
|
392
|
-
element.appendChild(element.__resizeTriggers__);
|
|
393
|
-
resetTriggers(element);
|
|
394
|
-
element.addEventListener("scroll", scrollListener, true);
|
|
395
|
-
|
|
396
|
-
/* Listen for a css animation to detect element display/re-attach */
|
|
397
|
-
if (animationStartEvent) {
|
|
398
|
-
element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
|
|
399
|
-
if (e.animationName === animationName) {
|
|
400
|
-
resetTriggers(element);
|
|
401
|
-
}
|
|
402
|
-
};
|
|
403
|
-
element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
|
|
404
|
-
}
|
|
405
|
-
}
|
|
406
|
-
element.__resizeListeners__.push(fn);
|
|
407
|
-
}
|
|
408
|
-
};
|
|
409
|
-
const removeResizeListener = function (element, fn) {
|
|
410
|
-
if (attachEvent) {
|
|
411
|
-
element.detachEvent("onresize", fn);
|
|
412
|
-
} else {
|
|
413
|
-
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
|
|
414
|
-
if (!element.__resizeListeners__.length) {
|
|
415
|
-
element.removeEventListener("scroll", scrollListener, true);
|
|
416
|
-
if (element.__resizeTriggers__.__animationListener__) {
|
|
417
|
-
element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
|
|
418
|
-
element.__resizeTriggers__.__animationListener__ = null;
|
|
419
|
-
}
|
|
420
|
-
try {
|
|
421
|
-
element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
|
|
422
|
-
} catch (e) {
|
|
423
|
-
// Preact compat; see developit/preact-compat/issues/228
|
|
424
|
-
}
|
|
425
|
-
}
|
|
426
|
-
}
|
|
427
|
-
};
|
|
428
|
-
return {
|
|
429
|
-
addResizeListener,
|
|
430
|
-
removeResizeListener
|
|
431
|
-
};
|
|
432
|
-
}
|
|
433
|
-
|
|
434
|
-
class AutoSizer extends Component {
|
|
435
|
-
constructor(...args) {
|
|
436
|
-
super(...args);
|
|
437
|
-
this.state = {
|
|
438
|
-
height: this.props.defaultHeight || 0,
|
|
439
|
-
scaledHeight: this.props.defaultHeight || 0,
|
|
440
|
-
scaledWidth: this.props.defaultWidth || 0,
|
|
441
|
-
width: this.props.defaultWidth || 0
|
|
442
|
-
};
|
|
443
|
-
this._autoSizer = null;
|
|
444
|
-
this._detectElementResize = null;
|
|
445
|
-
this._parentNode = null;
|
|
446
|
-
this._resizeObserver = null;
|
|
447
|
-
this._timeoutId = null;
|
|
448
|
-
this._onResize = () => {
|
|
449
|
-
this._timeoutId = null;
|
|
450
|
-
const {
|
|
451
|
-
disableHeight,
|
|
452
|
-
disableWidth,
|
|
453
|
-
onResize
|
|
454
|
-
} = this.props;
|
|
455
|
-
if (this._parentNode) {
|
|
456
|
-
// Guard against AutoSizer component being removed from the DOM immediately after being added.
|
|
457
|
-
// This can result in invalid style values which can result in NaN values if we don't handle them.
|
|
458
|
-
// See issue #150 for more context.
|
|
459
|
-
|
|
460
|
-
const style = window.getComputedStyle(this._parentNode) || {};
|
|
461
|
-
const paddingLeft = parseFloat(style.paddingLeft || "0");
|
|
462
|
-
const paddingRight = parseFloat(style.paddingRight || "0");
|
|
463
|
-
const paddingTop = parseFloat(style.paddingTop || "0");
|
|
464
|
-
const paddingBottom = parseFloat(style.paddingBottom || "0");
|
|
465
|
-
const rect = this._parentNode.getBoundingClientRect();
|
|
466
|
-
const scaledHeight = rect.height - paddingTop - paddingBottom;
|
|
467
|
-
const scaledWidth = rect.width - paddingLeft - paddingRight;
|
|
468
|
-
const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
|
|
469
|
-
const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
|
|
470
|
-
if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
|
|
471
|
-
this.setState({
|
|
472
|
-
height,
|
|
473
|
-
width,
|
|
474
|
-
scaledHeight,
|
|
475
|
-
scaledWidth
|
|
476
|
-
});
|
|
477
|
-
if (typeof onResize === "function") {
|
|
478
|
-
onResize({
|
|
479
|
-
height,
|
|
480
|
-
scaledHeight,
|
|
481
|
-
scaledWidth,
|
|
482
|
-
width
|
|
483
|
-
});
|
|
484
|
-
}
|
|
485
|
-
}
|
|
486
|
-
}
|
|
487
|
-
};
|
|
488
|
-
this._setRef = autoSizer => {
|
|
489
|
-
this._autoSizer = autoSizer;
|
|
490
|
-
};
|
|
491
|
-
}
|
|
492
|
-
componentDidMount() {
|
|
493
|
-
const {
|
|
494
|
-
nonce
|
|
495
|
-
} = this.props;
|
|
496
|
-
const parentNode = this._autoSizer ? this._autoSizer.parentNode : null;
|
|
497
|
-
if (parentNode != null && parentNode.ownerDocument && parentNode.ownerDocument.defaultView && parentNode instanceof parentNode.ownerDocument.defaultView.HTMLElement) {
|
|
498
|
-
// Delay access of parentNode until mount.
|
|
499
|
-
// This handles edge-cases where the component has already been unmounted before its ref has been set,
|
|
500
|
-
// As well as libraries like react-lite which have a slightly different lifecycle.
|
|
501
|
-
this._parentNode = parentNode;
|
|
502
|
-
|
|
503
|
-
// Use ResizeObserver from the same context where parentNode (which we will observe) was defined
|
|
504
|
-
// Using just global can result into onResize events not being emitted in cases with multiple realms
|
|
505
|
-
const ResizeObserverInstance = parentNode.ownerDocument.defaultView.ResizeObserver;
|
|
506
|
-
if (ResizeObserverInstance != null) {
|
|
507
|
-
this._resizeObserver = new ResizeObserverInstance(() => {
|
|
508
|
-
// Guard against "ResizeObserver loop limit exceeded" error;
|
|
509
|
-
// could be triggered if the state update causes the ResizeObserver handler to run long.
|
|
510
|
-
// See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
|
|
511
|
-
this._timeoutId = setTimeout(this._onResize, 0);
|
|
512
|
-
});
|
|
513
|
-
this._resizeObserver.observe(parentNode);
|
|
514
|
-
} else {
|
|
515
|
-
// Defer requiring resize handler in order to support server-side rendering.
|
|
516
|
-
// See issue #41
|
|
517
|
-
this._detectElementResize = createDetectElementResize(nonce);
|
|
518
|
-
this._detectElementResize.addResizeListener(parentNode, this._onResize);
|
|
519
|
-
}
|
|
520
|
-
this._onResize();
|
|
521
|
-
}
|
|
522
|
-
}
|
|
523
|
-
componentWillUnmount() {
|
|
524
|
-
if (this._parentNode) {
|
|
525
|
-
if (this._detectElementResize) {
|
|
526
|
-
this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
|
|
527
|
-
}
|
|
528
|
-
if (this._timeoutId !== null) {
|
|
529
|
-
clearTimeout(this._timeoutId);
|
|
530
|
-
}
|
|
531
|
-
if (this._resizeObserver) {
|
|
532
|
-
this._resizeObserver.disconnect();
|
|
533
|
-
}
|
|
534
|
-
}
|
|
535
|
-
}
|
|
536
|
-
render() {
|
|
537
|
-
const {
|
|
538
|
-
children,
|
|
539
|
-
defaultHeight,
|
|
540
|
-
defaultWidth,
|
|
541
|
-
disableHeight = false,
|
|
542
|
-
disableWidth = false,
|
|
543
|
-
doNotBailOutOnEmptyChildren = false,
|
|
544
|
-
nonce,
|
|
545
|
-
onResize,
|
|
546
|
-
style = {},
|
|
547
|
-
tagName = "div",
|
|
548
|
-
...rest
|
|
549
|
-
} = this.props;
|
|
550
|
-
const {
|
|
551
|
-
height,
|
|
552
|
-
scaledHeight,
|
|
553
|
-
scaledWidth,
|
|
554
|
-
width
|
|
555
|
-
} = this.state;
|
|
556
|
-
|
|
557
|
-
// Outer div should not force width/height since that may prevent containers from shrinking.
|
|
558
|
-
// Inner component should overflow and use calculated width/height.
|
|
559
|
-
// See issue #68 for more information.
|
|
560
|
-
const outerStyle = {
|
|
561
|
-
overflow: "visible"
|
|
562
|
-
};
|
|
563
|
-
const childParams = {};
|
|
564
|
-
|
|
565
|
-
// Avoid rendering children before the initial measurements have been collected.
|
|
566
|
-
// At best this would just be wasting cycles.
|
|
567
|
-
let bailoutOnChildren = false;
|
|
568
|
-
if (!disableHeight) {
|
|
569
|
-
if (height === 0) {
|
|
570
|
-
bailoutOnChildren = true;
|
|
571
|
-
}
|
|
572
|
-
outerStyle.height = 0;
|
|
573
|
-
childParams.height = height;
|
|
574
|
-
childParams.scaledHeight = scaledHeight;
|
|
575
|
-
}
|
|
576
|
-
if (!disableWidth) {
|
|
577
|
-
if (width === 0) {
|
|
578
|
-
bailoutOnChildren = true;
|
|
579
|
-
}
|
|
580
|
-
outerStyle.width = 0;
|
|
581
|
-
childParams.width = width;
|
|
582
|
-
childParams.scaledWidth = scaledWidth;
|
|
583
|
-
}
|
|
584
|
-
if (doNotBailOutOnEmptyChildren) {
|
|
585
|
-
bailoutOnChildren = false;
|
|
586
|
-
}
|
|
587
|
-
return createElement(tagName, {
|
|
588
|
-
ref: this._setRef,
|
|
589
|
-
style: {
|
|
590
|
-
...outerStyle,
|
|
591
|
-
...style
|
|
592
|
-
},
|
|
593
|
-
...rest
|
|
594
|
-
}, !bailoutOnChildren && children(childParams));
|
|
595
|
-
}
|
|
596
|
-
}
|
|
597
|
-
|
|
598
|
-
const multipleTooltipContextDefaults = {
|
|
599
|
-
active: false,
|
|
600
|
-
activeIndex: undefined,
|
|
601
|
-
hideCollapseItemTooltip: false,
|
|
602
|
-
lastClickedItemIndex: undefined,
|
|
603
|
-
setValue: () => { },
|
|
604
|
-
};
|
|
605
|
-
const MultipleTooltipContext = React__default.createContext(multipleTooltipContextDefaults);
|
|
606
|
-
class MultipleTooltipProvider extends React__default.PureComponent {
|
|
607
|
-
constructor() {
|
|
608
|
-
super(...arguments);
|
|
609
|
-
this.state = Object.assign({}, multipleTooltipContextDefaults);
|
|
610
|
-
this.setValue = (value) => {
|
|
611
|
-
this.setState(Object.assign({}, value));
|
|
612
|
-
};
|
|
613
|
-
}
|
|
614
|
-
render() {
|
|
615
|
-
const { children } = this.props;
|
|
616
|
-
return (React__default.createElement(MultipleTooltipContext.Provider, { value: Object.assign(Object.assign({}, this.state), { setValue: this.setValue }) }, children));
|
|
617
|
-
}
|
|
618
|
-
}
|
|
619
|
-
|
|
620
|
-
var css_248z$3 = ".g-root_theme_dark .gn-multiple-tooltip,.g-root_theme_dark-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n --g-color-base-float-medium,var(--g-color-private-white-100-solid)\n );--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,var(--g-color-base-background) 50%,transparent);--multiple-tooltip-backdrop-filter:blur(16px)}.g-root_theme_dark-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n --g-color-base-float-medium,var(--g-color-private-white-150-solid)\n )}.g-root_theme_light .gn-multiple-tooltip,.g-root_theme_light-hc .gn-multiple-tooltip{--multiple-tooltip-item-bg-color:var(\n --g-color-base-float-medium,var(--g-color-private-black-550-solid)\n );--multiple-tooltip-item-active-bg-color:var(--g-color-base-float-heavy);--multiple-tooltip-backdrop-background:linear-gradient(90deg,var(--g-color-base-background) 50%,transparent);--multiple-tooltip-backdrop-filter:blur(12px)}.gn-multiple-tooltip.gn-multiple-tooltip{background-color:transparent;box-shadow:none}.gn-multiple-tooltip:before{background:var(--multiple-tooltip-backdrop-background);box-shadow:none;content:\"\";filter:var(--multiple-tooltip-backdrop-filter);height:100%;opacity:.7;position:absolute;width:100%;z-index:-1}.gn-multiple-tooltip__items-container{align-items:flex-start;display:flex;flex-direction:column;padding:32px 40px 32px 12px}.gn-multiple-tooltip__item{align-items:center;background-color:var(--multiple-tooltip-item-bg-color);border-radius:5px;box-sizing:border-box;color:var(--g-color-text-light-primary);display:flex;height:30px;margin-bottom:5px;padding:8px 12px;position:relative;transition:transform .1s ease-in-out}.gn-multiple-tooltip__item:first-child,.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider)+.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider){margin-top:5px}.gn-multiple-tooltip__item_divider+.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider){margin-top:4px}.gn-multiple-tooltip__item_active{background-color:var(--multiple-tooltip-item-active-bg-color);transform:translateX(-12px)}.gn-multiple-tooltip__item_divider{height:15px;margin:0;visibility:hidden}";
|
|
621
|
-
styleInject(css_248z$3);
|
|
622
|
-
|
|
623
|
-
const b$3 = block('multiple-tooltip');
|
|
624
|
-
const POPUP_OFFSET = [-32, 4];
|
|
625
|
-
const POPUP_MODIFIERS = [
|
|
626
|
-
{
|
|
627
|
-
name: 'preventOverflow',
|
|
628
|
-
enabled: false,
|
|
629
|
-
},
|
|
630
|
-
];
|
|
631
|
-
const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
|
|
632
|
-
const { activeIndex, hideCollapseItemTooltip } = React__default.useContext(MultipleTooltipContext);
|
|
633
|
-
const activeItem = activeIndex === undefined ? null : items[activeIndex];
|
|
634
|
-
return (React__default.createElement(Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$3(null), modifiers: POPUP_MODIFIERS, disableLayer: true },
|
|
635
|
-
React__default.createElement("div", { className: b$3('items-container') }, items
|
|
636
|
-
.filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
|
|
637
|
-
(id !== COLLAPSE_ITEM_ID && type !== 'action'))
|
|
638
|
-
.map((item, idx) => {
|
|
639
|
-
switch (item.type) {
|
|
640
|
-
case 'divider':
|
|
641
|
-
return (React__default.createElement("div", { className: b$3('item', { divider: true }), key: idx }, item.title));
|
|
642
|
-
default:
|
|
643
|
-
return (React__default.createElement("div", { className: b$3('item', {
|
|
644
|
-
active: item === activeItem,
|
|
645
|
-
}), key: idx }, item.title));
|
|
646
|
-
}
|
|
647
|
-
}))));
|
|
648
|
-
};
|
|
649
|
-
|
|
650
|
-
var css_248z$2 = ".gn-composite-bar{flex:1 0 auto;min-height:40px;width:100%}.gn-composite-bar .gn-composite-bar__root-menu-item[class]{background-color:transparent}";
|
|
651
|
-
styleInject(css_248z$2);
|
|
652
|
-
|
|
653
|
-
const b$2 = block('composite-bar');
|
|
654
|
-
const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, multipleTooltip = false, }) => {
|
|
655
|
-
const ref = useRef(null);
|
|
656
|
-
const tooltipRef = useRef(null);
|
|
657
|
-
const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
|
|
658
|
-
const { compact } = useAsideHeaderContext();
|
|
659
|
-
React__default.useEffect(() => {
|
|
660
|
-
function handleBlurWindow() {
|
|
661
|
-
if (multipleTooltip && multipleTooltipActive) {
|
|
662
|
-
setMultipleTooltipContextValue({ active: false });
|
|
663
|
-
}
|
|
664
|
-
}
|
|
665
|
-
window.addEventListener('blur', handleBlurWindow);
|
|
666
|
-
return () => {
|
|
667
|
-
window.removeEventListener('blur', handleBlurWindow);
|
|
668
|
-
};
|
|
669
|
-
}, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
670
|
-
const onTooltipMouseEnter = useCallback((e) => {
|
|
671
|
-
if (multipleTooltip &&
|
|
672
|
-
compact &&
|
|
673
|
-
!multipleTooltipActive &&
|
|
674
|
-
document.hasFocus() &&
|
|
675
|
-
activeIndex !== lastClickedItemIndex &&
|
|
676
|
-
e.clientX <= ASIDE_HEADER_COMPACT_WIDTH) {
|
|
677
|
-
setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
|
|
678
|
-
active: true,
|
|
679
|
-
});
|
|
680
|
-
}
|
|
681
|
-
}, [
|
|
682
|
-
multipleTooltip,
|
|
683
|
-
compact,
|
|
684
|
-
multipleTooltipActive,
|
|
685
|
-
activeIndex,
|
|
686
|
-
lastClickedItemIndex,
|
|
687
|
-
setMultipleTooltipContextValue,
|
|
688
|
-
]);
|
|
689
|
-
const onTooltipMouseLeave = useCallback(() => {
|
|
690
|
-
if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
|
|
691
|
-
setMultipleTooltipContextValue === null || setMultipleTooltipContextValue === void 0 ? void 0 : setMultipleTooltipContextValue({
|
|
692
|
-
active: false,
|
|
693
|
-
lastClickedItemIndex: undefined,
|
|
694
|
-
});
|
|
695
|
-
}
|
|
696
|
-
}, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
697
|
-
const onMouseEnterByIndex = useCallback((itemIndex) => () => {
|
|
698
|
-
if (multipleTooltip && document.hasFocus()) {
|
|
699
|
-
let multipleTooltipActiveValue = multipleTooltipActive;
|
|
700
|
-
if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
|
|
701
|
-
multipleTooltipActiveValue = true;
|
|
702
|
-
}
|
|
703
|
-
if (activeIndex === itemIndex &&
|
|
704
|
-
multipleTooltipActive === multipleTooltipActiveValue) {
|
|
705
|
-
return;
|
|
706
|
-
}
|
|
707
|
-
setMultipleTooltipContextValue({
|
|
708
|
-
activeIndex: itemIndex,
|
|
709
|
-
active: multipleTooltipActiveValue,
|
|
710
|
-
});
|
|
711
|
-
}
|
|
712
|
-
}, [
|
|
713
|
-
multipleTooltip,
|
|
714
|
-
multipleTooltipActive,
|
|
715
|
-
lastClickedItemIndex,
|
|
716
|
-
activeIndex,
|
|
717
|
-
setMultipleTooltipContextValue,
|
|
718
|
-
]);
|
|
719
|
-
const onMouseLeave = useCallback(() => {
|
|
720
|
-
var _a;
|
|
721
|
-
if (compact && document.hasFocus()) {
|
|
722
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.activateItem(undefined);
|
|
723
|
-
if (multipleTooltip &&
|
|
724
|
-
(activeIndex !== undefined || lastClickedItemIndex !== undefined)) {
|
|
725
|
-
setMultipleTooltipContextValue({
|
|
726
|
-
activeIndex: undefined,
|
|
727
|
-
lastClickedItemIndex: undefined,
|
|
728
|
-
});
|
|
729
|
-
}
|
|
730
|
-
}
|
|
731
|
-
}, [
|
|
732
|
-
activeIndex,
|
|
733
|
-
compact,
|
|
734
|
-
lastClickedItemIndex,
|
|
735
|
-
multipleTooltip,
|
|
736
|
-
setMultipleTooltipContextValue,
|
|
737
|
-
]);
|
|
738
|
-
const onItemClickByIndex = useCallback((itemIndex) => (item, collapsed, event) => {
|
|
739
|
-
if (compact &&
|
|
740
|
-
multipleTooltip &&
|
|
741
|
-
itemIndex !== lastClickedItemIndex &&
|
|
742
|
-
item.id !== COLLAPSE_ITEM_ID) {
|
|
743
|
-
setMultipleTooltipContextValue({
|
|
744
|
-
lastClickedItemIndex: itemIndex,
|
|
745
|
-
active: false,
|
|
746
|
-
});
|
|
747
|
-
}
|
|
748
|
-
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
|
|
749
|
-
}, [
|
|
750
|
-
compact,
|
|
751
|
-
lastClickedItemIndex,
|
|
752
|
-
multipleTooltip,
|
|
753
|
-
onItemClick,
|
|
754
|
-
setMultipleTooltipContextValue,
|
|
755
|
-
]);
|
|
756
|
-
return (React__default.createElement(React__default.Fragment, null,
|
|
757
|
-
React__default.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
758
|
-
React__default.createElement(List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex(items) : undefined, itemHeight: getItemHeight, itemsHeight: getItemsHeight, itemClassName: b$2('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
|
|
759
|
-
const itemExtraProps = isMenuItem(item) ? { item } : item;
|
|
760
|
-
const enableTooltip = isMenuItem(item)
|
|
761
|
-
? !multipleTooltip
|
|
762
|
-
: item.enableTooltip;
|
|
763
|
-
return (React__default.createElement(Item, Object.assign({}, itemExtraProps, { enableTooltip: enableTooltip, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex), onCollapseItemClick: onMoreClick, collapseItems: collapseItems })));
|
|
764
|
-
} })),
|
|
765
|
-
type === 'menu' && multipleTooltip && (React__default.createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
|
|
766
|
-
};
|
|
767
|
-
const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, multipleTooltip = false, }) => {
|
|
768
|
-
if (items.length === 0) {
|
|
769
|
-
return null;
|
|
770
|
-
}
|
|
771
|
-
let node;
|
|
772
|
-
if (type === 'menu') {
|
|
773
|
-
const minHeight = getItemsMinHeight(items);
|
|
774
|
-
const collapseItem = getMoreButtonItem(menuMoreTitle);
|
|
775
|
-
node = (React__default.createElement("div", { className: b$2({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default.createElement(AutoSizer, null, (size) => {
|
|
776
|
-
const width = Number.isNaN(size.width) ? 0 : size.width;
|
|
777
|
-
const height = Number.isNaN(size.height) ? 0 : size.height;
|
|
778
|
-
const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
|
|
779
|
-
return (React__default.createElement("div", { style: { width, height } },
|
|
780
|
-
React__default.createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, onMoreClick: onMoreClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
|
|
781
|
-
}))));
|
|
782
|
-
}
|
|
783
|
-
else {
|
|
784
|
-
node = (React__default.createElement("div", { className: b$2({ subheader: true }) },
|
|
785
|
-
React__default.createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
|
|
786
|
-
}
|
|
787
|
-
return React__default.createElement(MultipleTooltipProvider, null, node);
|
|
788
|
-
};
|
|
789
|
-
|
|
790
|
-
var button_collapse$1 = "Collapse";
|
|
791
|
-
var button_expand$1 = "Expand";
|
|
792
|
-
var label_more$1 = "More";
|
|
793
|
-
var en = {
|
|
794
|
-
button_collapse: button_collapse$1,
|
|
795
|
-
button_expand: button_expand$1,
|
|
796
|
-
label_more: label_more$1
|
|
797
|
-
};
|
|
798
|
-
|
|
799
|
-
var button_collapse = "Свернуть";
|
|
800
|
-
var button_expand = "Развернуть";
|
|
801
|
-
var label_more = "Ещё";
|
|
802
|
-
var ru = {
|
|
803
|
-
button_collapse: button_collapse,
|
|
804
|
-
button_expand: button_expand,
|
|
805
|
-
label_more: label_more
|
|
806
|
-
};
|
|
807
|
-
|
|
808
|
-
const COMPONENT = 'AsideHeader';
|
|
809
|
-
var i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}${COMPONENT}`);
|
|
810
|
-
|
|
811
|
-
var _path;
|
|
812
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
813
|
-
var SvgControlMenuButton = function SvgControlMenuButton(props) {
|
|
814
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
815
|
-
width: 8,
|
|
816
|
-
height: 8,
|
|
817
|
-
viewBox: "0 0 8 8",
|
|
818
|
-
fill: "currentColor",
|
|
819
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
820
|
-
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
821
|
-
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"
|
|
822
|
-
})));
|
|
823
|
-
};
|
|
824
|
-
var controlMenuButtonIcon = SvgControlMenuButton;
|
|
825
|
-
|
|
826
|
-
var css_248z$1 = ".gn-collapse-button{--_--focus-outline-color:var(--g-color-line-focus);--_--focus-outline-offset:0;align-items:center;background:none;border:none;border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));box-sizing:content-box;color:inherit;cursor:pointer;display:flex;font-family:var(--g-text-body-font-family);font-size:inherit;font-weight:var(--g-text-body-font-weight);justify-content:center;min-height:20px;outline:none;padding:0;position:relative;width:100%}.gn-collapse-button:before{content:\"\";inset:0 2px 2px;position:absolute;z-index:-1}.gn-collapse-button:focus-visible:before{outline:var(--_--focus-outline-color) solid 2px;outline-offset:var(--_--focus-outline-offset)}.gn-collapse-button:not(.gn-collapse-button_compact) .gn-collapse-button__icon{transform:rotate(180deg)}.gn-collapse-button:hover .gn-collapse-button__icon{color:var(--g-color-text-primary)}.gn-collapse-button__icon{color:var(--g-color-text-secondary)}";
|
|
827
|
-
styleInject(css_248z$1);
|
|
828
|
-
|
|
829
|
-
const b$1 = block('collapse-button');
|
|
830
|
-
const CollapseButton = ({ className }) => {
|
|
831
|
-
const { onChangeCompact, compact, expandTitle, collapseTitle } = useAsideHeaderInnerContext();
|
|
832
|
-
const onCollapseButtonClick = useCallback(() => {
|
|
833
|
-
onChangeCompact === null || onChangeCompact === void 0 ? void 0 : onChangeCompact(!compact);
|
|
834
|
-
}, [compact, onChangeCompact]);
|
|
835
|
-
const buttonTitle = compact
|
|
836
|
-
? expandTitle || i18n('button_expand')
|
|
837
|
-
: collapseTitle || i18n('button_collapse');
|
|
838
|
-
return (React__default.createElement("button", { className: b$1({ compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
|
|
839
|
-
React__default.createElement(Icon, { data: controlMenuButtonIcon, className: b$1('icon'), width: "16", height: "10" })));
|
|
840
|
-
};
|
|
841
|
-
|
|
842
|
-
var css_248z = ".gn-logo{height:40px}.gn-logo,.gn-logo__logo-btn-place{align-items:center;display:flex;flex-shrink:0}.gn-logo__logo-btn-place{cursor:pointer;justify-content:center}.gn-logo__logo-btn-place .g-button:before{background-color:transparent}.gn-logo__logo{cursor:pointer;font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-2-line-height);vertical-align:middle}.gn-logo__logo-link,.gn-logo__logo-link:active,.gn-logo__logo-link:focus,.gn-logo__logo-link:hover,.gn-logo__logo-link:visited{color:inherit;outline:none;text-decoration:none}.g-root .gn-logo__btn-logo.button2_theme_flat.button2_hovered_yes:before{background-color:transparent}";
|
|
843
|
-
styleInject(css_248z);
|
|
844
|
-
|
|
845
|
-
const b = block('logo');
|
|
846
|
-
const Logo = ({ text, icon, iconSrc, iconClassName, iconSize = 24, textSize = 15, href, target = '_self', wrapper, onClick, compact, className, buttonWrapperClassName, buttonClassName, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }) => {
|
|
847
|
-
const hasWrapper = typeof wrapper === 'function';
|
|
848
|
-
let buttonIcon;
|
|
849
|
-
if (iconSrc) {
|
|
850
|
-
buttonIcon = (React__default.createElement(Button.Icon, { className: iconClassName },
|
|
851
|
-
React__default.createElement("img", { alt: "logo icon", src: iconSrc, width: iconSize, height: iconSize })));
|
|
852
|
-
}
|
|
853
|
-
else if (icon) {
|
|
854
|
-
buttonIcon = React__default.createElement(Icon, { data: icon, size: iconSize, className: iconClassName });
|
|
855
|
-
}
|
|
856
|
-
const button = (React__default.createElement(Button, { view: "flat", size: "l", className: b('btn-logo', buttonClassName), component: hasWrapper ? 'span' : undefined, onClick: onClick, target: target, rel: target === '_self' ? undefined : 'noreferrer', href: href, extraProps: {
|
|
857
|
-
'aria-label': ariaLabel,
|
|
858
|
-
'aria-labelledby': ariaLabelledby,
|
|
859
|
-
} }, buttonIcon));
|
|
860
|
-
let logo;
|
|
861
|
-
if (typeof text === 'function') {
|
|
862
|
-
logo = text();
|
|
863
|
-
}
|
|
864
|
-
else {
|
|
865
|
-
logo = (React__default.createElement("div", { className: b('logo'), style: { fontSize: textSize } }, text));
|
|
866
|
-
}
|
|
867
|
-
return (React__default.createElement("div", { className: b(null, className) },
|
|
868
|
-
React__default.createElement("div", { className: b('logo-btn-place', buttonWrapperClassName) }, hasWrapper ? wrapper(button, Boolean(compact)) : button),
|
|
869
|
-
!compact &&
|
|
870
|
-
(hasWrapper ? (React__default.createElement("div", { onClick: onClick }, wrapper(logo, Boolean(compact)))) : (React__default.createElement("a", { href: href !== null && href !== void 0 ? href : '/', target: target, rel: target === '_self' ? undefined : 'noreferrer', className: b('logo-link'), onClick: onClick }, logo)))));
|
|
871
|
-
};
|
|
872
|
-
|
|
873
|
-
const DEFAULT_SUBHEADER_ITEMS = [];
|
|
874
|
-
const Header = () => {
|
|
875
|
-
const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = useAsideHeaderInnerContext();
|
|
876
|
-
const { compact } = useAsideHeaderContext();
|
|
877
|
-
const onLogoClick = useCallback((event) => {
|
|
878
|
-
var _a;
|
|
879
|
-
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
880
|
-
(_a = logo === null || logo === void 0 ? void 0 : logo.onClick) === null || _a === void 0 ? void 0 : _a.call(logo, event);
|
|
881
|
-
}, [onClosePanel, logo]);
|
|
882
|
-
return (React__default.createElement("div", { className: b$6('header', { ['with-decoration']: headerDecoration }) },
|
|
883
|
-
logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonWrapperClassName: b$6('logo-button-wrapper'), buttonClassName: b$6('logo-button') }))),
|
|
884
|
-
React__default.createElement(CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
|
|
885
|
-
headerDecoration && (React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b$6('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
|
|
886
|
-
};
|
|
887
|
-
|
|
888
|
-
const Panels = () => {
|
|
889
|
-
const { panelItems, onClosePanel, size } = useAsideHeaderInnerContext();
|
|
890
|
-
return panelItems ? (React__default.createElement(Drawer, { className: b$6('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
|
|
891
|
-
};
|
|
892
|
-
|
|
893
|
-
const FirstPanel = React__default.forwardRef((_props, ref) => {
|
|
894
|
-
const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, qa, } = useAsideHeaderInnerContext();
|
|
895
|
-
const visibleMenuItems = useVisibleMenuItems();
|
|
896
|
-
const asideRef = useRef(null);
|
|
897
|
-
React__default.useEffect(() => {
|
|
898
|
-
setRef(ref, asideRef.current);
|
|
899
|
-
}, [ref]);
|
|
900
|
-
return (React__default.createElement(React__default.Fragment, null,
|
|
901
|
-
React__default.createElement("div", { className: b$6('aside', className), style: { width: size }, "data-qa": qa },
|
|
902
|
-
React__default.createElement("div", { className: b$6('aside-popup-anchor'), ref: asideRef }),
|
|
903
|
-
React__default.createElement("div", { className: b$6('aside-content', { ['with-decoration']: headerDecoration }) },
|
|
904
|
-
customBackground && (React__default.createElement("div", { className: b$6('aside-custom-background', customBackgroundClassName) }, customBackground)),
|
|
905
|
-
React__default.createElement(Header, null),
|
|
906
|
-
(visibleMenuItems === null || visibleMenuItems === void 0 ? void 0 : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$6('menu-items') })),
|
|
907
|
-
React__default.createElement("div", { className: b$6('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
|
|
908
|
-
size,
|
|
909
|
-
compact: Boolean(compact),
|
|
910
|
-
asideRef,
|
|
911
|
-
})),
|
|
912
|
-
!hideCollapseButton && React__default.createElement(CollapseButton, null))),
|
|
913
|
-
React__default.createElement(Panels, null)));
|
|
914
|
-
});
|
|
915
|
-
FirstPanel.displayName = 'FirstPanel';
|
|
916
|
-
|
|
917
|
-
var InnerPanels;
|
|
918
|
-
(function (InnerPanels) {
|
|
919
|
-
InnerPanels["AllPages"] = "all-pages";
|
|
920
|
-
})(InnerPanels || (InnerPanels = {}));
|
|
921
|
-
|
|
922
|
-
const EMPTY_MENU_ITEMS = [];
|
|
923
|
-
const useAsideHeaderInnerContextValue = (props) => {
|
|
924
|
-
const { size, onClosePanel, menuItems, panelItems, onMenuItemsChanged, onAllPagesClick } = props;
|
|
925
|
-
const [innerVisiblePanel, setInnerVisiblePanel] = useState();
|
|
926
|
-
const ALL_PAGES_MENU_ITEM = React__default.useMemo(() => {
|
|
927
|
-
return getAllPagesMenuItem();
|
|
928
|
-
}, []);
|
|
929
|
-
const allPagesIsAvailable = Boolean(onMenuItemsChanged) && (!menuItems || (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0);
|
|
930
|
-
useEffect(() => {
|
|
931
|
-
// If any user panel became visible we need to switch off all inner panels
|
|
932
|
-
if (panelItems === null || panelItems === void 0 ? void 0 : panelItems.some((x) => x.visible)) {
|
|
933
|
-
setInnerVisiblePanel(undefined);
|
|
934
|
-
}
|
|
935
|
-
}, [panelItems]);
|
|
936
|
-
const innerOnClosePanel = useCallback(() => {
|
|
937
|
-
setInnerVisiblePanel(undefined);
|
|
938
|
-
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
939
|
-
}, [onClosePanel]);
|
|
940
|
-
const onItemClick = useCallback((item, collapsed, event) => {
|
|
941
|
-
var _a;
|
|
942
|
-
if (item.id === ALL_PAGES_MENU_ITEM.id) {
|
|
943
|
-
onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
|
|
944
|
-
setInnerVisiblePanel((prev) => prev === InnerPanels.AllPages ? undefined : InnerPanels.AllPages);
|
|
945
|
-
}
|
|
946
|
-
else {
|
|
947
|
-
innerOnClosePanel();
|
|
948
|
-
}
|
|
949
|
-
(_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, collapsed, event);
|
|
950
|
-
}, [innerOnClosePanel, ALL_PAGES_MENU_ITEM, onClosePanel]);
|
|
951
|
-
const innerMenuItems = useMemo(() => allPagesIsAvailable
|
|
952
|
-
? [
|
|
953
|
-
...(menuItems || EMPTY_MENU_ITEMS),
|
|
954
|
-
Object.assign(Object.assign({}, ALL_PAGES_MENU_ITEM), { current: innerVisiblePanel === InnerPanels.AllPages, onItemClick: onAllPagesClick }),
|
|
955
|
-
]
|
|
956
|
-
: menuItems || EMPTY_MENU_ITEMS, [allPagesIsAvailable, menuItems, innerVisiblePanel, ALL_PAGES_MENU_ITEM, onAllPagesClick]);
|
|
957
|
-
const innerPanelItems = useMemo(() => {
|
|
958
|
-
if (!allPagesIsAvailable) {
|
|
959
|
-
return panelItems;
|
|
960
|
-
}
|
|
961
|
-
return [
|
|
962
|
-
...(panelItems || []),
|
|
963
|
-
{
|
|
964
|
-
id: InnerPanels.AllPages,
|
|
965
|
-
content: React__default.createElement(AllPagesPanel, null),
|
|
966
|
-
visible: innerVisiblePanel === InnerPanels.AllPages,
|
|
967
|
-
},
|
|
968
|
-
];
|
|
969
|
-
}, [allPagesIsAvailable, panelItems, innerVisiblePanel]);
|
|
970
|
-
return Object.assign(Object.assign({}, props), { onClosePanel: innerOnClosePanel, allPagesIsAvailable, menuItems: innerMenuItems, panelItems: innerPanelItems, size,
|
|
971
|
-
onItemClick });
|
|
972
|
-
};
|
|
973
|
-
|
|
974
|
-
const PageLayoutAside = React__default.forwardRef((props, ref) => {
|
|
975
|
-
const { size, compact } = useAsideHeaderContext();
|
|
976
|
-
const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign({ size, compact }, props));
|
|
977
|
-
return (React__default.createElement(AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
|
|
978
|
-
React__default.createElement(FirstPanel, { ref: ref })));
|
|
979
|
-
});
|
|
980
|
-
PageLayoutAside.displayName = 'PageLayoutAside';
|
|
981
|
-
|
|
982
|
-
export { Logo as L, PageLayoutAside as P };
|
|
983
|
-
//# sourceMappingURL=PageLayoutAside-edd59955.js.map
|