@gravity-ui/navigation 4.0.17 → 4.0.19
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/build/cjs/components/AsideHeader/AsideHeader.js +2 -2
- package/build/cjs/components/AsideHeader/AsideHeader.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.js +42 -36
- package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.js +2 -2
- package/build/cjs/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltip.js +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltip.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/Panels.js +2 -2
- package/build/cjs/components/AsideHeader/components/Panels.js.map +1 -1
- package/build/cjs/components/Footer/MenuItem/MenuItem.js +2 -2
- package/build/cjs/components/Footer/MenuItem/MenuItem.js.map +1 -1
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.js +2 -2
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.js.map +1 -1
- package/build/cjs/components/Logo/Logo.js +2 -2
- package/build/cjs/components/Logo/Logo.js.map +1 -1
- package/build/cjs/components/MobileHeader/MobileHeader.js +2 -2
- package/build/cjs/components/MobileHeader/MobileHeader.js.map +1 -1
- package/build/cjs/components/Settings/Settings.js +4 -4
- package/build/cjs/components/Settings/Settings.js.map +1 -1
- package/build/cjs/components/Settings/SettingsSearch/AllResultsPage.js +2 -2
- package/build/cjs/components/Settings/SettingsSearch/AllResultsPage.js.map +1 -1
- package/build/cjs/components/Settings/SettingsSearch/SettingsSearch.js +3 -3
- package/build/cjs/components/Settings/SettingsSearch/SettingsSearch.js.map +1 -1
- package/build/cjs/components/Settings/SettingsSection.js +2 -2
- package/build/cjs/components/Settings/SettingsSection.js.map +1 -1
- package/build/cjs/components/TopAlert/useTopAlertHeight.js +2 -2
- package/build/cjs/components/TopAlert/useTopAlertHeight.js.map +1 -1
- package/build/cjs/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.js +2 -2
- package/build/cjs/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.js.map +1 -1
- package/build/esm/components/AsideHeader/AsideHeader.js +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.js +43 -37
- package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/HighlightedItem/HighlightedItem.js +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltip.js +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/MultipleTooltip/MultipleTooltip.js.map +1 -1
- package/build/esm/components/AsideHeader/components/Panels.js +1 -1
- package/build/esm/components/Footer/MenuItem/MenuItem.js +1 -1
- package/build/esm/components/HotkeysPanel/HotkeysPanel.js +1 -1
- package/build/esm/components/Logo/Logo.js +1 -1
- package/build/esm/components/MobileHeader/MobileHeader.js +1 -1
- package/build/esm/components/Settings/Settings.js +2 -2
- package/build/esm/components/Settings/SettingsSearch/AllResultsPage.js +1 -1
- package/build/esm/components/Settings/SettingsSearch/SettingsSearch.js +1 -1
- package/build/esm/components/Settings/SettingsSection.js +1 -1
- package/build/esm/components/TopAlert/useTopAlertHeight.js +1 -1
- package/build/esm/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.js +1 -1
- package/package.json +4 -2
- package/build/cjs/_virtual/_commonjsHelpers.js +0 -11
- package/build/cjs/_virtual/_commonjsHelpers.js.map +0 -1
- package/build/cjs/_virtual/debounce.js +0 -12
- package/build/cjs/_virtual/debounce.js.map +0 -1
- package/build/cjs/_virtual/identity.js +0 -12
- package/build/cjs/_virtual/identity.js.map +0 -1
- package/build/cjs/_virtual/last.js +0 -12
- package/build/cjs/_virtual/last.js.map +0 -1
- package/build/cjs/node_modules/lodash/_Symbol.js +0 -21
- package/build/cjs/node_modules/lodash/_Symbol.js.map +0 -1
- package/build/cjs/node_modules/lodash/_baseGetTag.js +0 -45
- package/build/cjs/node_modules/lodash/_baseGetTag.js.map +0 -1
- package/build/cjs/node_modules/lodash/_baseTrim.js +0 -34
- package/build/cjs/node_modules/lodash/_baseTrim.js.map +0 -1
- package/build/cjs/node_modules/lodash/_freeGlobal.js +0 -20
- package/build/cjs/node_modules/lodash/_freeGlobal.js.map +0 -1
- package/build/cjs/node_modules/lodash/_getRawTag.js +0 -61
- package/build/cjs/node_modules/lodash/_getRawTag.js.map +0 -1
- package/build/cjs/node_modules/lodash/_objectToString.js +0 -36
- package/build/cjs/node_modules/lodash/_objectToString.js.map +0 -1
- package/build/cjs/node_modules/lodash/_root.js +0 -24
- package/build/cjs/node_modules/lodash/_root.js.map +0 -1
- package/build/cjs/node_modules/lodash/_trimmedEndIndex.js +0 -33
- package/build/cjs/node_modules/lodash/_trimmedEndIndex.js.map +0 -1
- package/build/cjs/node_modules/lodash/debounce.js +0 -208
- package/build/cjs/node_modules/lodash/debounce.js.map +0 -1
- package/build/cjs/node_modules/lodash/identity.js +0 -35
- package/build/cjs/node_modules/lodash/identity.js.map +0 -1
- package/build/cjs/node_modules/lodash/isObject.js +0 -45
- package/build/cjs/node_modules/lodash/isObject.js.map +0 -1
- package/build/cjs/node_modules/lodash/isObjectLike.js +0 -43
- package/build/cjs/node_modules/lodash/isObjectLike.js.map +0 -1
- package/build/cjs/node_modules/lodash/isSymbol.js +0 -45
- package/build/cjs/node_modules/lodash/isSymbol.js.map +0 -1
- package/build/cjs/node_modules/lodash/last.js +0 -34
- package/build/cjs/node_modules/lodash/last.js.map +0 -1
- package/build/cjs/node_modules/lodash/now.js +0 -38
- package/build/cjs/node_modules/lodash/now.js.map +0 -1
- package/build/cjs/node_modules/lodash/toNumber.js +0 -81
- package/build/cjs/node_modules/lodash/toNumber.js.map +0 -1
- package/build/cjs/node_modules/tslib/tslib.es6.js +0 -38
- package/build/cjs/node_modules/tslib/tslib.es6.js.map +0 -1
- package/build/esm/_virtual/_commonjsHelpers.js +0 -8
- package/build/esm/_virtual/_commonjsHelpers.js.map +0 -1
- package/build/esm/_virtual/debounce.js +0 -8
- package/build/esm/_virtual/debounce.js.map +0 -1
- package/build/esm/_virtual/identity.js +0 -8
- package/build/esm/_virtual/identity.js.map +0 -1
- package/build/esm/_virtual/last.js +0 -8
- package/build/esm/_virtual/last.js.map +0 -1
- package/build/esm/node_modules/lodash/_Symbol.js +0 -19
- package/build/esm/node_modules/lodash/_Symbol.js.map +0 -1
- package/build/esm/node_modules/lodash/_baseGetTag.js +0 -43
- package/build/esm/node_modules/lodash/_baseGetTag.js.map +0 -1
- package/build/esm/node_modules/lodash/_baseTrim.js +0 -32
- package/build/esm/node_modules/lodash/_baseTrim.js.map +0 -1
- package/build/esm/node_modules/lodash/_freeGlobal.js +0 -18
- package/build/esm/node_modules/lodash/_freeGlobal.js.map +0 -1
- package/build/esm/node_modules/lodash/_getRawTag.js +0 -59
- package/build/esm/node_modules/lodash/_getRawTag.js.map +0 -1
- package/build/esm/node_modules/lodash/_objectToString.js +0 -34
- package/build/esm/node_modules/lodash/_objectToString.js.map +0 -1
- package/build/esm/node_modules/lodash/_root.js +0 -22
- package/build/esm/node_modules/lodash/_root.js.map +0 -1
- package/build/esm/node_modules/lodash/_trimmedEndIndex.js +0 -31
- package/build/esm/node_modules/lodash/_trimmedEndIndex.js.map +0 -1
- package/build/esm/node_modules/lodash/debounce.js +0 -206
- package/build/esm/node_modules/lodash/debounce.js.map +0 -1
- package/build/esm/node_modules/lodash/identity.js +0 -33
- package/build/esm/node_modules/lodash/identity.js.map +0 -1
- package/build/esm/node_modules/lodash/isObject.js +0 -43
- package/build/esm/node_modules/lodash/isObject.js.map +0 -1
- package/build/esm/node_modules/lodash/isObjectLike.js +0 -41
- package/build/esm/node_modules/lodash/isObjectLike.js.map +0 -1
- package/build/esm/node_modules/lodash/isSymbol.js +0 -43
- package/build/esm/node_modules/lodash/isSymbol.js.map +0 -1
- package/build/esm/node_modules/lodash/last.js +0 -32
- package/build/esm/node_modules/lodash/last.js.map +0 -1
- package/build/esm/node_modules/lodash/now.js +0 -36
- package/build/esm/node_modules/lodash/now.js.map +0 -1
- package/build/esm/node_modules/lodash/toNumber.js +0 -79
- package/build/esm/node_modules/lodash/toNumber.js.map +0 -1
- package/build/esm/node_modules/tslib/tslib.es6.js +0 -36
- package/build/esm/node_modules/tslib/tslib.es6.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileHeader.js","sources":["../../../../../src/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["import React, {Suspense, useCallback, useEffect, useMemo, useState} from 'react';\n\nimport {Drawer} from '@gravity-ui/uikit';\n\nimport {useForwardRef} from '../../hooks/useForwardRef';\nimport {PanelItemProps} from '../AsideHeader';\nimport {Content, RenderContentType} from '../Content';\nimport {MobileLogo} from '../MobileLogo';\nimport {LogoProps, TopAlertProps} from '../types';\nimport {createBlock} from '../utils/cn';\n\nimport {Burger} from './Burger/Burger';\nimport {BurgerMenu, BurgerMenuInnerProps} from './BurgerMenu/BurgerMenu';\nimport {\n OverlapPanelProps as CommonOverlapPanelProps,\n OverlapPanel,\n} from './OverlapPanel/OverlapPanel';\nimport {\n BURGER_PANEL_ITEM_ID,\n MOBILE_HEADER_COMPACT_HEIGHT,\n MOBILE_HEADER_EVENT_NAMES,\n MOBILE_HEADER_EXPANDED_HEIGHT,\n OVERLAP_PANEL_ITEM_ID,\n} from './constants';\nimport i18n from './i18n';\nimport {MobileHeaderEvent, MobileHeaderEventOptions, MobileMenuItem} from './types';\n\nimport styles from './MobileHeader.module.scss';\n\nconst TopAlert = React.lazy(() =>\n import('../TopAlert').then((module) => ({default: module.TopAlert})),\n);\n\nconst b = createBlock('mobile-header', styles);\n\ntype PanelName = string | null;\n\ninterface BurgerMenuProps extends Omit<BurgerMenuInnerProps, 'renderFooter'> {\n renderFooter?: (data: {size: number; isCompact: boolean}) => React.ReactNode;\n}\n\ntype OverlapPanelProps = Omit<CommonOverlapPanelProps, 'onClose' | 'open'>;\n\nexport interface MobileHeaderProps {\n logo: LogoProps;\n burgerMenu: BurgerMenuProps;\n overlapPanel?: OverlapPanelProps;\n burgerCloseTitle?: string;\n burgerOpenTitle?: string;\n panelItems?: PanelItemProps[];\n topAlert?: TopAlertProps;\n renderContent?: RenderContentType;\n sideItemRenderContent?: RenderContentType;\n onEvent?: (itemName: string, eventName: MobileHeaderEvent) => void;\n onClosePanel?: () => void;\n className?: string;\n contentClassName?: string;\n}\n\nexport const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(\n (\n {\n logo,\n burgerMenu,\n burgerCloseTitle = i18n('burger_button_close'),\n burgerOpenTitle = i18n('burger_button_open'),\n panelItems = [],\n renderContent,\n sideItemRenderContent,\n onClosePanel,\n onEvent,\n className,\n contentClassName,\n overlapPanel,\n topAlert,\n },\n ref,\n ): React.ReactElement => {\n const targetRef = useForwardRef<HTMLDivElement>(ref);\n const [compact] = useState(true);\n const [openPanel, setOpenPanel] = useState<PanelName>(null);\n const [overlapPanelVisible, setOverlapPanelVisible] = useState(false);\n\n // for expand top panel cases (i.e. switch service panel). Will be removed if not used in future design\n const size = compact ? MOBILE_HEADER_COMPACT_HEIGHT : MOBILE_HEADER_EXPANDED_HEIGHT;\n\n const onPanelToggle = useCallback(\n (name: PanelName) => {\n if (!name) return;\n\n setOpenPanel((prev) => {\n const panelOpen = prev === name;\n\n onEvent?.(\n name,\n panelOpen\n ? MOBILE_HEADER_EVENT_NAMES.closeEvent\n : MOBILE_HEADER_EVENT_NAMES.openEvent,\n );\n\n return panelOpen ? null : name;\n });\n\n setOverlapPanelVisible(false);\n },\n [onEvent],\n );\n\n const onMobilePanelToggle = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onPanelToggle(detail?.panelName);\n }\n },\n [onPanelToggle],\n );\n\n const onMobilePanelOpen = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setOpenPanel(detail?.panelName);\n setOverlapPanelVisible(false);\n }\n },\n [onEvent],\n );\n\n const onMobilePanelClose = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setOpenPanel(null);\n setOverlapPanelVisible(false);\n }\n },\n [onEvent],\n );\n\n const onBurgerOpen = useCallback(() => {\n onEvent?.(BURGER_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setOpenPanel(BURGER_PANEL_ITEM_ID);\n }, [onEvent]);\n\n const onBurgerClose = useCallback(() => {\n onEvent?.(BURGER_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setOpenPanel(null);\n }, [onEvent]);\n\n const onOverlapOpen = useCallback(() => {\n onEvent?.(OVERLAP_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setOverlapPanelVisible(true);\n }, [onEvent]);\n\n const onOverlapClose = useCallback(() => {\n onEvent?.(OVERLAP_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setOverlapPanelVisible(false);\n }, [onEvent]);\n\n const onCloseDrawer = useCallback(() => {\n if (openPanel) {\n onEvent?.(openPanel, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n }\n setOpenPanel(null);\n }, [openPanel, onEvent]);\n\n const onBurgerMenuItemClick = useCallback(\n (item: MobileMenuItem) => {\n const closeMenuOnClick = item.closeMenuOnClick ?? true;\n\n if (closeMenuOnClick) {\n onBurgerClose();\n }\n },\n [onBurgerClose],\n );\n\n const renderBurgerMenuFooter = useCallback(\n () =>\n burgerMenu.renderFooter?.({\n size,\n isCompact: compact,\n }),\n [burgerMenu, size, compact],\n );\n\n const onLogoClick = useCallback(\n (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n onClosePanel?.();\n logo.onClick?.(event);\n },\n [logo, onClosePanel],\n );\n\n const burgerPanelItem: PanelItemProps = useMemo<PanelItemProps>(\n () => ({\n id: BURGER_PANEL_ITEM_ID,\n children: (\n <BurgerMenu\n items={burgerMenu.items}\n modalItem={burgerMenu.modalItem}\n renderFooter={renderBurgerMenuFooter}\n onItemClick={onBurgerMenuItemClick}\n className={b('burger-menu')}\n />\n ),\n className: burgerMenu.className,\n }),\n [\n burgerMenu.items,\n burgerMenu.modalItem,\n burgerMenu.className,\n onBurgerMenuItemClick,\n renderBurgerMenuFooter,\n ],\n );\n\n useEffect(() => {\n const node = targetRef?.current;\n\n if (node) {\n node.addEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);\n node.addEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);\n\n node.addEventListener('MOBILE_OVERLAP_PANEL_OPEN', onOverlapOpen);\n node.addEventListener('MOBILE_OVERLAP_PANEL_CLOSE', onOverlapClose);\n\n node.addEventListener(\n 'MOBILE_PANEL_TOGGLE',\n onMobilePanelToggle as unknown as EventListener,\n );\n node.addEventListener(\n 'MOBILE_PANEL_OPEN',\n onMobilePanelOpen as unknown as EventListener,\n );\n node.addEventListener(\n 'MOBILE_PANEL_CLOSE',\n onMobilePanelClose as unknown as EventListener,\n );\n }\n\n return () => {\n if (node) {\n node.removeEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);\n node.removeEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);\n\n node.removeEventListener('MOBILE_OVERLAP_PANEL_OPEN', onOverlapOpen);\n node.removeEventListener('MOBILE_OVERLAP_PANEL_CLOSE', onOverlapClose);\n\n node.removeEventListener(\n 'MOBILE_PANEL_TOGGLE',\n onMobilePanelToggle as unknown as EventListener,\n );\n node.removeEventListener(\n 'MOBILE_PANEL_OPEN',\n onMobilePanelOpen as unknown as EventListener,\n );\n node.removeEventListener(\n 'MOBILE_PANEL_CLOSE',\n onMobilePanelClose as unknown as EventListener,\n );\n }\n };\n }, [\n targetRef,\n onBurgerClose,\n onBurgerOpen,\n onMobilePanelToggle,\n onMobilePanelOpen,\n onMobilePanelClose,\n onOverlapOpen,\n onOverlapClose,\n ]);\n\n const allPanelItems = [burgerPanelItem, ...panelItems];\n\n return (\n <div className={b({compact}, className)} ref={targetRef}>\n <div className={b('header-container')}>\n {topAlert && (\n <Suspense fallback={null}>\n <TopAlert alert={topAlert} mobileView />\n </Suspense>\n )}\n <header className={b('header')} style={{height: size}}>\n <Burger\n opened={openPanel === burgerPanelItem.id}\n onClick={() => onPanelToggle(BURGER_PANEL_ITEM_ID)}\n className={b('burger')}\n closeTitle={burgerCloseTitle}\n openTitle={burgerOpenTitle}\n />\n <MobileLogo {...logo} compact={compact} onClick={onLogoClick} />\n\n <div className={b('side-item')}>{sideItemRenderContent?.({size})}</div>\n </header>\n </div>\n\n {allPanelItems.map(({id, className, ...rest}) => (\n <Drawer\n {...rest}\n key={id}\n className={b('panels')}\n open={openPanel === id}\n onOpenChange={(open) => !open && onCloseDrawer()}\n style={{top: `calc(${size}px + var(--gn-top-alert-height, 0px))`}}\n contentClassName={b('panel-item', className)}\n size={320}\n />\n ))}\n {overlapPanel && (\n <OverlapPanel\n topOffset={size}\n className={b('overlap-panel')}\n title={overlapPanel.title}\n onClose={onOverlapClose}\n action={overlapPanel.action}\n open={overlapPanelVisible}\n renderContent={overlapPanel.renderContent}\n />\n )}\n <Content\n size={size}\n renderContent={renderContent}\n className={b('content', contentClassName)}\n cssSizeVariableName=\"--mobile-header-size\"\n />\n </div>\n );\n },\n);\n\nMobileHeader.displayName = 'MobileHeader';\n"],"names":["createBlock","styles","i18n","useForwardRef","useState","MOBILE_HEADER_COMPACT_HEIGHT","MOBILE_HEADER_EXPANDED_HEIGHT","useCallback","MOBILE_HEADER_EVENT_NAMES","BURGER_PANEL_ITEM_ID","OVERLAP_PANEL_ITEM_ID","useMemo","BurgerMenu","useEffect","Suspense","Burger","MobileLogo","__rest","Drawer","OverlapPanel","Content"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MobileHeader.js","sources":["../../../../../src/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["import React, {Suspense, useCallback, useEffect, useMemo, useState} from 'react';\n\nimport {Drawer} from '@gravity-ui/uikit';\n\nimport {useForwardRef} from '../../hooks/useForwardRef';\nimport {PanelItemProps} from '../AsideHeader';\nimport {Content, RenderContentType} from '../Content';\nimport {MobileLogo} from '../MobileLogo';\nimport {LogoProps, TopAlertProps} from '../types';\nimport {createBlock} from '../utils/cn';\n\nimport {Burger} from './Burger/Burger';\nimport {BurgerMenu, BurgerMenuInnerProps} from './BurgerMenu/BurgerMenu';\nimport {\n OverlapPanelProps as CommonOverlapPanelProps,\n OverlapPanel,\n} from './OverlapPanel/OverlapPanel';\nimport {\n BURGER_PANEL_ITEM_ID,\n MOBILE_HEADER_COMPACT_HEIGHT,\n MOBILE_HEADER_EVENT_NAMES,\n MOBILE_HEADER_EXPANDED_HEIGHT,\n OVERLAP_PANEL_ITEM_ID,\n} from './constants';\nimport i18n from './i18n';\nimport {MobileHeaderEvent, MobileHeaderEventOptions, MobileMenuItem} from './types';\n\nimport styles from './MobileHeader.module.scss';\n\nconst TopAlert = React.lazy(() =>\n import('../TopAlert').then((module) => ({default: module.TopAlert})),\n);\n\nconst b = createBlock('mobile-header', styles);\n\ntype PanelName = string | null;\n\ninterface BurgerMenuProps extends Omit<BurgerMenuInnerProps, 'renderFooter'> {\n renderFooter?: (data: {size: number; isCompact: boolean}) => React.ReactNode;\n}\n\ntype OverlapPanelProps = Omit<CommonOverlapPanelProps, 'onClose' | 'open'>;\n\nexport interface MobileHeaderProps {\n logo: LogoProps;\n burgerMenu: BurgerMenuProps;\n overlapPanel?: OverlapPanelProps;\n burgerCloseTitle?: string;\n burgerOpenTitle?: string;\n panelItems?: PanelItemProps[];\n topAlert?: TopAlertProps;\n renderContent?: RenderContentType;\n sideItemRenderContent?: RenderContentType;\n onEvent?: (itemName: string, eventName: MobileHeaderEvent) => void;\n onClosePanel?: () => void;\n className?: string;\n contentClassName?: string;\n}\n\nexport const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(\n (\n {\n logo,\n burgerMenu,\n burgerCloseTitle = i18n('burger_button_close'),\n burgerOpenTitle = i18n('burger_button_open'),\n panelItems = [],\n renderContent,\n sideItemRenderContent,\n onClosePanel,\n onEvent,\n className,\n contentClassName,\n overlapPanel,\n topAlert,\n },\n ref,\n ): React.ReactElement => {\n const targetRef = useForwardRef<HTMLDivElement>(ref);\n const [compact] = useState(true);\n const [openPanel, setOpenPanel] = useState<PanelName>(null);\n const [overlapPanelVisible, setOverlapPanelVisible] = useState(false);\n\n // for expand top panel cases (i.e. switch service panel). Will be removed if not used in future design\n const size = compact ? MOBILE_HEADER_COMPACT_HEIGHT : MOBILE_HEADER_EXPANDED_HEIGHT;\n\n const onPanelToggle = useCallback(\n (name: PanelName) => {\n if (!name) return;\n\n setOpenPanel((prev) => {\n const panelOpen = prev === name;\n\n onEvent?.(\n name,\n panelOpen\n ? MOBILE_HEADER_EVENT_NAMES.closeEvent\n : MOBILE_HEADER_EVENT_NAMES.openEvent,\n );\n\n return panelOpen ? null : name;\n });\n\n setOverlapPanelVisible(false);\n },\n [onEvent],\n );\n\n const onMobilePanelToggle = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onPanelToggle(detail?.panelName);\n }\n },\n [onPanelToggle],\n );\n\n const onMobilePanelOpen = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setOpenPanel(detail?.panelName);\n setOverlapPanelVisible(false);\n }\n },\n [onEvent],\n );\n\n const onMobilePanelClose = useCallback(\n ({detail}: {detail: MobileHeaderEventOptions}) => {\n if (typeof detail?.panelName === 'string') {\n onEvent?.(detail?.panelName, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setOpenPanel(null);\n setOverlapPanelVisible(false);\n }\n },\n [onEvent],\n );\n\n const onBurgerOpen = useCallback(() => {\n onEvent?.(BURGER_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setOpenPanel(BURGER_PANEL_ITEM_ID);\n }, [onEvent]);\n\n const onBurgerClose = useCallback(() => {\n onEvent?.(BURGER_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setOpenPanel(null);\n }, [onEvent]);\n\n const onOverlapOpen = useCallback(() => {\n onEvent?.(OVERLAP_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.openEvent);\n setOverlapPanelVisible(true);\n }, [onEvent]);\n\n const onOverlapClose = useCallback(() => {\n onEvent?.(OVERLAP_PANEL_ITEM_ID, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n setOverlapPanelVisible(false);\n }, [onEvent]);\n\n const onCloseDrawer = useCallback(() => {\n if (openPanel) {\n onEvent?.(openPanel, MOBILE_HEADER_EVENT_NAMES.closeEvent);\n }\n setOpenPanel(null);\n }, [openPanel, onEvent]);\n\n const onBurgerMenuItemClick = useCallback(\n (item: MobileMenuItem) => {\n const closeMenuOnClick = item.closeMenuOnClick ?? true;\n\n if (closeMenuOnClick) {\n onBurgerClose();\n }\n },\n [onBurgerClose],\n );\n\n const renderBurgerMenuFooter = useCallback(\n () =>\n burgerMenu.renderFooter?.({\n size,\n isCompact: compact,\n }),\n [burgerMenu, size, compact],\n );\n\n const onLogoClick = useCallback(\n (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n onClosePanel?.();\n logo.onClick?.(event);\n },\n [logo, onClosePanel],\n );\n\n const burgerPanelItem: PanelItemProps = useMemo<PanelItemProps>(\n () => ({\n id: BURGER_PANEL_ITEM_ID,\n children: (\n <BurgerMenu\n items={burgerMenu.items}\n modalItem={burgerMenu.modalItem}\n renderFooter={renderBurgerMenuFooter}\n onItemClick={onBurgerMenuItemClick}\n className={b('burger-menu')}\n />\n ),\n className: burgerMenu.className,\n }),\n [\n burgerMenu.items,\n burgerMenu.modalItem,\n burgerMenu.className,\n onBurgerMenuItemClick,\n renderBurgerMenuFooter,\n ],\n );\n\n useEffect(() => {\n const node = targetRef?.current;\n\n if (node) {\n node.addEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);\n node.addEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);\n\n node.addEventListener('MOBILE_OVERLAP_PANEL_OPEN', onOverlapOpen);\n node.addEventListener('MOBILE_OVERLAP_PANEL_CLOSE', onOverlapClose);\n\n node.addEventListener(\n 'MOBILE_PANEL_TOGGLE',\n onMobilePanelToggle as unknown as EventListener,\n );\n node.addEventListener(\n 'MOBILE_PANEL_OPEN',\n onMobilePanelOpen as unknown as EventListener,\n );\n node.addEventListener(\n 'MOBILE_PANEL_CLOSE',\n onMobilePanelClose as unknown as EventListener,\n );\n }\n\n return () => {\n if (node) {\n node.removeEventListener('MOBILE_BURGER_OPEN', onBurgerOpen);\n node.removeEventListener('MOBILE_BURGER_CLOSE', onBurgerClose);\n\n node.removeEventListener('MOBILE_OVERLAP_PANEL_OPEN', onOverlapOpen);\n node.removeEventListener('MOBILE_OVERLAP_PANEL_CLOSE', onOverlapClose);\n\n node.removeEventListener(\n 'MOBILE_PANEL_TOGGLE',\n onMobilePanelToggle as unknown as EventListener,\n );\n node.removeEventListener(\n 'MOBILE_PANEL_OPEN',\n onMobilePanelOpen as unknown as EventListener,\n );\n node.removeEventListener(\n 'MOBILE_PANEL_CLOSE',\n onMobilePanelClose as unknown as EventListener,\n );\n }\n };\n }, [\n targetRef,\n onBurgerClose,\n onBurgerOpen,\n onMobilePanelToggle,\n onMobilePanelOpen,\n onMobilePanelClose,\n onOverlapOpen,\n onOverlapClose,\n ]);\n\n const allPanelItems = [burgerPanelItem, ...panelItems];\n\n return (\n <div className={b({compact}, className)} ref={targetRef}>\n <div className={b('header-container')}>\n {topAlert && (\n <Suspense fallback={null}>\n <TopAlert alert={topAlert} mobileView />\n </Suspense>\n )}\n <header className={b('header')} style={{height: size}}>\n <Burger\n opened={openPanel === burgerPanelItem.id}\n onClick={() => onPanelToggle(BURGER_PANEL_ITEM_ID)}\n className={b('burger')}\n closeTitle={burgerCloseTitle}\n openTitle={burgerOpenTitle}\n />\n <MobileLogo {...logo} compact={compact} onClick={onLogoClick} />\n\n <div className={b('side-item')}>{sideItemRenderContent?.({size})}</div>\n </header>\n </div>\n\n {allPanelItems.map(({id, className, ...rest}) => (\n <Drawer\n {...rest}\n key={id}\n className={b('panels')}\n open={openPanel === id}\n onOpenChange={(open) => !open && onCloseDrawer()}\n style={{top: `calc(${size}px + var(--gn-top-alert-height, 0px))`}}\n contentClassName={b('panel-item', className)}\n size={320}\n />\n ))}\n {overlapPanel && (\n <OverlapPanel\n topOffset={size}\n className={b('overlap-panel')}\n title={overlapPanel.title}\n onClose={onOverlapClose}\n action={overlapPanel.action}\n open={overlapPanelVisible}\n renderContent={overlapPanel.renderContent}\n />\n )}\n <Content\n size={size}\n renderContent={renderContent}\n className={b('content', contentClassName)}\n cssSizeVariableName=\"--mobile-header-size\"\n />\n </div>\n );\n },\n);\n\nMobileHeader.displayName = 'MobileHeader';\n"],"names":["createBlock","styles","i18n","useForwardRef","useState","MOBILE_HEADER_COMPACT_HEIGHT","MOBILE_HEADER_EXPANDED_HEIGHT","useCallback","MOBILE_HEADER_EVENT_NAMES","BURGER_PANEL_ITEM_ID","OVERLAP_PANEL_ITEM_ID","useMemo","BurgerMenu","useEffect","Suspense","Burger","MobileLogo","__rest","Drawer","OverlapPanel","Content"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import './Settings.css';
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var tslib = require('tslib');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var uikit = require('@gravity-ui/uikit');
|
|
7
|
-
var identity = require('
|
|
7
|
+
var identity = require('lodash/identity');
|
|
8
8
|
var Title = require('../Title/Title.js');
|
|
9
9
|
var context = require('./Selection/context.js');
|
|
10
10
|
var SettingsContext = require('./SettingsContext/SettingsContext.js');
|
|
@@ -19,7 +19,7 @@ var collectSettings = require('./collect-settings.js');
|
|
|
19
19
|
var index = require('./i18n/index.js');
|
|
20
20
|
|
|
21
21
|
function Settings(_a) {
|
|
22
|
-
var { loading, renderLoading, children, view = 'normal', renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover = true } = _a, props =
|
|
22
|
+
var { loading, renderLoading, children, view = 'normal', renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover = true } = _a, props = tslib.__rest(_a, ["loading", "renderLoading", "children", "view", "renderRightAdornment", "renderSectionRightAdornment", "showRightAdornmentOnHover"]);
|
|
23
23
|
if (loading) {
|
|
24
24
|
return (React.createElement("div", { className: b.b({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React.createElement(uikit.Loader, { className: b.b('loader'), size: "m" }))));
|
|
25
25
|
}
|
|
@@ -115,7 +115,7 @@ Settings.Section = function SettingsSection({ children }) {
|
|
|
115
115
|
return React.createElement(React.Fragment, null, children);
|
|
116
116
|
};
|
|
117
117
|
Settings.Item = function SettingsItem(setting) {
|
|
118
|
-
const { id, labelId, highlightedTitle, children, align = 'center', withBadge, renderTitleComponent = identity
|
|
118
|
+
const { id, labelId, highlightedTitle, children, align = 'center', withBadge, renderTitleComponent = identity, mode, description, } = setting;
|
|
119
119
|
const selected = context.useSettingsSelectionContext();
|
|
120
120
|
const isSettingSelected = selected.setting && selected.setting.id === id;
|
|
121
121
|
const { renderRightAdornment, showRightAdornmentOnHover } = useSettingsContext.useSettingsContext();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Settings.js","sources":["../../../../../src/components/Settings/Settings.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Flex, Loader} from '@gravity-ui/uikit';\nimport identity from 'lodash/identity';\n\nimport {Title} from '../Title';\n\nimport {\n SettingsSelectionContextProvider,\n useSettingsSelectionContext,\n useSettingsSelectionProviderValue,\n} from './Selection/context';\nimport {SettingsContext} from './SettingsContext/SettingsContext';\nimport {useSettingsContext} from './SettingsContext/useSettingsContext';\nimport {SettingsMenu, SettingsMenuInstance} from './SettingsMenu/SettingsMenu';\nimport {SettingsMenuMobile} from './SettingsMenuMobile/SettingsMenuMobile';\nimport {SettingsPageComponent} from './SettingsPage/SettingsPageComponent';\nimport {useAllResultsPage} from './SettingsSearch/AllResultsPage';\nimport {SettingsSearch} from './SettingsSearch/SettingsSearch';\nimport {b} from './b';\nimport {getSettingsFromChildren} from './collect-settings';\nimport i18n from './i18n';\nimport type {\n SettingsContentProps,\n SettingsGroupProps,\n SettingsItemProps,\n SettingsPageProps,\n SettingsProps,\n SettingsSectionProps,\n} from './types';\n\nexport function Settings({\n loading,\n renderLoading,\n children,\n view = 'normal',\n renderRightAdornment,\n renderSectionRightAdornment,\n showRightAdornmentOnHover = true,\n ...props\n}: SettingsProps) {\n if (loading) {\n return (\n <div className={b({loading: true, view})}>\n {typeof renderLoading === 'function' ? (\n renderLoading()\n ) : (\n <Loader className={b('loader')} size=\"m\" />\n )}\n </div>\n );\n }\n\n return (\n <SettingsContext.Provider\n value={{renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover}}\n >\n <SettingsContent view={view} {...props}>\n {children}\n </SettingsContent>\n </SettingsContext.Provider>\n );\n}\n\nfunction SettingsContent({\n initialPage,\n initialSearch,\n selection,\n children,\n renderNotFound,\n title = i18n('label_title'),\n filterPlaceholder = i18n('label_filter-placeholder'),\n emptyPlaceholder = i18n('label_empty-placeholder'),\n view,\n onPageChange,\n onClose,\n}: SettingsContentProps) {\n const [search, setSearch] = React.useState(initialSearch ?? '');\n const {menu, pages} = getSettingsFromChildren(children, search);\n\n const selected = useSettingsSelectionProviderValue(pages, selection);\n\n const pageKeys = Object.keys(pages);\n const selectionInitialPage =\n selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;\n const [selectedPage, setCurrentPage] = React.useState<string | undefined>(\n selectionInitialPage ||\n (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined),\n );\n const searchInputRef = React.useRef<HTMLInputElement>(null);\n const menuRef = React.useRef<SettingsMenuInstance>(null);\n const isMobile = view === 'mobile';\n\n React.useEffect(() => {\n menuRef.current?.clearFocus();\n }, [search]);\n\n React.useEffect(() => {\n const handler = () => {\n menuRef.current?.clearFocus();\n };\n window.addEventListener('click', handler);\n return () => {\n window.removeEventListener('click', handler);\n };\n }, []);\n\n let activePage = selectedPage;\n\n if (!activePage || !pages[activePage] || pages[activePage].hidden) {\n activePage = Object.values(pages).find(({hidden}) => !hidden)?.id;\n }\n\n const handlePageChange = (newPage: string | undefined) => {\n setCurrentPage((prevPage) => {\n if (prevPage !== newPage && !isFakePage(newPage)) {\n onPageChange?.(newPage);\n }\n return newPage;\n });\n };\n\n const {isAllSearchPage} = useAllResultsPage({pages, handlePageChange});\n\n function isFakePage(page: string | undefined) {\n return isAllSearchPage(page);\n }\n\n React.useEffect(() => {\n if (activePage !== selectedPage) {\n handlePageChange(activePage);\n }\n });\n\n React.useEffect(() => {\n if (!selectionInitialPage) return;\n setCurrentPage(selectionInitialPage);\n }, [selectionInitialPage]);\n\n React.useEffect(() => {\n if (selected.selectedRef?.current) {\n selected.selectedRef.current.scrollIntoView();\n }\n }, [selected.selectedRef]);\n\n return (\n <SettingsSelectionContextProvider value={selected}>\n <div className={b({view})}>\n {isMobile ? (\n <React.Fragment>\n <SettingsSearch\n inputRef={searchInputRef}\n className={b('search')}\n initialValue={initialSearch}\n selection={selection}\n onChange={setSearch}\n autoFocus={false}\n inputSize={'xl'}\n />\n <SettingsMenuMobile\n items={menu}\n onChange={handlePageChange}\n activeItemId={activePage}\n className={b('tabs')}\n />\n </React.Fragment>\n ) : (\n <div\n className={b('menu')}\n onClick={() => {\n if (searchInputRef.current) {\n searchInputRef.current.focus();\n }\n }}\n onKeyDown={(event) => {\n if (menuRef.current) {\n if (menuRef.current.handleKeyDown(event)) {\n event.preventDefault();\n }\n }\n }}\n >\n <Title>{title}</Title>\n <SettingsSearch\n inputRef={searchInputRef}\n className={b('search')}\n initialValue={initialSearch}\n selection={selection}\n onChange={setSearch}\n placeholder={filterPlaceholder}\n autoFocus\n />\n <SettingsMenu\n ref={menuRef}\n items={menu}\n onChange={handlePageChange}\n activeItemId={activePage}\n />\n </div>\n )}\n <div className={b('page')}>\n <SettingsPageComponent\n menu={menu}\n pages={pages}\n selected={selected}\n search={search}\n isMobile={isMobile}\n page={activePage}\n emptyPlaceholder={emptyPlaceholder}\n renderNotFound={renderNotFound}\n onClose={onClose}\n />\n </div>\n </div>\n </SettingsSelectionContextProvider>\n );\n}\n\nSettings.Group = function SettingsGroup({children}: SettingsGroupProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Page = function SettingsPage({children}: SettingsPageProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Section = function SettingsSection({children}: SettingsSectionProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Item = function SettingsItem(setting: SettingsItemProps) {\n const {\n id,\n labelId,\n highlightedTitle,\n children,\n align = 'center',\n withBadge,\n renderTitleComponent = identity,\n mode,\n description,\n } = setting;\n\n const selected = useSettingsSelectionContext();\n const isSettingSelected = selected.setting && selected.setting.id === id;\n\n const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n const titleComponent = renderTitleComponent(highlightedTitle);\n const titleNode = <span className={b('item-title', {badge: withBadge})}>{titleComponent}</span>;\n\n const showTitle = titleComponent !== null;\n\n return (\n <div\n className={b('item', {\n align,\n mode,\n selected: isSettingSelected,\n title: showTitle ? 'show' : 'hide',\n })}\n ref={isSettingSelected ? selected.selectedRef : undefined}\n >\n {showTitle ? (\n <label className={b('item-heading')} id={labelId}>\n {renderRightAdornment ? (\n <Flex className={b('item-title-wrapper')} gap={3}>\n {titleNode}\n <div\n className={b('item-right-adornment', {\n hidden: showRightAdornmentOnHover,\n })}\n >\n {renderRightAdornment(setting)}\n </div>\n </Flex>\n ) : (\n titleNode\n )}\n {description ? (\n <span className={b('item-description')}>{description}</span>\n ) : null}\n </label>\n ) : null}\n <div className={b('item-content')}>{children}</div>\n </div>\n );\n};\n"],"names":["__rest","b","Loader","SettingsContext","i18n","getSettingsFromChildren","useSettingsSelectionProviderValue","useAllResultsPage","SettingsSelectionContextProvider","SettingsSearch","SettingsMenuMobile","Title","SettingsMenu","SettingsPageComponent","identity","useSettingsSelectionContext","useSettingsContext","Flex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Settings.js","sources":["../../../../../src/components/Settings/Settings.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Flex, Loader} from '@gravity-ui/uikit';\nimport identity from 'lodash/identity';\n\nimport {Title} from '../Title';\n\nimport {\n SettingsSelectionContextProvider,\n useSettingsSelectionContext,\n useSettingsSelectionProviderValue,\n} from './Selection/context';\nimport {SettingsContext} from './SettingsContext/SettingsContext';\nimport {useSettingsContext} from './SettingsContext/useSettingsContext';\nimport {SettingsMenu, SettingsMenuInstance} from './SettingsMenu/SettingsMenu';\nimport {SettingsMenuMobile} from './SettingsMenuMobile/SettingsMenuMobile';\nimport {SettingsPageComponent} from './SettingsPage/SettingsPageComponent';\nimport {useAllResultsPage} from './SettingsSearch/AllResultsPage';\nimport {SettingsSearch} from './SettingsSearch/SettingsSearch';\nimport {b} from './b';\nimport {getSettingsFromChildren} from './collect-settings';\nimport i18n from './i18n';\nimport type {\n SettingsContentProps,\n SettingsGroupProps,\n SettingsItemProps,\n SettingsPageProps,\n SettingsProps,\n SettingsSectionProps,\n} from './types';\n\nexport function Settings({\n loading,\n renderLoading,\n children,\n view = 'normal',\n renderRightAdornment,\n renderSectionRightAdornment,\n showRightAdornmentOnHover = true,\n ...props\n}: SettingsProps) {\n if (loading) {\n return (\n <div className={b({loading: true, view})}>\n {typeof renderLoading === 'function' ? (\n renderLoading()\n ) : (\n <Loader className={b('loader')} size=\"m\" />\n )}\n </div>\n );\n }\n\n return (\n <SettingsContext.Provider\n value={{renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover}}\n >\n <SettingsContent view={view} {...props}>\n {children}\n </SettingsContent>\n </SettingsContext.Provider>\n );\n}\n\nfunction SettingsContent({\n initialPage,\n initialSearch,\n selection,\n children,\n renderNotFound,\n title = i18n('label_title'),\n filterPlaceholder = i18n('label_filter-placeholder'),\n emptyPlaceholder = i18n('label_empty-placeholder'),\n view,\n onPageChange,\n onClose,\n}: SettingsContentProps) {\n const [search, setSearch] = React.useState(initialSearch ?? '');\n const {menu, pages} = getSettingsFromChildren(children, search);\n\n const selected = useSettingsSelectionProviderValue(pages, selection);\n\n const pageKeys = Object.keys(pages);\n const selectionInitialPage =\n selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;\n const [selectedPage, setCurrentPage] = React.useState<string | undefined>(\n selectionInitialPage ||\n (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined),\n );\n const searchInputRef = React.useRef<HTMLInputElement>(null);\n const menuRef = React.useRef<SettingsMenuInstance>(null);\n const isMobile = view === 'mobile';\n\n React.useEffect(() => {\n menuRef.current?.clearFocus();\n }, [search]);\n\n React.useEffect(() => {\n const handler = () => {\n menuRef.current?.clearFocus();\n };\n window.addEventListener('click', handler);\n return () => {\n window.removeEventListener('click', handler);\n };\n }, []);\n\n let activePage = selectedPage;\n\n if (!activePage || !pages[activePage] || pages[activePage].hidden) {\n activePage = Object.values(pages).find(({hidden}) => !hidden)?.id;\n }\n\n const handlePageChange = (newPage: string | undefined) => {\n setCurrentPage((prevPage) => {\n if (prevPage !== newPage && !isFakePage(newPage)) {\n onPageChange?.(newPage);\n }\n return newPage;\n });\n };\n\n const {isAllSearchPage} = useAllResultsPage({pages, handlePageChange});\n\n function isFakePage(page: string | undefined) {\n return isAllSearchPage(page);\n }\n\n React.useEffect(() => {\n if (activePage !== selectedPage) {\n handlePageChange(activePage);\n }\n });\n\n React.useEffect(() => {\n if (!selectionInitialPage) return;\n setCurrentPage(selectionInitialPage);\n }, [selectionInitialPage]);\n\n React.useEffect(() => {\n if (selected.selectedRef?.current) {\n selected.selectedRef.current.scrollIntoView();\n }\n }, [selected.selectedRef]);\n\n return (\n <SettingsSelectionContextProvider value={selected}>\n <div className={b({view})}>\n {isMobile ? (\n <React.Fragment>\n <SettingsSearch\n inputRef={searchInputRef}\n className={b('search')}\n initialValue={initialSearch}\n selection={selection}\n onChange={setSearch}\n autoFocus={false}\n inputSize={'xl'}\n />\n <SettingsMenuMobile\n items={menu}\n onChange={handlePageChange}\n activeItemId={activePage}\n className={b('tabs')}\n />\n </React.Fragment>\n ) : (\n <div\n className={b('menu')}\n onClick={() => {\n if (searchInputRef.current) {\n searchInputRef.current.focus();\n }\n }}\n onKeyDown={(event) => {\n if (menuRef.current) {\n if (menuRef.current.handleKeyDown(event)) {\n event.preventDefault();\n }\n }\n }}\n >\n <Title>{title}</Title>\n <SettingsSearch\n inputRef={searchInputRef}\n className={b('search')}\n initialValue={initialSearch}\n selection={selection}\n onChange={setSearch}\n placeholder={filterPlaceholder}\n autoFocus\n />\n <SettingsMenu\n ref={menuRef}\n items={menu}\n onChange={handlePageChange}\n activeItemId={activePage}\n />\n </div>\n )}\n <div className={b('page')}>\n <SettingsPageComponent\n menu={menu}\n pages={pages}\n selected={selected}\n search={search}\n isMobile={isMobile}\n page={activePage}\n emptyPlaceholder={emptyPlaceholder}\n renderNotFound={renderNotFound}\n onClose={onClose}\n />\n </div>\n </div>\n </SettingsSelectionContextProvider>\n );\n}\n\nSettings.Group = function SettingsGroup({children}: SettingsGroupProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Page = function SettingsPage({children}: SettingsPageProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Section = function SettingsSection({children}: SettingsSectionProps) {\n return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Item = function SettingsItem(setting: SettingsItemProps) {\n const {\n id,\n labelId,\n highlightedTitle,\n children,\n align = 'center',\n withBadge,\n renderTitleComponent = identity,\n mode,\n description,\n } = setting;\n\n const selected = useSettingsSelectionContext();\n const isSettingSelected = selected.setting && selected.setting.id === id;\n\n const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n const titleComponent = renderTitleComponent(highlightedTitle);\n const titleNode = <span className={b('item-title', {badge: withBadge})}>{titleComponent}</span>;\n\n const showTitle = titleComponent !== null;\n\n return (\n <div\n className={b('item', {\n align,\n mode,\n selected: isSettingSelected,\n title: showTitle ? 'show' : 'hide',\n })}\n ref={isSettingSelected ? selected.selectedRef : undefined}\n >\n {showTitle ? (\n <label className={b('item-heading')} id={labelId}>\n {renderRightAdornment ? (\n <Flex className={b('item-title-wrapper')} gap={3}>\n {titleNode}\n <div\n className={b('item-right-adornment', {\n hidden: showRightAdornmentOnHover,\n })}\n >\n {renderRightAdornment(setting)}\n </div>\n </Flex>\n ) : (\n titleNode\n )}\n {description ? (\n <span className={b('item-description')}>{description}</span>\n ) : null}\n </label>\n ) : null}\n <div className={b('item-content')}>{children}</div>\n </div>\n );\n};\n"],"names":["__rest","b","Loader","SettingsContext","i18n","getSettingsFromChildren","useSettingsSelectionProviderValue","useAllResultsPage","SettingsSelectionContextProvider","SettingsSearch","SettingsMenuMobile","Title","SettingsMenu","SettingsPageComponent","useSettingsSelectionContext","useSettingsContext","Flex"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var icons = require('@gravity-ui/icons');
|
|
5
|
-
var last = require('
|
|
5
|
+
var last = require('lodash/last');
|
|
6
6
|
var index = require('../i18n/index.js');
|
|
7
7
|
|
|
8
8
|
const allSearchResultsId = 'allSearchResults';
|
|
@@ -47,7 +47,7 @@ function createAllResultsPage(pages, menu) {
|
|
|
47
47
|
return page.sections.map((section) => {
|
|
48
48
|
var _a;
|
|
49
49
|
const breadcrumbs = (_a = breadcrumbsMap[page.id]) !== null && _a !== undefined ? _a : [];
|
|
50
|
-
const lastBreadcrumb = last
|
|
50
|
+
const lastBreadcrumb = last(breadcrumbs);
|
|
51
51
|
const breadcrumbsTitlePart = breadcrumbs.join(' / ');
|
|
52
52
|
return Object.assign(Object.assign({}, section), { title: section.title === lastBreadcrumb
|
|
53
53
|
? breadcrumbsTitlePart
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AllResultsPage.js","sources":["../../../../../../src/components/Settings/SettingsSearch/AllResultsPage.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ListUl} from '@gravity-ui/icons';\nimport last from 'lodash/last';\n\nimport type {\n SettingsDescription,\n SettingsMenu,\n SettingsMenuItem,\n SettingsPage,\n SettingsPageSection,\n} from '../collect-settings';\nimport i18n from '../i18n';\n\nconst allSearchResultsId = 'allSearchResults';\n\nexport function useAllResultsPage({\n pages,\n handlePageChange,\n}: {\n pages: SettingsDescription['pages'];\n handlePageChange: (page: string | undefined) => void;\n}) {\n const allSearchResultsPage = pages[allSearchResultsId];\n const hasAllSearchResultsPage = Boolean(allSearchResultsPage);\n\n React.useEffect(() => {\n if (hasAllSearchResultsPage) {\n handlePageChange(allSearchResultsId);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hasAllSearchResultsPage]);\n\n return {\n isAllSearchPage: (page: string | undefined) => page === allSearchResultsId,\n };\n}\n\nexport function getSettingsDescriptionWithAllResultsPage(\n settingsDescription: SettingsDescription,\n): SettingsDescription {\n const {menu, pages} = settingsDescription;\n const menuWithoutAllResults = getMenuWithoutAllResults(menu);\n const pagesList = Object.values(pages);\n\n return {\n ...settingsDescription,\n menu: [createAllResultsMenuItem(), ...menuWithoutAllResults],\n pages: {\n ...pages,\n [allSearchResultsId]: createAllResultsPage(pagesList, menuWithoutAllResults),\n },\n };\n}\n\nfunction getMenuWithoutAllResults(menu: SettingsMenu) {\n return menu.filter((item) => !('id' in item) || item.id !== allSearchResultsId);\n}\n\nfunction createAllResultsPage(pages: SettingsPage[], menu: SettingsMenu): SettingsPage {\n const breadcrumbsMap: Record<string, string[] | undefined> = {};\n\n for (const menuItem of menu) {\n if ('items' in menuItem) {\n for (const pageItem of menuItem.items) {\n breadcrumbsMap[pageItem.id] = [menuItem.groupTitle, pageItem.title];\n }\n } else {\n breadcrumbsMap[menuItem.id] = [menuItem.title];\n }\n }\n\n return {\n id: allSearchResultsId,\n sections: Object.values(pages)\n .map((page) => {\n return page.sections.map((section): SettingsPageSection => {\n const breadcrumbs = breadcrumbsMap[page.id] ?? [];\n const lastBreadcrumb = last(breadcrumbs);\n const breadcrumbsTitlePart = breadcrumbs.join(' / ');\n\n return {\n ...section,\n title:\n section.title === lastBreadcrumb\n ? breadcrumbsTitlePart\n : `${breadcrumbsTitlePart} / ${section.title}`,\n };\n });\n })\n .flat(),\n };\n}\n\nfunction createAllResultsMenuItem(): SettingsMenuItem {\n return {\n id: allSearchResultsId,\n title: i18n('label_all-results'),\n icon: {data: ListUl},\n };\n}\n"],"names":["
|
|
1
|
+
{"version":3,"file":"AllResultsPage.js","sources":["../../../../../../src/components/Settings/SettingsSearch/AllResultsPage.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ListUl} from '@gravity-ui/icons';\nimport last from 'lodash/last';\n\nimport type {\n SettingsDescription,\n SettingsMenu,\n SettingsMenuItem,\n SettingsPage,\n SettingsPageSection,\n} from '../collect-settings';\nimport i18n from '../i18n';\n\nconst allSearchResultsId = 'allSearchResults';\n\nexport function useAllResultsPage({\n pages,\n handlePageChange,\n}: {\n pages: SettingsDescription['pages'];\n handlePageChange: (page: string | undefined) => void;\n}) {\n const allSearchResultsPage = pages[allSearchResultsId];\n const hasAllSearchResultsPage = Boolean(allSearchResultsPage);\n\n React.useEffect(() => {\n if (hasAllSearchResultsPage) {\n handlePageChange(allSearchResultsId);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hasAllSearchResultsPage]);\n\n return {\n isAllSearchPage: (page: string | undefined) => page === allSearchResultsId,\n };\n}\n\nexport function getSettingsDescriptionWithAllResultsPage(\n settingsDescription: SettingsDescription,\n): SettingsDescription {\n const {menu, pages} = settingsDescription;\n const menuWithoutAllResults = getMenuWithoutAllResults(menu);\n const pagesList = Object.values(pages);\n\n return {\n ...settingsDescription,\n menu: [createAllResultsMenuItem(), ...menuWithoutAllResults],\n pages: {\n ...pages,\n [allSearchResultsId]: createAllResultsPage(pagesList, menuWithoutAllResults),\n },\n };\n}\n\nfunction getMenuWithoutAllResults(menu: SettingsMenu) {\n return menu.filter((item) => !('id' in item) || item.id !== allSearchResultsId);\n}\n\nfunction createAllResultsPage(pages: SettingsPage[], menu: SettingsMenu): SettingsPage {\n const breadcrumbsMap: Record<string, string[] | undefined> = {};\n\n for (const menuItem of menu) {\n if ('items' in menuItem) {\n for (const pageItem of menuItem.items) {\n breadcrumbsMap[pageItem.id] = [menuItem.groupTitle, pageItem.title];\n }\n } else {\n breadcrumbsMap[menuItem.id] = [menuItem.title];\n }\n }\n\n return {\n id: allSearchResultsId,\n sections: Object.values(pages)\n .map((page) => {\n return page.sections.map((section): SettingsPageSection => {\n const breadcrumbs = breadcrumbsMap[page.id] ?? [];\n const lastBreadcrumb = last(breadcrumbs);\n const breadcrumbsTitlePart = breadcrumbs.join(' / ');\n\n return {\n ...section,\n title:\n section.title === lastBreadcrumb\n ? breadcrumbsTitlePart\n : `${breadcrumbsTitlePart} / ${section.title}`,\n };\n });\n })\n .flat(),\n };\n}\n\nfunction createAllResultsMenuItem(): SettingsMenuItem {\n return {\n id: allSearchResultsId,\n title: i18n('label_all-results'),\n icon: {data: ListUl},\n };\n}\n"],"names":["i18n","ListUl"],"mappings":"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"}
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var uikit = require('@gravity-ui/uikit');
|
|
5
|
-
var
|
|
5
|
+
var debounceFn = require('lodash/debounce');
|
|
6
6
|
var cn = require('../../utils/cn.js');
|
|
7
7
|
var helpers = require('../helpers.js');
|
|
8
8
|
var index = require('../i18n/index.js');
|
|
9
9
|
|
|
10
10
|
const b = cn.cn('settings-search');
|
|
11
|
-
function SettingsSearch({ className, initialValue, onChange, debounce
|
|
11
|
+
function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, selection, }) {
|
|
12
12
|
const [value, setValue] = React.useState(initialValue !== null && initialValue !== undefined ? initialValue : '');
|
|
13
|
-
const onChangeDebounced =
|
|
13
|
+
const onChangeDebounced = debounceFn(onChange, debounce);
|
|
14
14
|
const handleUpdate = helpers.useStableCallback((updated) => {
|
|
15
15
|
setValue(updated);
|
|
16
16
|
onChangeDebounced(updated);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SettingsSearch.js","sources":["../../../../../../src/components/Settings/SettingsSearch/SettingsSearch.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\n\nimport {TextInput, TextInputSize} from '@gravity-ui/uikit';\nimport debounceFn from 'lodash/debounce';\n\nimport {cn} from '../../utils/cn';\nimport {SettingsSelection} from '../Selection/types';\nimport {useStableCallback} from '../helpers';\nimport i18n from '../i18n';\n\nconst b = cn('settings-search');\n\ninterface SettingsSearchProps {\n className?: string;\n initialValue?: string;\n onChange: (search: string) => void;\n debounce?: number;\n inputRef?: React.Ref<HTMLInputElement>;\n inputSize?: TextInputSize;\n placeholder?: string;\n autoFocus?: boolean;\n selection?: SettingsSelection;\n}\n\nexport function SettingsSearch({\n className,\n initialValue,\n onChange,\n debounce = 200,\n inputRef,\n inputSize,\n placeholder,\n autoFocus = true,\n selection,\n}: SettingsSearchProps) {\n const [value, setValue] = React.useState(initialValue ?? '');\n\n const onChangeDebounced = debounceFn(onChange, debounce);\n\n const handleUpdate = useStableCallback((updated: string) => {\n setValue(updated);\n onChangeDebounced(updated);\n });\n\n useEffect(() => {\n if (value && selection) {\n onChangeDebounced.cancel();\n setValue('');\n onChange('');\n }\n // Remove any search, if selection is passed\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selection]);\n\n return (\n <div className={b(null, className)}>\n <TextInput\n value={value}\n controlRef={inputRef}\n hasClear\n autoFocus={autoFocus}\n size={inputSize}\n placeholder={placeholder}\n onUpdate={handleUpdate}\n controlProps={{\n 'aria-label': i18n('label_search'),\n }}\n />\n </div>\n );\n}\n"],"names":["cn","
|
|
1
|
+
{"version":3,"file":"SettingsSearch.js","sources":["../../../../../../src/components/Settings/SettingsSearch/SettingsSearch.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\n\nimport {TextInput, TextInputSize} from '@gravity-ui/uikit';\nimport debounceFn from 'lodash/debounce';\n\nimport {cn} from '../../utils/cn';\nimport {SettingsSelection} from '../Selection/types';\nimport {useStableCallback} from '../helpers';\nimport i18n from '../i18n';\n\nconst b = cn('settings-search');\n\ninterface SettingsSearchProps {\n className?: string;\n initialValue?: string;\n onChange: (search: string) => void;\n debounce?: number;\n inputRef?: React.Ref<HTMLInputElement>;\n inputSize?: TextInputSize;\n placeholder?: string;\n autoFocus?: boolean;\n selection?: SettingsSelection;\n}\n\nexport function SettingsSearch({\n className,\n initialValue,\n onChange,\n debounce = 200,\n inputRef,\n inputSize,\n placeholder,\n autoFocus = true,\n selection,\n}: SettingsSearchProps) {\n const [value, setValue] = React.useState(initialValue ?? '');\n\n const onChangeDebounced = debounceFn(onChange, debounce);\n\n const handleUpdate = useStableCallback((updated: string) => {\n setValue(updated);\n onChangeDebounced(updated);\n });\n\n useEffect(() => {\n if (value && selection) {\n onChangeDebounced.cancel();\n setValue('');\n onChange('');\n }\n // Remove any search, if selection is passed\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selection]);\n\n return (\n <div className={b(null, className)}>\n <TextInput\n value={value}\n controlRef={inputRef}\n hasClear\n autoFocus={autoFocus}\n size={inputSize}\n placeholder={placeholder}\n onUpdate={handleUpdate}\n controlProps={{\n 'aria-label': i18n('label_search'),\n }}\n />\n </div>\n );\n}\n"],"names":["cn","useStableCallback","useEffect","TextInput","i18n"],"mappings":";;;;;;;;;AAUA,MAAM,CAAC,GAAGA,KAAE,CAAC,iBAAiB,CAAC;AAczB,SAAU,cAAc,CAAC,EAC3B,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,QAAQ,GAAG,GAAG,EACd,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,GAAG,IAAI,EAChB,SAAS,GACS,EAAA;AAClB,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAZ,YAAY,GAAI,EAAE,CAAC;IAE5D,MAAM,iBAAiB,GAAG,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAExD,IAAA,MAAM,YAAY,GAAGC,yBAAiB,CAAC,CAAC,OAAe,KAAI;QACvD,QAAQ,CAAC,OAAO,CAAC;QACjB,iBAAiB,CAAC,OAAO,CAAC;AAC9B,KAAC,CAAC;IAEFC,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,KAAK,IAAI,SAAS,EAAE;YACpB,iBAAiB,CAAC,MAAM,EAAE;YAC1B,QAAQ,CAAC,EAAE,CAAC;YACZ,QAAQ,CAAC,EAAE,CAAC;;;;AAIpB,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,QACI,6BAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA;AAC9B,QAAA,KAAA,CAAA,aAAA,CAACC,eAAS,EAAA,EACN,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAA,IAAA,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE;AACV,gBAAA,YAAY,EAAEC,aAAI,CAAC,cAAc,CAAC;aACrC,EACH,CAAA,CACA;AAEd;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var uikit = require('@gravity-ui/uikit');
|
|
6
6
|
var useSettingsContext = require('./SettingsContext/useSettingsContext.js');
|
|
@@ -8,7 +8,7 @@ var SettingsRow = require('./SettingsRow/SettingsRow.js');
|
|
|
8
8
|
var b = require('./b.js');
|
|
9
9
|
|
|
10
10
|
const SettingsSection = React.forwardRef((_a, ref) => {
|
|
11
|
-
var { search, isMobile, isSelected } = _a, section =
|
|
11
|
+
var { search, isMobile, isSelected } = _a, section = tslib.__rest(_a, ["search", "isMobile", "isSelected"]);
|
|
12
12
|
const { renderSectionRightAdornment, showRightAdornmentOnHover } = useSettingsContext.useSettingsContext();
|
|
13
13
|
return (React.createElement("div", { className: b.b('section', { selected: isSelected }), ref: isSelected ? ref : undefined },
|
|
14
14
|
section.title && !section.hideTitle && (React.createElement("h3", { className: b.b('section-heading') }, renderSectionRightAdornment ? (React.createElement(uikit.Flex, { gap: 2, alignItems: 'center' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SettingsSection.js","sources":["../../../../../src/components/Settings/SettingsSection.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Flex} from '@gravity-ui/uikit';\n\nimport {useSettingsContext} from './SettingsContext/useSettingsContext';\nimport {SettingRow} from './SettingsRow/SettingsRow';\nimport {b} from './b';\nimport type {SettingsPageSection} from './collect-settings';\n\nexport const SettingsSection = React.forwardRef<\n HTMLDivElement,\n SettingsPageSection & {\n search: string;\n isMobile: boolean;\n isSelected: boolean;\n }\n>(({search, isMobile, isSelected, ...section}, ref) => {\n const {renderSectionRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n\n return (\n <div className={b('section', {selected: isSelected})} ref={isSelected ? ref : undefined}>\n {section.title && !section.hideTitle && (\n <h3 className={b('section-heading')}>\n {renderSectionRightAdornment ? (\n <Flex gap={2} alignItems={'center'}>\n {section.title}\n <div\n className={b('section-right-adornment', {\n hidden: showRightAdornmentOnHover,\n })}\n >\n {renderSectionRightAdornment(section)}\n </div>\n </Flex>\n ) : (\n section.title\n )}\n </h3>\n )}\n\n {section.header &&\n (isMobile ? (\n <div className={b('section-subheader')}>{section.header}</div>\n ) : (\n section.header\n ))}\n\n {section.items.map((setting) =>\n setting.hidden ? null : (\n <SettingRow {...setting} key={setting.title} search={search} />\n ),\n )}\n </div>\n );\n});\n\nSettingsSection.displayName = 'SettingsSection';\n"],"names":["__rest","useSettingsContext","b","Flex","SettingRow"],"mappings":";;;;;;;;;AASO,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAO7C,CAAC,EAA0C,EAAE,GAAG,KAAI;QAAnD,EAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,OAAa,EAAR,OAAO,GAAzCA,
|
|
1
|
+
{"version":3,"file":"SettingsSection.js","sources":["../../../../../src/components/Settings/SettingsSection.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Flex} from '@gravity-ui/uikit';\n\nimport {useSettingsContext} from './SettingsContext/useSettingsContext';\nimport {SettingRow} from './SettingsRow/SettingsRow';\nimport {b} from './b';\nimport type {SettingsPageSection} from './collect-settings';\n\nexport const SettingsSection = React.forwardRef<\n HTMLDivElement,\n SettingsPageSection & {\n search: string;\n isMobile: boolean;\n isSelected: boolean;\n }\n>(({search, isMobile, isSelected, ...section}, ref) => {\n const {renderSectionRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n\n return (\n <div className={b('section', {selected: isSelected})} ref={isSelected ? ref : undefined}>\n {section.title && !section.hideTitle && (\n <h3 className={b('section-heading')}>\n {renderSectionRightAdornment ? (\n <Flex gap={2} alignItems={'center'}>\n {section.title}\n <div\n className={b('section-right-adornment', {\n hidden: showRightAdornmentOnHover,\n })}\n >\n {renderSectionRightAdornment(section)}\n </div>\n </Flex>\n ) : (\n section.title\n )}\n </h3>\n )}\n\n {section.header &&\n (isMobile ? (\n <div className={b('section-subheader')}>{section.header}</div>\n ) : (\n section.header\n ))}\n\n {section.items.map((setting) =>\n setting.hidden ? null : (\n <SettingRow {...setting} key={setting.title} search={search} />\n ),\n )}\n </div>\n );\n});\n\nSettingsSection.displayName = 'SettingsSection';\n"],"names":["__rest","useSettingsContext","b","Flex","SettingRow"],"mappings":";;;;;;;;;AASO,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAO7C,CAAC,EAA0C,EAAE,GAAG,KAAI;QAAnD,EAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,OAAa,EAAR,OAAO,GAAzCA,YAAA,CAAA,EAAA,EAAA,CAAA,QAAA,EAAA,UAAA,EAAA,YAAA,CAA0C,CAAD;IACxC,MAAM,EAAC,2BAA2B,EAAE,yBAAyB,EAAC,GAAGC,qCAAkB,EAAE;IAErF,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,GAAC,CAAC,SAAS,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAC,CAAC,EAAE,GAAG,EAAE,UAAU,GAAG,GAAG,GAAG,SAAS,EAAA;AAClF,QAAA,OAAO,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,SAAS,KAChC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAEA,GAAC,CAAC,iBAAiB,CAAC,EAAA,EAC9B,2BAA2B,IACxB,KAAC,CAAA,aAAA,CAAAC,UAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAA;AAC7B,YAAA,OAAO,CAAC,KAAK;AACd,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAED,GAAC,CAAC,yBAAyB,EAAE;AACpC,oBAAA,MAAM,EAAE,yBAAyB;AACpC,iBAAA,CAAC,IAED,2BAA2B,CAAC,OAAO,CAAC,CACnC,CACH,KAEP,OAAO,CAAC,KAAK,CAChB,CACA,CACR;AAEA,QAAA,OAAO,CAAC,MAAM;aACV,QAAQ,IACL,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,GAAC,CAAC,mBAAmB,CAAC,EAAA,EAAG,OAAO,CAAC,MAAM,CAAO,KAE9D,OAAO,CAAC,MAAM,CACjB,CAAC;AAEL,QAAA,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,KACvB,OAAO,CAAC,MAAM,GAAG,IAAI,IACjB,KAAA,CAAA,aAAA,CAACE,sBAAU,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,OAAO,IAAE,GAAG,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAA,CAAA,CAAI,CAClE,CACJ,CACC;AAEd,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var
|
|
4
|
+
var debounceFn = require('lodash/debounce');
|
|
5
5
|
|
|
6
6
|
const G_ROOT_CLASS_NAME = 'g-root';
|
|
7
7
|
const useTopAlertHeight = ({ alert }) => {
|
|
@@ -18,7 +18,7 @@ const useTopAlertHeight = ({ alert }) => {
|
|
|
18
18
|
setAsideTopPanelHeight(height);
|
|
19
19
|
}, [setAsideTopPanelHeight]);
|
|
20
20
|
React.useLayoutEffect(() => {
|
|
21
|
-
const updateTopSizeDebounce =
|
|
21
|
+
const updateTopSizeDebounce = debounceFn(updateTopSize, 200, { leading: true });
|
|
22
22
|
if (alert) {
|
|
23
23
|
window.addEventListener('resize', updateTopSizeDebounce);
|
|
24
24
|
updateTopSizeDebounce();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTopAlertHeight.js","sources":["../../../../../src/components/TopAlert/useTopAlertHeight.ts"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n alertRef: React.RefObject<HTMLDivElement>;\n updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n const alertRef = React.useRef<HTMLDivElement>(null);\n\n const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n const gRootElement = document\n .getElementsByClassName(G_ROOT_CLASS_NAME)\n .item(0) as HTMLElement | null;\n gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n }, []);\n\n const updateTopSize = React.useCallback(() => {\n const height = alertRef.current?.clientHeight ?? 0;\n setAsideTopPanelHeight(height);\n }, [setAsideTopPanelHeight]);\n\n React.useLayoutEffect(() => {\n const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n if (alert) {\n window.addEventListener('resize', updateTopSizeDebounce);\n updateTopSizeDebounce();\n }\n return () => {\n window.removeEventListener('resize', updateTopSizeDebounce);\n setAsideTopPanelHeight(0);\n };\n }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n return {\n alertRef,\n updateTopSize,\n };\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"useTopAlertHeight.js","sources":["../../../../../src/components/TopAlert/useTopAlertHeight.ts"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n alertRef: React.RefObject<HTMLDivElement>;\n updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n const alertRef = React.useRef<HTMLDivElement>(null);\n\n const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n const gRootElement = document\n .getElementsByClassName(G_ROOT_CLASS_NAME)\n .item(0) as HTMLElement | null;\n gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n }, []);\n\n const updateTopSize = React.useCallback(() => {\n const height = alertRef.current?.clientHeight ?? 0;\n setAsideTopPanelHeight(height);\n }, [setAsideTopPanelHeight]);\n\n React.useLayoutEffect(() => {\n const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n if (alert) {\n window.addEventListener('resize', updateTopSizeDebounce);\n updateTopSizeDebounce();\n }\n return () => {\n window.removeEventListener('resize', updateTopSizeDebounce);\n setAsideTopPanelHeight(0);\n };\n }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n return {\n alertRef,\n updateTopSize,\n };\n};\n"],"names":[],"mappings":";;;;;AAWA,MAAM,iBAAiB,GAAG,QAAQ;MAErB,iBAAiB,GAAG,CAAC,EAAC,KAAK,EAA0B,KAA4B;IAC1F,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;IAEnD,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,YAAoB,KAAI;QACtE,MAAM,YAAY,GAAG;aAChB,sBAAsB,CAAC,iBAAiB;aACxC,IAAI,CAAC,CAAC,CAAuB;AAClC,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CAAE,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,YAAY,GAAG,IAAI,CAAC;KAChF,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,MAAK;;QACzC,MAAM,MAAM,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,CAAC;QAClD,sBAAsB,CAAC,MAAM,CAAC;AAClC,KAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;AAE5B,IAAA,KAAK,CAAC,eAAe,CAAC,MAAK;AACvB,QAAA,MAAM,qBAAqB,GAAG,UAAU,CAAC,aAAa,EAAE,GAAG,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;QAE7E,IAAI,KAAK,EAAE;AACP,YAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,CAAC;AACxD,YAAA,qBAAqB,EAAE;;AAE3B,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,qBAAqB,CAAC;YAC3D,sBAAsB,CAAC,CAAC,CAAC;AAC7B,SAAC;KACJ,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,sBAAsB,CAAC,CAAC;IAE5D,OAAO;QACH,QAAQ;QACR,aAAa;KAChB;AACL;;;;"}
|
package/build/cjs/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var
|
|
4
|
+
var debounceFn = require('lodash/debounce');
|
|
5
5
|
|
|
6
6
|
function useOverflowingHorizontalListItems({ containerRef, items, itemSelector, moreButtonWidth = 0, }) {
|
|
7
7
|
const [containerWidth, setContainerWidth] = React.useState(0);
|
|
@@ -24,7 +24,7 @@ function useOverflowingHorizontalListItems({ containerRef, items, itemSelector,
|
|
|
24
24
|
setContainerWidth(entries[0].contentRect.width);
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
|
-
const updateContainerSizeDebounced =
|
|
27
|
+
const updateContainerSizeDebounced = debounceFn(updateContainerSize, 100);
|
|
28
28
|
const footerMenuResizeObserver = new ResizeObserver(updateContainerSizeDebounced);
|
|
29
29
|
if (footerMenu) {
|
|
30
30
|
footerMenuResizeObserver.observe(footerMenu);
|
package/build/cjs/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverflowingHorizontalListItems.js","sources":["../../../../../src/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.ts"],"sourcesContent":["import {useLayoutEffect, useMemo, useState} from 'react';\nimport type {RefObject} from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\ntype UseOverflowingContainerListItemsProps<ItemType extends unknown> = {\n containerRef: RefObject<HTMLElement>;\n items?: ItemType[];\n itemSelector: string;\n moreButtonWidth?: number;\n};\n\nexport function useOverflowingHorizontalListItems<ItemType>({\n containerRef,\n items,\n itemSelector,\n moreButtonWidth = 0,\n}: UseOverflowingContainerListItemsProps<ItemType>) {\n const [containerWidth, setContainerWidth] = useState<number>(0);\n const [itemWidths, setItemWidths] = useState<number[]>([]);\n\n useLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n const measureItemSizes = () => {\n const itemElements = Array.from(\n containerRef.current?.querySelectorAll(itemSelector) ?? [],\n );\n setItemWidths(itemElements.map((item) => item.clientWidth));\n };\n\n measureItemSizes();\n }, [containerRef, itemSelector]);\n\n useLayoutEffect(() => {\n const footerMenu = containerRef.current;\n\n const updateContainerSize = (entries: ResizeObserverEntry[]) => {\n if (entries.length > 0 && footerMenu) {\n setContainerWidth(entries[0].contentRect.width);\n }\n };\n\n const updateContainerSizeDebounced = debounceFn(updateContainerSize, 100);\n const footerMenuResizeObserver = new ResizeObserver(updateContainerSizeDebounced);\n\n if (footerMenu) {\n footerMenuResizeObserver.observe(footerMenu);\n }\n\n return () => {\n updateContainerSizeDebounced.cancel();\n footerMenuResizeObserver.disconnect();\n };\n }, [containerRef]);\n\n const isMeasured = containerWidth > 0;\n\n const {visibleItems, hiddenItems} = useMemo(() => {\n if (!isMeasured) {\n return {\n visibleItems: items ?? [],\n hiddenItems: [],\n };\n }\n\n const itemsCount = itemWidths.length;\n let visibleItemsCount = 0;\n let remainingContainerWidth = containerWidth;\n for (const width of itemWidths) {\n remainingContainerWidth -= width;\n if (remainingContainerWidth < moreButtonWidth) {\n const isMoreThanOneItemLeft = itemsCount !== visibleItemsCount + 1;\n const hasNoSpaceForTheLastItem = remainingContainerWidth < 0;\n if (isMoreThanOneItemLeft || hasNoSpaceForTheLastItem) {\n break;\n }\n }\n\n visibleItemsCount++;\n }\n\n return {\n visibleItems: items?.slice(0, visibleItemsCount) ?? [],\n hiddenItems: items?.slice(visibleItemsCount) ?? [],\n };\n }, [containerWidth, isMeasured, itemWidths, items, moreButtonWidth]);\n\n return {visibleItems, hiddenItems, measured: isMeasured};\n}\n"],"names":["useState","useLayoutEffect","
|
|
1
|
+
{"version":3,"file":"useOverflowingHorizontalListItems.js","sources":["../../../../../src/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.ts"],"sourcesContent":["import {useLayoutEffect, useMemo, useState} from 'react';\nimport type {RefObject} from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\ntype UseOverflowingContainerListItemsProps<ItemType extends unknown> = {\n containerRef: RefObject<HTMLElement>;\n items?: ItemType[];\n itemSelector: string;\n moreButtonWidth?: number;\n};\n\nexport function useOverflowingHorizontalListItems<ItemType>({\n containerRef,\n items,\n itemSelector,\n moreButtonWidth = 0,\n}: UseOverflowingContainerListItemsProps<ItemType>) {\n const [containerWidth, setContainerWidth] = useState<number>(0);\n const [itemWidths, setItemWidths] = useState<number[]>([]);\n\n useLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n const measureItemSizes = () => {\n const itemElements = Array.from(\n containerRef.current?.querySelectorAll(itemSelector) ?? [],\n );\n setItemWidths(itemElements.map((item) => item.clientWidth));\n };\n\n measureItemSizes();\n }, [containerRef, itemSelector]);\n\n useLayoutEffect(() => {\n const footerMenu = containerRef.current;\n\n const updateContainerSize = (entries: ResizeObserverEntry[]) => {\n if (entries.length > 0 && footerMenu) {\n setContainerWidth(entries[0].contentRect.width);\n }\n };\n\n const updateContainerSizeDebounced = debounceFn(updateContainerSize, 100);\n const footerMenuResizeObserver = new ResizeObserver(updateContainerSizeDebounced);\n\n if (footerMenu) {\n footerMenuResizeObserver.observe(footerMenu);\n }\n\n return () => {\n updateContainerSizeDebounced.cancel();\n footerMenuResizeObserver.disconnect();\n };\n }, [containerRef]);\n\n const isMeasured = containerWidth > 0;\n\n const {visibleItems, hiddenItems} = useMemo(() => {\n if (!isMeasured) {\n return {\n visibleItems: items ?? [],\n hiddenItems: [],\n };\n }\n\n const itemsCount = itemWidths.length;\n let visibleItemsCount = 0;\n let remainingContainerWidth = containerWidth;\n for (const width of itemWidths) {\n remainingContainerWidth -= width;\n if (remainingContainerWidth < moreButtonWidth) {\n const isMoreThanOneItemLeft = itemsCount !== visibleItemsCount + 1;\n const hasNoSpaceForTheLastItem = remainingContainerWidth < 0;\n if (isMoreThanOneItemLeft || hasNoSpaceForTheLastItem) {\n break;\n }\n }\n\n visibleItemsCount++;\n }\n\n return {\n visibleItems: items?.slice(0, visibleItemsCount) ?? [],\n hiddenItems: items?.slice(visibleItemsCount) ?? [],\n };\n }, [containerWidth, isMeasured, itemWidths, items, moreButtonWidth]);\n\n return {visibleItems, hiddenItems, measured: isMeasured};\n}\n"],"names":["useState","useLayoutEffect","useMemo"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import './AsideHeader.css';
|
|
2
|
-
import { __rest } from '
|
|
2
|
+
import { __rest } from 'tslib';
|
|
3
3
|
import React__default from 'react';
|
|
4
4
|
import { PageLayout } from './components/PageLayout/PageLayout.js';
|
|
5
5
|
import { PageLayoutAside } from './components/PageLayout/PageLayoutAside.js';
|
|
@@ -8,14 +8,35 @@ import { Item } from './Item/Item.js';
|
|
|
8
8
|
import { MultipleTooltip } from './MultipleTooltip/MultipleTooltip.js';
|
|
9
9
|
import { MultipleTooltipProvider, MultipleTooltipContext } from './MultipleTooltip/MultipleTooltipContext.js';
|
|
10
10
|
import { COLLAPSE_ITEM_ID } from './constants.js';
|
|
11
|
-
import {
|
|
11
|
+
import { getSelectedItemIndex, getItemHeight, getItemsHeight, getItemsMinHeight, getAutosizeListItems, getMoreButtonItem } from './utils.js';
|
|
12
12
|
import styles from './CompositeBar.module.scss.js';
|
|
13
13
|
|
|
14
14
|
const b = createBlock('composite-bar', styles);
|
|
15
|
+
const CompositeBarList = React__default.memo(function CompositeBarList({ compact, compositeId, collapseItems, items, listRef, multipleTooltip, onItemClickByIndex, onMouseEnterByIndex, onMouseLeave, type, }) {
|
|
16
|
+
return (React__default.createElement(List, { id: compositeId, ref: listRef, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex(items) : undefined, itemHeight: getItemHeight, itemsHeight: getItemsHeight, itemClassName: b('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => (React__default.createElement(Item, Object.assign({}, item, { enableTooltip: multipleTooltip ? false : item.enableTooltip, compact: compact, onMouseEnter: onMouseEnterByIndex(itemIndex), onMouseLeave: onMouseLeave, onItemClick: onItemClickByIndex(itemIndex, item.onItemClick), collapseItems: collapseItems }))) }));
|
|
17
|
+
});
|
|
15
18
|
const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems, multipleTooltip = false, compact, compositeId, }) => {
|
|
16
19
|
const ref = useRef(null);
|
|
17
20
|
const tooltipRef = useRef(null);
|
|
18
21
|
const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, activeIndex, lastClickedItemIndex, } = useContext(MultipleTooltipContext);
|
|
22
|
+
const multipleTooltipStateRef = useRef({
|
|
23
|
+
active: multipleTooltipActive,
|
|
24
|
+
activeIndex,
|
|
25
|
+
lastClickedItemIndex,
|
|
26
|
+
});
|
|
27
|
+
const onItemClickRef = useRef(onItemClick);
|
|
28
|
+
const onMoreClickRef = useRef(onMoreClick);
|
|
29
|
+
const setMultipleTooltipContextValueRef = useRef(setMultipleTooltipContextValue);
|
|
30
|
+
React__default.useLayoutEffect(() => {
|
|
31
|
+
multipleTooltipStateRef.current = {
|
|
32
|
+
active: multipleTooltipActive,
|
|
33
|
+
activeIndex,
|
|
34
|
+
lastClickedItemIndex,
|
|
35
|
+
};
|
|
36
|
+
onItemClickRef.current = onItemClick;
|
|
37
|
+
onMoreClickRef.current = onMoreClick;
|
|
38
|
+
setMultipleTooltipContextValueRef.current = setMultipleTooltipContextValue;
|
|
39
|
+
});
|
|
19
40
|
React__default.useEffect(() => {
|
|
20
41
|
function handleBlurWindow() {
|
|
21
42
|
if (multipleTooltip && multipleTooltipActive) {
|
|
@@ -56,76 +77,61 @@ const CompositeBarView = ({ type, items, onItemClick, onMoreClick, collapseItems
|
|
|
56
77
|
}, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
|
|
57
78
|
const onMouseEnterByIndex = useCallback((itemIndex) => () => {
|
|
58
79
|
if (multipleTooltip && document.hasFocus()) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
80
|
+
const { active: multipleTooltipActiveValue, activeIndex: currentActiveIndex, lastClickedItemIndex: currentLastClickedItemIndex, } = multipleTooltipStateRef.current;
|
|
81
|
+
let nextMultipleTooltipActive = multipleTooltipActiveValue;
|
|
82
|
+
if (!multipleTooltipActiveValue && itemIndex !== currentLastClickedItemIndex) {
|
|
83
|
+
nextMultipleTooltipActive = true;
|
|
62
84
|
}
|
|
63
|
-
if (
|
|
64
|
-
|
|
85
|
+
if (currentActiveIndex === itemIndex &&
|
|
86
|
+
multipleTooltipActiveValue === nextMultipleTooltipActive) {
|
|
65
87
|
return;
|
|
66
88
|
}
|
|
67
|
-
|
|
89
|
+
setMultipleTooltipContextValueRef.current({
|
|
68
90
|
activeIndex: itemIndex,
|
|
69
|
-
active:
|
|
91
|
+
active: nextMultipleTooltipActive,
|
|
70
92
|
});
|
|
71
93
|
}
|
|
72
|
-
}, [
|
|
73
|
-
multipleTooltip,
|
|
74
|
-
multipleTooltipActive,
|
|
75
|
-
lastClickedItemIndex,
|
|
76
|
-
activeIndex,
|
|
77
|
-
setMultipleTooltipContextValue,
|
|
78
|
-
]);
|
|
94
|
+
}, [multipleTooltip]);
|
|
79
95
|
const onMouseLeave = useCallback(() => {
|
|
80
96
|
var _a;
|
|
81
97
|
if (compact && document.hasFocus()) {
|
|
82
98
|
(_a = ref.current) === null || _a === undefined ? undefined : _a.activateItem(undefined);
|
|
99
|
+
const { activeIndex: currentActiveIndex, lastClickedItemIndex: currentLastClickedItemIndex, } = multipleTooltipStateRef.current;
|
|
83
100
|
if (multipleTooltip &&
|
|
84
|
-
(
|
|
85
|
-
|
|
101
|
+
(currentActiveIndex !== undefined || currentLastClickedItemIndex !== undefined)) {
|
|
102
|
+
setMultipleTooltipContextValueRef.current({
|
|
86
103
|
activeIndex: undefined,
|
|
87
104
|
lastClickedItemIndex: undefined,
|
|
88
105
|
});
|
|
89
106
|
}
|
|
90
107
|
}
|
|
91
|
-
}, [
|
|
92
|
-
activeIndex,
|
|
93
|
-
compact,
|
|
94
|
-
lastClickedItemIndex,
|
|
95
|
-
multipleTooltip,
|
|
96
|
-
setMultipleTooltipContextValue,
|
|
97
|
-
]);
|
|
108
|
+
}, [compact, multipleTooltip]);
|
|
98
109
|
const onItemClickByIndex = useCallback((itemIndex, orginalItemClick) => (item, collapsed, event) => {
|
|
110
|
+
var _a, _b;
|
|
111
|
+
const { lastClickedItemIndex: currentLastClickedItemIndex } = multipleTooltipStateRef.current;
|
|
99
112
|
if (compact &&
|
|
100
113
|
multipleTooltip &&
|
|
101
|
-
itemIndex !==
|
|
114
|
+
itemIndex !== currentLastClickedItemIndex &&
|
|
102
115
|
item.id !== COLLAPSE_ITEM_ID) {
|
|
103
|
-
|
|
116
|
+
setMultipleTooltipContextValueRef.current({
|
|
104
117
|
lastClickedItemIndex: itemIndex,
|
|
105
118
|
active: false,
|
|
106
119
|
});
|
|
107
120
|
}
|
|
108
121
|
// Handle clicks on the "more" button (collapse item)
|
|
109
122
|
if (item.id === COLLAPSE_ITEM_ID && collapsed) {
|
|
110
|
-
|
|
123
|
+
(_a = onMoreClickRef.current) === null || _a === undefined ? undefined : _a.call(onMoreClickRef);
|
|
111
124
|
}
|
|
112
125
|
else {
|
|
113
|
-
|
|
126
|
+
(_b = onItemClickRef.current) === null || _b === undefined ? undefined : _b.call(onItemClickRef, Object.assign(Object.assign({}, item), {
|
|
114
127
|
// For collapsed popup items, preserve the item's own onItemClick
|
|
115
128
|
// since orginalItemClick belongs to the collapse button, not the item
|
|
116
129
|
onItemClick: collapsed ? item.onItemClick : orginalItemClick }), collapsed, event);
|
|
117
130
|
}
|
|
118
|
-
}, [
|
|
119
|
-
compact,
|
|
120
|
-
lastClickedItemIndex,
|
|
121
|
-
multipleTooltip,
|
|
122
|
-
onItemClick,
|
|
123
|
-
onMoreClick,
|
|
124
|
-
setMultipleTooltipContextValue,
|
|
125
|
-
]);
|
|
131
|
+
}, [compact, multipleTooltip]);
|
|
126
132
|
return (React__default.createElement(React__default.Fragment, null,
|
|
127
133
|
React__default.createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
|
|
128
|
-
React__default.createElement(
|
|
134
|
+
React__default.createElement(CompositeBarList, { compositeId: compositeId, type: type, compact: compact, items: items, listRef: ref, multipleTooltip: multipleTooltip, onItemClickByIndex: onItemClickByIndex, onMouseEnterByIndex: onMouseEnterByIndex, onMouseLeave: onMouseLeave, collapseItems: collapseItems })),
|
|
129
135
|
type === 'menu' && multipleTooltip && (React__default.createElement(MultipleTooltip, { open: compact && multipleTooltipActive, anchorRef: tooltipRef, placement: ['right-start'], items: items }))));
|
|
130
136
|
};
|
|
131
137
|
const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, onMoreClick, multipleTooltip = false, compact, compositeId, }) => {
|