@laerdal/life-react-components 1.10.3-dev.33.full → 1.10.3-dev.36.full
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/dist/GlobalNavigationBar/GlobalNavigationBar.cjs +6 -6
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map +1 -1
- package/dist/GlobalNavigationBar/GlobalNavigationBar.js +6 -6
- package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
- package/dist/GlobalNavigationBar/Logo.cjs +5 -5
- package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
- package/dist/GlobalNavigationBar/Logo.js +5 -5
- package/dist/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +2 -2
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js +2 -2
- package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.js +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map +1 -1
- package/package.json +1 -1
|
@@ -59,17 +59,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
59
59
|
|
|
60
60
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
61
61
|
|
|
62
|
-
var HeaderWrapper = _styledComponents.default.header(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: white;\n border-bottom: 1px solid ", ";\n\n z-index: ", ";\n position: relative;\n\n height: 48px;\n\n ", " {\n height: 56px;\n }\n\n ", " {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n"])), _styles.COLORS.neutral_200, _styles.Z_INDEXES.sticky_menu, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.
|
|
62
|
+
var HeaderWrapper = _styledComponents.default.header(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n z-index: ", ";\n position: relative;\n\n height: 48px;\n\n ", " {\n height: 56px;\n }\n\n ", " {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n"])), _styles.COLORS.neutral_200, _styles.Z_INDEXES.sticky_menu, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.LARGE);
|
|
63
63
|
|
|
64
|
-
var RowLayout = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
|
|
64
|
+
var RowLayout = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n"])));
|
|
65
65
|
|
|
66
|
-
var HamburgerButton = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", " button {\n height: 56px;\n }\n\n ", " {\n display: none;\n }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.
|
|
66
|
+
var HamburgerButton = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", " button {\n height: 56px;\n }\n\n ", " {\n display: none;\n }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.LARGE);
|
|
67
67
|
|
|
68
|
-
var RightSide = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0 0 0 auto;\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), HamburgerButton);
|
|
68
|
+
var RightSide = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n\n ", " {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), _styles.BREAKPOINTS.SMALL, HamburgerButton);
|
|
69
69
|
|
|
70
|
-
var MobileMenuBackdrop = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ", ";\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ", " 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ", " 0.3s ease-in-out;\n }\n\n ", " {\n visibility: hidden !important;\n }\n"])), _styles.Z_INDEXES.backdrop, _CommonStyles.fadeIn, _CommonStyles.fadeOut, _styles.BREAKPOINTS.
|
|
70
|
+
var MobileMenuBackdrop = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ", ";\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ", " 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ", " 0.3s ease-in-out;\n }\n\n ", " {\n visibility: hidden !important;\n }\n"])), _styles.Z_INDEXES.backdrop, _CommonStyles.fadeIn, _CommonStyles.fadeOut, _styles.BREAKPOINTS.LARGE);
|
|
71
71
|
|
|
72
|
-
var UserMenuWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n display: flex;\n position: absolute;\n\n ", " {\n top: 56px;\n right: ", ";\n }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.
|
|
72
|
+
var UserMenuWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n display: flex;\n position: absolute;\n\n ", " {\n top: 56px;\n right: ", ";\n }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.LARGE, function (props) {
|
|
73
73
|
return props.offsetRight ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
|
|
74
74
|
});
|
|
75
75
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","MEDIUM","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n background: white;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n margin: 0 0 0 auto;\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n visibility: hidden !important;\n }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.MEDIUM} {\n top: 56px;\n right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}/>\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={profile}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.SMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}/>\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={profile}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.cjs"}
|
|
@@ -28,12 +28,12 @@ import { useClickOutsideRef } from '../common';
|
|
|
28
28
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
29
29
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
30
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
31
|
-
var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: white;\n border-bottom: 1px solid ", ";\n\n z-index: ", ";\n position: relative;\n\n height: 48px;\n\n ", " {\n height: 56px;\n }\n\n ", " {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.SMALL, BREAKPOINTS.
|
|
32
|
-
var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
33
|
-
var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", " button {\n height: 56px;\n }\n\n ", " {\n display: none;\n }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.
|
|
34
|
-
var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n margin: 0 0 0 auto;\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), HamburgerButton);
|
|
35
|
-
var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ", ";\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ", " 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ", " 0.3s ease-in-out;\n }\n\n ", " {\n visibility: hidden !important;\n }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.
|
|
36
|
-
var UserMenuWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n position: absolute;\n\n ", " {\n top: 56px;\n right: ", ";\n }\n"])), COLORS.white, BREAKPOINTS.
|
|
31
|
+
var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n z-index: ", ";\n position: relative;\n\n height: 48px;\n\n ", " {\n height: 56px;\n }\n\n ", " {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
|
|
32
|
+
var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
33
|
+
var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", " button {\n height: 56px;\n }\n\n ", " {\n display: none;\n }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
|
|
34
|
+
var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n ", " {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), BREAKPOINTS.SMALL, HamburgerButton);
|
|
35
|
+
var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ", ";\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ", " 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ", " 0.3s ease-in-out;\n }\n\n ", " {\n visibility: hidden !important;\n }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
|
|
36
|
+
var UserMenuWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n position: absolute;\n\n ", " {\n top: 56px;\n right: ", ";\n }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
|
|
37
37
|
return props.offsetRight ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
|
|
38
38
|
});
|
|
39
39
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","MEDIUM","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n background: white;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n margin: 0 0 0 auto;\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n visibility: hidden !important;\n }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.MEDIUM} {\n top: 56px;\n right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}/>\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={profile}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.SMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}/>\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={profile}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"file":"GlobalNavigationBar.js"}
|
|
@@ -33,17 +33,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
33
33
|
|
|
34
34
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
35
35
|
|
|
36
|
-
var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ", ";\n ", " {\n width: 88px;\n height: 48px;\n }\n }\n"])), function (props) {
|
|
36
|
+
var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n min-width: 66px;\n min-height: 36px;\n color: ", ";\n ", " {\n min-width: 88px;\n min-height: 48px;\n }\n }\n"])), function (props) {
|
|
37
37
|
return props.$color;
|
|
38
|
-
}, _styles.BREAKPOINTS.
|
|
38
|
+
}, _styles.BREAKPOINTS.LARGE);
|
|
39
39
|
|
|
40
|
-
var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ", " {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ", "\n }\n\n &.inverted:focus-within {\n ", "\n }\n"])), _styles.BREAKPOINTS.
|
|
40
|
+
var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ", " {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ", "\n }\n\n &.inverted:focus-within {\n ", "\n }\n"])), _styles.BREAKPOINTS.LARGE, _styles.focusStyles, _styles.invertedFocusStyles);
|
|
41
41
|
|
|
42
|
-
var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ", ";\n letter-spacing: -0.02em;\n\n ", "\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ", " {\n margin-left: 12px;\n padding-left: 12px;\n ", "\n }\n"])), function (props) {
|
|
42
|
+
var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ", ";\n letter-spacing: -0.02em;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n\n ", "\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ", " {\n margin-left: 12px;\n padding-left: 12px;\n ", "\n }\n"])), function (props) {
|
|
43
43
|
return props.$color || _styles.COLORS.black;
|
|
44
44
|
}, function (props) {
|
|
45
45
|
return props.noSizeChangeOnMobile ? (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
|
|
46
|
-
}, _styles.BREAKPOINTS.
|
|
46
|
+
}, _styles.BREAKPOINTS.LARGE, function (props) {
|
|
47
47
|
return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
|
|
48
48
|
});
|
|
49
49
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","$color","BREAKPOINTS","
|
|
1
|
+
{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","$color","BREAKPOINTS","LARGE","LogoContainer","styled","div","focusStyles","invertedFocusStyles","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,+WAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAXG,EAYVC,oBAAYC,KAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,4WAQfJ,oBAAYC,KARG,EAcbI,mBAda,EAkBbC,2BAlBa,CAAnB;;AAsBA,IAAMC,IAAI,GAAGJ,0BAAOK,IAAV,0ZAGiB,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAAlC;AAAA,CAHjB,EASN,UAACZ,KAAD;AAAA,SACAA,KAAK,CAACa,oBAAN,GACI,+BAAkBC,2BAAmBC,OAArC,EAA8Cf,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAArE,CADJ,GAEI,gCAAmBE,2BAAmBC,OAAtC,EAA+Cf,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAAtE,CAHJ;AAAA,CATM,EAiBNV,oBAAYC,KAjBN,EAoBJ,UAACH,KAAD;AAAA,SAAW,+BAAkBc,2BAAmBC,OAArC,EAA8Cf,KAAK,CAACC,MAAN,IAAgBU,eAAOC,KAArE,CAAX;AAAA,CApBI,CAAV;;AAwBA,IAAMI,OAAO,GAAGX,0BAAOK,IAAV,wOACS,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACiB,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAClB,KAAD;AAAA,SAAW,gCAAmBc,2BAAmBK,aAAtC,EAAqDnB,KAAK,CAACC,MAAN,IAAgBU,eAAOS,KAA5E,CAAX;AAAA,CARS,CAAb;;AAuBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAA+J;AAAA,MAA5JC,IAA4J,QAA5JA,IAA4J;AAAA,MAAtJC,WAAsJ,QAAtJA,WAAsJ;AAAA,MAAzIC,QAAyI,QAAzIA,OAAyI;AAAA,MAAhIC,EAAgI,QAAhIA,EAAgI;AAAA,MAA5HC,KAA4H,QAA5HA,KAA4H;AAAA,MAArHb,oBAAqH,QAArHA,oBAAqH;AAAA,MAA/Fc,sBAA+F,QAA/FA,sBAA+F;AAAA,MAAvEC,YAAuE,QAAvEA,YAAuE;AAAA,MAAzDC,QAAyD,QAAzDA,QAAyD;AAC1K,sBACE,qBAAC,aAAD;AAAe,IAAA,SAAS,EAAEA,QAAQ,GAAG,UAAH,GAAgB,EAAlD;AAAA,2BACE,sBAAC,UAAD;AACE,MAAA,EAAE,EAAEJ,EAAE,IAAI,GADZ;AAEE,MAAA,WAAW,EAAEK,iCAFf;AAGE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIN,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAPH;AAQE,MAAA,MAAM,EAAEE,KARV;AAAA,iBASGA,KAAK,KAAKf,eAAOS,KAAjB,gBAAyB,qBAAC,wBAAD,KAAzB,gBAAgD,qBAAC,mBAAD,KATnD,eAUE,qBAAC,IAAD;AAAM,QAAA,MAAM,EAAEM,KAAd;AAAqB,QAAA,oBAAoB,EAAEb,oBAAoB,IAAI,KAAnE;AAAA,kBACGS;AADH,QAVF,EAaGC,WAAW,iBACV,qBAAC,OAAD;AAAS,QAAA,eAAe,EAAEI,sBAA1B;AAAkD,QAAA,MAAM,EAAEC,YAA1D;AAAA;AAAA,QAdJ;AAAA;AADF,IADF;AAuBD,CAxBD;;;AAXEN,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAC,EAAAA,K;AACAb,EAAAA,oB;AACAc,EAAAA,sB;AACAC,EAAAA,Y;AACAC,EAAAA,Q;;eA6BaR,I","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n min-width: 66px;\n min-height: 36px;\n color: ${(props) => props.$color};\n ${BREAKPOINTS.LARGE} {\n min-width: 88px;\n min-height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.LARGE} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ${focusStyles}\n }\n\n &.inverted:focus-within {\n ${invertedFocusStyles}\n }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ${(props) => props.$color || COLORS.black};\n letter-spacing: -0.02em;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n\n ${(props) =>\n props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ${BREAKPOINTS.LARGE} {\n margin-left: 12px;\n padding-left: 12px;\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer className={inverted ? 'inverted' : ''}>\n <StyledLink\n to={to || '/'}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n $color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"file":"Logo.cjs"}
|
|
@@ -12,15 +12,15 @@ import { ComponentMStyling, ComponentXSStyling } from '../styles';
|
|
|
12
12
|
import { defaultOnMouseDownHandler } from '../common';
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
|
-
var StyledLink = styled(Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ", ";\n ", " {\n width: 88px;\n height: 48px;\n }\n }\n"])), function (props) {
|
|
15
|
+
var StyledLink = styled(Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n min-width: 66px;\n min-height: 36px;\n color: ", ";\n ", " {\n min-width: 88px;\n min-height: 48px;\n }\n }\n"])), function (props) {
|
|
16
16
|
return props.$color;
|
|
17
|
-
}, BREAKPOINTS.
|
|
18
|
-
var LogoContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ", " {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ", "\n }\n\n &.inverted:focus-within {\n ", "\n }\n"])), BREAKPOINTS.
|
|
19
|
-
var Name = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ", ";\n letter-spacing: -0.02em;\n\n ", "\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ", " {\n margin-left: 12px;\n padding-left: 12px;\n ", "\n }\n"])), function (props) {
|
|
17
|
+
}, BREAKPOINTS.LARGE);
|
|
18
|
+
var LogoContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ", " {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ", "\n }\n\n &.inverted:focus-within {\n ", "\n }\n"])), BREAKPOINTS.LARGE, focusStyles, invertedFocusStyles);
|
|
19
|
+
var Name = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ", ";\n letter-spacing: -0.02em;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n\n ", "\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ", " {\n margin-left: 12px;\n padding-left: 12px;\n ", "\n }\n"])), function (props) {
|
|
20
20
|
return props.$color || COLORS.black;
|
|
21
21
|
}, function (props) {
|
|
22
22
|
return props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);
|
|
23
|
-
}, BREAKPOINTS.
|
|
23
|
+
}, BREAKPOINTS.LARGE, function (props) {
|
|
24
24
|
return ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);
|
|
25
25
|
});
|
|
26
26
|
var BetaTag = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: ", ";\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ", "\n"])), function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","
|
|
1
|
+
{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","LARGE","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n min-width: 66px;\n min-height: 36px;\n color: ${(props) => props.$color};\n ${BREAKPOINTS.LARGE} {\n min-width: 88px;\n min-height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.LARGE} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ${focusStyles}\n }\n\n &.inverted:focus-within {\n ${invertedFocusStyles}\n }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ${(props) => props.$color || COLORS.black};\n letter-spacing: -0.02em;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n\n ${(props) =>\n props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ${BREAKPOINTS.LARGE} {\n margin-left: 12px;\n padding-left: 12px;\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer className={inverted ? 'inverted' : ''}>\n <StyledLink\n to={to || '/'}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n $color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
|
|
@@ -43,7 +43,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
43
43
|
|
|
44
44
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
45
45
|
|
|
46
|
-
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n\n display: none;\n\n ", " {\n display: flex;\n }\n"])), _styles.BREAKPOINTS.
|
|
46
|
+
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n\n display: none;\n\n ", " {\n display: flex;\n }\n"])), _styles.BREAKPOINTS.LARGE);
|
|
47
47
|
|
|
48
48
|
var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
49
49
|
var buttons = _ref.buttons,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"names":["Wrapper","styled","div","BREAKPOINTS","
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"names":["Wrapper","styled","div","BREAKPOINTS","LARGE","DesktopActions","React","forwardRef","ref","buttons","user","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n align-items: center;\n\n display: none;\n\n ${BREAKPOINTS.LARGE} {\n display: flex;\n }\n`;\n\n\ninterface DesktopActionsProps {\n buttons?: DesktopMenuButtonTypes[];\n user?: MenuAccountInfo;\n onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst DesktopActions = React.forwardRef(({\n buttons,\n user,\n onShowUserMenu\n }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n const length = buttons?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n React.useImperativeHandle(ref, () => ({\n buttons: elRefs.map((r, index) => ({\n ref: r,\n type: buttons?.[index]?.type,\n }))\n }), [elRefs, buttons]);\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n return <ProfileButton key={index}\n ref={elRefs[index]}\n hideOnLowWidth={true}\n onClick={e => {\n item.action ? item.action(e?.target) : onShowUserMenu()\n }}\n icon={!user && <SystemIcons.User/>}\n initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\n\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n ref={elRefs[index]}\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={true}\n action={e => item.action && item.action(e?.target)}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'switcher': {\n const {placement, type, action, ...rest} = item;\n return <IconButton key={index}\n ref={elRefs[index]}\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={true}\n id=\"globalNavAppsButton\"\n action={e => item.action && item.action(e?.target)}\n {...rest}>\n <SwitchApp size=\"24px\"/>\n </IconButton>\n }\n }\n }\n\n return (\n <Wrapper>\n {buttons?.map((item, index) => renderItem(item, index))}\n </Wrapper>\n )\n});\n\n\nexport default DesktopActions;\n"],"file":"DesktopActions.cjs"}
|
|
@@ -21,7 +21,7 @@ import { ProfileButton } from '../../ProfileButton';
|
|
|
21
21
|
import { SystemIcons } from '../../icons';
|
|
22
22
|
import { BREAKPOINTS } from '../../styles';
|
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
-
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n\n display: none;\n\n ", " {\n display: flex;\n }\n"])), BREAKPOINTS.
|
|
24
|
+
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n\n display: none;\n\n ", " {\n display: flex;\n }\n"])), BREAKPOINTS.LARGE);
|
|
25
25
|
var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
26
26
|
var buttons = _ref.buttons,
|
|
27
27
|
user = _ref.user,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"names":["React","styled","IconButton","SwitchApp","ProfileButton","SystemIcons","BREAKPOINTS","Wrapper","div","
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"names":["React","styled","IconButton","SwitchApp","ProfileButton","SystemIcons","BREAKPOINTS","Wrapper","div","LARGE","DesktopActions","forwardRef","ref","buttons","user","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n align-items: center;\n\n display: none;\n\n ${BREAKPOINTS.LARGE} {\n display: flex;\n }\n`;\n\n\ninterface DesktopActionsProps {\n buttons?: DesktopMenuButtonTypes[];\n user?: MenuAccountInfo;\n onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst DesktopActions = React.forwardRef(({\n buttons,\n user,\n onShowUserMenu\n }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n const length = buttons?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n React.useImperativeHandle(ref, () => ({\n buttons: elRefs.map((r, index) => ({\n ref: r,\n type: buttons?.[index]?.type,\n }))\n }), [elRefs, buttons]);\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n return <ProfileButton key={index}\n ref={elRefs[index]}\n hideOnLowWidth={true}\n onClick={e => {\n item.action ? item.action(e?.target) : onShowUserMenu()\n }}\n icon={!user && <SystemIcons.User/>}\n initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\n\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n ref={elRefs[index]}\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={true}\n action={e => item.action && item.action(e?.target)}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'switcher': {\n const {placement, type, action, ...rest} = item;\n return <IconButton key={index}\n ref={elRefs[index]}\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={true}\n id=\"globalNavAppsButton\"\n action={e => item.action && item.action(e?.target)}\n {...rest}>\n <SwitchApp size=\"24px\"/>\n </IconButton>\n }\n }\n }\n\n return (\n <Wrapper>\n {buttons?.map((item, index) => renderItem(item, index))}\n </Wrapper>\n )\n});\n\n\nexport default DesktopActions;\n"],"file":"DesktopActions.js"}
|
|
@@ -51,7 +51,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
51
51
|
|
|
52
52
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
53
53
|
|
|
54
|
-
var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: none;\n justify-content:
|
|
54
|
+
var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: none;\n flex-grow: 1;\n justify-content: flex-start;\n align-items: center;\n\n ", " {\n display: flex;\n }\n\n a {\n text-decoration: none;\n }\n"])), _styles.BREAKPOINTS.LARGE);
|
|
55
55
|
|
|
56
56
|
var NavButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border: 0;\n"])), _styles.COLORS.white);
|
|
57
57
|
|
|
@@ -79,7 +79,7 @@ var MainMenu = function MainMenu(_ref) {
|
|
|
79
79
|
numberOfItemsAllowed = _React$useState4[0],
|
|
80
80
|
setNumberOfItemsAllowed = _React$useState4[1];
|
|
81
81
|
|
|
82
|
-
var widthOfItem =
|
|
82
|
+
var widthOfItem = 120;
|
|
83
83
|
|
|
84
84
|
var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
|
|
85
85
|
if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","React","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","map","slice"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {NavLink} from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport {NavItem} from '../../NavItem';\nimport {MoreHorizontal} from '../../icons/systemicons/SystemIcons';\nimport {COLORS, BREAKPOINTS} from '../../styles';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n display: none;\n justify-content: center;\n align-items: center;\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n }\n\n a {\n text-decoration: none;\n }\n`;\n\nconst NavButton = styled.button`\n background: ${COLORS.white};\n border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n display: flex;\n margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n position: absolute;\n flex-direction: column;\n left: 290px;\n top: 22px;\n\n height: 0;\n width: 0;\n\n &:focus-within,\n &:hover,\n &.open {\n background: ${COLORS.white};\n }\n`;\n\nconst ExtendedSection = styled.div`\n position: relative;\n`;\n\ntype Props = {\n items: MenuNavigationItemTypeItem[];\n rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n const extendedMenuRef = React.useRef<any>(null);\n const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n const widthOfItem = 150;\n const recalculateNumberOfItemsAllowed = () => {\n if (rightSideRef?.current && mainMenuRef?.current) {\n const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n if (number !== numberOfItemsAllowed) {\n setNumberOfItemsAllowed(number);\n }\n }\n };\n\n const handleClickExtendedMenuAction = () => {\n setShowExtendedMenu(false);\n };\n\n const handleClickOutside = (e: any) => {\n if (!extendedMenuRef?.current?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\n setShowExtendedMenu(false);\n }\n };\n\n React.useEffect(() => {\n recalculateNumberOfItemsAllowed();\n // Bind the event listener\n document.addEventListener('click', handleClickOutside);\n window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener('click', handleClickOutside);\n window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n };\n }, []);\n\n React.useEffect(() => {\n recalculateNumberOfItemsAllowed();\n }, [items.length])\n\n const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n if (index > numberOfItemsAllowed - 2) return null\n\n const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n return item?.disabled\n ? <NavItem as={NavButton}\n exact={item.exact}\n className=\"disabled\"\n key={item.label}\n onMouseDown={defaultOnMouseDownHandler}>\n {item?.label}\n </NavItem>\n : <NavItem as={NavLink}\n exact={item.exact}\n to={item.to || ''}\n key={item.label}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n {...rest}>\n {item?.label}\n </NavItem>\n }\n\n return (\n <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n {items?.map(renderItem)}\n {items.length + 1 > numberOfItemsAllowed && (\n <ExtendedSection>\n <IconButton\n ref={menuButtonRef}\n variant={'secondary'}\n shape={'circular'}\n action={() => {\n setShowExtendedMenu(!showExtendedMenu)\n }}>\n <MoreHorizontal size=\"24px\"/>\n </IconButton>\n <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n </ExtendedMenuWrapper>\n </ExtendedSection>\n )}\n </NavContainer>\n );\n};\n\nexport default MainMenu;\n"],"file":"MainMenu.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","LARGE","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","React","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","defaultOnMouseDownHandler","NavLink","map","slice"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {NavLink} from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport {NavItem} from '../../NavItem';\nimport {MoreHorizontal} from '../../icons/systemicons/SystemIcons';\nimport {COLORS, BREAKPOINTS} from '../../styles';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n display: none;\n flex-grow: 1;\n justify-content: flex-start;\n align-items: center;\n\n ${BREAKPOINTS.LARGE} {\n display: flex;\n }\n\n a {\n text-decoration: none;\n }\n`;\n\nconst NavButton = styled.button`\n background: ${COLORS.white};\n border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n display: flex;\n margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n position: absolute;\n flex-direction: column;\n left: 290px;\n top: 22px;\n\n height: 0;\n width: 0;\n\n &:focus-within,\n &:hover,\n &.open {\n background: ${COLORS.white};\n }\n`;\n\nconst ExtendedSection = styled.div`\n position: relative;\n`;\n\ntype Props = {\n items: MenuNavigationItemTypeItem[];\n rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n const extendedMenuRef = React.useRef<any>(null);\n const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n const widthOfItem = 120;\n const recalculateNumberOfItemsAllowed = () => {\n if (rightSideRef?.current && mainMenuRef?.current) {\n const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n if (number !== numberOfItemsAllowed) {\n setNumberOfItemsAllowed(number);\n }\n }\n };\n\n const handleClickExtendedMenuAction = () => {\n setShowExtendedMenu(false);\n };\n\n const handleClickOutside = (e: any) => {\n if (!extendedMenuRef?.current?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\n setShowExtendedMenu(false);\n }\n };\n\n React.useEffect(() => {\n recalculateNumberOfItemsAllowed();\n // Bind the event listener\n document.addEventListener('click', handleClickOutside);\n window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener('click', handleClickOutside);\n window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n };\n }, []);\n\n React.useEffect(() => {\n recalculateNumberOfItemsAllowed();\n }, [items.length])\n\n const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n if (index > numberOfItemsAllowed - 2) return null\n\n const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n return item?.disabled\n ? <NavItem as={NavButton}\n exact={item.exact}\n className=\"disabled\"\n key={item.label}\n onMouseDown={defaultOnMouseDownHandler}>\n {item?.label}\n </NavItem>\n : <NavItem as={NavLink}\n exact={item.exact}\n to={item.to || ''}\n key={item.label}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n {...rest}>\n {item?.label}\n </NavItem>\n }\n\n return (\n <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n {items?.map(renderItem)}\n {items.length + 1 > numberOfItemsAllowed && (\n <ExtendedSection>\n <IconButton\n ref={menuButtonRef}\n variant={'secondary'}\n shape={'circular'}\n action={() => {\n setShowExtendedMenu(!showExtendedMenu)\n }}>\n <MoreHorizontal size=\"24px\"/>\n </IconButton>\n <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n </ExtendedMenuWrapper>\n </ExtendedSection>\n )}\n </NavContainer>\n );\n};\n\nexport default MainMenu;\n"],"file":"MainMenu.cjs"}
|
|
@@ -22,7 +22,7 @@ import { IconButton } from '../../Button';
|
|
|
22
22
|
import { defaultOnMouseDownHandler } from '../../common';
|
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
24
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
25
|
-
var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: none;\n justify-content:
|
|
25
|
+
var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: none;\n flex-grow: 1;\n justify-content: flex-start;\n align-items: center;\n\n ", " {\n display: flex;\n }\n\n a {\n text-decoration: none;\n }\n"])), BREAKPOINTS.LARGE);
|
|
26
26
|
var NavButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: ", ";\n border: 0;\n"])), COLORS.white);
|
|
27
27
|
var ExtendedMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n margin-left: ", ";\n\n position: absolute;\n flex-direction: column;\n left: 290px;\n top: 22px;\n\n height: 0;\n width: 0;\n\n &:focus-within,\n &:hover,\n &.open {\n background: ", ";\n }\n"])), function (props) {
|
|
28
28
|
return props.floatRight ? 'auto' : 'unset';
|
|
@@ -47,7 +47,7 @@ var MainMenu = function MainMenu(_ref) {
|
|
|
47
47
|
numberOfItemsAllowed = _React$useState4[0],
|
|
48
48
|
setNumberOfItemsAllowed = _React$useState4[1];
|
|
49
49
|
|
|
50
|
-
var widthOfItem =
|
|
50
|
+
var widthOfItem = 120;
|
|
51
51
|
|
|
52
52
|
var recalculateNumberOfItemsAllowed = function recalculateNumberOfItemsAllowed() {
|
|
53
53
|
if (rightSideRef !== null && rightSideRef !== void 0 && rightSideRef.current && mainMenuRef !== null && mainMenuRef !== void 0 && mainMenuRef.current) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","defaultOnMouseDownHandler","NavContainer","div","MEDIUM","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","map","slice"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,OAAR,QAAsB,eAAtB;AACA,SAAQC,cAAR,QAA6B,qCAA7B;AACA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,cAAlC;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,SAAQC,UAAR,QAAyB,cAAzB;AACA,SAAQC,yBAAR,QAAwC,cAAxC;;;AAGA,IAAMC,YAAY,GAAGR,MAAM,CAACS,GAAV,6NAKdL,WAAW,CAACM,MALE,CAAlB;AAcA,IAAMC,SAAS,GAAGX,MAAM,CAACY,MAAV,6GACCT,MAAM,CAACU,KADR,CAAf;AASA,IAAMC,mBAAmB,GAAGd,MAAM,CAACS,GAAV,0SAER,UAAAM,KAAK;AAAA,SAAKA,KAAK,CAACC,UAAN,GAAmB,MAAnB,GAA4B,OAAjC;AAAA,CAFG,EAePb,MAAM,CAACU,KAfA,CAAzB;AAmBA,IAAMI,eAAe,GAAGjB,MAAM,CAACS,GAAV,gGAArB;;AASA,IAAMS,QAAQ,GAAG,SAAXA,QAAW,OAA6D;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,YAAoD,QAApDA,YAAoD;;AAC5E,wBAAgDtB,KAAK,CAACuB,QAAN,CAAe,KAAf,CAAhD;AAAA;AAAA,MAAOC,gBAAP;AAAA,MAAyBC,mBAAzB;;AACA,MAAMC,eAAe,GAAG1B,KAAK,CAAC2B,MAAN,CAAkB,IAAlB,CAAxB;AACA,MAAMC,aAAa,GAAG5B,KAAK,CAAC2B,MAAN,CAAgC,IAAhC,CAAtB;AACA,MAAME,WAA+D,GAAG7B,KAAK,CAAC2B,MAAN,CAAa,IAAb,CAAxE;;AACA,yBAAwD3B,KAAK,CAACuB,QAAN,CAAuB,CAAvB,CAAxD;AAAA;AAAA,MAAOO,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,WAAW,GAAG,GAApB;;AACA,MAAMC,+BAA+B,GAAG,SAAlCA,+BAAkC,GAAM;AAC5C,QAAIX,YAAY,SAAZ,IAAAA,YAAY,WAAZ,IAAAA,YAAY,CAAEY,OAAd,IAAyBL,WAAzB,aAAyBA,WAAzB,eAAyBA,WAAW,CAAEK,OAA1C,EAAmD;AAAA;;AACjD,UAAMC,MAAM,GAAGC,IAAI,CAACC,KAAL,CAAW,CAAC,CAAAf,YAAY,SAAZ,IAAAA,YAAY,WAAZ,qCAAAA,YAAY,CAAEY,OAAd,gFAAuBI,UAAvB,KAAoCT,WAApC,aAAoCA,WAApC,+CAAoCA,WAAW,CAAEK,OAAjD,yDAAoC,qBAAsBI,UAA1D,CAAD,IAAyEN,WAApF,CAAf;;AACA,UAAIG,MAAM,KAAKL,oBAAf,EAAqC;AACnCC,QAAAA,uBAAuB,CAACI,MAAD,CAAvB;AACD;AACF;AACF,GAPD;;AASA,MAAMI,6BAA6B,GAAG,SAAhCA,6BAAgC,GAAM;AAC1Cd,IAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACD,GAFD;;AAIA,MAAMe,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,CAAD,EAAY;AAAA;;AACrC,QAAI,EAACf,eAAD,aAACA,eAAD,wCAACA,eAAe,CAAEQ,OAAlB,kDAAC,sBAA0BQ,QAA1B,CAAmCD,CAAC,CAACE,MAArC,CAAD,KAAiD,EAACf,aAAD,aAACA,aAAD,wCAACA,aAAa,CAAEM,OAAhB,kDAAC,sBAAwBQ,QAAxB,CAAiCD,CAAC,CAACE,MAAnC,CAAD,CAArD,EAAkG;AAChGlB,MAAAA,mBAAmB,CAAC,KAAD,CAAnB;AACD;AACF,GAJD;;AAMAzB,EAAAA,KAAK,CAAC4C,SAAN,CAAgB,YAAM;AACpBX,IAAAA,+BAA+B,GADX,CAEpB;;AACAY,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCN,kBAAnC;AACAO,IAAAA,MAAM,CAACD,gBAAP,CAAwB,QAAxB,EAAkCb,+BAAlC;AACA,WAAO,YAAM;AACX;AACAY,MAAAA,QAAQ,CAACG,mBAAT,CAA6B,OAA7B,EAAsCR,kBAAtC;AACAO,MAAAA,MAAM,CAACC,mBAAP,CAA2B,QAA3B,EAAqCf,+BAArC;AACD,KAJD;AAKD,GAVD,EAUG,EAVH;AAYAjC,EAAAA,KAAK,CAAC4C,SAAN,CAAgB,YAAM;AACpBX,IAAAA,+BAA+B;AAChC,GAFD,EAEG,CAACZ,KAAK,CAAC4B,MAAP,CAFH;;AAIA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,IAAD,EAAmCC,KAAnC,EAAqD;AAEtE,QAAIA,KAAK,GAAGtB,oBAAoB,GAAG,CAAnC,EAAsC,OAAO,IAAP;;AAEtC,QAAOuB,IAAP,GAAoFF,IAApF,CAAOE,IAAP;AAAA,QAAaC,EAAb,GAAoFH,IAApF,CAAaG,EAAb;AAAA,QAAiBC,KAAjB,GAAoFJ,IAApF,CAAiBI,KAAjB;AAAA,QAAwBC,QAAxB,GAAoFL,IAApF,CAAwBK,QAAxB;AAAA,QAAkCC,QAAlC,GAAoFN,IAApF,CAAkCM,QAAlC;AAAA,QAA4CC,MAA5C,GAAoFP,IAApF,CAA4CO,MAA5C;AAAA,QAAoDC,KAApD,GAAoFR,IAApF,CAAoDQ,KAApD;AAAA,QAA2DC,IAA3D,GAAoFT,IAApF,CAA2DS,IAA3D;AAAA,QAAiEC,MAAjE,GAAoFV,IAApF,CAAiEU,MAAjE;AAAA,QAA4EC,IAA5E,4BAAoFX,IAApF;;AAEA,WAAOA,IAAI,SAAJ,IAAAA,IAAI,WAAJ,IAAAA,IAAI,CAAEK,QAAN,gBACH,KAAC,OAAD;AAAS,MAAA,EAAE,EAAE3C,SAAb;AACS,MAAA,KAAK,EAAEsC,IAAI,CAACI,KADrB;AAES,MAAA,SAAS,EAAC,UAFnB;AAIS,MAAA,WAAW,EAAE9C,yBAJtB;AAAA,gBAKC0C,IALD,aAKCA,IALD,uBAKCA,IAAI,CAAEQ;AALP,OAGcR,IAAI,CAACQ,KAHnB,CADG,gBAQH,KAAC,OAAD;AAAS,MAAA,EAAE,EAAE1D,OAAb;AACS,MAAA,KAAK,EAAEkD,IAAI,CAACI,KADrB;AAES,MAAA,EAAE,EAAEJ,IAAI,CAACG,EAAL,IAAW,EAFxB;AAIS,MAAA,WAAW,EAAE7C,yBAJtB;AAKS,MAAA,OAAO,EAAE,iBAACgC,CAAD;AAAA,eAAyBU,IAAI,CAACO,MAAL,IAAeP,IAAI,CAACO,MAAL,CAAYjB,CAAZ,CAAxC;AAAA;AALlB,OAMaqB,IANb;AAAA,gBAOCX,IAPD,aAOCA,IAPD,uBAOCA,IAAI,CAAEQ;AAPP,QAGcR,IAAI,CAACQ,KAHnB,CARJ;AAiBD,GAvBD;;AAyBA,sBACE,MAAC,YAAD;AAAc,IAAA,SAAS,EAAC,0BAAxB;AAAmD,IAAA,GAAG,EAAE9B,WAAxD;AAAqE,IAAA,IAAI,EAAEL,gBAA3E;AAAA,eACGH,KADH,aACGA,KADH,uBACGA,KAAK,CAAE0C,GAAP,CAAWb,UAAX,CADH,EAEG7B,KAAK,CAAC4B,MAAN,GAAe,CAAf,GAAmBnB,oBAAnB,iBACC,MAAC,eAAD;AAAA,8BACE,KAAC,UAAD;AACE,QAAA,GAAG,EAAEF,aADP;AAEE,QAAA,OAAO,EAAE,WAFX;AAGE,QAAA,KAAK,EAAE,UAHT;AAIE,QAAA,MAAM,EAAE,kBAAM;AACZH,UAAAA,mBAAmB,CAAC,CAACD,gBAAF,CAAnB;AACD,SANH;AAAA,+BAOE,KAAC,cAAD;AAAgB,UAAA,IAAI,EAAC;AAArB;AAPF,QADF,eAUE,KAAC,mBAAD;AAAqB,QAAA,GAAG,EAAEE,eAA1B;AAA2C,QAAA,SAAS,EAAEF,gBAAgB,GAAG,MAAH,GAAY,EAAlF;AAAsF,QAAA,UAAU,EAAE,KAAlG;AAAA,+BACE,KAAC,gBAAD;AAAkB,UAAA,eAAe,EAAEe,6BAAnC;AACkB,UAAA,iBAAiB,EAAElB,KAAK,CAAC2C,KAAN,CAAYlC,oBAAoB,GAAG,CAAnC;AADrC;AADF,QAVF;AAAA,MAHJ;AAAA,IADF;AAsBD,CA1FD;;;AAJET,EAAAA,K;;AAgGF,eAAeD,QAAf","sourcesContent":["import * as React from 'react';\nimport {NavLink} from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport {NavItem} from '../../NavItem';\nimport {MoreHorizontal} from '../../icons/systemicons/SystemIcons';\nimport {COLORS, BREAKPOINTS} from '../../styles';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n display: none;\n justify-content: center;\n align-items: center;\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n }\n\n a {\n text-decoration: none;\n }\n`;\n\nconst NavButton = styled.button`\n background: ${COLORS.white};\n border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n display: flex;\n margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n position: absolute;\n flex-direction: column;\n left: 290px;\n top: 22px;\n\n height: 0;\n width: 0;\n\n &:focus-within,\n &:hover,\n &.open {\n background: ${COLORS.white};\n }\n`;\n\nconst ExtendedSection = styled.div`\n position: relative;\n`;\n\ntype Props = {\n items: MenuNavigationItemTypeItem[];\n rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n const extendedMenuRef = React.useRef<any>(null);\n const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n const widthOfItem = 150;\n const recalculateNumberOfItemsAllowed = () => {\n if (rightSideRef?.current && mainMenuRef?.current) {\n const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n if (number !== numberOfItemsAllowed) {\n setNumberOfItemsAllowed(number);\n }\n }\n };\n\n const handleClickExtendedMenuAction = () => {\n setShowExtendedMenu(false);\n };\n\n const handleClickOutside = (e: any) => {\n if (!extendedMenuRef?.current?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\n setShowExtendedMenu(false);\n }\n };\n\n React.useEffect(() => {\n recalculateNumberOfItemsAllowed();\n // Bind the event listener\n document.addEventListener('click', handleClickOutside);\n window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener('click', handleClickOutside);\n window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n };\n }, []);\n\n React.useEffect(() => {\n recalculateNumberOfItemsAllowed();\n }, [items.length])\n\n const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n if (index > numberOfItemsAllowed - 2) return null\n\n const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n return item?.disabled\n ? <NavItem as={NavButton}\n exact={item.exact}\n className=\"disabled\"\n key={item.label}\n onMouseDown={defaultOnMouseDownHandler}>\n {item?.label}\n </NavItem>\n : <NavItem as={NavLink}\n exact={item.exact}\n to={item.to || ''}\n key={item.label}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n {...rest}>\n {item?.label}\n </NavItem>\n }\n\n return (\n <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n {items?.map(renderItem)}\n {items.length + 1 > numberOfItemsAllowed && (\n <ExtendedSection>\n <IconButton\n ref={menuButtonRef}\n variant={'secondary'}\n shape={'circular'}\n action={() => {\n setShowExtendedMenu(!showExtendedMenu)\n }}>\n <MoreHorizontal size=\"24px\"/>\n </IconButton>\n <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n </ExtendedMenuWrapper>\n </ExtendedSection>\n )}\n </NavContainer>\n );\n};\n\nexport default MainMenu;\n"],"file":"MainMenu.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/MainMenu.tsx"],"names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","defaultOnMouseDownHandler","NavContainer","div","LARGE","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","items","rightSideRef","useState","showExtendedMenu","setShowExtendedMenu","extendedMenuRef","useRef","menuButtonRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","length","renderItem","item","index","icon","to","exact","disabled","external","action","label","note","pinned","rest","map","slice"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {NavLink} from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport {NavItem} from '../../NavItem';\nimport {MoreHorizontal} from '../../icons/systemicons/SystemIcons';\nimport {COLORS, BREAKPOINTS} from '../../styles';\nimport ExtendedMainMenu from './ExtendedMainMenu';\nimport {IconButton} from '../../Button';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div<{ open: boolean }>`\n display: none;\n flex-grow: 1;\n justify-content: flex-start;\n align-items: center;\n\n ${BREAKPOINTS.LARGE} {\n display: flex;\n }\n\n a {\n text-decoration: none;\n }\n`;\n\nconst NavButton = styled.button`\n background: ${COLORS.white};\n border: 0;\n`;\n\ninterface ExtendedMenuWrapperProps {\n floatRight: boolean;\n}\n\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\n display: flex;\n margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\n\n position: absolute;\n flex-direction: column;\n left: 290px;\n top: 22px;\n\n height: 0;\n width: 0;\n\n &:focus-within,\n &:hover,\n &.open {\n background: ${COLORS.white};\n }\n`;\n\nconst ExtendedSection = styled.div`\n position: relative;\n`;\n\ntype Props = {\n items: MenuNavigationItemTypeItem[];\n rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\n};\n\nconst MainMenu = ({items, rightSideRef}: Props): React.ReactElement<Props> => {\n const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\n const extendedMenuRef = React.useRef<any>(null);\n const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\n const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\n\n const widthOfItem = 120;\n const recalculateNumberOfItemsAllowed = () => {\n if (rightSideRef?.current && mainMenuRef?.current) {\n const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\n if (number !== numberOfItemsAllowed) {\n setNumberOfItemsAllowed(number);\n }\n }\n };\n\n const handleClickExtendedMenuAction = () => {\n setShowExtendedMenu(false);\n };\n\n const handleClickOutside = (e: any) => {\n if (!extendedMenuRef?.current?.contains(e.target) && !menuButtonRef?.current?.contains(e.target)) {\n setShowExtendedMenu(false);\n }\n };\n\n React.useEffect(() => {\n recalculateNumberOfItemsAllowed();\n // Bind the event listener\n document.addEventListener('click', handleClickOutside);\n window.addEventListener('resize', recalculateNumberOfItemsAllowed);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener('click', handleClickOutside);\n window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\n };\n }, []);\n\n React.useEffect(() => {\n recalculateNumberOfItemsAllowed();\n }, [items.length])\n\n const renderItem = (item: MenuNavigationItemTypeItem, index: number) => {\n\n if (index > numberOfItemsAllowed - 2) return null\n\n const {icon, to, exact, disabled, external, action, label, note, pinned, ...rest} = item;\n\n return item?.disabled\n ? <NavItem as={NavButton}\n exact={item.exact}\n className=\"disabled\"\n key={item.label}\n onMouseDown={defaultOnMouseDownHandler}>\n {item?.label}\n </NavItem>\n : <NavItem as={NavLink}\n exact={item.exact}\n to={item.to || ''}\n key={item.label}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e: React.MouseEvent) => item.action && item.action(e)}\n {...rest}>\n {item?.label}\n </NavItem>\n }\n\n return (\n <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\n {items?.map(renderItem)}\n {items.length + 1 > numberOfItemsAllowed && (\n <ExtendedSection>\n <IconButton\n ref={menuButtonRef}\n variant={'secondary'}\n shape={'circular'}\n action={() => {\n setShowExtendedMenu(!showExtendedMenu)\n }}>\n <MoreHorizontal size=\"24px\"/>\n </IconButton>\n <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\n <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction}\n navigationOptions={items.slice(numberOfItemsAllowed - 1)}/>\n </ExtendedMenuWrapper>\n </ExtendedSection>\n )}\n </NavContainer>\n );\n};\n\nexport default MainMenu;\n"],"file":"MainMenu.js"}
|
|
@@ -35,7 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
35
35
|
|
|
36
36
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
37
37
|
|
|
38
|
-
var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n a {\n text-decoration: none;\n }\n\n ", " {\n height: 56px;\n }\n\n ", " {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.
|
|
38
|
+
var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n a {\n text-decoration: none;\n }\n\n ", " {\n height: 56px;\n }\n\n ", " {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.LARGE);
|
|
39
39
|
|
|
40
40
|
var SecondaryButton = (0, _styledComponents.default)(_Button.Button)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 40px;\n margin: 0 8px;\n\n ", "\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset'));
|
|
41
41
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","LARGE","SecondaryButton","Button","ComponentTextStyle","Bold","RightSideNav","items","action","getNavItem","item","disabled","label","NavLink","exact","to","defaultOnMouseDownHandler","e","reverse","map","no"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;;;;;;;;;AAGA,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,yWAUdC,oBAAYC,KAVE,EAcdD,oBAAYE,KAdE,CAAlB;;AA0BA,IAAMC,eAAe,GAAG,+BAAOC,cAAP,CAAH,qIAIjB,+BAAkBC,2BAAmBC,IAArC,EAA2C,OAA3C,CAJiB,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAAuD;AAAA,MAArDC,KAAqD,QAArDA,KAAqD;AAAA,MAA9CC,MAA8C,QAA9CA,MAA8C;;AAC1E,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,IAAD,EAAsC;AACvD,QAAIA,IAAJ,aAAIA,IAAJ,eAAIA,IAAI,CAAEC,QAAV,EAAoB;AAClB,0BACE,qBAAC,gBAAD;AAAS,QAAA,EAAE,EAAER,cAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAAA,kBACGO,IADH,aACGA,IADH,uBACGA,IAAI,CAAEE;AADT,SAA+CF,IAA/C,aAA+CA,IAA/C,uBAA+CA,IAAI,CAAEE,KAArD,CADF;AAKD,KAND,MAMO;AACL,0BACE,qBAAC,gBAAD;AACE,QAAA,EAAE,EAAEC,uBADN;AAEE,QAAA,KAAK,EAAEH,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEI,KAFf;AAGE,QAAA,EAAE,EAAE,CAAAJ,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEK,EAAN,KAAY,EAHlB;AAKE,QAAA,WAAW,EAAEC,iCALf;AAME,QAAA,OAAO,EAAE,iBAACC,CAAD;AAAA,iBAAwBP,IAAI,CAACF,MAAL,IAAeE,IAAI,CAACF,MAAL,CAAYS,CAAZ,CAAvC;AAAA,SANX;AAAA,kBAOGP,IAPH,aAOGA,IAPH,uBAOGA,IAAI,CAAEE;AAPT,SAIOF,IAJP,aAIOA,IAJP,uBAIOA,IAAI,CAAEE,KAJb,CADF;AAWD;AACF,GApBD;;AAqBA,sBACE,sBAAC,YAAD;AAAA,eACGL,KADH,aACGA,KADH,uBACGA,KAAK,CAAEW,OAAP,GAAiBC,GAAjB,CAAqB,UAAAC,EAAE;AAAA,aAAIX,UAAU,CAACW,EAAD,CAAd;AAAA,KAAvB,CADH,EAIIZ,MAAM,iBACN,qBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,WAAzB;AAAqC,MAAA,OAAO,EAAEA,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEA,MAAtD;AAAA,gBACGA,MAAM,CAACI;AADV,MALJ;AAAA,IADF;AAYD,CAlCD;;;AAJEL,EAAAA,K;;eAwCaD,Y","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../../NavItem';\nimport {BREAKPOINTS, ComponentTextStyle} from '../../styles';\nimport {Button} from '../../Button';\nimport {ComponentMStyling} from '../../styles';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuButton, MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div`\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n a {\n text-decoration: none;\n }\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n`;\n\nconst SecondaryButton = styled(Button)`\n height: 40px;\n margin: 0 8px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n items?: MenuNavigationItemTypeItem[];\n action?: MenuButton;\n};\n\nconst RightSideNav = ({items, action}: Props): React.ReactElement<Props> => {\n const getNavItem = (item: MenuNavigationItemTypeItem) => {\n if (item?.disabled) {\n return (\n <NavItem as={Button} className=\"disabled\" key={item?.label}>\n {item?.label}\n </NavItem>\n );\n } else {\n return (\n <NavItem\n as={NavLink}\n exact={item?.exact}\n to={item?.to || ''}\n key={item?.label}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e:React.MouseEvent) => item.action && item.action(e)}>\n {item?.label}\n </NavItem>\n );\n }\n };\n return (\n <NavContainer>\n {items?.reverse().map(no => getNavItem(no))}\n\n {\n action &&\n <SecondaryButton variant=\"secondary\" onClick={action?.action}>\n {action.label}\n </SecondaryButton>\n }\n </NavContainer>\n );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.cjs"}
|
|
@@ -13,7 +13,7 @@ import { ComponentMStyling } from '../../styles';
|
|
|
13
13
|
import { defaultOnMouseDownHandler } from '../../common';
|
|
14
14
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
15
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
-
var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n a {\n text-decoration: none;\n }\n\n ", " {\n height: 56px;\n }\n\n ", " {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.
|
|
16
|
+
var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n a {\n text-decoration: none;\n }\n\n ", " {\n height: 56px;\n }\n\n ", " {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
|
|
17
17
|
var SecondaryButton = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 40px;\n margin: 0 8px;\n\n ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, 'unset'));
|
|
18
18
|
|
|
19
19
|
var RightSideNav = function RightSideNav(_ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/RightSideNav.tsx"],"names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","defaultOnMouseDownHandler","NavContainer","div","SMALL","
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/RightSideNav.tsx"],"names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","defaultOnMouseDownHandler","NavContainer","div","SMALL","LARGE","SecondaryButton","Bold","RightSideNav","items","action","getNavItem","item","disabled","label","exact","to","e","reverse","map","no"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AAEA,SAAQC,OAAR,QAAsB,eAAtB;AACA,SAAQC,WAAR,EAAqBC,kBAArB,QAA8C,cAA9C;AACA,SAAQC,MAAR,QAAqB,cAArB;AACA,SAAQC,iBAAR,QAAgC,cAAhC;AACA,SAAQC,yBAAR,QAAwC,cAAxC;;;AAGA,IAAMC,YAAY,GAAGR,MAAM,CAACS,GAAV,2VAUdN,WAAW,CAACO,KAVE,EAcdP,WAAW,CAACQ,KAdE,CAAlB;AA0BA,IAAMC,eAAe,GAAGZ,MAAM,CAACK,MAAD,CAAT,uHAIjBC,iBAAiB,CAACF,kBAAkB,CAACS,IAApB,EAA0B,OAA1B,CAJA,CAArB;;AAYA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAAuD;AAAA,MAArDC,KAAqD,QAArDA,KAAqD;AAAA,MAA9CC,MAA8C,QAA9CA,MAA8C;;AAC1E,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,IAAD,EAAsC;AACvD,QAAIA,IAAJ,aAAIA,IAAJ,eAAIA,IAAI,CAAEC,QAAV,EAAoB;AAClB,0BACE,KAAC,OAAD;AAAS,QAAA,EAAE,EAAEd,MAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAAA,kBACGa,IADH,aACGA,IADH,uBACGA,IAAI,CAAEE;AADT,SAA+CF,IAA/C,aAA+CA,IAA/C,uBAA+CA,IAAI,CAAEE,KAArD,CADF;AAKD,KAND,MAMO;AACL,0BACE,KAAC,OAAD;AACE,QAAA,EAAE,EAAEnB,OADN;AAEE,QAAA,KAAK,EAAEiB,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEG,KAFf;AAGE,QAAA,EAAE,EAAE,CAAAH,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEI,EAAN,KAAY,EAHlB;AAKE,QAAA,WAAW,EAAEf,yBALf;AAME,QAAA,OAAO,EAAE,iBAACgB,CAAD;AAAA,iBAAwBL,IAAI,CAACF,MAAL,IAAeE,IAAI,CAACF,MAAL,CAAYO,CAAZ,CAAvC;AAAA,SANX;AAAA,kBAOGL,IAPH,aAOGA,IAPH,uBAOGA,IAAI,CAAEE;AAPT,SAIOF,IAJP,aAIOA,IAJP,uBAIOA,IAAI,CAAEE,KAJb,CADF;AAWD;AACF,GApBD;;AAqBA,sBACE,MAAC,YAAD;AAAA,eACGL,KADH,aACGA,KADH,uBACGA,KAAK,CAAES,OAAP,GAAiBC,GAAjB,CAAqB,UAAAC,EAAE;AAAA,aAAIT,UAAU,CAACS,EAAD,CAAd;AAAA,KAAvB,CADH,EAIIV,MAAM,iBACN,KAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,WAAzB;AAAqC,MAAA,OAAO,EAAEA,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEA,MAAtD;AAAA,gBACGA,MAAM,CAACI;AADV,MALJ;AAAA,IADF;AAYD,CAlCD;;;AAJEL,EAAAA,K;;AAwCF,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../../NavItem';\nimport {BREAKPOINTS, ComponentTextStyle} from '../../styles';\nimport {Button} from '../../Button';\nimport {ComponentMStyling} from '../../styles';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuButton, MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div`\n display: flex;\n margin: auto 0 auto auto;\n align-items: center;\n height: 48px;\n\n a {\n text-decoration: none;\n }\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n`;\n\nconst SecondaryButton = styled(Button)`\n height: 40px;\n margin: 0 8px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n items?: MenuNavigationItemTypeItem[];\n action?: MenuButton;\n};\n\nconst RightSideNav = ({items, action}: Props): React.ReactElement<Props> => {\n const getNavItem = (item: MenuNavigationItemTypeItem) => {\n if (item?.disabled) {\n return (\n <NavItem as={Button} className=\"disabled\" key={item?.label}>\n {item?.label}\n </NavItem>\n );\n } else {\n return (\n <NavItem\n as={NavLink}\n exact={item?.exact}\n to={item?.to || ''}\n key={item?.label}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e:React.MouseEvent) => item.action && item.action(e)}>\n {item?.label}\n </NavItem>\n );\n }\n };\n return (\n <NavContainer>\n {items?.reverse().map(no => getNavItem(no))}\n\n {\n action &&\n <SecondaryButton variant=\"secondary\" onClick={action?.action}>\n {action.label}\n </SecondaryButton>\n }\n </NavContainer>\n );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}
|
|
@@ -72,7 +72,7 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
72
72
|
peek = _useStackState.peek;
|
|
73
73
|
|
|
74
74
|
var isMediumScreen = (0, _reactResponsive.useMediaQuery)({
|
|
75
|
-
query: _styles.BREAKPOINTS.
|
|
75
|
+
query: _styles.BREAKPOINTS.LARGE.replace('@media ', '')
|
|
76
76
|
});
|
|
77
77
|
var location = (0, _reactRouterDom.useLocation)();
|
|
78
78
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentTextStyle","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","query","MEDIUM","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n MenuAccountInfo,\n MenuButton,\n MenuNavigationItemTypeGroup,\n MenuGroupFooter,\n MenuGroupHeader,\n MenuIconButton,\n MenuNavigationItemTypeItem,\n MobileNavigationMenuProps,\n ProfileMenu,\n MenuNavigationItemTypeSection,\n MenuIconSubMenuButton,\n MobileMenuButtonTypes,\n MenuSwitcherButton,\n MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useMediaQuery} from 'react-responsive';\nimport {useStackState} from '../../common/StackState';\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\nconst SwitcherLabel = styled.div`\n margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n height: 48px;\n\n padding: 0 4px 0 16px;\n border-top: 1px solid ${COLORS.neutral_200};\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n padding: 4px 8px 4px 16px;\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nconst CustomContent = styled.div`\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n profile?: ProfileMenu;\n show?: boolean;\n onClose: () => void;\n};\n\ninterface MenuState {\n header: {\n label?: string;\n buttons?: MobileMenuButtonTypes[];\n }\n content?: {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n },\n customContent?: () => React.ReactNode;\n footer?: boolean;\n}\n\nconst MobileMenu = ({\n show,\n profile,\n buttons,\n label,\n header,\n items,\n footer,\n action,\n onClose,\n }: Props) => {\n\n const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n const isMediumScreen = useMediaQuery({query: BREAKPOINTS.MEDIUM.replace('@media ', '')});\n\n const location = useLocation();\n\n const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n switch (menu?.type) {\n case 'group':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n content: {\n header: menu.header,\n items: menu.items,\n footer: menu.footer,\n action: menu.action\n },\n footer: false\n });\n break;\n case 'custom':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n customContent: menu.custom,\n footer: false\n });\n break;\n default:\n break;\n }\n\n };\n\n React.useEffect(() => {\n onClose();\n }, [location]);\n\n React.useEffect(() => {\n isMediumScreen && onClose()\n }, [isMediumScreen]);\n\n React.useEffect(() => {\n setTimeout(() => {\n reset({\n footer: true,\n header: {\n label: label,\n buttons: buttons,\n },\n content: {\n header: header,\n items: items,\n footer: footer,\n action: action\n }\n })\n }, 300)\n }, [show])\n\n\n const current = peek();\n\n const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n return (\n <Wrapper>\n <MobileMenuHeader buttons={current?.header.buttons}\n onGoBack={length > 1 ? pop : undefined}\n onSubMenuOpen={onSubMenuOpen}\n profile={profile}\n label={current?.header.label}\n onClose={onClose}/>\n {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n {current?.content && <MobileMenuContent header={current?.content.header}\n items={current?.content.items}\n footer={current?.content.footer}\n action={current?.content.action}\n onSubMenuOpen={onSubMenuOpen}/>}\n\n {\n current?.footer &&\n <MobileFooter>\n <LaerdalLogo height={'36px'} width={'66px'}/>\n {switcher &&\n <>\n <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n id=\"globalNavAppsButton\"\n action={() => switcher.action && switcher.action() && onClose()}>\n <SwitchApp size=\"24px\"/>\n </IconButton>\n </>\n }\n\n </MobileFooter>\n }\n </Wrapper>\n );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentTextStyle","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","query","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAiBA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,qQAEAC,kBAAUC,UAFV,EAUTC,oBAAYC,KAVH,CAAb;;AAeA,IAAMC,aAAa,GAAGN,0BAAOC,GAAV,6GAAnB;;AAIA,IAAMM,YAAY,GAAGP,0BAAOC,GAAV,+TAOQO,eAAOC,WAPf,EASd,gCAAmBC,2BAAmBC,IAAtC,EAA4CH,eAAOI,WAAnD,CATc,EAUdR,oBAAYC,KAVE,EAaZ,+BAAkBK,2BAAmBC,IAArC,EAA2CH,eAAOI,WAAlD,CAbY,CAAlB;;AAiBA,IAAMC,aAAa,GAAGb,0BAAOC,GAAV,2MAAnB;;AA8BA,IAAMa,UAAU,GAAG,SAAbA,UAAa,OAUc;AAAA;;AAAA,MATXC,IASW,QATXA,IASW;AAAA,MARXC,OAQW,QARXA,OAQW;AAAA,MAPXC,OAOW,QAPXA,OAOW;AAAA,MANXC,KAMW,QANXA,KAMW;AAAA,MALXC,MAKW,QALXA,MAKW;AAAA,MAJXC,KAIW,QAJXA,KAIW;AAAA,MAHXC,MAGW,QAHXA,MAGW;AAAA,MAFXC,MAEW,QAFXA,MAEW;AAAA,MADXC,OACW,QADXA,OACW;;AAE/B,uBAAyC,gCAAzC;AAAA,MAAOC,KAAP,kBAAOA,KAAP;AAAA,MAAcC,MAAd,kBAAcA,MAAd;AAAA,MAAsBC,IAAtB,kBAAsBA,IAAtB;AAAA,MAA4BC,GAA5B,kBAA4BA,GAA5B;AAAA,MAAiCC,IAAjC,kBAAiCA,IAAjC;;AAEA,MAAMC,cAAc,GAAG,oCAAc;AAACC,IAAAA,KAAK,EAAE1B,oBAAY2B,KAAZ,CAAkBC,OAAlB,CAA0B,SAA1B,EAAqC,EAArC;AAAR,GAAd,CAAvB;AAEA,MAAMC,QAAQ,GAAG,kCAAjB;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,IAAD,EAAsE;AAE1F,YAAQA,IAAR,aAAQA,IAAR,uBAAQA,IAAI,CAAEC,IAAd;AACE,WAAK,OAAL;AACEV,QAAAA,IAAI,CAAC;AACHP,UAAAA,MAAM,EAAE;AACND,YAAAA,KAAK,EAAEiB,IAAI,CAACjB,KADN;AAEND,YAAAA,OAAO,EAAEkB,IAAI,CAAClB;AAFR,WADL;AAKHoB,UAAAA,OAAO,EAAE;AACPlB,YAAAA,MAAM,EAAEgB,IAAI,CAAChB,MADN;AAEPC,YAAAA,KAAK,EAAEe,IAAI,CAACf,KAFL;AAGPC,YAAAA,MAAM,EAAEc,IAAI,CAACd,MAHN;AAIPC,YAAAA,MAAM,EAAEa,IAAI,CAACb;AAJN,WALN;AAWHD,UAAAA,MAAM,EAAE;AAXL,SAAD,CAAJ;AAaA;;AACF,WAAK,QAAL;AACEK,QAAAA,IAAI,CAAC;AACHP,UAAAA,MAAM,EAAE;AACND,YAAAA,KAAK,EAAEiB,IAAI,CAACjB,KADN;AAEND,YAAAA,OAAO,EAAEkB,IAAI,CAAClB;AAFR,WADL;AAKHqB,UAAAA,aAAa,EAAEH,IAAI,CAACI,MALjB;AAMHlB,UAAAA,MAAM,EAAE;AANL,SAAD,CAAJ;AAQA;;AACF;AACE;AA3BJ;AA8BD,GAhCD;;AAkCAmB,EAAAA,KAAK,CAACC,SAAN,CAAgB,YAAM;AACpBlB,IAAAA,OAAO;AACR,GAFD,EAEG,CAACU,QAAD,CAFH;AAIAO,EAAAA,KAAK,CAACC,SAAN,CAAgB,YAAM;AACpBZ,IAAAA,cAAc,IAAIN,OAAO,EAAzB;AACD,GAFD,EAEG,CAACM,cAAD,CAFH;AAIAW,EAAAA,KAAK,CAACC,SAAN,CAAgB,YAAM;AACpBC,IAAAA,UAAU,CAAC,YAAM;AACflB,MAAAA,KAAK,CAAC;AACJH,QAAAA,MAAM,EAAE,IADJ;AAEJF,QAAAA,MAAM,EAAE;AACND,UAAAA,KAAK,EAAEA,KADD;AAEND,UAAAA,OAAO,EAAEA;AAFH,SAFJ;AAMJoB,QAAAA,OAAO,EAAE;AACPlB,UAAAA,MAAM,EAAEA,MADD;AAEPC,UAAAA,KAAK,EAAEA,KAFA;AAGPC,UAAAA,MAAM,EAAEA,MAHD;AAIPC,UAAAA,MAAM,EAAEA;AAJD;AANL,OAAD,CAAL;AAaD,KAdS,EAcP,GAdO,CAAV;AAeD,GAhBD,EAgBG,CAACP,IAAD,CAhBH;AAmBA,MAAM4B,OAAO,GAAGf,IAAI,EAApB;AAEA,MAAMgB,QAAQ,GAAGD,OAAH,aAAGA,OAAH,0CAAGA,OAAO,CAAExB,MAAZ,6EAAG,gBAAiBF,OAApB,0DAAG,sBAA0B4B,IAA1B,CAA+B,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACV,IAAF,KAAW,UAAf;AAAA,GAAhC,CAAjB;AAEA,sBACE,sBAAC,OAAD;AAAA,4BACE,qBAAC,yBAAD;AAAkB,MAAA,OAAO,EAAEO,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAExB,MAAT,CAAgBF,OAA3C;AACkB,MAAA,QAAQ,EAAEQ,MAAM,GAAG,CAAT,GAAaE,GAAb,GAAmBoB,SAD/C;AAEkB,MAAA,aAAa,EAAEb,aAFjC;AAGkB,MAAA,OAAO,EAAElB,OAH3B;AAIkB,MAAA,KAAK,EAAE2B,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAExB,MAAT,CAAgBD,KAJzC;AAKkB,MAAA,OAAO,EAAEK;AAL3B,MADF,EAOG,CAAAoB,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEL,aAAT,kBAA0B,qBAAC,aAAD;AAAA,gBAAgBK,OAAhB,aAAgBA,OAAhB,uBAAgBA,OAAO,CAAEL,aAAT;AAAhB,MAP7B,EAQG,CAAAK,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEN,OAAT,kBAAoB,qBAAC,0BAAD;AAAmB,MAAA,MAAM,EAAEM,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEN,OAAT,CAAiBlB,MAA5C;AACmB,MAAA,KAAK,EAAEwB,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEN,OAAT,CAAiBjB,KAD3C;AAEmB,MAAA,MAAM,EAAEuB,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEN,OAAT,CAAiBhB,MAF5C;AAGmB,MAAA,MAAM,EAAEsB,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEN,OAAT,CAAiBf,MAH5C;AAImB,MAAA,aAAa,EAAEY;AAJlC,MARvB,EAeI,CAAAS,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEtB,MAAT,kBACA,sBAAC,YAAD;AAAA,8BACE,qBAAC,mBAAD;AAAa,QAAA,MAAM,EAAE,MAArB;AAA6B,QAAA,KAAK,EAAE;AAApC,QADF,EAEGuB,QAAQ,iBACP;AAAA,gCACE,qBAAC,aAAD;AAAe,UAAA,SAAS,EAAE,mBAA1B;AAAA;AAAA,UADF,eAEE,qBAAC,kBAAD;AACE,UAAA,OAAO,EAAE,WADX;AAEE,UAAA,KAAK,EAAE,UAFT;AAGE,UAAA,EAAE,EAAC,qBAHL;AAIE,UAAA,MAAM,EAAE;AAAA,mBAAMA,QAAQ,CAACtB,MAAT,IAAmBsB,QAAQ,CAACtB,MAAT,EAAnB,IAAwCC,OAAO,EAArD;AAAA,WAJV;AAAA,iCAKE,qBAAC,sBAAD;AAAW,YAAA,IAAI,EAAC;AAAhB;AALF,UAFF;AAAA,QAHJ;AAAA,MAhBJ;AAAA,IADF;AAoCD,CAvHD;;;AAnBER,EAAAA,I;AACAQ,EAAAA,O;;eA2IaT,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n MenuAccountInfo,\n MenuButton,\n MenuNavigationItemTypeGroup,\n MenuGroupFooter,\n MenuGroupHeader,\n MenuIconButton,\n MenuNavigationItemTypeItem,\n MobileNavigationMenuProps,\n ProfileMenu,\n MenuNavigationItemTypeSection,\n MenuIconSubMenuButton,\n MobileMenuButtonTypes,\n MenuSwitcherButton,\n MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useMediaQuery} from 'react-responsive';\nimport {useStackState} from '../../common/StackState';\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\nconst SwitcherLabel = styled.div`\n margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n height: 48px;\n\n padding: 0 4px 0 16px;\n border-top: 1px solid ${COLORS.neutral_200};\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n padding: 4px 8px 4px 16px;\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nconst CustomContent = styled.div`\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n profile?: ProfileMenu;\n show?: boolean;\n onClose: () => void;\n};\n\ninterface MenuState {\n header: {\n label?: string;\n buttons?: MobileMenuButtonTypes[];\n }\n content?: {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n },\n customContent?: () => React.ReactNode;\n footer?: boolean;\n}\n\nconst MobileMenu = ({\n show,\n profile,\n buttons,\n label,\n header,\n items,\n footer,\n action,\n onClose,\n }: Props) => {\n\n const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n const isMediumScreen = useMediaQuery({query: BREAKPOINTS.LARGE.replace('@media ', '')});\n\n const location = useLocation();\n\n const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n switch (menu?.type) {\n case 'group':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n content: {\n header: menu.header,\n items: menu.items,\n footer: menu.footer,\n action: menu.action\n },\n footer: false\n });\n break;\n case 'custom':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n customContent: menu.custom,\n footer: false\n });\n break;\n default:\n break;\n }\n\n };\n\n React.useEffect(() => {\n onClose();\n }, [location]);\n\n React.useEffect(() => {\n isMediumScreen && onClose()\n }, [isMediumScreen]);\n\n React.useEffect(() => {\n setTimeout(() => {\n reset({\n footer: true,\n header: {\n label: label,\n buttons: buttons,\n },\n content: {\n header: header,\n items: items,\n footer: footer,\n action: action\n }\n })\n }, 300)\n }, [show])\n\n\n const current = peek();\n\n const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n return (\n <Wrapper>\n <MobileMenuHeader buttons={current?.header.buttons}\n onGoBack={length > 1 ? pop : undefined}\n onSubMenuOpen={onSubMenuOpen}\n profile={profile}\n label={current?.header.label}\n onClose={onClose}/>\n {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n {current?.content && <MobileMenuContent header={current?.content.header}\n items={current?.content.items}\n footer={current?.content.footer}\n action={current?.content.action}\n onSubMenuOpen={onSubMenuOpen}/>}\n\n {\n current?.footer &&\n <MobileFooter>\n <LaerdalLogo height={'36px'} width={'66px'}/>\n {switcher &&\n <>\n <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n id=\"globalNavAppsButton\"\n action={() => switcher.action && switcher.action() && onClose()}>\n <SwitchApp size=\"24px\"/>\n </IconButton>\n </>\n }\n\n </MobileFooter>\n }\n </Wrapper>\n );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.cjs"}
|
|
@@ -43,7 +43,7 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
43
43
|
peek = _useStackState.peek;
|
|
44
44
|
|
|
45
45
|
var isMediumScreen = useMediaQuery({
|
|
46
|
-
query: BREAKPOINTS.
|
|
46
|
+
query: BREAKPOINTS.LARGE.replace('@media ', '')
|
|
47
47
|
});
|
|
48
48
|
var location = useLocation();
|
|
49
49
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useMediaQuery","useStackState","Wrapper","div","off_canvas","SMALL","SwitcherLabel","MobileFooter","neutral_200","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","query","MEDIUM","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n MenuAccountInfo,\n MenuButton,\n MenuNavigationItemTypeGroup,\n MenuGroupFooter,\n MenuGroupHeader,\n MenuIconButton,\n MenuNavigationItemTypeItem,\n MobileNavigationMenuProps,\n ProfileMenu,\n MenuNavigationItemTypeSection,\n MenuIconSubMenuButton,\n MobileMenuButtonTypes,\n MenuSwitcherButton,\n MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useMediaQuery} from 'react-responsive';\nimport {useStackState} from '../../common/StackState';\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\nconst SwitcherLabel = styled.div`\n margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n height: 48px;\n\n padding: 0 4px 0 16px;\n border-top: 1px solid ${COLORS.neutral_200};\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n padding: 4px 8px 4px 16px;\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nconst CustomContent = styled.div`\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n profile?: ProfileMenu;\n show?: boolean;\n onClose: () => void;\n};\n\ninterface MenuState {\n header: {\n label?: string;\n buttons?: MobileMenuButtonTypes[];\n }\n content?: {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n },\n customContent?: () => React.ReactNode;\n footer?: boolean;\n}\n\nconst MobileMenu = ({\n show,\n profile,\n buttons,\n label,\n header,\n items,\n footer,\n action,\n onClose,\n }: Props) => {\n\n const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n const isMediumScreen = useMediaQuery({query: BREAKPOINTS.MEDIUM.replace('@media ', '')});\n\n const location = useLocation();\n\n const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n switch (menu?.type) {\n case 'group':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n content: {\n header: menu.header,\n items: menu.items,\n footer: menu.footer,\n action: menu.action\n },\n footer: false\n });\n break;\n case 'custom':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n customContent: menu.custom,\n footer: false\n });\n break;\n default:\n break;\n }\n\n };\n\n React.useEffect(() => {\n onClose();\n }, [location]);\n\n React.useEffect(() => {\n isMediumScreen && onClose()\n }, [isMediumScreen]);\n\n React.useEffect(() => {\n setTimeout(() => {\n reset({\n footer: true,\n header: {\n label: label,\n buttons: buttons,\n },\n content: {\n header: header,\n items: items,\n footer: footer,\n action: action\n }\n })\n }, 300)\n }, [show])\n\n\n const current = peek();\n\n const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n return (\n <Wrapper>\n <MobileMenuHeader buttons={current?.header.buttons}\n onGoBack={length > 1 ? pop : undefined}\n onSubMenuOpen={onSubMenuOpen}\n profile={profile}\n label={current?.header.label}\n onClose={onClose}/>\n {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n {current?.content && <MobileMenuContent header={current?.content.header}\n items={current?.content.items}\n footer={current?.content.footer}\n action={current?.content.action}\n onSubMenuOpen={onSubMenuOpen}/>}\n\n {\n current?.footer &&\n <MobileFooter>\n <LaerdalLogo height={'36px'} width={'66px'}/>\n {switcher &&\n <>\n <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n id=\"globalNavAppsButton\"\n action={() => switcher.action && switcher.action() && onClose()}>\n <SwitchApp size=\"24px\"/>\n </IconButton>\n </>\n }\n\n </MobileFooter>\n }\n </Wrapper>\n );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useMediaQuery","useStackState","Wrapper","div","off_canvas","SMALL","SwitcherLabel","MobileFooter","neutral_200","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","query","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n MenuAccountInfo,\n MenuButton,\n MenuNavigationItemTypeGroup,\n MenuGroupFooter,\n MenuGroupHeader,\n MenuIconButton,\n MenuNavigationItemTypeItem,\n MobileNavigationMenuProps,\n ProfileMenu,\n MenuNavigationItemTypeSection,\n MenuIconSubMenuButton,\n MobileMenuButtonTypes,\n MenuSwitcherButton,\n MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useMediaQuery} from 'react-responsive';\nimport {useStackState} from '../../common/StackState';\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\nconst SwitcherLabel = styled.div`\n margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n height: 48px;\n\n padding: 0 4px 0 16px;\n border-top: 1px solid ${COLORS.neutral_200};\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n padding: 4px 8px 4px 16px;\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nconst CustomContent = styled.div`\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n profile?: ProfileMenu;\n show?: boolean;\n onClose: () => void;\n};\n\ninterface MenuState {\n header: {\n label?: string;\n buttons?: MobileMenuButtonTypes[];\n }\n content?: {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n },\n customContent?: () => React.ReactNode;\n footer?: boolean;\n}\n\nconst MobileMenu = ({\n show,\n profile,\n buttons,\n label,\n header,\n items,\n footer,\n action,\n onClose,\n }: Props) => {\n\n const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n const isMediumScreen = useMediaQuery({query: BREAKPOINTS.LARGE.replace('@media ', '')});\n\n const location = useLocation();\n\n const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n switch (menu?.type) {\n case 'group':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n content: {\n header: menu.header,\n items: menu.items,\n footer: menu.footer,\n action: menu.action\n },\n footer: false\n });\n break;\n case 'custom':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n customContent: menu.custom,\n footer: false\n });\n break;\n default:\n break;\n }\n\n };\n\n React.useEffect(() => {\n onClose();\n }, [location]);\n\n React.useEffect(() => {\n isMediumScreen && onClose()\n }, [isMediumScreen]);\n\n React.useEffect(() => {\n setTimeout(() => {\n reset({\n footer: true,\n header: {\n label: label,\n buttons: buttons,\n },\n content: {\n header: header,\n items: items,\n footer: footer,\n action: action\n }\n })\n }, 300)\n }, [show])\n\n\n const current = peek();\n\n const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n return (\n <Wrapper>\n <MobileMenuHeader buttons={current?.header.buttons}\n onGoBack={length > 1 ? pop : undefined}\n onSubMenuOpen={onSubMenuOpen}\n profile={profile}\n label={current?.header.label}\n onClose={onClose}/>\n {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n {current?.content && <MobileMenuContent header={current?.content.header}\n items={current?.content.items}\n footer={current?.content.footer}\n action={current?.content.action}\n onSubMenuOpen={onSubMenuOpen}/>}\n\n {\n current?.footer &&\n <MobileFooter>\n <LaerdalLogo height={'36px'} width={'66px'}/>\n {switcher &&\n <>\n <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n id=\"globalNavAppsButton\"\n action={() => switcher.action && switcher.action() && onClose()}>\n <SwitchApp size=\"24px\"/>\n </IconButton>\n </>\n }\n\n </MobileFooter>\n }\n </Wrapper>\n );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}
|
|
@@ -47,7 +47,7 @@ exports.MobileMenuHeaderActions = MobileMenuHeaderActions;
|
|
|
47
47
|
|
|
48
48
|
var MobileMenuHeaderLabel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", " {\n ", "\n }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
|
|
49
49
|
|
|
50
|
-
var MobileMenuHeaderWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ", " {\n padding: 4px 8px;\n }\n\n ", " {\n display: none;\n }\n"])), _breakpoints.default.SMALL, _breakpoints.default.
|
|
50
|
+
var MobileMenuHeaderWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ", " {\n padding: 4px 8px;\n }\n\n ", " {\n display: none;\n }\n"])), _breakpoints.default.SMALL, _breakpoints.default.LARGE);
|
|
51
51
|
|
|
52
52
|
exports.MobileMenuHeaderWrapper = MobileMenuHeaderWrapper;
|
|
53
53
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","MobileMenuHeaderWrapper","Breakpoints","MEDIUM","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n MobileMenuButtonTypes,\n MenuNavigationItemTypeGroup,\n ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ${Breakpoints.SMALL} {\n padding: 4px 8px;\n }\n\n ${Breakpoints.MEDIUM} {\n display: none;\n }\n`\n\ninterface MobileMenuHeaderProps {\n onGoBack?: () => void;\n onClose: () => void;\n label?: string;\n\n profile?: ProfileMenu\n buttons?: MobileMenuButtonTypes[];\n\n onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n onGoBack,\n onClose,\n label,\n profile,\n buttons,\n onSubMenuOpen\n }) => {\n\n const buildProfileSubMenu = () => !!profile ? {\n type: 'group',\n label: profile.label,\n header: {\n header: profile.user.firstName + ' ' + profile.user.lastName,\n note: profile.user.email,\n link: profile.user.link\n },\n action: {\n label: profile.signOut?.label,\n action: profile.signOut?.action,\n icon: profile.signOut?.icon,\n disabled: profile.signOut?.disabled\n },\n items: profile.sections.map(a => ({...a, type: 'section'}))\n } as MenuNavigationItemTypeGroup : undefined\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n return <ProfileButton key={index}\n onClick={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n }}\n icon={!profile && <SystemIcons.User/>}\n initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\n }\n case 'submenu': {\n const {placement, type, icon, menu, ...rest} = item;\n\n return <IconButton key={index}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item.menu)\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n disabled={item.disabled}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action && item.action(e?.target) && onClose();\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n }\n }\n\n return (\n <MobileMenuHeaderWrapper>\n {\n onGoBack &&\n <IconButton action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onGoBack();\n }}\n variant={'secondary'}\n shape={'circular'}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n {\n buttons?.filter(a => a.placement === 'left').map(renderItem)\n }\n {\n label &&\n <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n }\n <MobileMenuHeaderActions>\n {\n buttons?.filter(a => a.placement !== 'left').map(renderItem)\n }\n\n {\n onClose &&\n <div style={{marginLeft: '8px'}}>\n <IconButton variant={'secondary'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onClose();\n }}\n shape={'circular'}>\n <SystemIcons.Close/>\n </IconButton>\n </div>\n }\n </MobileMenuHeaderActions>\n\n </MobileMenuHeaderWrapper>\n )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","MobileMenuHeaderWrapper","Breakpoints","LARGE","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n MobileMenuButtonTypes,\n MenuNavigationItemTypeGroup,\n ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ${Breakpoints.SMALL} {\n padding: 4px 8px;\n }\n\n ${Breakpoints.LARGE} {\n display: none;\n }\n`\n\ninterface MobileMenuHeaderProps {\n onGoBack?: () => void;\n onClose: () => void;\n label?: string;\n\n profile?: ProfileMenu\n buttons?: MobileMenuButtonTypes[];\n\n onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n onGoBack,\n onClose,\n label,\n profile,\n buttons,\n onSubMenuOpen\n }) => {\n\n const buildProfileSubMenu = () => !!profile ? {\n type: 'group',\n label: profile.label,\n header: {\n header: profile.user.firstName + ' ' + profile.user.lastName,\n note: profile.user.email,\n link: profile.user.link\n },\n action: {\n label: profile.signOut?.label,\n action: profile.signOut?.action,\n icon: profile.signOut?.icon,\n disabled: profile.signOut?.disabled\n },\n items: profile.sections.map(a => ({...a, type: 'section'}))\n } as MenuNavigationItemTypeGroup : undefined\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n return <ProfileButton key={index}\n onClick={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n }}\n icon={!profile && <SystemIcons.User/>}\n initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\n }\n case 'submenu': {\n const {placement, type, icon, menu, ...rest} = item;\n\n return <IconButton key={index}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item.menu)\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n disabled={item.disabled}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action && item.action(e?.target) && onClose();\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n }\n }\n\n return (\n <MobileMenuHeaderWrapper>\n {\n onGoBack &&\n <IconButton action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onGoBack();\n }}\n variant={'secondary'}\n shape={'circular'}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n {\n buttons?.filter(a => a.placement === 'left').map(renderItem)\n }\n {\n label &&\n <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n }\n <MobileMenuHeaderActions>\n {\n buttons?.filter(a => a.placement !== 'left').map(renderItem)\n }\n\n {\n onClose &&\n <div style={{marginLeft: '8px'}}>\n <IconButton variant={'secondary'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onClose();\n }}\n shape={'circular'}>\n <SystemIcons.Close/>\n </IconButton>\n </div>\n }\n </MobileMenuHeaderActions>\n\n </MobileMenuHeaderWrapper>\n )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.cjs"}
|
|
@@ -23,7 +23,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
23
23
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
24
|
export var MobileMenuHeaderActions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n justify-content: flex-end;\n display: flex;\n flex-direction: row;\n"])));
|
|
25
25
|
var MobileMenuHeaderLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
|
|
26
|
-
export var MobileMenuHeaderWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ", " {\n padding: 4px 8px;\n }\n\n ", " {\n display: none;\n }\n"])), Breakpoints.SMALL, Breakpoints.
|
|
26
|
+
export var MobileMenuHeaderWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ", " {\n padding: 4px 8px;\n }\n\n ", " {\n display: none;\n }\n"])), Breakpoints.SMALL, Breakpoints.LARGE);
|
|
27
27
|
|
|
28
28
|
var MobileMenuHeader = function MobileMenuHeader(_ref) {
|
|
29
29
|
var onGoBack = _ref.onGoBack,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","MEDIUM","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n MobileMenuButtonTypes,\n MenuNavigationItemTypeGroup,\n ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ${Breakpoints.SMALL} {\n padding: 4px 8px;\n }\n\n ${Breakpoints.MEDIUM} {\n display: none;\n }\n`\n\ninterface MobileMenuHeaderProps {\n onGoBack?: () => void;\n onClose: () => void;\n label?: string;\n\n profile?: ProfileMenu\n buttons?: MobileMenuButtonTypes[];\n\n onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n onGoBack,\n onClose,\n label,\n profile,\n buttons,\n onSubMenuOpen\n }) => {\n\n const buildProfileSubMenu = () => !!profile ? {\n type: 'group',\n label: profile.label,\n header: {\n header: profile.user.firstName + ' ' + profile.user.lastName,\n note: profile.user.email,\n link: profile.user.link\n },\n action: {\n label: profile.signOut?.label,\n action: profile.signOut?.action,\n icon: profile.signOut?.icon,\n disabled: profile.signOut?.disabled\n },\n items: profile.sections.map(a => ({...a, type: 'section'}))\n } as MenuNavigationItemTypeGroup : undefined\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n return <ProfileButton key={index}\n onClick={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n }}\n icon={!profile && <SystemIcons.User/>}\n initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\n }\n case 'submenu': {\n const {placement, type, icon, menu, ...rest} = item;\n\n return <IconButton key={index}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item.menu)\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n disabled={item.disabled}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action && item.action(e?.target) && onClose();\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n }\n }\n\n return (\n <MobileMenuHeaderWrapper>\n {\n onGoBack &&\n <IconButton action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onGoBack();\n }}\n variant={'secondary'}\n shape={'circular'}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n {\n buttons?.filter(a => a.placement === 'left').map(renderItem)\n }\n {\n label &&\n <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n }\n <MobileMenuHeaderActions>\n {\n buttons?.filter(a => a.placement !== 'left').map(renderItem)\n }\n\n {\n onClose &&\n <div style={{marginLeft: '8px'}}>\n <IconButton variant={'secondary'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onClose();\n }}\n shape={'circular'}>\n <SystemIcons.Close/>\n </IconButton>\n </div>\n }\n </MobileMenuHeaderActions>\n\n </MobileMenuHeaderWrapper>\n )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","LARGE","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"mappings":";;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAMA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,WAAP,MAAwB,0BAAxB;AACA,SAAQC,UAAR,QAAyB,cAAzB;AACA,SAAQC,WAAR,QAA0B,aAA1B;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,iBAA7B,EAAgDC,kBAAhD,EAAoEC,kBAApE,QAA6F,cAA7F;AACA,SAAQC,aAAR,QAA4B,qBAA5B;;;AAEA,OAAO,IAAMC,uBAAuB,GAAGV,MAAM,CAACW,GAAV,2JAA7B;AAMP,IAAMC,qBAAqB,GAAGZ,MAAM,CAACW,GAAV,2GACvBH,kBAAkB,CAACD,kBAAkB,CAACM,IAApB,EAA0BR,MAAM,CAACS,WAAjC,CADK,EAEvBV,WAAW,CAACW,KAFW,EAGrBT,iBAAiB,CAACC,kBAAkB,CAACM,IAApB,EAA0BR,MAAM,CAACS,WAAjC,CAHI,CAA3B;AAOA,OAAO,IAAME,uBAAuB,GAAGhB,MAAM,CAACW,GAAV,4OAMhCV,WAAW,CAACc,KANoB,EAUhCd,WAAW,CAACgB,KAVoB,CAA7B;;AA2BP,IAAMC,gBAAgE,GAAG,SAAnEA,gBAAmE,OAOO;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,aACI,QADJA,aACI;;AAE9E,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB;AAAA;;AAAA,WAAM,CAAC,CAACH,OAAF,GAAY;AAC5CI,MAAAA,IAAI,EAAE,OADsC;AAE5CL,MAAAA,KAAK,EAAEC,OAAO,CAACD,KAF6B;AAG5CM,MAAAA,MAAM,EAAE;AACNA,QAAAA,MAAM,EAAEL,OAAO,CAACM,IAAR,CAAaC,SAAb,GAAyB,GAAzB,GAA+BP,OAAO,CAACM,IAAR,CAAaE,QAD9C;AAENC,QAAAA,IAAI,EAAET,OAAO,CAACM,IAAR,CAAaI,KAFb;AAGNC,QAAAA,IAAI,EAAEX,OAAO,CAACM,IAAR,CAAaK;AAHb,OAHoC;AAQ5CC,MAAAA,MAAM,EAAE;AACNb,QAAAA,KAAK,sBAAEC,OAAO,CAACa,OAAV,qDAAE,iBAAiBd,KADlB;AAENa,QAAAA,MAAM,uBAAEZ,OAAO,CAACa,OAAV,sDAAE,kBAAiBD,MAFnB;AAGNE,QAAAA,IAAI,uBAAEd,OAAO,CAACa,OAAV,sDAAE,kBAAiBC,IAHjB;AAINC,QAAAA,QAAQ,uBAAEf,OAAO,CAACa,OAAV,sDAAE,kBAAiBE;AAJrB,OARoC;AAc5CC,MAAAA,KAAK,EAAEhB,OAAO,CAACiB,QAAR,CAAiBC,GAAjB,CAAqB,UAAAC,CAAC;AAAA,+CAASA,CAAT;AAAYf,UAAAA,IAAI,EAAE;AAAlB;AAAA,OAAtB;AAdqC,KAAZ,GAeCgB,SAfP;AAAA,GAA5B;;AAiBA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,IAAD,EAA8BC,KAA9B,EAAgD;AACjE,YAAQD,IAAI,CAAClB,IAAb;AACE,WAAK,SAAL;AAAgB;AAAA;;AACd,cAAOoB,SAAP,GAA2CF,IAA3C,CAAOE,SAAP;AAAA,cAAkBpB,IAAlB,GAA2CkB,IAA3C,CAAkBlB,IAAlB;AAAA,cAAwBQ,MAAxB,GAA2CU,IAA3C,CAAwBV,MAAxB;AAAA,cAAmCa,IAAnC,4BAA2CH,IAA3C;;AACA,8BAAO,KAAC,aAAD;AACe,YAAA,OAAO,EAAE,iBAAAI,CAAC,EAAI;AACZA,cAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEC,WAAH,CAAeC,wBAAf;AACAN,cAAAA,IAAI,CAACV,MAAL,GAAcU,IAAI,CAACV,MAAL,CAAYc,CAAZ,aAAYA,CAAZ,uBAAYA,CAAC,CAAEG,MAAf,KAA0B/B,OAAO,EAA/C,GAAoDI,aAAa,IAAIA,aAAa,CAACC,mBAAmB,EAApB,CAAlF;AACD,aAJhB;AAKe,YAAA,IAAI,EAAE,CAACH,OAAD,iBAAY,KAAC,WAAD,CAAa,IAAb,KALjC;AAMe,YAAA,QAAQ,EAAE,0BAACA,OAAD,aAACA,OAAD,wCAACA,OAAO,CAAEM,IAAV,4EAAC,cAAeC,SAAhB,2DAAC,uBAA0BuB,MAA1B,CAAiC,CAAjC,CAAD,yEAAwC,EAAxC,8BAA+C9B,OAA/C,aAA+CA,OAA/C,yCAA+CA,OAAO,CAAEM,IAAxD,4EAA+C,eAAeE,QAA9D,0DAA+C,sBAAyBsB,MAAzB,CAAgC,CAAhC,CAA/C,yEAAqF,EAArF;AANzB,aAOmBL,IAPnB,GAAoBF,KAApB,CAAP;AAQD;;AACD,WAAK,SAAL;AAAgB;AACd,cAAOC,UAAP,GAA+CF,IAA/C,CAAOE,SAAP;AAAA,cAAkBpB,KAAlB,GAA+CkB,IAA/C,CAAkBlB,IAAlB;AAAA,cAAwBU,IAAxB,GAA+CQ,IAA/C,CAAwBR,IAAxB;AAAA,cAA8BiB,IAA9B,GAA+CT,IAA/C,CAA8BS,IAA9B;AAAA,cAAuCN,KAAvC,4BAA+CH,IAA/C;;AAEA,8BAAO,KAAC,UAAD;AACY,YAAA,OAAO,EAAE,WADrB;AAEY,YAAA,KAAK,EAAE,UAFnB;AAGY,YAAA,MAAM,EAAE,gBAAAI,CAAC,EAAI;AACXA,cAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEC,WAAH,CAAeC,wBAAf;AACA1B,cAAAA,aAAa,IAAIA,aAAa,CAACoB,IAAI,CAACS,IAAN,CAA9B;AACD;AANb,aAOgBN,KAPhB;AAAA,sBAQJH,IAAI,CAACR;AARD,cAAiBS,KAAjB,CAAP;AAUD;;AACD,WAAK,QAAL;AAAe;AACb,cAAOC,WAAP,GAAiDF,IAAjD,CAAOE,SAAP;AAAA,cAAkBpB,MAAlB,GAAiDkB,IAAjD,CAAkBlB,IAAlB;AAAA,cAAwBU,KAAxB,GAAiDQ,IAAjD,CAAwBR,IAAxB;AAAA,cAA8BF,OAA9B,GAAiDU,IAAjD,CAA8BV,MAA9B;AAAA,cAAyCa,MAAzC,4BAAiDH,IAAjD;;AACA,8BAAO,KAAC,UAAD;AACY,YAAA,QAAQ,EAAEA,IAAI,CAACP,QAD3B;AAEY,YAAA,OAAO,EAAE,WAFrB;AAGY,YAAA,KAAK,EAAE,UAHnB;AAIY,YAAA,MAAM,EAAE,gBAAAW,CAAC,EAAI;AACXA,cAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEC,WAAH,CAAeC,wBAAf;AACAN,cAAAA,IAAI,CAACV,MAAL,IAAeU,IAAI,CAACV,MAAL,CAAYc,CAAZ,aAAYA,CAAZ,uBAAYA,CAAC,CAAEG,MAAf,CAAf,IAAyC/B,OAAO,EAAhD;AACD;AAPb,aAQgB2B,MARhB;AAAA,sBASJH,IAAI,CAACR;AATD,cAAiBS,KAAjB,CAAP;AAWD;AAvCH;AAyCD,GA1CD;;AA4CA,sBACE,MAAC,uBAAD;AAAA,eAEI1B,QAAQ,iBACR,KAAC,UAAD;AAAY,MAAA,MAAM,EAAE,gBAAA6B,CAAC,EAAI;AACvBA,QAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEC,WAAH,CAAeC,wBAAf;AACA/B,QAAAA,QAAQ;AACT,OAHD;AAIY,MAAA,OAAO,EAAE,WAJrB;AAKY,MAAA,KAAK,EAAE,UALnB;AAAA,6BAME,KAAC,WAAD,CAAa,aAAb;AANF,MAHJ,EAaII,OAbJ,aAaIA,OAbJ,uBAaIA,OAAO,CAAE+B,MAAT,CAAgB,UAAAb,CAAC;AAAA,aAAIA,CAAC,CAACK,SAAF,KAAgB,MAApB;AAAA,KAAjB,EAA6CN,GAA7C,CAAiDG,UAAjD,CAbJ,EAgBItB,KAAK,iBACL,KAAC,qBAAD;AAAA,gBAAwBA;AAAxB,MAjBJ,eAmBE,MAAC,uBAAD;AAAA,iBAEIE,OAFJ,aAEIA,OAFJ,uBAEIA,OAAO,CAAE+B,MAAT,CAAgB,UAAAb,CAAC;AAAA,eAAIA,CAAC,CAACK,SAAF,KAAgB,MAApB;AAAA,OAAjB,EAA6CN,GAA7C,CAAiDG,UAAjD,CAFJ,EAMIvB,OAAO,iBACP;AAAK,QAAA,KAAK,EAAE;AAACmC,UAAAA,UAAU,EAAE;AAAb,SAAZ;AAAA,+BACE,KAAC,UAAD;AAAY,UAAA,OAAO,EAAE,WAArB;AACY,UAAA,MAAM,EAAE,gBAAAP,CAAC,EAAI;AACXA,YAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEC,WAAH,CAAeC,wBAAf;AACA9B,YAAAA,OAAO;AACR,WAJb;AAKY,UAAA,KAAK,EAAE,UALnB;AAAA,iCAME,KAAC,WAAD,CAAa,KAAb;AANF;AADF,QAPJ;AAAA,MAnBF;AAAA,IADF;AA0CD,CAhHD;;;AAXED,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,K;AAGAE,EAAAA,O;AAEAC,EAAAA,a;;AAuHF,eAAeN,gBAAf","sourcesContent":["import React from 'react';\nimport {\n MobileMenuButtonTypes,\n MenuNavigationItemTypeGroup,\n ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ${Breakpoints.SMALL} {\n padding: 4px 8px;\n }\n\n ${Breakpoints.LARGE} {\n display: none;\n }\n`\n\ninterface MobileMenuHeaderProps {\n onGoBack?: () => void;\n onClose: () => void;\n label?: string;\n\n profile?: ProfileMenu\n buttons?: MobileMenuButtonTypes[];\n\n onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n onGoBack,\n onClose,\n label,\n profile,\n buttons,\n onSubMenuOpen\n }) => {\n\n const buildProfileSubMenu = () => !!profile ? {\n type: 'group',\n label: profile.label,\n header: {\n header: profile.user.firstName + ' ' + profile.user.lastName,\n note: profile.user.email,\n link: profile.user.link\n },\n action: {\n label: profile.signOut?.label,\n action: profile.signOut?.action,\n icon: profile.signOut?.icon,\n disabled: profile.signOut?.disabled\n },\n items: profile.sections.map(a => ({...a, type: 'section'}))\n } as MenuNavigationItemTypeGroup : undefined\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n return <ProfileButton key={index}\n onClick={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n }}\n icon={!profile && <SystemIcons.User/>}\n initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\n }\n case 'submenu': {\n const {placement, type, icon, menu, ...rest} = item;\n\n return <IconButton key={index}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item.menu)\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n disabled={item.disabled}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action && item.action(e?.target) && onClose();\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n }\n }\n\n return (\n <MobileMenuHeaderWrapper>\n {\n onGoBack &&\n <IconButton action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onGoBack();\n }}\n variant={'secondary'}\n shape={'circular'}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n {\n buttons?.filter(a => a.placement === 'left').map(renderItem)\n }\n {\n label &&\n <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n }\n <MobileMenuHeaderActions>\n {\n buttons?.filter(a => a.placement !== 'left').map(renderItem)\n }\n\n {\n onClose &&\n <div style={{marginLeft: '8px'}}>\n <IconButton variant={'secondary'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onClose();\n }}\n shape={'circular'}>\n <SystemIcons.Close/>\n </IconButton>\n </div>\n }\n </MobileMenuHeaderActions>\n\n </MobileMenuHeaderWrapper>\n )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.js"}
|