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

[지라 이슈 없음] displayTopButton 설정 관련 useEffect 수정

Browse Source 
변경 파일:
1. FeaturedBrandsPanel.jsx

변경 내용:
1. MutationObserver 사용
This commit is contained in:
younghoon100.park
2024-08-29 14:34:55 +09:00
parent b8aa0e28d5
commit 845dfc98e8
1 changed files with 36 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -253,6 +253,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
const [_, forceUpdate] = useState({});
const brandInfoRef = usePrevious(brandInfo || []);
const displayTopButtonRef = usePrevious(displayTopButton);
const initialFocusTimeoutJob = useRef(new Job((func) => func(), 0));
@@ -264,7 +265,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);
@@ -373,57 +374,45 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
}, [sortedBrandLayoutInfo, dispatch, selectedPatnrId]);
useEffect(() => {
setDisplayTopButton(false);
if (sortedBrandLayoutInfo) {
const orderableFlexContainer = orderableFlexContainerRef.current;
const length = orderableFlexContainer?.children.length ?? 0;
if (length > 1) {
setDisplayTopButton(true);
}
if (panelInfo?.displayTopButton) {
setDisplayTopButton(true);
return;
}
}, [
sortedBrandLayoutInfo,
orderableFlexContainerRef.current?.children.length,
]);
// useEffect(() => {
// setDisplayTopButton(false);
if (
typeof window === "object" &&
window.MutationObserver &&
sortedBrandLayoutInfo
) {
const observer = new window.MutationObserver((mutations) => {
let shouldDisplayTopButton = false;
// if (panelInfo?.displayTopButton) {
// return setDisplayTopButton(true);
// }
for (let index = mutations.length; index--; ) {
if (mutations[index].type === "childList") {
renderedShelfCountRef.current =
orderableFlexContainerRef.current?.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 (renderedShelfCountRef.current > 1) {
shouldDisplayTopButton = true;
break;
}
}
// if (orderableFlexContainerRef.current) {
// observer.observe(orderableFlexContainerRef.current, {
// childList: true,
// });
// }
if (shouldDisplayTopButton !== displayTopButtonRef.current) {
setDisplayTopButton(shouldDisplayTopButton);
}
});
// return () => observer.disconnect();
// }
// }, [panelInfo?.displayTopButton, sortedBrandLayoutInfo]);
if (orderableFlexContainerRef.current) {
observer.observe(orderableFlexContainerRef.current, {
childList: true,
});
}
// useEffect(() => {
// if (renderedShelfCountRef.current > 1) {
// setDisplayTopButton(true);
// }
// }, [renderedShelfCountRef.current]);
return () => observer.disconnect();
}
}, [panelInfo?.displayTopButton, sortedBrandLayoutInfo]);
useEffect(() => {
if (
@@ -537,7 +526,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
}, [dispatch, panelInfo?.patnrId, selectedCatCdLv1, selectedPatnrId]);
useEffect(() => {
let timer = setTimeout(() => forceUpdate({}), 300);
let timer = setTimeout(() => forceUpdate({}), 500);
return () => clearTimeout(timer);
}, [selectedPatnrId, selectedSeriesId, selectedCatCdLv1, selectedCatCdLv2]);
@@ -552,7 +541,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
focusedContainerId: focusedContainerIdRef.current,
from: null,
noResetFlag: true,
// displayTopButton: renderedShelfCountRef.current > 1 ? true : false,
displayTopButton: displayTopButtonRef.current,
},
})
);