From 94e7fb45639dd67759431aa7df5e9db55b8df68e Mon Sep 17 00:00:00 2001 From: "hyunwoo93.cha" Date: Thu, 22 Feb 2024 16:54:29 +0900 Subject: [PATCH] =?UTF-8?q?[TVirtualGridList]=20-=20TVirtualGridList=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B3=80=EA=B2=BD=20-?= =?UTF-8?q?=20tramsform.js=20=EC=82=AD=EC=A0=9C=20-=20renderItem=EC=9D=84?= =?UTF-8?q?=20TVirtualGridList=EC=9D=98=20props=EB=A1=9C=20=EC=A0=84?= =?UTF-8?q?=EB=8B=AC=ED=95=B4=EC=84=9C=20=EC=82=AC=EC=9A=A9=ED=95=A0=20?= =?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TVirtualGridList/TVirtualGridList.jsx | 38 +-------------- .../components/TVirtualGridList/transform.js | 11 ----- .../ItemContents/ItemContents.jsx | 47 ++++++++++++++++++- .../ShowContents/ShowLists/ShowLists.jsx | 38 +++++++++++++-- .../ShowProductContents.jsx | 42 ++++++++++++----- .../FeaturedBestSellerList.jsx | 21 +++++---- .../LiveProductList/LiveProductList.jsx | 19 ++++---- .../UpComing/UpComingList/UpComingList.jsx | 21 +++++---- .../views/HomePanel/BestSeller/BestSeller.jsx | 1 + .../HomePanel/PopularShow/PopularShow.jsx | 1 + .../HomePanel/SubCategory/SubCategory.jsx | 1 + .../OnSaleProductList/OnSaleProductList.jsx | 4 +- .../SearchItemResults/SearchItemResults.jsx | 25 +++++----- .../SearchShowResults/SearchShowResults.jsx | 25 +++++----- .../SearchThemeResults/SearchThemeResults.jsx | 25 +++++----- 15 files changed, 188 insertions(+), 131 deletions(-) delete mode 100644 com.twin.app.shoptime/src/components/TVirtualGridList/transform.js diff --git a/com.twin.app.shoptime/src/components/TVirtualGridList/TVirtualGridList.jsx b/com.twin.app.shoptime/src/components/TVirtualGridList/TVirtualGridList.jsx index 10b7294f..e1cf3706 100644 --- a/com.twin.app.shoptime/src/components/TVirtualGridList/TVirtualGridList.jsx +++ b/com.twin.app.shoptime/src/components/TVirtualGridList/TVirtualGridList.jsx @@ -1,12 +1,10 @@ -import React, { useCallback } from "react"; +import React from "react"; import classNames from "classnames"; import { VirtualGridList } from "@enact/sandstone/VirtualList"; import { scaleH, scaleW } from "../../utils/helperMethods"; -import TItemCard, { TYPES } from "../TItemCard/TItemCard"; -import { itemPropsTransfomers } from "./transform"; import css from "./TVirtualGridList.module.less"; export default function TVirtualGridList({ @@ -17,47 +15,15 @@ export default function TVirtualGridList({ horizontalScrollbar = "hidden", noScrollByWheel = true, scrollMode = "translate", - items, - itemType = TYPES.vertical, itemWidth, itemHeight, spacing, logoDisplay, - itemCard = TItemCard, cbScrollTo, spotlightId, - onClick, + renderItem, ...rest }) { - const renderItem = useCallback( - ({ index, ...rest }) => { - const ItemComponent = itemCard; - const itemData = items[index]; - const transformProps = itemPropsTransfomers["TItemCard"] - ? itemPropsTransfomers["TItemCard"](itemData) - : itemData; - - const _onClick = onClick ? () => onClick(itemData) : null; - - return ( - <> - {itemCard === TItemCard ? ( - - ) : ( - - )} - - ); - }, - [items] - ); - return ( ({ - imageAlt: itemData.prdtId || itemData.showId, - imageSource: - itemData.imgUrl || itemData.thumbnailUrl || itemData.prdtImgUrl, - priceInfo: itemData.priceInfo, - productName: itemData.prdtNm || itemData.showNm, - logo: itemData.patncLogoPath, - productId: itemData.prdtId || itemData.showId, - }), -}; diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx index 1c0458e1..5ae8c923 100644 --- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx +++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx @@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import { pushPanel } from "../../../../actions/panelActions"; +import TItemCard from "../../../../components/TItemCard/TItemCard"; import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList"; import { panel_names } from "../../../../utils/Config"; import NoResultsCategoryItems from "../NoResultsCategory/NoResultsCategoryItems"; @@ -34,6 +35,50 @@ export default function ItemContents() { ); }); + const renderItem = useCallback( + ({ index, ...rest }) => { + const { + catNm, + cntryCd, + imgUrl, + lgCatCd, + offerInfo, + patncLogoPath, + patnrId, + prdtId, + prdtNm, + priceInfo, + rankOrd, + total, + } = itemListDatas[index]; + + const handleItemClick = () => { + dispatch( + pushPanel({ + name: panel_names.DETAIL_PANEL, + panelInfo: { + patnrId, + prdtId, + }, + }) + ); + }; + + return ( + + ); + }, + [itemListDatas] + ); + return ( <>
@@ -41,8 +86,8 @@ export default function ItemContents() { {itemListDatas && itemListDatas.length > 0 && ( state.main.subCategoryData?.categoryShowInfos ); + const renderItem = useCallback( + ({ index, ...rest }) => { + const { + catNm, + dfltThumbnailImgPath, + hstNm, + lgCatCd, + patncLogoPath, + patnrId, + showId, + showNm, + thumbnailUrl, + total, + vtctpYn, + } = showListDatas[index]; + + return ( + + ); + }, + [showListDatas] + ); + return ( {showListDatas && showListDatas.length > 0 && ( { - dispatch( - pushPanel({ - name: panel_names.DETAIL_PANEL, - panelInfo: { - patnrId: showProductContentDatas.patnrId, - prdtId: itemData.prdtId, - }, - }) + const renderItem = useCallback( + ({ index, ...rest }) => { + const { prdtId, prdtNm, imgUrl, priceInfo } = productInfos[index]; + + const handleItemClick = () => { + dispatch( + pushPanel({ + name: panel_names.DETAIL_PANEL, + panelInfo: { + patnrId: showProductContentDatas.patnrId, + prdtId: prdtId, + }, + }) + ); + }; + + return ( + ); }, - [dispatch, showProductContentDatas] + [showProductContentDatas] ); return ( @@ -51,13 +68,12 @@ export default function ShowProductContents() { cbScrollTo={getScrollTo} spotlightId="showProductBox" className={css.grid} - items={productInfos} + itemRenderer={renderItem} dataSize={productInfos.length} itemWidth={342} itemHeight={490} spacing={0} direction="horizontal" - onClick={handleItemClick} /> )} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx index 6091bc18..84bcea6f 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx @@ -27,16 +27,17 @@ export default memo(function FeaturedBestSellerList({ brandBestSellerInfo }) { return (
{brandBestSellerInfo && ( - + <> + // )}
); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.jsx index c6da6c1e..10f86b9c 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.jsx @@ -8,15 +8,16 @@ export default function LiveProductList({ brandProductInfo }) { return (
{brandProductInfo && ( - + <> + // )}
); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx index a2a52dec..330110ff 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx @@ -8,16 +8,17 @@ export default function UpComingList({ brandLiveChannelUpcoming }) { return (
{brandLiveChannelUpcoming && ( - + <> + // )}
); diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index e12bd9bb..73b385f4 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -36,6 +36,7 @@ const BestSeller = () => { className={css.homeBestSeller} direction="horizontal" cbScrollTo={getScrollTo} + noScrollByWheel > {bestSellerDatas && bestSellerDatas.map((item, index) => ( diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx index 1eaceb83..aca563f2 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx @@ -35,6 +35,7 @@ const PopularShow = ({ ...rest }) => { className={css.showList} direction="horizontal" cbScrollTo={getScrollTo} + noScrollByWheel > {topInfos && topInfos.map((item, index) => ( diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx index 417c8721..c08334b1 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -81,6 +81,7 @@ const SubCategory = () => { className={css.home} direction="horizontal" cbScrollTo={getScrollTo} + noScrollByWheel > {categoryItemInfos && categoryItemInfos.map((item, index) => { diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx index 2a207e61..cadd0c9d 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx @@ -45,7 +45,7 @@ export default function OnSaleProductList({ {saleNm && saleProductInfos && ( <> - + /> */} )}
diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemResults.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemResults.jsx index 3cfe7f4a..1b47d9d5 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemResults.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemResults.jsx @@ -27,18 +27,19 @@ export default function SearchItemResults({ itemDatas, itemCount, ...rest }) { return ( {itemDatas && ( - + <> + // )} ); diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowResults.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowResults.jsx index 8abb1f14..6b023c33 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowResults.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowResults.jsx @@ -27,18 +27,19 @@ export default function SearchShowResults({ showDatas, showCount, ...rest }) { return ( {showDatas && ( - + <> + // )} ); diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeResults.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeResults.jsx index 71ac2168..df01062c 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeResults.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeResults.jsx @@ -31,18 +31,19 @@ export default function SearchThemeResults({ return ( {themeDatas && ( - + <> + // )} );