optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FeaturedBrandsPanel] modify, displayTopButton condition

Browse Source
This commit is contained in:
younghoon100.park
2024-07-29 15:54:53 +09:00
parent 63c6370565
commit 08ae246e37
1 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
View File

@@ -263,7 +263,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
timer: null,
attemptCount: 0,
});
const renderedShelfCountRef = useRef(0);
// const renderedShelfCountRef = useRef(0);
const fromDeepLink = Object.entries(panelInfo) //
.some(([key, value]) => key === "linkTpCd" && value);
@@ -374,39 +374,55 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
useEffect(() => {
setDisplayTopButton(false);
if (panelInfo?.displayTopButton) {
return setDisplayTopButton(true);
}
if (sortedBrandLayoutInfo) {
const orderableFlexContainer = orderableFlexContainerRef.current;
const length = orderableFlexContainer?.children.length ?? 0;
if (
sortedBrandLayoutInfo &&
typeof window === "object" &&
window.MutationObserver
) {
const observer = new window.MutationObserver((mutations) => {
for (let index = mutations.length; index--; ) {
if (mutations[index].type === "childList") {
renderedShelfCountRef.current =
orderableFlexContainerRef.current?.children.length || 0;
}
}
});
if (orderableFlexContainerRef.current) {
observer.observe(orderableFlexContainerRef.current, {
childList: true,
});
if (length > 1) {
setDisplayTopButton(true);
}
return () => observer.disconnect();
}
}, [panelInfo?.displayTopButton, sortedBrandLayoutInfo]);
}, [
sortedBrandLayoutInfo,
orderableFlexContainerRef.current?.children.length,
]);
useEffect(() => {
if (renderedShelfCountRef.current > 1) {
setDisplayTopButton(true);
}
}, [renderedShelfCountRef.current]);
// useEffect(() => {
// setDisplayTopButton(false);
// if (panelInfo?.displayTopButton) {
// return setDisplayTopButton(true);
// }
// if (
// sortedBrandLayoutInfo &&
// typeof window === "object" &&
// window.MutationObserver
// ) {
// const observer = new window.MutationObserver((mutations) => {
// for (let index = mutations.length; index--; ) {
// if (mutations[index].type === "childList") {
// renderedShelfCountRef.current =
// orderableFlexContainerRef.current?.children.length || 0;
// }
// }
// });
// if (orderableFlexContainerRef.current) {
// observer.observe(orderableFlexContainerRef.current, {
// childList: true,
// });
// }
// return () => observer.disconnect();
// }
// }, [panelInfo?.displayTopButton, sortedBrandLayoutInfo]);
// useEffect(() => {
// if (renderedShelfCountRef.current > 1) {
// setDisplayTopButton(true);
// }
// }, [renderedShelfCountRef.current]);
useEffect(() => {
if (
@@ -529,7 +545,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
focusedContainerId: focusedContainerIdRef.current,
from: null,
noResetFlag: true,
displayTopButton: renderedShelfCountRef.current > 1 ? true : false,
// displayTopButton: renderedShelfCountRef.current > 1 ? true : false,
},
})
);