@abcagency/hc-ui-components 1.3.80 → 1.3.82
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.
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default, { useState, useRef, useEffect } from 'react';
|
|
2
3
|
import { Root as Root2, List, Trigger, Content } from '../../../packages/hc-ui-components/node_modules/@radix-ui/react-tabs/dist/index.js';
|
|
3
4
|
import Button from '../buttons/default.js';
|
|
4
5
|
import { useMapList } from '../../../contexts/mapListContext.js';
|
|
@@ -14,13 +15,53 @@ var MapTabs = function MapTabs(_ref) {
|
|
|
14
15
|
mobileTab = _useMapList.mobileTab,
|
|
15
16
|
setMobileTab = _useMapList.setMobileTab,
|
|
16
17
|
containerStyle = _useMapList.containerStyle;
|
|
18
|
+
var _useState = useState(containerStyle),
|
|
19
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
20
|
+
adjustedStyle = _useState2[0],
|
|
21
|
+
setAdjustedStyle = _useState2[1];
|
|
22
|
+
var contentRef = useRef(null);
|
|
23
|
+
|
|
24
|
+
// Listen for changes in the content height
|
|
25
|
+
useEffect(function () {
|
|
26
|
+
if (!contentRef.current) return;
|
|
27
|
+
|
|
28
|
+
// Create a ResizeObserver to detect content size changes
|
|
29
|
+
var resizeObserver = new ResizeObserver(function (entries) {
|
|
30
|
+
var _iterator = _createForOfIteratorHelper(entries),
|
|
31
|
+
_step;
|
|
32
|
+
try {
|
|
33
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
34
|
+
var entry = _step.value;
|
|
35
|
+
// Check if content exceeds container
|
|
36
|
+
var contentHeight = entry.contentRect.height;
|
|
37
|
+
var viewportHeight = window.innerHeight;
|
|
38
|
+
|
|
39
|
+
// If content is taller than 86vh, adjust the container style
|
|
40
|
+
if (contentHeight > viewportHeight * 0.86) {
|
|
41
|
+
setAdjustedStyle(_objectSpread2(_objectSpread2({}, containerStyle), {}, {
|
|
42
|
+
height: 'auto',
|
|
43
|
+
maxHeight: "".concat(Math.min(contentHeight + 100, viewportHeight * 0.95), "px")
|
|
44
|
+
}));
|
|
45
|
+
} else {
|
|
46
|
+
setAdjustedStyle(containerStyle);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
} catch (err) {
|
|
50
|
+
_iterator.e(err);
|
|
51
|
+
} finally {
|
|
52
|
+
_iterator.f();
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
resizeObserver.observe(contentRef.current);
|
|
56
|
+
return function () {
|
|
57
|
+
return resizeObserver.disconnect();
|
|
58
|
+
};
|
|
59
|
+
}, [containerStyle, mobileTab]);
|
|
17
60
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
18
|
-
style:
|
|
19
|
-
className: "\n
|
|
61
|
+
style: adjustedStyle,
|
|
62
|
+
className: "\n hc-relative hc-overflow-auto\n ".concat(className !== null && className !== void 0 ? className : "", "\n ")
|
|
20
63
|
}, /*#__PURE__*/React__default.createElement(Root2, {
|
|
21
|
-
className: "hc-flex hc-flex-col hc-h-[100%] hc-min-h-[100%]"
|
|
22
|
-
//defaultValue="listTab"
|
|
23
|
-
,
|
|
64
|
+
className: "hc-flex hc-flex-col hc-h-[100%] hc-min-h-[100%]",
|
|
24
65
|
value: mobileTab
|
|
25
66
|
}, /*#__PURE__*/React__default.createElement(List, {
|
|
26
67
|
className: "hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary",
|
|
@@ -71,6 +112,7 @@ var MapTabs = function MapTabs(_ref) {
|
|
|
71
112
|
icon: "fluent:search-12-filled",
|
|
72
113
|
size: "hc-size-5"
|
|
73
114
|
}), "Filter")))), /*#__PURE__*/React__default.createElement(Content, {
|
|
115
|
+
ref: mobileTab === "listTab" ? contentRef : null,
|
|
74
116
|
className: "hc-grow hc-bg-white hc-outline-none hc-h-[100%]",
|
|
75
117
|
value: "listTab"
|
|
76
118
|
}, list), showMap && /*#__PURE__*/React__default.createElement(Content, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sources":["../../../../src/components/modules/maps/tabs.js"],"sourcesContent":["import React from 'react';\nimport * as Tabs from '@radix-ui/react-tabs';\
|
|
1
|
+
{"version":3,"file":"tabs.js","sources":["../../../../src/components/modules/maps/tabs.js"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport * as Tabs from '@radix-ui/react-tabs';\nimport Button from '~/components/modules/buttons/default';\nimport { useMapList } from '~/contexts/mapListContext';\n\nconst MapTabs = ({\n\tmap,\n\tlist,\n\tfilter,\n\tclassName,\n\tshowMap\n}) => {\n\tconst tabButtonClasses =\n \"hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white\";\n\tconst { mobileTab, setMobileTab, containerStyle } = useMapList();\n\tconst [adjustedStyle, setAdjustedStyle] = useState(containerStyle);\n\tconst contentRef = useRef(null);\n\n\t// Listen for changes in the content height\n\tuseEffect(() => {\n\t\tif (!contentRef.current) return;\n\n\t\t// Create a ResizeObserver to detect content size changes\n\t\tconst resizeObserver = new ResizeObserver(entries => {\n\t\t\tfor (let entry of entries) {\n\t\t\t\t// Check if content exceeds container\n\t\t\t\tconst contentHeight = entry.contentRect.height;\n\t\t\t\tconst viewportHeight = window.innerHeight;\n\n\t\t\t\t// If content is taller than 86vh, adjust the container style\n\t\t\t\tif (contentHeight > viewportHeight * 0.86) {\n\t\t\t\t\tsetAdjustedStyle({\n\t\t\t\t\t\t...containerStyle,\n\t\t\t\t\t\theight: 'auto',\n\t\t\t\t\t\tmaxHeight: `${Math.min(contentHeight + 100, viewportHeight * 0.95)}px`\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tsetAdjustedStyle(containerStyle);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tresizeObserver.observe(contentRef.current);\n\t\treturn () => resizeObserver.disconnect();\n\t}, [containerStyle, mobileTab]);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={adjustedStyle}\n\t\t\tclassName={`\n hc-relative hc-overflow-auto\n ${className ?? \"\"}\n `}\n\t\t>\n\t\t\t<Tabs.Root\n\t\t\t\tclassName=\"hc-flex hc-flex-col hc-h-[100%] hc-min-h-[100%]\"\n\t\t\t\tvalue={mobileTab}\n\t\t\t>\n\t\t\t\t<Tabs.List\n\t\t\t\t\tclassName=\"hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary\"\n\t\t\t\t\taria-label=\"Review positions\"\n\t\t\t\t>\n\t\t\t\t\t<Tabs.Trigger value=\"listTab\" asChild onClick={() => setMobileTab(\"listTab\")}>\n\t\t\t\t\t\t<Button.Btn variant=\"outline\" isBlock className={tabButtonClasses}>\n\t\t\t\t\t\t\t<Button.Body className=\"hc-justify-center\">\n\t\t\t\t\t\t\t\t<Button.Icon icon=\"mdi:view-list\" size=\"hc-size-5\" />\n List\n\t\t\t\t\t\t\t</Button.Body>\n\t\t\t\t\t\t</Button.Btn>\n\t\t\t\t\t</Tabs.Trigger>\n\t\t\t\t\t{showMap && (\n\t\t\t\t\t\t<Tabs.Trigger value=\"mapTab\" asChild onClick={() => setMobileTab(\"mapTab\")}>\n\t\t\t\t\t\t\t<Button.Btn\n\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tclassName={tabButtonClasses}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Button.Body className=\"hc-justify-center\">\n\t\t\t\t\t\t\t\t\t<Button.Icon icon=\"mdi:map\" size=\"hc-size-5\" />\n Map\n\t\t\t\t\t\t\t\t</Button.Body>\n\t\t\t\t\t\t\t</Button.Btn>\n\t\t\t\t\t\t</Tabs.Trigger>\n\t\t\t\t\t)}\n\t\t\t\t\t<Tabs.Trigger value=\"filterTab\" asChild onClick={() => setMobileTab(\"filterTab\")}>\n\t\t\t\t\t\t<Button.Btn variant=\"outline\" isBlock className={tabButtonClasses}>\n\t\t\t\t\t\t\t<Button.Body className=\"hc-justify-center\">\n\t\t\t\t\t\t\t\t<Button.Icon icon=\"fluent:search-12-filled\" size=\"hc-size-5\" />\n Filter\n\t\t\t\t\t\t\t</Button.Body>\n\t\t\t\t\t\t</Button.Btn>\n\t\t\t\t\t</Tabs.Trigger>\n\t\t\t\t</Tabs.List>\n\t\t\t\t<Tabs.Content\n\t\t\t\t\tref={mobileTab === \"listTab\" ? contentRef : null}\n\t\t\t\t\tclassName=\"hc-grow hc-bg-white hc-outline-none hc-h-[100%]\"\n\t\t\t\t\tvalue=\"listTab\"\n\t\t\t\t>\n\t\t\t\t\t{list}\n\t\t\t\t</Tabs.Content>\n\t\t\t\t{showMap && (\n\t\t\t\t\t<Tabs.Content className=\"hc-grow hc-bg-white hc-outline-none\" value=\"mapTab\">\n\t\t\t\t\t\t{map}\n\t\t\t\t\t</Tabs.Content>\n\t\t\t\t)}\n\t\t\t\t<Tabs.Content className=\"hc-grow hc-bg-white hc-outline-none hc-p-2\" value=\"filterTab\">\n\t\t\t\t\t{filter}\n\t\t\t\t</Tabs.Content>\n\t\t\t</Tabs.Root>\n\t\t</div>\n\t);\n};\n\nexport default MapTabs;"],"names":["MapTabs","_ref","map","list","filter","className","showMap","tabButtonClasses","_useMapList","useMapList","mobileTab","setMobileTab","containerStyle","_useState","useState","_useState2","_slicedToArray","adjustedStyle","setAdjustedStyle","contentRef","useRef","useEffect","current","resizeObserver","ResizeObserver","entries","_iterator","_createForOfIteratorHelper","_step","s","n","done","entry","value","contentHeight","contentRect","height","viewportHeight","window","innerHeight","_objectSpread","maxHeight","concat","Math","min","err","e","f","observe","disconnect","React","createElement","style","Tabs","asChild","onClick","Button","Btn","variant","isBlock","Body","Icon","icon","size","ref"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect, useState, useRef } from 'react';
|
|
2
2
|
import * as Tabs from '@radix-ui/react-tabs';
|
|
3
|
-
|
|
4
3
|
import Button from '~/components/modules/buttons/default';
|
|
5
|
-
|
|
6
4
|
import { useMapList } from '~/contexts/mapListContext';
|
|
7
5
|
|
|
8
6
|
const MapTabs = ({
|
|
@@ -13,19 +11,49 @@ const MapTabs = ({
|
|
|
13
11
|
showMap
|
|
14
12
|
}) => {
|
|
15
13
|
const tabButtonClasses =
|
|
16
|
-
|
|
14
|
+
"hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white";
|
|
17
15
|
const { mobileTab, setMobileTab, containerStyle } = useMapList();
|
|
16
|
+
const [adjustedStyle, setAdjustedStyle] = useState(containerStyle);
|
|
17
|
+
const contentRef = useRef(null);
|
|
18
|
+
|
|
19
|
+
// Listen for changes in the content height
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (!contentRef.current) return;
|
|
22
|
+
|
|
23
|
+
// Create a ResizeObserver to detect content size changes
|
|
24
|
+
const resizeObserver = new ResizeObserver(entries => {
|
|
25
|
+
for (let entry of entries) {
|
|
26
|
+
// Check if content exceeds container
|
|
27
|
+
const contentHeight = entry.contentRect.height;
|
|
28
|
+
const viewportHeight = window.innerHeight;
|
|
29
|
+
|
|
30
|
+
// If content is taller than 86vh, adjust the container style
|
|
31
|
+
if (contentHeight > viewportHeight * 0.86) {
|
|
32
|
+
setAdjustedStyle({
|
|
33
|
+
...containerStyle,
|
|
34
|
+
height: 'auto',
|
|
35
|
+
maxHeight: `${Math.min(contentHeight + 100, viewportHeight * 0.95)}px`
|
|
36
|
+
});
|
|
37
|
+
} else {
|
|
38
|
+
setAdjustedStyle(containerStyle);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
resizeObserver.observe(contentRef.current);
|
|
44
|
+
return () => resizeObserver.disconnect();
|
|
45
|
+
}, [containerStyle, mobileTab]);
|
|
46
|
+
|
|
18
47
|
return (
|
|
19
48
|
<div
|
|
20
|
-
style={
|
|
49
|
+
style={adjustedStyle}
|
|
21
50
|
className={`
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
51
|
+
hc-relative hc-overflow-auto
|
|
52
|
+
${className ?? ""}
|
|
53
|
+
`}
|
|
25
54
|
>
|
|
26
55
|
<Tabs.Root
|
|
27
56
|
className="hc-flex hc-flex-col hc-h-[100%] hc-min-h-[100%]"
|
|
28
|
-
//defaultValue="listTab"
|
|
29
57
|
value={mobileTab}
|
|
30
58
|
>
|
|
31
59
|
<Tabs.List
|
|
@@ -36,7 +64,7 @@ const MapTabs = ({
|
|
|
36
64
|
<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
|
|
37
65
|
<Button.Body className="hc-justify-center">
|
|
38
66
|
<Button.Icon icon="mdi:view-list" size="hc-size-5" />
|
|
39
|
-
|
|
67
|
+
List
|
|
40
68
|
</Button.Body>
|
|
41
69
|
</Button.Btn>
|
|
42
70
|
</Tabs.Trigger>
|
|
@@ -49,7 +77,7 @@ const MapTabs = ({
|
|
|
49
77
|
>
|
|
50
78
|
<Button.Body className="hc-justify-center">
|
|
51
79
|
<Button.Icon icon="mdi:map" size="hc-size-5" />
|
|
52
|
-
|
|
80
|
+
Map
|
|
53
81
|
</Button.Body>
|
|
54
82
|
</Button.Btn>
|
|
55
83
|
</Tabs.Trigger>
|
|
@@ -58,12 +86,16 @@ const MapTabs = ({
|
|
|
58
86
|
<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
|
|
59
87
|
<Button.Body className="hc-justify-center">
|
|
60
88
|
<Button.Icon icon="fluent:search-12-filled" size="hc-size-5" />
|
|
61
|
-
|
|
89
|
+
Filter
|
|
62
90
|
</Button.Body>
|
|
63
91
|
</Button.Btn>
|
|
64
92
|
</Tabs.Trigger>
|
|
65
93
|
</Tabs.List>
|
|
66
|
-
<Tabs.Content
|
|
94
|
+
<Tabs.Content
|
|
95
|
+
ref={mobileTab === "listTab" ? contentRef : null}
|
|
96
|
+
className="hc-grow hc-bg-white hc-outline-none hc-h-[100%]"
|
|
97
|
+
value="listTab"
|
|
98
|
+
>
|
|
67
99
|
{list}
|
|
68
100
|
</Tabs.Content>
|
|
69
101
|
{showMap && (
|
|
@@ -79,4 +111,4 @@ const MapTabs = ({
|
|
|
79
111
|
);
|
|
80
112
|
};
|
|
81
113
|
|
|
82
|
-
export default MapTabs;
|
|
114
|
+
export default MapTabs;
|