@dbcdk/react-components 0.0.133 → 0.0.134
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/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs
CHANGED
|
@@ -36,19 +36,24 @@ function ExpandableSidebarItem({
|
|
|
36
36
|
isExpanded
|
|
37
37
|
} = SidebarProvider.useSidebar();
|
|
38
38
|
const [closing, setClosing] = react.useState(false);
|
|
39
|
-
const ready = true;
|
|
40
39
|
const expanded = react.useMemo(() => isExpanded(href), [href, isExpanded]);
|
|
41
40
|
react.useEffect(() => {
|
|
42
41
|
if (defaultExpanded === null) return;
|
|
43
42
|
if (defaultExpanded) expandItem(href);
|
|
44
43
|
else collapseItem(href);
|
|
45
44
|
}, [defaultExpanded, expandItem, collapseItem, href]);
|
|
45
|
+
const commitCollapse = react.useCallback(() => {
|
|
46
|
+
collapseItem(href);
|
|
47
|
+
setClosing(false);
|
|
48
|
+
}, [collapseItem, href]);
|
|
46
49
|
const handleAnimationEnd = react.useCallback(() => {
|
|
47
|
-
if (closing)
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
if (closing) commitCollapse();
|
|
51
|
+
}, [closing, commitCollapse]);
|
|
52
|
+
react.useEffect(() => {
|
|
53
|
+
if (!closing) return;
|
|
54
|
+
const timer = setTimeout(commitCollapse, 250);
|
|
55
|
+
return () => clearTimeout(timer);
|
|
56
|
+
}, [closing, commitCollapse]);
|
|
52
57
|
const toggleAccordion = react.useCallback(
|
|
53
58
|
(e, onlyExpand = false) => {
|
|
54
59
|
e == null ? void 0 : e.preventDefault();
|
|
@@ -123,7 +128,7 @@ function ExpandableSidebarItem({
|
|
|
123
128
|
"div",
|
|
124
129
|
{
|
|
125
130
|
onAnimationEnd: handleAnimationEnd,
|
|
126
|
-
className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" :
|
|
131
|
+
className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : expanded ? "animate--expand" : "visually-hidden"}`,
|
|
127
132
|
children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
|
|
128
133
|
}
|
|
129
134
|
)
|
|
@@ -30,19 +30,24 @@ function ExpandableSidebarItem({
|
|
|
30
30
|
isExpanded
|
|
31
31
|
} = useSidebar();
|
|
32
32
|
const [closing, setClosing] = useState(false);
|
|
33
|
-
const ready = true;
|
|
34
33
|
const expanded = useMemo(() => isExpanded(href), [href, isExpanded]);
|
|
35
34
|
useEffect(() => {
|
|
36
35
|
if (defaultExpanded === null) return;
|
|
37
36
|
if (defaultExpanded) expandItem(href);
|
|
38
37
|
else collapseItem(href);
|
|
39
38
|
}, [defaultExpanded, expandItem, collapseItem, href]);
|
|
39
|
+
const commitCollapse = useCallback(() => {
|
|
40
|
+
collapseItem(href);
|
|
41
|
+
setClosing(false);
|
|
42
|
+
}, [collapseItem, href]);
|
|
40
43
|
const handleAnimationEnd = useCallback(() => {
|
|
41
|
-
if (closing)
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
if (closing) commitCollapse();
|
|
45
|
+
}, [closing, commitCollapse]);
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
if (!closing) return;
|
|
48
|
+
const timer = setTimeout(commitCollapse, 250);
|
|
49
|
+
return () => clearTimeout(timer);
|
|
50
|
+
}, [closing, commitCollapse]);
|
|
46
51
|
const toggleAccordion = useCallback(
|
|
47
52
|
(e, onlyExpand = false) => {
|
|
48
53
|
e == null ? void 0 : e.preventDefault();
|
|
@@ -117,7 +122,7 @@ function ExpandableSidebarItem({
|
|
|
117
122
|
"div",
|
|
118
123
|
{
|
|
119
124
|
onAnimationEnd: handleAnimationEnd,
|
|
120
|
-
className: `${styles.childrenContainer} ${closing ? "animate--collapse" :
|
|
125
|
+
className: `${styles.childrenContainer} ${closing ? "animate--collapse" : expanded ? "animate--expand" : "visually-hidden"}`,
|
|
121
126
|
children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
|
|
122
127
|
}
|
|
123
128
|
)
|