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

[FeaturedBrandsPanel] modify

Browse Source 
Detail Note:

1. add prop order for section components
2. modify effect for topButton display condition
3. add showLodoadingPanel when change catCd (brandAction.js)
This commit is contained in:
younghoon100.park
2024-07-26 10:52:17 +09:00
parent 5eeb365ab9
commit 017b0f0d65
12 changed files with 108 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
com.twin.app.shoptime/src/actions/brandActions.js
View File

@@ -359,6 +359,8 @@ export const getBrandCategoryInfo = (props) => (dispatch, getState) => {
export const getBrandCategoryProductInfo = (props) => (dispatch, getState) => {
const { catCdLv1, catCdLv2, patnrId } = props;
dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }));
const onSuccess = (response) => {
// console.log("getBrandCategoryProductInfo onSuccess ", response.data);
@@ -368,10 +370,13 @@ export const getBrandCategoryProductInfo = (props) => (dispatch, getState) => {
data: response.data.data,
},
});
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
const onFail = (error) => {
console.error("getBrandCategoryProductInfo onFail ", error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
TAxios(

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

@@ -21,6 +21,7 @@ const Container = SpotlightContainerDecorator(
export default memo(function FeaturedBestSeller({
brandBestSellerInfo,
handleItemFocus,
order,
spotlightId,
selectedPatnrId,
}) {
@@ -60,8 +61,9 @@ export default memo(function FeaturedBestSeller({
return (
<Container
className={css.container}
spotlightId={spotlightId}
data-shelf-order={order}
data-wheel-point
spotlightId={spotlightId}
>
<SectionTitle
title={$L(STRING_CONF.BEST_SELLER)}

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

@@ -89,13 +89,6 @@ const findItemByValue = (array, value) => {
return null;
};
// const getOrderByValue = (array, value) => {
// if (array) {
// return array.find((obj) => obj["shptmBrndOptTpCd"] === value)?.expsOrd;
// }
// return null;
// };
const hasTemplateCodeWithValue = (array, value) => {
if (array) {
return array.some(
@@ -139,9 +132,8 @@ const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
const findAndFocusFirstContainer = (timerRef) => {
if (typeof window === "object") {
const containers = document.querySelectorAll("[data-wheel-point]");
const firstContainer = Array.from(containers).find(
(container) => window.getComputedStyle(container)?.order === "1"
);
const firstContainer = Array.from(containers) //
.find((container) => container?.getAttribute("data-shelf-order") === "1");
if (firstContainer) {
Spotlight.focus(firstContainer);
@@ -260,17 +252,18 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
const [selectedCatCdLv2, setSelectedCatCdLv2] = useState(null);
const brandInfoRef = usePrevious(brandInfo || []);
const focusedContainerIdRef = useRef(panelInfo?.focusedContainerId);
const initialFocusTimeoutJob = useRef(new Job((func) => func(), 0));
const alamTimer = useRef(null);
const cbChangePageRef = useRef(null);
const focusedContainerIdRef = useRef(panelInfo?.focusedContainerId);
const orderableFlexContainerRef = useRef(null);
const noneTargetTimer = useRef({
timer: null,
attemptCount: 0,
});
const renderedShelfCountRef = useRef(0);
const fromDeepLink = Object.entries(panelInfo) //
.some(([key, value]) => key === "linkTpCd" && value);
@@ -296,15 +289,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
return [];
}, [brandLayoutInfo]);
// useEffect(() => {
// console.log(
// "%c pyh panelInfo",
// "background: slateblue; color: white ",
// panelInfo,
// Object.keys(panelInfo)?.length
// );
// }, [panelInfo]);
useEffect(() => {
if (panelInfo?.patnrId && !panelInfo?.noResetFlag) {
setDisplayTopButton(false);
@@ -314,15 +298,9 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
useEffect(() => {
if ((fromGNB || fromQuickMenu || fromDeepLink) && panelInfo?.patnrId) {
// console.log(
// "%c pyh initial rendered effect",
// "background: dodgerblue; color: white"
// );
dispatch(getBrandList());
dispatch({ type: types.RESET_BRAND_LAYOUT_INFO });
dispatch(getBrandLayoutInfo({ patnrId: panelInfo?.patnrId }));
// dispatch(getMyUpcomingAlertShow());
setIsInitialRendered(true);
setIsInitialFocusOccurred(false);
}
@@ -330,16 +308,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
useEffect(() => {
if (brandInfo && isInitialRendered) {
// if (cbChangePageRef.current) {
// cbChangePageRef.current(0, false);
// }
if (fromGNB || fromQuickMenu || fromDeepLink) {
// console.log(
// "%c pyh from rendered(gnb, quick, link) effect",
// "background: dodgerblue; color: white"
// );
setSelectedPatncNm(
findItemByValue(brandInfo, panelInfo?.patnrId)?.patncNm
);
@@ -347,11 +316,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
}
if (fromDetail) {
// console.log(
// "%c pyh from rendered(detail) effect",
// "background: dodgerblue; color: white"
// );
setSelectedPatncNm(
findItemByValue(panelInfo?.brandInfo, panelInfo?.patnrId)?.patncNm
);
@@ -380,12 +344,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
}, [fromQuickMenu, panelInfo?.patnrId, selectedPatncNm]);
useEffect(() => {
if (brandLayoutInfo && selectedPatnrId) {
// console.log(
// "%c pyh selected patner effect",
// "background: dodgerblue; color: white"
// );
if (sortedBrandLayoutInfo && selectedPatnrId) {
const dispatchMap = {
[TEMPLATE_CODE_CONF.LIVE_CHANNELS]: getBrandLiveChannelInfo,
[TEMPLATE_CODE_CONF.TODAYS_DEALS]: getBrandTSVInfo,
@@ -399,7 +358,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
Object.entries(dispatchMap) //
.forEach(([templateCode, action]) => {
if (hasTemplateCodeWithValue(brandLayoutInfo, templateCode)) {
if (hasTemplateCodeWithValue(sortedBrandLayoutInfo, templateCode)) {
dispatch(action({ patnrId: selectedPatnrId }));
}
});
@@ -410,66 +369,55 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
setSelectedCatCdLv1(null);
setSelectedCatCdLv2(null);
}
}, [brandInfoRef, brandLayoutInfo, dispatch, selectedPatnrId]);
// useEffect(() => {
// setDisplayTopButton(false);
// if (brandLayoutInfo) {
// if (typeof window === "object" && window.MutationObserver) {
// const observer = new window.MutationObserver((mutations) => {
// mutations.forEach((mutation) => {
// if (mutation.type === "childList") {
// setNumChildren(
// orderableFlexContainerRef.current?.children.length || 0
// );
// }
// });
// });
// if (orderableFlexContainerRef.current) {
// observer.observe(orderableFlexContainerRef.current, {
// childList: true,
// });
// }
// return () => {
// observer.disconnect();
// };
// }
// }
// }, [brandLayoutInfo]);
// useEffect(() => {
// setDisplayTopButton(numChildren > 1);
// }, [numChildren]);
}, [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) {
return setDisplayTopButton(true);
}
}, [
sortedBrandLayoutInfo,
orderableFlexContainerRef.current?.children.length,
]);
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 (isMounted && !isInitialFocusOccurred && isOnTop) {
let targetId;
if (renderedShelfCountRef.current > 1) {
setDisplayTopButton(true);
}
}, [renderedShelfCountRef.current]);
useEffect(() => {
if (
isMounted &&
!isInitialFocusOccurred &&
isOnTop &&
sortedBrandLayoutInfo
) {
let targetId = "spotlightId-" + panelInfo?.patnrId;
if (fromDetail) {
// console.log(
// "%c pyh focus(detail) effect",
// "background: dodgerblue; color: white"
// );
if (panelInfo?.catCdLv1) {
setSelectedCatCdLv1(panelInfo.catCdLv1);
}
@@ -483,13 +431,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
}
targetId = panelInfo?.lastFocusedTargetId;
} else {
// console.log(
// "%c pyh focus effect",
// "background: dodgerblue; color: white"
// );
targetId = "spotlightId-" + panelInfo?.patnrId;
}
initialFocusTimeoutJob.current.start(() => {
@@ -498,22 +439,9 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
setSpotlightDisabled(false);
if (initialFocusTarget) {
// console.log(
// "%c pyh initial focus target",
// "background: dodgerblue; color: white"
// // initialFocusTarget
// );
Spotlight.focus(initialFocusTarget);
} else {
// console.log(
// "%c pyh initial focus target, not exist",
// "background: red; color: white"
// );
findAndFocusFirstContainer(noneTargetTimer);
}
initialFocusTarget
? Spotlight.focus(initialFocusTarget)
: findAndFocusFirstContainer(noneTargetTimer);
setIsInitialFocusOccurred(true);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
@@ -526,6 +454,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
isInitialFocusOccurred,
isOnTop,
panelInfo,
sortedBrandLayoutInfo,
]);
useEffect(() => {
@@ -577,7 +506,6 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
patnrId: selectedPatnrId ?? panelInfo?.patnrId,
})
);
return;
}
@@ -601,6 +529,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
focusedContainerId: focusedContainerIdRef.current,
from: null,
noResetFlag: true,
displayTopButton: renderedShelfCountRef.current > 1 ? true : false,
},
})
);
@@ -681,7 +610,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
const renderPageItem = useCallback(() => {
return (
<>
{sortedBrandLayoutInfo.map((el) => {
{sortedBrandLayoutInfo.map((el, idx) => {
switch (el.shptmBrndOptTpCd) {
case TEMPLATE_CODE_CONF.LIVE_CHANNELS: {
return (
@@ -695,6 +624,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
brandChanInfo={brandChanInfo}
brandChannelCnt={brandChannelCnt}
handleItemFocus={handleItemFocus}
order={idx + 1}
panelInfo={panelInfo}
spotlightId={TEMPLATE_CODE_CONF.LIVE_CHANNELS}
selectedPatnrId={selectedPatnrId}
@@ -715,6 +645,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
<UpComing
brandLiveChannelUpcoming={brandLiveChannelUpcoming}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.UP_COMING}
selectedPatnrId={selectedPatnrId}
/>
@@ -735,6 +666,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
brandTsvInfo={brandTsvInfo}
handleItemFocus={handleItemFocus}
hasQuickMenu={hasQuickMenu}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.TODAYS_DEALS}
/>
)}
@@ -753,6 +685,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
<FeaturedBestSeller
brandBestSellerInfo={brandBestSellerInfo}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.BEST_SELLER}
selectedPatnrId={selectedPatnrId}
/>
@@ -778,6 +711,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.RECOMMENDED_SHOWS}
selectedCatCd={selectedCatCd}
selectedPatncNm={selectedPatncNm}
@@ -804,6 +738,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.FEATURED_CREATORS}
selectedHstNm={selectedHstNm}
selectedPatncNm={selectedPatncNm}
@@ -822,7 +757,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
sortedBrandLayoutInfo,
TEMPLATE_CODE_CONF.SERIES
) &&
shouldRenderComponent(brandSeriesGroupInfo) &&
// shouldRenderComponent(brandSeriesGroupInfo) &&
shouldRenderComponent(brandSeriesInfo) && (
<Series
brandSeriesGroupInfo={brandSeriesGroupInfo}
@@ -830,6 +765,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.SERIES}
selectedPatncNm={selectedPatncNm}
selectedPatnrId={selectedPatnrId}
@@ -855,6 +791,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
brandCategoryProductInfo={brandCategoryProductInfo}
fromGNB={fromGNB}
handleItemFocus={handleItemFocus}
order={idx + 1}
spotlightId={TEMPLATE_CODE_CONF.CATEGORY}
selectedCatCdLv1={selectedCatCdLv1}
selectedCatCdLv2={selectedCatCdLv2}
@@ -881,6 +818,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
fromGNB={fromGNB}
fromQuickMenu={fromQuickMenu}
handleItemFocus={handleItemFocus}
order={idx + 1}
selectedPatnrId={selectedPatnrId}
selectedPatncNm={selectedPatncNm}
spotlightId={TEMPLATE_CODE_CONF.SHOWROOM}
@@ -920,6 +858,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
selectedPatncNm,
selectedPatnrId,
selectedSeriesId,
shouldRenderComponent,
sortedBrandLayoutInfo,
]);
@@ -939,7 +878,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
spotlightId={SpotlightIds.BRAND_VERTICAL_PAGENATOR}
topMargin={TOP_MARGIN}
>
{shouldRenderComponent(brandInfo) && brandInfo.length > 1 && (
{brandInfo && brandInfo.length > 1 && (
<QuickMenu
brandInfo={brandInfo}
fromGNB={fromGNB}
@@ -953,7 +892,7 @@ const FeaturedBrandsPanel = ({ isOnTop, panelInfo, spotlightId }) => {
/>
)}
{shouldRenderComponent(brandTopImgInfo) && (
{brandInfo && brandTopImgInfo && (
<Banner
brandInfo={brandInfo}
brandTopImgInfo={brandTopImgInfo}

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

@@ -25,7 +25,7 @@ export default memo(function FeaturedCategory({
fromGNB,
fromQuickMenu,
handleItemFocus,
// order,
order,
spotlightId,
selectedCatCdLv1,
selectedCatCdLv2,
@@ -34,28 +34,21 @@ export default memo(function FeaturedCategory({
setSelectedCatCdLv1,
setSelectedCatCdLv2,
}) {
// const [copiedBrandCategoryProductInfo, setCopiedBrandCategoryProductInfo] =
// useState([]);
const [
filteredBrandCategoryProductInfo,
setFilteredBrandCategoryProductInfo,
] = useState();
// const [isCopyFinished, setIsCopyFinished] = useState(false);
const [firstChk, setFirstChk] = useState(0);
const orderStyle = useMemo(
const heightStyle = useMemo(
() => ({
// order,
height:
filteredBrandCategoryProductInfo &&
filteredBrandCategoryProductInfo.length === 0
? scaleH(1080) + "px"
: "auto",
}),
[
// order,
filteredBrandCategoryProductInfo,
]
[filteredBrandCategoryProductInfo]
);
const catCdLv1Array = useMemo(
@@ -78,77 +71,6 @@ export default memo(function FeaturedCategory({
[selectedCategoryLv2Infos]
);
// useEffect(() => {
// if (brandCategoryProductInfo) {
// setCopiedBrandCategoryProductInfo([...brandCategoryProductInfo]);
// setIsCopyFinished(true);
// }
// }, [brandCategoryProductInfo]);
// useEffect(() => {
// if (isCopyFinished) {
// if (!selectedCatCdLv1 && !selectedCatCdLv2) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(({ catCd }) => catCdLv1Array.includes(catCd))
// );
// setIsCopyFinished(false);
// return;
// }
// if (
// selectedCatCdLv1 &&
// !selectedCatCdLv2 &&
// selectedCategoryLv2Infos?.length === 0
// ) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(({ catCd }) => catCd === selectedCatCdLv1)
// );
// setIsCopyFinished(false);
// return;
// }
// if (
// selectedCatCdLv1 &&
// !selectedCatCdLv2 &&
// selectedCategoryLv2Infos?.length > 0
// ) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(
// ({ catCd }) =>
// !catCdLv1Array.includes(catCd) &&
// selectedCatCdLv2Array.includes(catCd)
// )
// );
// setIsCopyFinished(false);
// return;
// }
// if (
// selectedCatCdLv1 &&
// selectedCatCdLv2 &&
// selectedCategoryLv2Infos?.length > 0
// ) {
// setFilteredBrandCategoryProductInfo(
// copiedBrandCategoryProductInfo //
// .filter(({ catCd }) => catCd === selectedCatCdLv2)
// );
// setIsCopyFinished(false);
// }
// }
// }, [
// copiedBrandCategoryProductInfo,
// catCdLv1Array,
// isCopyFinished,
// selectedCatCdLv1,
// selectedCatCdLv2,
// selectedCatCdLv2Array,
// selectedPatnrId,
// selectedCategoryLv2Infos?.length,
// ]);
useEffect(() => {
if (!selectedCatCdLv1 && !selectedCatCdLv2) {
setFilteredBrandCategoryProductInfo(
@@ -196,7 +118,15 @@ export default memo(function FeaturedCategory({
.filter(({ catCd }) => catCd === selectedCatCdLv2)
);
}
}, [brandCategoryProductInfo, catCdLv1Array, selectedCatCdLv1, selectedCatCdLv2, selectedCatCdLv2Array, selectedPatnrId, selectedCategoryLv2Infos?.length]);
}, [
brandCategoryProductInfo,
catCdLv1Array,
selectedCatCdLv1,
selectedCatCdLv2,
selectedCatCdLv2Array,
selectedPatnrId,
selectedCategoryLv2Infos?.length,
]);
const _handleItemFocus = useCallback(() => {
if (handleItemFocus) {
@@ -214,7 +144,6 @@ export default memo(function FeaturedCategory({
}
setFirstChk(1);
} else if (firstChk === 1) {
// const c = Spotlight.getCurrent();
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
if (cAriaLabel) {
@@ -230,9 +159,10 @@ export default memo(function FeaturedCategory({
return (
<Container
className={css.container}
style={orderStyle}
spotlightId={spotlightId}
data-shelf-order={order}
data-wheel-point
spotlightId={spotlightId}
style={heightStyle}
>
<SectionTitle
title={$L(STRING_CONF.CATEGORY)}

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

@@ -24,6 +24,7 @@ export default memo(function FeaturedCreators({
fromGNB,
fromQuickMenu,
handleItemFocus,
order,
spotlightId,
selectedHstNm,
selectedPatncNm,
@@ -66,8 +67,9 @@ export default memo(function FeaturedCreators({
return (
<Container
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
spotlightId={spotlightId}
>
<SectionTitle
title={$L(STRING_CONF.FEATURED_CREATORS)}

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

@@ -28,6 +28,7 @@ export default memo(function LiveChannels({
brandChanInfo,
brandChannelCnt,
handleItemFocus,
order,
panelInfo,
selectedPatnrId,
spotlightId,
@@ -41,8 +42,6 @@ export default memo(function LiveChannels({
const intervalRef = useRef(null);
// const orderStyle = useMemo(() => ({ order }), [order]);
useEffect(() => {
dispatch(getMyUpcomingAlertShow());
}, []);
@@ -116,8 +115,9 @@ export default memo(function LiveChannels({
return (
<Container
className={css.container}
spotlightId={spotlightId}
data-shelf-order={order}
data-wheel-point
spotlightId={spotlightId}
>
<SectionTitle
title={$L(STRING_CONF.LIVE_CHANNELS)}

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

@@ -27,7 +27,7 @@ export default memo(function RecommendedShows({
fromGNB,
fromQuickMenu,
handleItemFocus,
// order,
order,
spotlightId,
selectedCatCd,
selectedPatncNm,
@@ -38,8 +38,6 @@ export default memo(function RecommendedShows({
const [firstChk, setFirstChk] = useState(0);
// const orderStyle = useMemo(() => ({ order }), [order]);
const selectedCatNm = useMemo(
() =>
brandRecommendedShowCategoryInfo //
@@ -72,7 +70,6 @@ export default memo(function RecommendedShows({
}
setFirstChk(1);
} else if (firstChk === 1) {
// const c = Spotlight.getCurrent();
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
if (cAriaLabel) {
@@ -91,9 +88,9 @@ export default memo(function RecommendedShows({
return (
<Container
className={css.container}
// style={orderStyle}
spotlightId={spotlightId}
data-shelf-order={order}
data-wheel-point
spotlightId={spotlightId}
>
<SectionTitle
title={$L(STRING_CONF.RECOMMENDED_SHOWS)}
@@ -106,7 +103,6 @@ export default memo(function RecommendedShows({
fromQuickMenu={fromQuickMenu}
handleItemFocus={_handleItemFocus}
selectedCatCd={selectedCatCd}
selectedCatNm={selectedCatNm}
selectedPatncNm={selectedPatncNm}
selectedPatnrId={selectedPatnrId}
setSelectedCatCd={setSelectedCatCd}

3
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsNav/RecommendedShowsNav.jsx
View File

@@ -26,7 +26,6 @@ export default memo(function RecommendedShowsNav({
fromQuickMenu,
handleItemFocus,
selectedCatCd,
selectedCatNm,
selectedPatncNm,
selectedPatnrId,
setSelectedCatCd,
@@ -120,7 +119,7 @@ export default memo(function RecommendedShowsNav({
scrollLeft={scrollLeft}
selectedCatCd={selectedCatCd}
selectedPatnrId={selectedPatnrId}
selectedPatncNm={selectedCatNm}
selectedPatncNm={selectedPatncNm}
setSelectedCatCd={setSelectedCatCd}
/>
)

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

@@ -25,6 +25,7 @@ export default memo(function Series({
fromGNB,
fromQuickMenu,
handleItemFocus,
order,
spotlightId,
selectedPatncNm,
selectedPatnrId,
@@ -77,8 +78,9 @@ export default memo(function Series({
return (
<Container
className={css.container}
spotlightId={spotlightId}
data-shelf-order={order}
data-wheel-point
spotlightId={spotlightId}
>
<SectionTitle title={$L(STRING_CONF.SERIES)} data-title="series" />
<SeriesNav

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

@@ -84,9 +84,9 @@ export default memo(function Showroom({
return (
<Container
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
spotlightId={spotlightId}
>
<SectionTitle title={$L(STRING_CONF.SHOWROOM)} data-title="showroom" />
<ShowroomNav

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

@@ -21,6 +21,7 @@ const Container = SpotlightContainerDecorator(
export default memo(function TodaysDeals({
brandTsvInfo,
handleItemFocus,
order,
spotlightId,
}) {
const [firstChk, setFirstChk] = useState(0);
@@ -56,8 +57,9 @@ export default memo(function TodaysDeals({
return (
<Container
className={css.container}
spotlightId={spotlightId}
data-wheel-point
data-shelf-order={order}
spotlightId={spotlightId}
>
<SectionTitle
title={$L(STRING_CONF.TODAYS_DEALS)}

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

@@ -21,6 +21,7 @@ const STRING_CONF = {
export default memo(function UpComing({
brandLiveChannelUpcoming,
handleItemFocus,
order,
spotlightId,
selectedPatnrId,
}) {
@@ -41,7 +42,6 @@ export default memo(function UpComing({
}
setFirstChk(1);
} else if (firstChk === 1) {
// const c = Spotlight.getCurrent();
if (c) {
let cAriaLabel = c.getAttribute("aria-label");
if (cAriaLabel) {
@@ -57,8 +57,9 @@ export default memo(function UpComing({
return (
<Container
className={css.container}
spotlightId={spotlightId}
data-shelf-order={order}
data-wheel-point
spotlightId={spotlightId}
>
<SectionTitle
title={$L(STRING_CONF.UPCOMING)}