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

[TVirtualGridList]

Browse Source 
- TVirtualGridList 컴포넌트 변경
- tramsform.js 삭제
- renderItem을 TVirtualGridList의 props로 전달해서 사용할 수 있도록 변경
This commit is contained in:
hyunwoo93.cha
2024-02-22 16:54:29 +09:00
parent 6cdc64a9e5
commit 94e7fb4563
15 changed files with 188 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
com.twin.app.shoptime/src/components/TVirtualGridList/TVirtualGridList.jsx
View File

@@ -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 ? (
<TItemCard
{...transformProps}
{...rest}
type={itemType}
onClick={_onClick}
logoDisplay={logoDisplay}
/>
) : (
<ItemComponent {...itemData} {...rest} />
)}
</>
);
},
[items]
);
return (
<VirtualGridList
className={classNames(css.tVirtualGridList, className ? className : null)}

11
com.twin.app.shoptime/src/components/TVirtualGridList/transform.js
View File

@@ -1,11 +0,0 @@
export const itemPropsTransfomers = {
TItemCard: (itemData) => ({
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,
}),
};

47
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx
View File

@@ -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 (
<TItemCard
{...rest}
key={prdtId}
imageAlt={prdtId}
imageSource={imgUrl}
priceInfo={priceInfo}
productName={prdtNm}
onClick={handleItemClick}
/>
);
},
[itemListDatas]
);
return (
<>
<div>
@@ -41,8 +86,8 @@ export default function ItemContents() {
{itemListDatas && itemListDatas.length > 0 && (
<TVirtualGridList
spotlightId="categoryContentsBox"
items={itemListDatas}
dataSize={itemListDatas.length}
renderItem={renderItem}
itemWidth={324}
itemHeight={438}
spacing={18}

38
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.jsx
View File

@@ -1,10 +1,12 @@
import React from "react";
import React, { useCallback } from "react";
import { useSelector } from "react-redux";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import { TYPES } from "../../../../../components/TItemCard/TItemCard";
import TItemCard, {
TYPES,
} from "../../../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
import css from "./ShowLists.module.less";
@@ -18,13 +20,43 @@ export default function ShowLists() {
(state) => state.main.subCategoryData?.categoryShowInfos
);
const renderItem = useCallback(
({ index, ...rest }) => {
const {
catNm,
dfltThumbnailImgPath,
hstNm,
lgCatCd,
patncLogoPath,
patnrId,
showId,
showNm,
thumbnailUrl,
total,
vtctpYn,
} = showListDatas[index];
return (
<TItemCard
{...rest}
type={TYPES.videoShow}
key={showId}
imageAlt={showId}
imageSource={thumbnailUrl}
productName={showNm}
/>
);
},
[showListDatas]
);
return (
<Container className={css.container}>
{showListDatas && showListDatas.length > 0 && (
<TVirtualGridList
spotlightId="categoryContentsBox"
items={showListDatas}
itemType={TYPES.videoShow}
itemRenderer={renderItem}
dataSize={showListDatas.length}
itemWidth={546}
itemHeight={438}

42
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowProductContents/ShowProductContents.jsx
View File

@@ -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 useScrollTo from "../../../../../hooks/useScrollTo";
import { panel_names } from "../../../../../utils/Config";
@@ -29,19 +30,35 @@ export default function ShowProductContents() {
scrollLeft();
}, [productInfos]);
const handleItemClick = useCallback(
(itemData) => {
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 (
<TItemCard
{...rest}
key={prdtId}
imageAlt={prdtId}
imageSource={imgUrl}
priceInfo={priceInfo}
productName={prdtNm}
onClick={handleItemClick}
/>
);
},
[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}
/>
)}
</Container>

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

@@ -27,16 +27,17 @@ export default memo(function FeaturedBestSellerList({ brandBestSellerInfo }) {
return (
<div className={css.container}>
{brandBestSellerInfo && (
<TVirtualGridList
className={css.tVirtualGridList}
dataSize={brandBestSellerInfo.length}
direction="horizontal"
items={brandBestSellerInfo}
itemHeight={438}
itemWidth={324}
onClick={handleClick}
spacing={18}
/>
<></>
// <TVirtualGridList
// className={css.tVirtualGridList}
// dataSize={brandBestSellerInfo.length}
// direction="horizontal"
// items={brandBestSellerInfo}
// itemHeight={438}
// itemWidth={324}
// onClick={handleClick}
// spacing={18}
// />
)}
</div>
);

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

@@ -8,15 +8,16 @@ export default function LiveProductList({ brandProductInfo }) {
return (
<div className={css.container}>
{brandProductInfo && (
<TVirtualGridList
className={css.tVirtualGridList}
dataSize={brandProductInfo.length}
items={brandProductInfo}
itemHeight={236}
itemType={TYPES.horizontal}
itemWidth={660}
spacing={12}
/>
<></>
// <TVirtualGridList
// className={css.tVirtualGridList}
// dataSize={brandProductInfo.length}
// items={brandProductInfo}
// itemHeight={236}
// itemType={TYPES.horizontal}
// itemWidth={660}
// spacing={12}
// />
)}
</div>
);

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

@@ -8,16 +8,17 @@ export default function UpComingList({ brandLiveChannelUpcoming }) {
return (
<div className={css.container}>
{brandLiveChannelUpcoming && (
<TVirtualGridList
className={css.tVirtualGridList}
dataSize={brandLiveChannelUpcoming.length}
direction="horizontal"
items={brandLiveChannelUpcoming}
itemCard={UpComingCard}
itemHeight={344}
itemWidth={480}
spacing={18}
/>
<></>
// <TVirtualGridList
// className={css.tVirtualGridList}
// dataSize={brandLiveChannelUpcoming.length}
// direction="horizontal"
// items={brandLiveChannelUpcoming}
// itemCard={UpComingCard}
// itemHeight={344}
// itemWidth={480}
// spacing={18}
// />
)}
</div>
);

1
com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
View File

@@ -36,6 +36,7 @@ const BestSeller = () => {
className={css.homeBestSeller}
direction="horizontal"
cbScrollTo={getScrollTo}
noScrollByWheel
>
{bestSellerDatas &&
bestSellerDatas.map((item, index) => (

1
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
View File

@@ -35,6 +35,7 @@ const PopularShow = ({ ...rest }) => {
className={css.showList}
direction="horizontal"
cbScrollTo={getScrollTo}
noScrollByWheel
>
{topInfos &&
topInfos.map((item, index) => (

1
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
View File

@@ -81,6 +81,7 @@ const SubCategory = () => {
className={css.home}
direction="horizontal"
cbScrollTo={getScrollTo}
noScrollByWheel
>
{categoryItemInfos &&
categoryItemInfos.map((item, index) => {

4
com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx
View File

@@ -45,7 +45,7 @@ export default function OnSaleProductList({
{saleNm && saleProductInfos && (
<>
<SectionTitle title={saleNm} />
<TVirtualGridList
{/* <TVirtualGridList
cbScrollTo={getScrollTo}
className={css.tVirtualGridList}
dataSize={saleProductInfos.length}
@@ -55,7 +55,7 @@ export default function OnSaleProductList({
itemHeight={570}
itemWidth={324}
spacing={18}
/>
/> */}
</>
)}
</div>

25
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemResults.jsx
View File

@@ -27,18 +27,19 @@ export default function SearchItemResults({ itemDatas, itemCount, ...rest }) {
return (
<Container className={css.container}>
{itemDatas && (
<TVirtualGridList
spotlightId="searchResultsItemBox"
cbScrollTo={getScrollTo}
className={css.grid}
items={itemDatas}
dataSize={itemDatas.length}
direction="horizontal"
itemCard={SearchItemCard}
itemWidth={561}
itemHeight={150}
spacing={30}
/>
<></>
// <TVirtualGridList
// spotlightId="searchResultsItemBox"
// cbScrollTo={getScrollTo}
// className={css.grid}
// items={itemDatas}
// dataSize={itemDatas.length}
// direction="horizontal"
// itemCard={SearchItemCard}
// itemWidth={561}
// itemHeight={150}
// spacing={30}
// />
)}
</Container>
);

25
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowResults.jsx
View File

@@ -27,18 +27,19 @@ export default function SearchShowResults({ showDatas, showCount, ...rest }) {
return (
<Container className={css.container}>
{showDatas && (
<TVirtualGridList
spotlightId="searchResultsShowBox"
className={css.grid}
cbScrollTo={getScrollTo}
items={showDatas}
dataSize={showDatas.length}
direction="horizontal"
itemCard={SearchShowCard}
itemWidth={344}
itemHeight={281}
spacing={0}
/>
<></>
// <TVirtualGridList
// spotlightId="searchResultsShowBox"
// className={css.grid}
// cbScrollTo={getScrollTo}
// items={showDatas}
// dataSize={showDatas.length}
// direction="horizontal"
// itemCard={SearchShowCard}
// itemWidth={344}
// itemHeight={281}
// spacing={0}
// />
)}
</Container>
);

25
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeResults.jsx
View File

@@ -31,18 +31,19 @@ export default function SearchThemeResults({
return (
<Container className={css.container}>
{themeDatas && (
<TVirtualGridList
spotlightId="searchResultsThemeBox"
className={css.grid}
items={themeDatas}
cbScrollTo={getScrollTo}
dataSize={themeDatas.length}
direction="horizontal"
itemCard={SearchThemeCard}
itemWidth={560}
itemHeight={130}
spacing={30}
/>
<></>
// <TVirtualGridList
// spotlightId="searchResultsThemeBox"
// className={css.grid}
// items={themeDatas}
// cbScrollTo={getScrollTo}
// dataSize={themeDatas.length}
// direction="horizontal"
// itemCard={SearchThemeCard}
// itemWidth={560}
// itemHeight={130}
// spacing={30}
// />
)}
</Container>
);