@laerdal/life-react-components 1.11.0-dev.14 → 1.11.0-dev.15
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/Dropdown/DropdownFilter.cjs +18 -18
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
- package/dist/Dropdown/DropdownFilter.js +18 -18
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- 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 +55 -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 +36 -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 +3 -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 +13 -4
- package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
- package/dist/Switcher/MobileSwitcherMenu.d.ts +5 -2
- package/dist/Switcher/MobileSwitcherMenu.js +12 -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
|
@@ -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;AAAyB,MAAA,MAAM,EAAEE,YAAjC;AAAA,gBAAgDF;AAAhD,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 action={footerAction}>{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,16 @@ 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
|
+
action: footerAction,
|
|
41
|
+
children: customContent
|
|
35
42
|
})]
|
|
36
43
|
});
|
|
37
44
|
};
|
|
@@ -41,7 +48,8 @@ MobileSwitcherMenu.propTypes = {
|
|
|
41
48
|
header: _pt.string.isRequired,
|
|
42
49
|
note: _pt.string,
|
|
43
50
|
onMenuClose: _pt.func.isRequired,
|
|
44
|
-
items: _pt.array
|
|
51
|
+
items: _pt.array,
|
|
52
|
+
customContent: _pt.node
|
|
45
53
|
};
|
|
46
54
|
export default MobileSwitcherMenu;
|
|
47
55
|
//# 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;AAAyB,MAAA,MAAM,EAAEE,YAAjC;AAAA,gBAAgDF;AAAhD,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 action={footerAction}>{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"}
|