@laerdal/life-react-components 1.11.0-dev.7.full → 1.11.0-dev.8
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/mobile/CommonStyles.cjs +12 -2
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/CommonStyles.d.ts +2 -0
- package/dist/GlobalNavigationBar/mobile/CommonStyles.js +5 -2
- package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs +53 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs.map +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.d.ts +6 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js +34 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js.map +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs +28 -51
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js +25 -47
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +1 -1
- package/dist/GlobalNavigationBar/types.d.ts +2 -1
- package/dist/Switcher/MobileCustomMenuContent.cjs +49 -0
- package/dist/Switcher/MobileCustomMenuContent.cjs.map +1 -0
- package/dist/Switcher/MobileCustomMenuContent.d.ts +7 -0
- package/dist/Switcher/MobileCustomMenuContent.js +32 -0
- package/dist/Switcher/MobileCustomMenuContent.js.map +1 -0
- package/dist/Switcher/MobileSwitcherMenu.cjs +12 -4
- package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
- package/dist/Switcher/MobileSwitcherMenu.d.ts +5 -2
- package/dist/Switcher/MobileSwitcherMenu.js +11 -4
- package/dist/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/common/ScrollableContainer.cjs +44 -0
- package/dist/common/ScrollableContainer.cjs.map +1 -0
- package/dist/common/ScrollableContainer.d.ts +1 -0
- package/dist/common/ScrollableContainer.js +28 -0
- package/dist/common/ScrollableContainer.js.map +1 -0
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.flowDown = exports.fadeOut = exports.fadeIn = exports.UserMenuSectionListStyling = exports.SiteName = exports.RowLayout = exports.Right = exports.MenuSectionList = exports.MenuSection = exports.MenuLink = exports.Menu = exports.Button = void 0;
|
|
10
|
+
exports.flowDown = exports.fadeOut = exports.fadeIn = exports.UserMenuSectionListStyling = exports.SiteName = exports.ScrollableContainer = exports.RowLayout = exports.Right = exports.MobileMenuWrapper = exports.MenuSectionList = exports.MenuSection = exports.MenuLink = exports.Menu = exports.Button = void 0;
|
|
11
11
|
|
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
13
|
|
|
@@ -17,7 +17,9 @@ var _styles = require("../../styles");
|
|
|
17
17
|
|
|
18
18
|
var _reactRouterDom = require("react-router-dom");
|
|
19
19
|
|
|
20
|
-
var
|
|
20
|
+
var _types = require("../../types");
|
|
21
|
+
|
|
22
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
|
21
23
|
|
|
22
24
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
25
|
|
|
@@ -62,4 +64,12 @@ var MenuLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_template
|
|
|
62
64
|
exports.MenuLink = MenuLink;
|
|
63
65
|
var flowDown = (0, _styledComponents.keyframes)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
64
66
|
exports.flowDown = flowDown;
|
|
67
|
+
|
|
68
|
+
var MobileMenuWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n"])));
|
|
69
|
+
|
|
70
|
+
exports.MobileMenuWrapper = MobileMenuWrapper;
|
|
71
|
+
|
|
72
|
+
var ScrollableContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ", "\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
|
|
73
|
+
|
|
74
|
+
exports.ScrollableContainer = ScrollableContainer;
|
|
65
75
|
//# sourceMappingURL=CommonStyles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","fadeOut","fadeIn","Menu","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","focusStyles","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentTextStyle","Regular","black","flowDown"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","fadeOut","fadeIn","Menu","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","focusStyles","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentTextStyle","Regular","black","flowDown","MobileMenuWrapper","ScrollableContainer","Size","Small"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;;;;;;;AAEO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,+HAAf;;;;AAKA,IAAMC,MAAM,GAAGF,0BAAOG,MAAV,uJACGC,eAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,qNAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,wQAAf;AAaO,IAAME,OAAO,OAAGF,2BAAH,uMAAb;;AAWA,IAAMG,MAAM,OAAGH,2BAAH,uMAAZ;;;AAWA,IAAMI,IAAI,GAAGX,0BAAOC,GAAV,8eAEKG,eAAOC,KAFZ,EAOJO,kBAAUC,UAPN,EAYbC,oBAAYC,KAZC,EAmBAT,QAnBA,EAwBAE,SAxBA,CAAV;;;;AA4BA,IAAMQ,KAAK,GAAGhB,0BAAOC,GAAV,+HAAX;;;;AAKA,IAAMgB,QAAQ,GAAGjB,0BAAOkB,IAAV,uKACVd,eAAOe,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGpB,0BAAOqB,EAAV,kNAAjB;;;;AAUA,IAAMC,eAAe,GAAGtB,0BAAOuB,EAAV,mPAArB;;;AAeA,IAAMC,0BAA0B,OAAGC,qBAAH,orBAMxBb,kBAAUc,KANc,EAOftB,eAAOuB,UAPQ,EAUxBvB,eAAOwB,WAViB,EAcxBxB,eAAOwB,WAdiB,EAmBxBhB,kBAAUiB,KAnBc,EAqBjCC,mBArBiC,EA4BxBlB,kBAAUmB,MA5Bc,EA6BrB3B,eAAO4B,WA7Bc,EAgCxB5B,eAAO6B,WAhCiB,EAoCxB7B,eAAO6B,WApCiB,EA0CxB7B,eAAO8B,WA1CiB,EA8CxB9B,eAAO8B,WA9CiB,EAiDf9B,eAAO+B,WAjDQ,CAAhC;;AAqDA,IAAMC,QAAQ,GAAG,+BAAOC,uBAAP,CAAH,4RAOjB,+BAAkBC,2BAAmBC,OAArC,EAA8CnC,eAAOoC,KAArD,CAPiB,CAAd;;AAeA,IAAMC,QAAQ,OAAGlC,2BAAH,wNAAd;;;AAWA,IAAMmC,iBAAiB,GAAG1C,0BAAOC,GAAV,6MAAvB;;;;AASA,IAAM0C,mBAAmB,GAAG3C,0BAAOC,GAAV,0UAY5B,8BAAiB2C,YAAKC,KAAtB,CAZ4B,CAAzB","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles, scrollBarStyling } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles';\nimport { Z_INDEXES } from '../../styles';\nimport { Size } from '../../types';\n\nexport const RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const Button = styled.button`\n background-color: ${COLORS.white};\n font-weight: bold;\n border: 0;\n`;\n\nconst flowLeft = keyframes`\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst flowRight = keyframes`\n 0% {\n opacity: 1;\n transform: translateX(0);\n visibility: visible;\n }\n to {\n opacity: 0;\n visibility: hidden;\n transform: translateX(100%);\n }\n`;\n\nexport const fadeOut = keyframes`\n 0% {\n opacity: 1;\n visibility: visible;\n }\n to {\n opacity: 0;\n visibility: hidden;\n }\n`;\n\nexport const fadeIn = keyframes`\n 0% {\n opacity: 0;\n visibility: hidden;\n }\n to {\n opacity: 1;\n visibility: visible;\n }\n`;\n\nexport const Menu = styled.div`\n height: 100%;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n right: 0;\n top: 0;\n position: absolute;\n z-index: ${Z_INDEXES.off_canvas};\n align-items: center;\n\n width: 320px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n\n .open & {\n visibility: visible;\n display: flex;\n animation: ${flowLeft} 0.3s ease-in-out;\n }\n\n .closed & {\n visibility: hidden;\n animation: ${flowRight} 0.3s ease-in-out;\n }\n`;\n\nexport const Right = styled.div`\n display: flex;\n margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n color: ${COLORS.neutral_600};\n font-weight: bold;\n font-size: 14px;\n margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n margin-top: 16px;\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nexport const MenuSectionList = styled.ul`\n list-style: none;\n padding: 0;\n\n li {\n width: 80%;\n height: 48px;\n margin: 0 auto 0 12px;\n\n a {\n height: 100%;\n }\n }\n`;\n\nexport const UserMenuSectionListStyling = css`\n li {\n position: relative;\n }\n\n li:hover:not(.disabled) {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n\n a {\n color: ${COLORS.primary_600};\n }\n\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n li:focus-within:not(.disabled) {\n z-index: ${Z_INDEXES.focus};\n\n ${focusStyles}\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n\n a {\n color: ${COLORS.primary_800};\n }\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n\n .disabled {\n a {\n color: ${COLORS.neutral_300};\n }\n\n svg {\n color: ${COLORS.neutral_300};\n }\n\n background-color: ${COLORS.neutral_100};\n }\n`;\n\nexport const MenuLink = styled(NavLink)`\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n`;\n\nexport const flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nexport const MobileMenuWrapper = 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\nexport const ScrollableContainer = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n`;\n"],"file":"CommonStyles.cjs"}
|
|
@@ -11,3 +11,5 @@ export declare const MenuSectionList: import("styled-components").StyledComponen
|
|
|
11
11
|
export declare const UserMenuSectionListStyling: import("styled-components").FlattenSimpleInterpolation;
|
|
12
12
|
export declare const MenuLink: import("styled-components").StyledComponent<typeof NavLink, any, {}, never>;
|
|
13
13
|
export declare const flowDown: import("styled-components").Keyframes;
|
|
14
|
+
export declare const MobileMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
15
|
+
export declare const ScrollableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
|
4
4
|
|
|
5
5
|
import styled, { css, keyframes } from 'styled-components';
|
|
6
|
-
import { BREAKPOINTS, COLORS, focusStyles } from '../../styles';
|
|
6
|
+
import { BREAKPOINTS, COLORS, focusStyles, scrollBarStyling } from '../../styles';
|
|
7
7
|
import { NavLink } from 'react-router-dom';
|
|
8
8
|
import { ComponentMStyling, ComponentTextStyle } from '../../styles';
|
|
9
9
|
import { Z_INDEXES } from '../../styles';
|
|
10
|
+
import { Size } from '../../types';
|
|
10
11
|
export var RowLayout = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
11
12
|
export var Button = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n font-weight: bold;\n border: 0;\n"])), COLORS.white);
|
|
12
13
|
var flowLeft = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
@@ -21,4 +22,6 @@ export var MenuSectionList = styled.ul(_templateObject11 || (_templateObject11 =
|
|
|
21
22
|
export var UserMenuSectionListStyling = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n li {\n position: relative;\n }\n\n li:hover:not(.disabled) {\n z-index: ", ";\n background-color: ", ";\n\n a {\n color: ", ";\n }\n\n svg {\n color: ", ";\n }\n }\n\n li:focus-within:not(.disabled) {\n z-index: ", ";\n\n ", "\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n z-index: ", ";\n background: ", ";\n\n a {\n color: ", ";\n }\n\n svg {\n color: ", ";\n }\n }\n\n .disabled {\n a {\n color: ", ";\n }\n\n svg {\n color: ", ";\n }\n\n background-color: ", ";\n }\n"])), Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, COLORS.primary_600, Z_INDEXES.focus, focusStyles, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100);
|
|
22
23
|
export var MenuLink = styled(NavLink)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ", "\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black));
|
|
23
24
|
export var flowDown = keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
25
|
+
export var MobileMenuWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n"])));
|
|
26
|
+
export var ScrollableContainer = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ", "\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n"])), scrollBarStyling(Size.Small));
|
|
24
27
|
//# sourceMappingURL=CommonStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["styled","css","keyframes","BREAKPOINTS","COLORS","focusStyles","NavLink","ComponentMStyling","ComponentTextStyle","Z_INDEXES","RowLayout","div","Button","button","white","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","primary_20","primary_600","focus","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","flowDown"],"mappings":";;;;AAAA,OAAOA,MAAP,
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["styled","css","keyframes","BREAKPOINTS","COLORS","focusStyles","scrollBarStyling","NavLink","ComponentMStyling","ComponentTextStyle","Z_INDEXES","Size","RowLayout","div","Button","button","white","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","primary_20","primary_600","focus","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","flowDown","MobileMenuWrapper","ScrollableContainer","Small"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,WAA9B,EAA2CC,gBAA3C,QAAmE,cAAnE;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,cAAtD;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,IAAT,QAAqB,aAArB;AAEA,OAAO,IAAMC,SAAS,GAAGZ,MAAM,CAACa,GAAV,iHAAf;AAKP,OAAO,IAAMC,MAAM,GAAGd,MAAM,CAACe,MAAV,yIACGX,MAAM,CAACY,KADV,CAAZ;AAMP,IAAMC,QAAQ,GAAGf,SAAH,sMAAd;AAWA,IAAMgB,SAAS,GAAGhB,SAAH,yPAAf;AAaA,OAAO,IAAMiB,OAAO,GAAGjB,SAAH,wLAAb;AAWP,OAAO,IAAMkB,MAAM,GAAGlB,SAAH,wLAAZ;AAWP,OAAO,IAAMmB,IAAI,GAAGrB,MAAM,CAACa,GAAV,geAEKT,MAAM,CAACY,KAFZ,EAOJN,SAAS,CAACY,UAPN,EAYbnB,WAAW,CAACoB,KAZC,EAmBAN,QAnBA,EAwBAC,SAxBA,CAAV;AA4BP,OAAO,IAAMM,KAAK,GAAGxB,MAAM,CAACa,GAAV,iHAAX;AAKP,OAAO,IAAMY,QAAQ,GAAGzB,MAAM,CAAC0B,IAAV,yJACVtB,MAAM,CAACuB,WADG,CAAd;AAOP,OAAO,IAAMC,WAAW,GAAG5B,MAAM,CAAC6B,EAAV,oMAAjB;AAUP,OAAO,IAAMC,eAAe,GAAG9B,MAAM,CAAC+B,EAAV,qOAArB;AAeP,OAAO,IAAMC,0BAA0B,GAAG/B,GAAH,qqBAMxBS,SAAS,CAACuB,KANc,EAOf7B,MAAM,CAAC8B,UAPQ,EAUxB9B,MAAM,CAAC+B,WAViB,EAcxB/B,MAAM,CAAC+B,WAdiB,EAmBxBzB,SAAS,CAAC0B,KAnBc,EAqBjC/B,WArBiC,EA4BxBK,SAAS,CAAC2B,MA5Bc,EA6BrBjC,MAAM,CAACkC,WA7Bc,EAgCxBlC,MAAM,CAACmC,WAhCiB,EAoCxBnC,MAAM,CAACmC,WApCiB,EA0CxBnC,MAAM,CAACoC,WA1CiB,EA8CxBpC,MAAM,CAACoC,WA9CiB,EAiDfpC,MAAM,CAACqC,WAjDQ,CAAhC;AAqDP,OAAO,IAAMC,QAAQ,GAAG1C,MAAM,CAACO,OAAD,CAAT,8QAOjBC,iBAAiB,CAACC,kBAAkB,CAACkC,OAApB,EAA6BvC,MAAM,CAACwC,KAApC,CAPA,CAAd;AAeP,OAAO,IAAMC,QAAQ,GAAG3C,SAAH,yMAAd;AAWP,OAAO,IAAM4C,iBAAiB,GAAG9C,MAAM,CAACa,GAAV,+LAAvB;AASP,OAAO,IAAMkC,mBAAmB,GAAG/C,MAAM,CAACa,GAAV,4TAY5BP,gBAAgB,CAACK,IAAI,CAACqC,KAAN,CAZY,CAAzB","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles, scrollBarStyling } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles';\nimport { Z_INDEXES } from '../../styles';\nimport { Size } from '../../types';\n\nexport const RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const Button = styled.button`\n background-color: ${COLORS.white};\n font-weight: bold;\n border: 0;\n`;\n\nconst flowLeft = keyframes`\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst flowRight = keyframes`\n 0% {\n opacity: 1;\n transform: translateX(0);\n visibility: visible;\n }\n to {\n opacity: 0;\n visibility: hidden;\n transform: translateX(100%);\n }\n`;\n\nexport const fadeOut = keyframes`\n 0% {\n opacity: 1;\n visibility: visible;\n }\n to {\n opacity: 0;\n visibility: hidden;\n }\n`;\n\nexport const fadeIn = keyframes`\n 0% {\n opacity: 0;\n visibility: hidden;\n }\n to {\n opacity: 1;\n visibility: visible;\n }\n`;\n\nexport const Menu = styled.div`\n height: 100%;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n right: 0;\n top: 0;\n position: absolute;\n z-index: ${Z_INDEXES.off_canvas};\n align-items: center;\n\n width: 320px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n\n .open & {\n visibility: visible;\n display: flex;\n animation: ${flowLeft} 0.3s ease-in-out;\n }\n\n .closed & {\n visibility: hidden;\n animation: ${flowRight} 0.3s ease-in-out;\n }\n`;\n\nexport const Right = styled.div`\n display: flex;\n margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n color: ${COLORS.neutral_600};\n font-weight: bold;\n font-size: 14px;\n margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n margin-top: 16px;\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nexport const MenuSectionList = styled.ul`\n list-style: none;\n padding: 0;\n\n li {\n width: 80%;\n height: 48px;\n margin: 0 auto 0 12px;\n\n a {\n height: 100%;\n }\n }\n`;\n\nexport const UserMenuSectionListStyling = css`\n li {\n position: relative;\n }\n\n li:hover:not(.disabled) {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n\n a {\n color: ${COLORS.primary_600};\n }\n\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n li:focus-within:not(.disabled) {\n z-index: ${Z_INDEXES.focus};\n\n ${focusStyles}\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n\n a {\n color: ${COLORS.primary_800};\n }\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n\n .disabled {\n a {\n color: ${COLORS.neutral_300};\n }\n\n svg {\n color: ${COLORS.neutral_300};\n }\n\n background-color: ${COLORS.neutral_100};\n }\n`;\n\nexport const MenuLink = styled(NavLink)`\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n`;\n\nexport const flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nexport const MobileMenuWrapper = 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\nexport const ScrollableContainer = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n`;\n"],"file":"CommonStyles.js"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.MobileActionContainer = void 0;
|
|
9
|
+
|
|
10
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _reactResponsive = require("react-responsive");
|
|
15
|
+
|
|
16
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
17
|
+
|
|
18
|
+
var _Button = require("../../Button");
|
|
19
|
+
|
|
20
|
+
var _styles = require("../../styles");
|
|
21
|
+
|
|
22
|
+
var _types = require("../../types");
|
|
23
|
+
|
|
24
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
+
|
|
26
|
+
var _templateObject;
|
|
27
|
+
|
|
28
|
+
var ActionContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n ", " {\n padding: 16px;\n }\n"])), _styles.COLORS.neutral_200, _styles.BREAKPOINTS.SMALL);
|
|
29
|
+
|
|
30
|
+
var MobileActionContainer = function MobileActionContainer(_ref) {
|
|
31
|
+
var disabled = _ref.disabled,
|
|
32
|
+
icon = _ref.icon,
|
|
33
|
+
label = _ref.label,
|
|
34
|
+
isLoading = _ref.isLoading,
|
|
35
|
+
action = _ref.action;
|
|
36
|
+
var isSmallScreen = (0, _reactResponsive.useMediaQuery)({
|
|
37
|
+
query: _styles.BREAKPOINTS.SMALL.replace('@media ', '')
|
|
38
|
+
});
|
|
39
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionContainer, {
|
|
40
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
|
|
41
|
+
variant: 'secondary',
|
|
42
|
+
size: isSmallScreen ? _types.Size.Medium : _types.Size.Small,
|
|
43
|
+
disabled: disabled,
|
|
44
|
+
icon: icon,
|
|
45
|
+
loading: isLoading,
|
|
46
|
+
onClick: action,
|
|
47
|
+
children: label
|
|
48
|
+
})
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
exports.MobileActionContainer = MobileActionContainer;
|
|
53
|
+
//# sourceMappingURL=MobileActionContainer.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"names":["ActionContainer","styled","div","COLORS","neutral_200","BREAKPOINTS","SMALL","MobileActionContainer","disabled","icon","label","isLoading","action","isSmallScreen","query","replace","Size","Medium","Small"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAGA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,wPAGKC,eAAOC,WAHZ,EAOjBC,oBAAYC,KAPK,CAArB;;AAcO,IAAMC,qBAA0E,GAAG,SAA7EA,qBAA6E,OAAkD;AAAA,MAA/CC,QAA+C,QAA/CA,QAA+C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,KAA+B,QAA/BA,KAA+B;AAAA,MAAxBC,SAAwB,QAAxBA,SAAwB;AAAA,MAAbC,MAAa,QAAbA,MAAa;AAC1I,MAAMC,aAAa,GAAG,oCAAc;AAAEC,IAAAA,KAAK,EAAET,oBAAYC,KAAZ,CAAkBS,OAAlB,CAA0B,SAA1B,EAAqC,EAArC;AAAT,GAAd,CAAtB;AAEA,sBACE,qBAAC,eAAD;AAAA,2BACE,qBAAC,cAAD;AAAQ,MAAA,OAAO,EAAE,WAAjB;AAA8B,MAAA,IAAI,EAAEF,aAAa,GAAGG,YAAKC,MAAR,GAAiBD,YAAKE,KAAvE;AAA8E,MAAA,QAAQ,EAAEV,QAAxF;AAAkG,MAAA,IAAI,EAAEC,IAAxG;AAA8G,MAAA,OAAO,EAAEE,SAAvH;AAAkI,MAAA,OAAO,EAAEC,MAA3I;AAAA,gBACGF;AADH;AADF,IADF;AAOD,CAVM","sourcesContent":["import React from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { Size } from '../../types';\nimport { MenuButton } from '../types';\n\nconst ActionContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\ninterface MobileActionContainerProps extends MenuButton {}\n\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, icon, label, isLoading, action }) => {\n const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n return (\n <ActionContainer>\n <Button variant={'secondary'} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={isLoading} onClick={action}>\n {label}\n </Button>\n </ActionContainer>\n );\n};\n"],"file":"MobileActionContainer.cjs"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
|
|
3
|
+
var _templateObject;
|
|
4
|
+
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { useMediaQuery } from 'react-responsive';
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { Button } from '../../Button';
|
|
9
|
+
import { BREAKPOINTS, COLORS } from '../../styles';
|
|
10
|
+
import { Size } from '../../types';
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
var ActionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n ", " {\n padding: 16px;\n }\n"])), COLORS.neutral_200, BREAKPOINTS.SMALL);
|
|
13
|
+
export var MobileActionContainer = function MobileActionContainer(_ref) {
|
|
14
|
+
var disabled = _ref.disabled,
|
|
15
|
+
icon = _ref.icon,
|
|
16
|
+
label = _ref.label,
|
|
17
|
+
isLoading = _ref.isLoading,
|
|
18
|
+
action = _ref.action;
|
|
19
|
+
var isSmallScreen = useMediaQuery({
|
|
20
|
+
query: BREAKPOINTS.SMALL.replace('@media ', '')
|
|
21
|
+
});
|
|
22
|
+
return /*#__PURE__*/_jsx(ActionContainer, {
|
|
23
|
+
children: /*#__PURE__*/_jsx(Button, {
|
|
24
|
+
variant: 'secondary',
|
|
25
|
+
size: isSmallScreen ? Size.Medium : Size.Small,
|
|
26
|
+
disabled: disabled,
|
|
27
|
+
icon: icon,
|
|
28
|
+
loading: isLoading,
|
|
29
|
+
onClick: action,
|
|
30
|
+
children: label
|
|
31
|
+
})
|
|
32
|
+
});
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=MobileActionContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"names":["React","useMediaQuery","styled","Button","BREAKPOINTS","COLORS","Size","ActionContainer","div","neutral_200","SMALL","MobileActionContainer","disabled","icon","label","isLoading","action","isSmallScreen","query","replace","Medium","Small"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,aAAT,QAA8B,kBAA9B;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,cAApC;AACA,SAASC,IAAT,QAAqB,aAArB;;AAGA,IAAMC,eAAe,GAAGL,MAAM,CAACM,GAAV,0OAGKH,MAAM,CAACI,WAHZ,EAOjBL,WAAW,CAACM,KAPK,CAArB;AAcA,OAAO,IAAMC,qBAA0E,GAAG,SAA7EA,qBAA6E,OAAkD;AAAA,MAA/CC,QAA+C,QAA/CA,QAA+C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,KAA+B,QAA/BA,KAA+B;AAAA,MAAxBC,SAAwB,QAAxBA,SAAwB;AAAA,MAAbC,MAAa,QAAbA,MAAa;AAC1I,MAAMC,aAAa,GAAGhB,aAAa,CAAC;AAAEiB,IAAAA,KAAK,EAAEd,WAAW,CAACM,KAAZ,CAAkBS,OAAlB,CAA0B,SAA1B,EAAqC,EAArC;AAAT,GAAD,CAAnC;AAEA,sBACE,KAAC,eAAD;AAAA,2BACE,KAAC,MAAD;AAAQ,MAAA,OAAO,EAAE,WAAjB;AAA8B,MAAA,IAAI,EAAEF,aAAa,GAAGX,IAAI,CAACc,MAAR,GAAiBd,IAAI,CAACe,KAAvE;AAA8E,MAAA,QAAQ,EAAET,QAAxF;AAAkG,MAAA,IAAI,EAAEC,IAAxG;AAA8G,MAAA,OAAO,EAAEE,SAAvH;AAAkI,MAAA,OAAO,EAAEC,MAA3I;AAAA,gBACGF;AADH;AADF,IADF;AAOD,CAVM","sourcesContent":["import React from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { Size } from '../../types';\nimport { MenuButton } from '../types';\n\nconst ActionContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\ninterface MobileActionContainerProps extends MenuButton {}\n\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, icon, label, isLoading, action }) => {\n const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n return (\n <ActionContainer>\n <Button variant={'secondary'} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={isLoading} onClick={action}>\n {label}\n </Button>\n </ActionContainer>\n );\n};\n"],"file":"MobileActionContainer.js"}
|
|
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
10
12
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
13
|
|
|
12
14
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
@@ -25,19 +27,25 @@ var _HyperLink = require("../../HyperLink");
|
|
|
25
27
|
|
|
26
28
|
var _reactResponsive = require("react-responsive");
|
|
27
29
|
|
|
28
|
-
var _Button = require("../../Button");
|
|
29
|
-
|
|
30
30
|
var _NavigationHelper = require("../../common/NavigationHelper");
|
|
31
31
|
|
|
32
32
|
var _MenuItem = require("../../MenuItem");
|
|
33
33
|
|
|
34
34
|
var _icons = require("../../icons");
|
|
35
35
|
|
|
36
|
-
var
|
|
36
|
+
var _CommonStyles = require("./CommonStyles");
|
|
37
|
+
|
|
38
|
+
var _ScrollableContainer = require("../../common/ScrollableContainer");
|
|
39
|
+
|
|
40
|
+
var _MobileActionContainer = require("./MobileActionContainer");
|
|
37
41
|
|
|
38
42
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
39
43
|
|
|
40
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12
|
|
44
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
45
|
+
|
|
46
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
47
|
+
|
|
48
|
+
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; }
|
|
41
49
|
|
|
42
50
|
var HeaderText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", " {\n ", "\n }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
|
|
43
51
|
|
|
@@ -45,29 +53,23 @@ var HeaderNote = _styledComponents.default.div(_templateObject2 || (_templateObj
|
|
|
45
53
|
|
|
46
54
|
var HeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n display: flex;\n flex-direction: column;\n"])), _styles.COLORS.neutral_200);
|
|
47
55
|
|
|
48
|
-
var
|
|
49
|
-
|
|
50
|
-
var MenuItemsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n"])));
|
|
56
|
+
var MenuItemsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n"])));
|
|
51
57
|
|
|
52
|
-
var MenuSectionContainer = _styledComponents.default.div(
|
|
58
|
+
var MenuSectionContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ", ";\n }\n"])), _styles.COLORS.neutral_200);
|
|
53
59
|
|
|
54
|
-
var MenuSectionHeader = _styledComponents.default.div(
|
|
60
|
+
var MenuSectionHeader = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ", ";\n\n ", "\n"])), _styles.COLORS.neutral_20, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_500));
|
|
55
61
|
|
|
56
|
-
var MenuSectionList = _styledComponents.default.div(
|
|
62
|
+
var MenuSectionList = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n"])));
|
|
57
63
|
|
|
58
|
-
var PinnedContainer = _styledComponents.default.div(
|
|
64
|
+
var PinnedContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
|
|
59
65
|
|
|
60
|
-
var FooterText = _styledComponents.default.div(
|
|
66
|
+
var FooterText = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (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));
|
|
61
67
|
|
|
62
|
-
var FooterNote = _styledComponents.default.div(
|
|
68
|
+
var FooterNote = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", " {\n ", "\n }\n"])), (0, _styles.ParagraphXSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ParagraphSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
|
|
63
69
|
|
|
64
|
-
var FooterLink = _styledComponents.default.div(
|
|
70
|
+
var FooterLink = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n a {\n ", "\n ", " {\n ", "\n }\n }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null));
|
|
65
71
|
|
|
66
|
-
var FooterContainer = _styledComponents.default.div(
|
|
67
|
-
|
|
68
|
-
var ActionContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n ", " {\n padding: 16px;\n }\n"])), _styles.COLORS.neutral_200, _styles.BREAKPOINTS.SMALL);
|
|
69
|
-
|
|
70
|
-
var Wrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n"])));
|
|
72
|
+
var FooterContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n\n ", " {\n padding: 16px;\n }\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_20, _styles.BREAKPOINTS.SMALL);
|
|
71
73
|
|
|
72
74
|
var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
73
75
|
var header = _ref.header,
|
|
@@ -83,26 +85,10 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
|
83
85
|
navigate = _useNavigationHelper.navigate,
|
|
84
86
|
isActiveRoute = _useNavigationHelper.isActiveRoute;
|
|
85
87
|
|
|
86
|
-
var
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
var _useDimensionsRef = (0, _rooks.useDimensionsRef)({
|
|
92
|
-
updateOnResize: true
|
|
93
|
-
}),
|
|
94
|
-
_useDimensionsRef2 = (0, _slicedToArray2.default)(_useDimensionsRef, 3),
|
|
95
|
-
scrollContainerRef = _useDimensionsRef2[0],
|
|
96
|
-
dimensions = _useDimensionsRef2[1],
|
|
97
|
-
node = _useDimensionsRef2[2];
|
|
98
|
-
|
|
99
|
-
_react.default.useEffect(function () {
|
|
100
|
-
var _node$clientHeight, _node$scrollHeight;
|
|
101
|
-
|
|
102
|
-
var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
|
|
103
|
-
var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
|
|
104
|
-
setScrollable(scrollHeight > clientHeight);
|
|
105
|
-
}, [header, dimensions, node, footer, action, items]);
|
|
88
|
+
var _useScrollableContain = (0, _ScrollableContainer.useScrollableContainer)([header, footer, action, items]),
|
|
89
|
+
_useScrollableContain2 = (0, _slicedToArray2.default)(_useScrollableContain, 2),
|
|
90
|
+
scrollContainerRef = _useScrollableContain2[0],
|
|
91
|
+
scrollable = _useScrollableContain2[1];
|
|
106
92
|
|
|
107
93
|
var renderItem = function renderItem(item, index) {
|
|
108
94
|
switch (item.type) {
|
|
@@ -157,8 +143,8 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
|
157
143
|
}
|
|
158
144
|
};
|
|
159
145
|
|
|
160
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
161
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ScrollableContainer, {
|
|
146
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileMenuWrapper, {
|
|
147
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.ScrollableContainer, {
|
|
162
148
|
ref: scrollContainerRef,
|
|
163
149
|
className: scrollable ? 'scrollable' : '',
|
|
164
150
|
children: [!!header && /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderContainer, {
|
|
@@ -199,16 +185,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
|
199
185
|
children: footer.link.label
|
|
200
186
|
})
|
|
201
187
|
})]
|
|
202
|
-
}), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
203
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
|
|
204
|
-
variant: 'secondary',
|
|
205
|
-
size: isSmallScreen ? _types.Size.Medium : _types.Size.Small,
|
|
206
|
-
disabled: action.disabled,
|
|
207
|
-
icon: action.icon,
|
|
208
|
-
onClick: action.action,
|
|
209
|
-
children: action.label
|
|
210
|
-
})
|
|
211
|
-
})]
|
|
188
|
+
}), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileActionContainer.MobileActionContainer, _objectSpread({}, action))]
|
|
212
189
|
});
|
|
213
190
|
};
|
|
214
191
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["HeaderText","styled","div","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","HeaderNote","ParagraphTextStyle","Regular","HeaderContainer","neutral_200","ScrollableContainer","Size","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","React","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n MenuButton,\n MenuGroupFooter,\n MenuGroupHeader,\n MenuNavigationItemTypeGroup,\n MenuNavigationItemTypeItem,\n MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst HeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n\n`;\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\nconst ActionContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\nconst Wrapper = 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\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n header,\n items,\n footer,\n action,\n onSubMenuOpen\n }) => {\n\n const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n const [scrollable, setScrollable] = React.useState(false);\n\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n React.useEffect(() => {\n const clientHeight = node?.clientHeight ?? 0;\n const scrollHeight = node?.scrollHeight ?? 0;\n setScrollable(scrollHeight > clientHeight);\n }, [header, dimensions, node, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>\n {item.items.map((item, index) => renderItem(item, index))}\n </MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return <MenuItem key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight/>}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}/>\n case 'item':\n default:\n return (\n <MenuItem key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n );\n }\n }\n\n return (\n <Wrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {\n !!header &&\n <HeaderContainer>\n <HeaderText>{header.header}</HeaderText>\n {header.note && <HeaderNote>{header.note}</HeaderNote>}\n </HeaderContainer>\n }\n <MenuItemsContainer>\n {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n </MenuItemsContainer>\n </ScrollableContainer>\n {\n items?.some(a => a.pinned) &&\n <PinnedContainer>\n <MenuItemsContainer>\n {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n </MenuItemsContainer>\n </PinnedContainer>\n\n }\n {\n footer &&\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link &&\n <FooterLink>\n <HyperLink variant={'default'}\n id={footer.link.id}\n target={footer.link.target}\n onClick={footer.link.onClick}\n href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n }\n </FooterContainer>\n }\n {\n action &&\n <ActionContainer>\n <Button variant={'secondary'}\n size={isSmallScreen ? Size.Medium : Size.Small}\n disabled={action.disabled}\n icon={action.icon}\n onClick={action.action}>\n {action.label}\n </Button>\n </ActionContainer>\n }\n </Wrapper>\n )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["HeaderText","styled","div","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","HeaderNote","ParagraphTextStyle","Regular","HeaderContainer","neutral_200","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","scrollContainerRef","scrollable","renderItem","item","index","type","label","map","Size","Medium","Small","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling,\n} from '../../styles';\nimport { Size } from '../../types';\nimport { HyperLink } from '../../HyperLink';\nimport { useMediaQuery } from 'react-responsive';\nimport { Button } from '../../Button';\nimport { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { useDimensionsRef } from 'rooks';\nimport { MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\n\nconst HeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst HeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\n const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n const { navigate, isActiveRoute } = useNavigationHelper();\n\n const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight />}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}\n />\n );\n case 'item':\n default:\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}\n />\n );\n }\n };\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <HeaderContainer>\n <HeaderText>{header.header}</HeaderText>\n {header.note && <HeaderNote>{header.note}</HeaderNote>}\n </HeaderContainer>\n )}\n <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </ScrollableContainer>\n {items?.some((a) => a.pinned) && (\n <PinnedContainer>\n <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </PinnedContainer>\n )}\n {footer && (\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link && (\n <FooterLink>\n <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n )}\n </FooterContainer>\n )}\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.cjs"}
|
|
@@ -1,37 +1,40 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
1
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
3
4
|
import _pt from "prop-types";
|
|
4
5
|
|
|
5
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12
|
|
6
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
7
|
+
|
|
8
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
9
|
+
|
|
10
|
+
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) { _defineProperty(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; }
|
|
6
11
|
|
|
7
12
|
import React from 'react';
|
|
8
13
|
import styled from 'styled-components';
|
|
9
|
-
import { BREAKPOINTS, COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ParagraphSStyling, ParagraphTextStyle, ParagraphXSStyling
|
|
14
|
+
import { BREAKPOINTS, COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ParagraphSStyling, ParagraphTextStyle, ParagraphXSStyling } from '../../styles';
|
|
10
15
|
import { Size } from '../../types';
|
|
11
16
|
import { HyperLink } from '../../HyperLink';
|
|
12
17
|
import { useMediaQuery } from 'react-responsive';
|
|
13
|
-
import { Button } from '../../Button';
|
|
14
18
|
import { useNavigationHelper } from '../../common/NavigationHelper';
|
|
15
19
|
import { MenuItem } from '../../MenuItem';
|
|
16
20
|
import { SystemIcons } from '../../icons';
|
|
17
|
-
import {
|
|
21
|
+
import { MobileMenuWrapper, ScrollableContainer } from './CommonStyles';
|
|
22
|
+
import { useScrollableContainer } from '../../common/ScrollableContainer';
|
|
23
|
+
import { MobileActionContainer } from './MobileActionContainer';
|
|
18
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
25
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
26
|
var HeaderText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
|
|
21
27
|
var HeaderNote = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n word-break: break-all;\n ", "\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
|
|
22
28
|
var HeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n display: flex;\n flex-direction: column;\n"])), COLORS.neutral_200);
|
|
23
|
-
var
|
|
24
|
-
var
|
|
25
|
-
var
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var FooterContainer = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n\n ", " {\n padding: 16px;\n }\n"])), COLORS.neutral_200, COLORS.neutral_20, BREAKPOINTS.SMALL);
|
|
33
|
-
var ActionContainer = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n ", " {\n padding: 16px;\n }\n"])), COLORS.neutral_200, BREAKPOINTS.SMALL);
|
|
34
|
-
var Wrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n"])));
|
|
29
|
+
var MenuItemsContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n"])));
|
|
30
|
+
var MenuSectionContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ", ";\n }\n"])), COLORS.neutral_200);
|
|
31
|
+
var MenuSectionHeader = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ", ";\n\n ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
|
|
32
|
+
var MenuSectionList = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n"])));
|
|
33
|
+
var PinnedContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
|
|
34
|
+
var FooterText = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
|
|
35
|
+
var FooterNote = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
|
|
36
|
+
var FooterLink = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n a {\n ", "\n ", " {\n ", "\n }\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
|
|
37
|
+
var FooterContainer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n\n ", " {\n padding: 16px;\n }\n"])), COLORS.neutral_200, COLORS.neutral_20, BREAKPOINTS.SMALL);
|
|
35
38
|
|
|
36
39
|
var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
37
40
|
var header = _ref.header,
|
|
@@ -47,26 +50,10 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
|
47
50
|
navigate = _useNavigationHelper.navigate,
|
|
48
51
|
isActiveRoute = _useNavigationHelper.isActiveRoute;
|
|
49
52
|
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
var _useDimensionsRef = useDimensionsRef({
|
|
56
|
-
updateOnResize: true
|
|
57
|
-
}),
|
|
58
|
-
_useDimensionsRef2 = _slicedToArray(_useDimensionsRef, 3),
|
|
59
|
-
scrollContainerRef = _useDimensionsRef2[0],
|
|
60
|
-
dimensions = _useDimensionsRef2[1],
|
|
61
|
-
node = _useDimensionsRef2[2];
|
|
62
|
-
|
|
63
|
-
React.useEffect(function () {
|
|
64
|
-
var _node$clientHeight, _node$scrollHeight;
|
|
65
|
-
|
|
66
|
-
var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
|
|
67
|
-
var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
|
|
68
|
-
setScrollable(scrollHeight > clientHeight);
|
|
69
|
-
}, [header, dimensions, node, footer, action, items]);
|
|
53
|
+
var _useScrollableContain = useScrollableContainer([header, footer, action, items]),
|
|
54
|
+
_useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
|
|
55
|
+
scrollContainerRef = _useScrollableContain2[0],
|
|
56
|
+
scrollable = _useScrollableContain2[1];
|
|
70
57
|
|
|
71
58
|
var renderItem = function renderItem(item, index) {
|
|
72
59
|
switch (item.type) {
|
|
@@ -121,7 +108,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
|
121
108
|
}
|
|
122
109
|
};
|
|
123
110
|
|
|
124
|
-
return /*#__PURE__*/_jsxs(
|
|
111
|
+
return /*#__PURE__*/_jsxs(MobileMenuWrapper, {
|
|
125
112
|
children: [/*#__PURE__*/_jsxs(ScrollableContainer, {
|
|
126
113
|
ref: scrollContainerRef,
|
|
127
114
|
className: scrollable ? 'scrollable' : '',
|
|
@@ -163,16 +150,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
|
163
150
|
children: footer.link.label
|
|
164
151
|
})
|
|
165
152
|
})]
|
|
166
|
-
}), action && /*#__PURE__*/_jsx(
|
|
167
|
-
children: /*#__PURE__*/_jsx(Button, {
|
|
168
|
-
variant: 'secondary',
|
|
169
|
-
size: isSmallScreen ? Size.Medium : Size.Small,
|
|
170
|
-
disabled: action.disabled,
|
|
171
|
-
icon: action.icon,
|
|
172
|
-
onClick: action.action,
|
|
173
|
-
children: action.label
|
|
174
|
-
})
|
|
175
|
-
})]
|
|
153
|
+
}), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
|
|
176
154
|
});
|
|
177
155
|
};
|
|
178
156
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","scrollBarStyling","Size","HyperLink","useMediaQuery","Button","useNavigationHelper","MenuItem","SystemIcons","useDimensionsRef","HeaderText","div","Bold","neutral_600","SMALL","HeaderNote","Regular","HeaderContainer","neutral_200","ScrollableContainer","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n MenuButton,\n MenuGroupFooter,\n MenuGroupHeader,\n MenuNavigationItemTypeGroup,\n MenuNavigationItemTypeItem,\n MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst HeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n\n`;\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\nconst ActionContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\nconst Wrapper = 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\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n header,\n items,\n footer,\n action,\n onSubMenuOpen\n }) => {\n\n const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n const [scrollable, setScrollable] = React.useState(false);\n\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n React.useEffect(() => {\n const clientHeight = node?.clientHeight ?? 0;\n const scrollHeight = node?.scrollHeight ?? 0;\n setScrollable(scrollHeight > clientHeight);\n }, [header, dimensions, node, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>\n {item.items.map((item, index) => renderItem(item, index))}\n </MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return <MenuItem key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight/>}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}/>\n case 'item':\n default:\n return (\n <MenuItem key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n );\n }\n }\n\n return (\n <Wrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {\n !!header &&\n <HeaderContainer>\n <HeaderText>{header.header}</HeaderText>\n {header.note && <HeaderNote>{header.note}</HeaderNote>}\n </HeaderContainer>\n }\n <MenuItemsContainer>\n {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n </MenuItemsContainer>\n </ScrollableContainer>\n {\n items?.some(a => a.pinned) &&\n <PinnedContainer>\n <MenuItemsContainer>\n {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n </MenuItemsContainer>\n </PinnedContainer>\n\n }\n {\n footer &&\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link &&\n <FooterLink>\n <HyperLink variant={'default'}\n id={footer.link.id}\n target={footer.link.target}\n onClick={footer.link.onClick}\n href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n }\n </FooterContainer>\n }\n {\n action &&\n <ActionContainer>\n <Button variant={'secondary'}\n size={isSmallScreen ? Size.Medium : Size.Small}\n disabled={action.disabled}\n icon={action.icon}\n onClick={action.action}>\n {action.label}\n </Button>\n </ActionContainer>\n }\n </Wrapper>\n )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","Size","HyperLink","useMediaQuery","useNavigationHelper","MenuItem","SystemIcons","MobileMenuWrapper","ScrollableContainer","useScrollableContainer","MobileActionContainer","HeaderText","div","Bold","neutral_600","SMALL","HeaderNote","Regular","HeaderContainer","neutral_200","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","scrollContainerRef","scrollable","renderItem","item","index","type","label","map","Medium","Small","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling,\n} from '../../styles';\nimport { Size } from '../../types';\nimport { HyperLink } from '../../HyperLink';\nimport { useMediaQuery } from 'react-responsive';\nimport { Button } from '../../Button';\nimport { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { useDimensionsRef } from 'rooks';\nimport { MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\n\nconst HeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst HeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\n const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n const { navigate, isActiveRoute } = useNavigationHelper();\n\n const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight />}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}\n />\n );\n case 'item':\n default:\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}\n />\n );\n }\n };\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <HeaderContainer>\n <HeaderText>{header.header}</HeaderText>\n {header.note && <HeaderNote>{header.note}</HeaderNote>}\n </HeaderContainer>\n )}\n <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </ScrollableContainer>\n {items?.some((a) => a.pinned) && (\n <PinnedContainer>\n <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </PinnedContainer>\n )}\n {footer && (\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link && (\n <FooterLink>\n <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n )}\n </FooterContainer>\n )}\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.js"}
|
|
@@ -12,6 +12,7 @@ export interface MenuButton {
|
|
|
12
12
|
icon?: React.ReactNode;
|
|
13
13
|
action: () => void;
|
|
14
14
|
disabled?: boolean;
|
|
15
|
+
isLoading?: boolean;
|
|
15
16
|
}
|
|
16
17
|
export interface MenuGroupFooter {
|
|
17
18
|
header: string;
|
|
@@ -73,7 +74,7 @@ export interface DesktopNavigationMenuProps {
|
|
|
73
74
|
action?: MenuButton;
|
|
74
75
|
reverseRightSideOrder?: boolean;
|
|
75
76
|
}
|
|
76
|
-
export interface MenuNavigationGroup<T =
|
|
77
|
+
export interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {
|
|
77
78
|
label: string;
|
|
78
79
|
note?: string;
|
|
79
80
|
buttons?: MobileMenuButtonTypes[];
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.MobileCustomMenuContent = void 0;
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireDefault(require("react"));
|
|
17
|
+
|
|
18
|
+
var _ScrollableContainer = require("../common/ScrollableContainer");
|
|
19
|
+
|
|
20
|
+
var _CommonStyles = require("../GlobalNavigationBar/mobile/CommonStyles");
|
|
21
|
+
|
|
22
|
+
var _MobileActionContainer = require("../GlobalNavigationBar/mobile/MobileActionContainer");
|
|
23
|
+
|
|
24
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
+
|
|
26
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
27
|
+
|
|
28
|
+
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; }
|
|
29
|
+
|
|
30
|
+
var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
|
|
31
|
+
var action = _ref.action,
|
|
32
|
+
children = _ref.children;
|
|
33
|
+
|
|
34
|
+
var _useScrollableContain = (0, _ScrollableContainer.useScrollableContainer)([children]),
|
|
35
|
+
_useScrollableContain2 = (0, _slicedToArray2.default)(_useScrollableContain, 2),
|
|
36
|
+
scrollContainerRef = _useScrollableContain2[0],
|
|
37
|
+
scrollable = _useScrollableContain2[1];
|
|
38
|
+
|
|
39
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileMenuWrapper, {
|
|
40
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.ScrollableContainer, {
|
|
41
|
+
ref: scrollContainerRef,
|
|
42
|
+
className: scrollable ? 'scrollable' : '',
|
|
43
|
+
children: children
|
|
44
|
+
}), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileActionContainer.MobileActionContainer, _objectSpread({}, action))]
|
|
45
|
+
});
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
exports.MobileCustomMenuContent = MobileCustomMenuContent;
|
|
49
|
+
//# sourceMappingURL=MobileCustomMenuContent.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"names":["MobileCustomMenuContent","action","children","scrollContainerRef","scrollable"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAMO,IAAMA,uBAA8E,GAAG,SAAjFA,uBAAiF,OAA0B;AAAA,MAAvBC,MAAuB,QAAvBA,MAAuB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AACtH,8BAAyC,iDAAuB,CAACA,QAAD,CAAvB,CAAzC;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,UAA3B;;AAEA,sBACE,sBAAC,+BAAD;AAAA,4BACE,qBAAC,iCAAD;AAAqB,MAAA,GAAG,EAAED,kBAA1B;AAAqD,MAAA,SAAS,EAAEC,UAAU,GAAG,YAAH,GAAkB,EAA5F;AAAA,gBACGF;AADH,MADF,EAIGD,MAAM,iBAAI,qBAAC,4CAAD,oBAA2BA,MAA3B,EAJb;AAAA,IADF;AAQD,CAXM","sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton } from '../GlobalNavigationBar';\nimport { MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n action?: MenuButton;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ action, children }) => {\n const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {children}\n </ScrollableContainer>\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n"],"file":"MobileCustomMenuContent.cjs"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
+
import _pt from "prop-types";
|
|
4
|
+
|
|
5
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
6
|
+
|
|
7
|
+
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) { _defineProperty(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; }
|
|
8
|
+
|
|
9
|
+
import React from 'react';
|
|
10
|
+
import { useScrollableContainer } from '../common/ScrollableContainer';
|
|
11
|
+
import { MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';
|
|
12
|
+
import { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
|
+
export var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
|
|
16
|
+
var action = _ref.action,
|
|
17
|
+
children = _ref.children;
|
|
18
|
+
|
|
19
|
+
var _useScrollableContain = useScrollableContainer([children]),
|
|
20
|
+
_useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
|
|
21
|
+
scrollContainerRef = _useScrollableContain2[0],
|
|
22
|
+
scrollable = _useScrollableContain2[1];
|
|
23
|
+
|
|
24
|
+
return /*#__PURE__*/_jsxs(MobileMenuWrapper, {
|
|
25
|
+
children: [/*#__PURE__*/_jsx(ScrollableContainer, {
|
|
26
|
+
ref: scrollContainerRef,
|
|
27
|
+
className: scrollable ? 'scrollable' : '',
|
|
28
|
+
children: children
|
|
29
|
+
}), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=MobileCustomMenuContent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"names":["React","useScrollableContainer","MobileMenuWrapper","ScrollableContainer","MobileActionContainer","MobileCustomMenuContent","action","children","scrollContainerRef","scrollable"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,+BAAvC;AAEA,SAASC,iBAAT,EAA4BC,mBAA5B,QAAuD,4CAAvD;AACA,SAASC,qBAAT,QAAsC,qDAAtC;;;AAMA,OAAO,IAAMC,uBAA8E,GAAG,SAAjFA,uBAAiF,OAA0B;AAAA,MAAvBC,MAAuB,QAAvBA,MAAuB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AACtH,8BAAyCN,sBAAsB,CAAC,CAACM,QAAD,CAAD,CAA/D;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,UAA3B;;AAEA,sBACE,MAAC,iBAAD;AAAA,4BACE,KAAC,mBAAD;AAAqB,MAAA,GAAG,EAAED,kBAA1B;AAAqD,MAAA,SAAS,EAAEC,UAAU,GAAG,YAAH,GAAkB,EAA5F;AAAA,gBACGF;AADH,MADF,EAIGD,MAAM,iBAAI,KAAC,qBAAD,oBAA2BA,MAA3B,EAJb;AAAA,IADF;AAQD,CAXM","sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton } from '../GlobalNavigationBar';\nimport { MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n action?: MenuButton;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ action, children }) => {\n const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {children}\n </ScrollableContainer>\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n"],"file":"MobileCustomMenuContent.js"}
|
|
@@ -23,6 +23,8 @@ var _MobileMenuHeader = _interopRequireDefault(require("../GlobalNavigationBar/m
|
|
|
23
23
|
|
|
24
24
|
var _MobileMenuContent = _interopRequireDefault(require("../GlobalNavigationBar/mobile/MobileMenuContent"));
|
|
25
25
|
|
|
26
|
+
var _MobileCustomMenuContent = require("./MobileCustomMenuContent");
|
|
27
|
+
|
|
26
28
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
29
|
|
|
28
30
|
var _templateObject;
|
|
@@ -38,7 +40,9 @@ var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
|
|
|
38
40
|
header = _ref.header,
|
|
39
41
|
note = _ref.note,
|
|
40
42
|
onMenuClose = _ref.onMenuClose,
|
|
41
|
-
|
|
43
|
+
customContent = _ref.customContent,
|
|
44
|
+
items = _ref.items,
|
|
45
|
+
footerAction = _ref.footerAction;
|
|
42
46
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
|
|
43
47
|
role: "menu",
|
|
44
48
|
"aria-labelledby": "UserMenuButton",
|
|
@@ -46,12 +50,15 @@ var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
|
|
|
46
50
|
onGoBack: onMenuClose,
|
|
47
51
|
label: label,
|
|
48
52
|
onClose: onMenuClose
|
|
49
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileMenuContent.default, {
|
|
53
|
+
}), items && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileMenuContent.default, {
|
|
50
54
|
header: {
|
|
51
55
|
header: header,
|
|
52
56
|
note: note
|
|
53
57
|
},
|
|
54
|
-
items: items
|
|
58
|
+
items: items,
|
|
59
|
+
action: footerAction
|
|
60
|
+
}), customContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileCustomMenuContent.MobileCustomMenuContent, {
|
|
61
|
+
children: customContent
|
|
55
62
|
})]
|
|
56
63
|
});
|
|
57
64
|
};
|
|
@@ -61,7 +68,8 @@ MobileSwitcherMenu.propTypes = {
|
|
|
61
68
|
header: _propTypes.default.string.isRequired,
|
|
62
69
|
note: _propTypes.default.string,
|
|
63
70
|
onMenuClose: _propTypes.default.func.isRequired,
|
|
64
|
-
items: _propTypes.default.array
|
|
71
|
+
items: _propTypes.default.array,
|
|
72
|
+
customContent: _propTypes.default.node
|
|
65
73
|
};
|
|
66
74
|
var _default = MobileSwitcherMenu;
|
|
67
75
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","items"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,qQAEAC,kBAAUC,UAFV,EAUTC,oBAAYC,KAVH,CAAb;;
|
|
1
|
+
{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","customContent","items","footerAction"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,qQAEAC,kBAAUC,UAFV,EAUTC,oBAAYC,KAVH,CAAb;;AAyBA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAqF;AAAA,MAAlFC,KAAkF,QAAlFA,KAAkF;AAAA,MAA3EC,MAA2E,QAA3EA,MAA2E;AAAA,MAAnEC,IAAmE,QAAnEA,IAAmE;AAAA,MAA7DC,WAA6D,QAA7DA,WAA6D;AAAA,MAAhDC,aAAgD,QAAhDA,aAAgD;AAAA,MAAjCC,KAAiC,QAAjCA,KAAiC;AAAA,MAA1BC,YAA0B,QAA1BA,YAA0B;AAC9G,sBACE,sBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,MAAd;AAAqB,uBAAgB,gBAArC;AAAA,4BACE,qBAAC,yBAAD;AAAkB,MAAA,QAAQ,EAAEH,WAA5B;AAAyC,MAAA,KAAK,EAAEH,KAAhD;AAAuD,MAAA,OAAO,EAAEG;AAAhE,MADF,EAEGE,KAAK,iBAAI,qBAAC,0BAAD;AAAmB,MAAA,MAAM,EAAE;AAAEJ,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,IAAI,EAAJA;AAAV,OAA3B;AAA6C,MAAA,KAAK,EAAEG,KAApD;AAA2D,MAAA,MAAM,EAAEC;AAAnE,MAFZ,EAGGF,aAAa,iBAAI,qBAAC,gDAAD;AAAA,gBAA0BA;AAA1B,MAHpB;AAAA,IADF;AAOD,CARD;;;AATEJ,EAAAA,K;AACAC,EAAAA,M;AACAC,EAAAA,I;AACAC,EAAAA,W;AACAE,EAAAA,K;AAEAD,EAAAA,a;;eAaaL,kB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Z_INDEXES } from '../styles';\nimport { MenuButton, MenuNavigationItemTypeItem } from '../GlobalNavigationBar';\nimport MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';\nimport MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';\nimport { MobileCustomMenuContent } from './MobileCustomMenuContent';\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\ninterface Props {\n label: string;\n header: string;\n note?: string;\n onMenuClose: () => void;\n items?: MenuNavigationItemTypeItem[];\n footerAction?: MenuButton;\n customContent?: React.ReactNode;\n}\n\nconst MobileSwitcherMenu = ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => {\n return (\n <Wrapper role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <MobileMenuHeader onGoBack={onMenuClose} label={label} onClose={onMenuClose} />\n {items && <MobileMenuContent header={{ header, note }} items={items} action={footerAction} />}\n {customContent && <MobileCustomMenuContent>{customContent}</MobileCustomMenuContent>}\n </Wrapper>\n );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.cjs"}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { MenuButton, MenuNavigationItemTypeItem } from '../GlobalNavigationBar';
|
|
2
3
|
interface Props {
|
|
3
4
|
label: string;
|
|
4
5
|
header: string;
|
|
5
6
|
note?: string;
|
|
6
7
|
onMenuClose: () => void;
|
|
7
8
|
items?: MenuNavigationItemTypeItem[];
|
|
9
|
+
footerAction?: MenuButton;
|
|
10
|
+
customContent?: React.ReactNode;
|
|
8
11
|
}
|
|
9
|
-
declare const MobileSwitcherMenu: ({ label, header, note, onMenuClose, items }: Props) => JSX.Element;
|
|
12
|
+
declare const MobileSwitcherMenu: ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => JSX.Element;
|
|
10
13
|
export default MobileSwitcherMenu;
|
|
@@ -9,6 +9,7 @@ import { BREAKPOINTS } from '../styles';
|
|
|
9
9
|
import { Z_INDEXES } from '../styles';
|
|
10
10
|
import MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';
|
|
11
11
|
import MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';
|
|
12
|
+
import { MobileCustomMenuContent } from './MobileCustomMenuContent';
|
|
12
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
15
|
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 320px;\n z-index: ", ";\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ", " {\n width: 400px;\n }\n"])), Z_INDEXES.off_canvas, BREAKPOINTS.SMALL);
|
|
@@ -18,7 +19,9 @@ var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
|
|
|
18
19
|
header = _ref.header,
|
|
19
20
|
note = _ref.note,
|
|
20
21
|
onMenuClose = _ref.onMenuClose,
|
|
21
|
-
|
|
22
|
+
customContent = _ref.customContent,
|
|
23
|
+
items = _ref.items,
|
|
24
|
+
footerAction = _ref.footerAction;
|
|
22
25
|
return /*#__PURE__*/_jsxs(Wrapper, {
|
|
23
26
|
role: "menu",
|
|
24
27
|
"aria-labelledby": "UserMenuButton",
|
|
@@ -26,12 +29,15 @@ var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
|
|
|
26
29
|
onGoBack: onMenuClose,
|
|
27
30
|
label: label,
|
|
28
31
|
onClose: onMenuClose
|
|
29
|
-
}), /*#__PURE__*/_jsx(MobileMenuContent, {
|
|
32
|
+
}), items && /*#__PURE__*/_jsx(MobileMenuContent, {
|
|
30
33
|
header: {
|
|
31
34
|
header: header,
|
|
32
35
|
note: note
|
|
33
36
|
},
|
|
34
|
-
items: items
|
|
37
|
+
items: items,
|
|
38
|
+
action: footerAction
|
|
39
|
+
}), customContent && /*#__PURE__*/_jsx(MobileCustomMenuContent, {
|
|
40
|
+
children: customContent
|
|
35
41
|
})]
|
|
36
42
|
});
|
|
37
43
|
};
|
|
@@ -41,7 +47,8 @@ MobileSwitcherMenu.propTypes = {
|
|
|
41
47
|
header: _pt.string.isRequired,
|
|
42
48
|
note: _pt.string,
|
|
43
49
|
onMenuClose: _pt.func.isRequired,
|
|
44
|
-
items: _pt.array
|
|
50
|
+
items: _pt.array,
|
|
51
|
+
customContent: _pt.node
|
|
45
52
|
};
|
|
46
53
|
export default MobileSwitcherMenu;
|
|
47
54
|
//# sourceMappingURL=MobileSwitcherMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["React","styled","BREAKPOINTS","Z_INDEXES","MobileMenuHeader","MobileMenuContent","Wrapper","div","off_canvas","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","items"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,
|
|
1
|
+
{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["React","styled","BREAKPOINTS","Z_INDEXES","MobileMenuHeader","MobileMenuContent","MobileCustomMenuContent","Wrapper","div","off_canvas","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","customContent","items","footerAction"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,QAA4B,WAA5B;AACA,SAASC,SAAT,QAA0B,WAA1B;AAEA,OAAOC,gBAAP,MAA6B,gDAA7B;AACA,OAAOC,iBAAP,MAA8B,iDAA9B;AACA,SAASC,uBAAT,QAAwC,2BAAxC;;;AAEA,IAAMC,OAAO,GAAGN,MAAM,CAACO,GAAV,uPAEAL,SAAS,CAACM,UAFV,EAUTP,WAAW,CAACQ,KAVH,CAAb;;AAyBA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAqF;AAAA,MAAlFC,KAAkF,QAAlFA,KAAkF;AAAA,MAA3EC,MAA2E,QAA3EA,MAA2E;AAAA,MAAnEC,IAAmE,QAAnEA,IAAmE;AAAA,MAA7DC,WAA6D,QAA7DA,WAA6D;AAAA,MAAhDC,aAAgD,QAAhDA,aAAgD;AAAA,MAAjCC,KAAiC,QAAjCA,KAAiC;AAAA,MAA1BC,YAA0B,QAA1BA,YAA0B;AAC9G,sBACE,MAAC,OAAD;AAAS,IAAA,IAAI,EAAC,MAAd;AAAqB,uBAAgB,gBAArC;AAAA,4BACE,KAAC,gBAAD;AAAkB,MAAA,QAAQ,EAAEH,WAA5B;AAAyC,MAAA,KAAK,EAAEH,KAAhD;AAAuD,MAAA,OAAO,EAAEG;AAAhE,MADF,EAEGE,KAAK,iBAAI,KAAC,iBAAD;AAAmB,MAAA,MAAM,EAAE;AAAEJ,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,IAAI,EAAJA;AAAV,OAA3B;AAA6C,MAAA,KAAK,EAAEG,KAApD;AAA2D,MAAA,MAAM,EAAEC;AAAnE,MAFZ,EAGGF,aAAa,iBAAI,KAAC,uBAAD;AAAA,gBAA0BA;AAA1B,MAHpB;AAAA,IADF;AAOD,CARD;;;AATEJ,EAAAA,K;AACAC,EAAAA,M;AACAC,EAAAA,I;AACAC,EAAAA,W;AACAE,EAAAA,K;AAEAD,EAAAA,a;;AAaF,eAAeL,kBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Z_INDEXES } from '../styles';\nimport { MenuButton, MenuNavigationItemTypeItem } from '../GlobalNavigationBar';\nimport MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';\nimport MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';\nimport { MobileCustomMenuContent } from './MobileCustomMenuContent';\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\ninterface Props {\n label: string;\n header: string;\n note?: string;\n onMenuClose: () => void;\n items?: MenuNavigationItemTypeItem[];\n footerAction?: MenuButton;\n customContent?: React.ReactNode;\n}\n\nconst MobileSwitcherMenu = ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => {\n return (\n <Wrapper role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <MobileMenuHeader onGoBack={onMenuClose} label={label} onClose={onMenuClose} />\n {items && <MobileMenuContent header={{ header, note }} items={items} action={footerAction} />}\n {customContent && <MobileCustomMenuContent>{customContent}</MobileCustomMenuContent>}\n </Wrapper>\n );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.useScrollableContainer = void 0;
|
|
9
|
+
|
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
|
+
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
|
|
16
|
+
var _rooks = require("rooks");
|
|
17
|
+
|
|
18
|
+
var useScrollableContainer = function useScrollableContainer(recalculateScrollDeps) {
|
|
19
|
+
var _React$useState = _react.default.useState(false),
|
|
20
|
+
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
21
|
+
scrollable = _React$useState2[0],
|
|
22
|
+
setScrollable = _React$useState2[1];
|
|
23
|
+
|
|
24
|
+
var _useDimensionsRef = (0, _rooks.useDimensionsRef)({
|
|
25
|
+
updateOnResize: true
|
|
26
|
+
}),
|
|
27
|
+
_useDimensionsRef2 = (0, _slicedToArray2.default)(_useDimensionsRef, 3),
|
|
28
|
+
scrollContainerRef = _useDimensionsRef2[0],
|
|
29
|
+
dimensions = _useDimensionsRef2[1],
|
|
30
|
+
node = _useDimensionsRef2[2];
|
|
31
|
+
|
|
32
|
+
_react.default.useEffect(function () {
|
|
33
|
+
var _node$clientHeight, _node$scrollHeight;
|
|
34
|
+
|
|
35
|
+
var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
|
|
36
|
+
var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
|
|
37
|
+
setScrollable(scrollHeight > clientHeight);
|
|
38
|
+
}, [dimensions, node].concat((0, _toConsumableArray2.default)(recalculateScrollDeps)));
|
|
39
|
+
|
|
40
|
+
return [scrollContainerRef, scrollable];
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
exports.useScrollableContainer = useScrollableContainer;
|
|
44
|
+
//# sourceMappingURL=ScrollableContainer.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/common/ScrollableContainer.ts"],"names":["useScrollableContainer","recalculateScrollDeps","React","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,qBAAD,EAAkC;AACtE,wBAAoCC,eAAMC,QAAN,CAAe,KAAf,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,0BAA+C,6BAAiB;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAjB,CAA/C;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,UAA3B;AAAA,MAAuCC,IAAvC;;AAEAP,iBAAMQ,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAMC,YAAY,yBAAGF,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEE,YAAT,mEAAyB,CAA3C;AACA,QAAMC,YAAY,yBAAGH,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEG,YAAT,mEAAyB,CAA3C;AACAP,IAAAA,aAAa,CAACO,YAAY,GAAGD,YAAhB,CAAb;AACD,GAJD,GAIIH,UAJJ,EAIgBC,IAJhB,0CAIyBR,qBAJzB;;AAMA,SAAO,CAACM,kBAAD,EAAqBH,UAArB,CAAP;AACD,CAXM","sourcesContent":["import React from 'react';\nimport { useDimensionsRef } from 'rooks';\n\nexport const useScrollableContainer = (recalculateScrollDeps: any[]) => {\n const [scrollable, setScrollable] = React.useState(false);\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({ updateOnResize: true });\n\n React.useEffect(() => {\n const clientHeight = node?.clientHeight ?? 0;\n const scrollHeight = node?.scrollHeight ?? 0;\n setScrollable(scrollHeight > clientHeight);\n }, [dimensions, node, ...recalculateScrollDeps]);\n\n return [scrollContainerRef, scrollable];\n};\n"],"file":"ScrollableContainer.cjs"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useScrollableContainer: (recalculateScrollDeps: any[]) => (boolean | import("react").LegacyRef<HTMLDivElement> | undefined)[];
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { useDimensionsRef } from 'rooks';
|
|
5
|
+
export var useScrollableContainer = function useScrollableContainer(recalculateScrollDeps) {
|
|
6
|
+
var _React$useState = React.useState(false),
|
|
7
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
8
|
+
scrollable = _React$useState2[0],
|
|
9
|
+
setScrollable = _React$useState2[1];
|
|
10
|
+
|
|
11
|
+
var _useDimensionsRef = useDimensionsRef({
|
|
12
|
+
updateOnResize: true
|
|
13
|
+
}),
|
|
14
|
+
_useDimensionsRef2 = _slicedToArray(_useDimensionsRef, 3),
|
|
15
|
+
scrollContainerRef = _useDimensionsRef2[0],
|
|
16
|
+
dimensions = _useDimensionsRef2[1],
|
|
17
|
+
node = _useDimensionsRef2[2];
|
|
18
|
+
|
|
19
|
+
React.useEffect(function () {
|
|
20
|
+
var _node$clientHeight, _node$scrollHeight;
|
|
21
|
+
|
|
22
|
+
var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
|
|
23
|
+
var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
|
|
24
|
+
setScrollable(scrollHeight > clientHeight);
|
|
25
|
+
}, [dimensions, node].concat(_toConsumableArray(recalculateScrollDeps)));
|
|
26
|
+
return [scrollContainerRef, scrollable];
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=ScrollableContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/common/ScrollableContainer.ts"],"names":["React","useDimensionsRef","useScrollableContainer","recalculateScrollDeps","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,gBAAT,QAAiC,OAAjC;AAEA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,qBAAD,EAAkC;AACtE,wBAAoCH,KAAK,CAACI,QAAN,CAAe,KAAf,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,0BAA+CL,gBAAgB,CAAC;AAAEM,IAAAA,cAAc,EAAE;AAAlB,GAAD,CAA/D;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,UAA3B;AAAA,MAAuCC,IAAvC;;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAMC,YAAY,yBAAGF,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEE,YAAT,mEAAyB,CAA3C;AACA,QAAMC,YAAY,yBAAGH,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEG,YAAT,mEAAyB,CAA3C;AACAP,IAAAA,aAAa,CAACO,YAAY,GAAGD,YAAhB,CAAb;AACD,GAJD,GAIIH,UAJJ,EAIgBC,IAJhB,4BAIyBP,qBAJzB;AAMA,SAAO,CAACK,kBAAD,EAAqBH,UAArB,CAAP;AACD,CAXM","sourcesContent":["import React from 'react';\nimport { useDimensionsRef } from 'rooks';\n\nexport const useScrollableContainer = (recalculateScrollDeps: any[]) => {\n const [scrollable, setScrollable] = React.useState(false);\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({ updateOnResize: true });\n\n React.useEffect(() => {\n const clientHeight = node?.clientHeight ?? 0;\n const scrollHeight = node?.scrollHeight ?? 0;\n setScrollable(scrollHeight > clientHeight);\n }, [dimensions, node, ...recalculateScrollDeps]);\n\n return [scrollContainerRef, scrollable];\n};\n"],"file":"ScrollableContainer.js"}
|