69 lines
2.1 KiB
JavaScript
69 lines
2.1 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
|
|
import { useSelector } from "react-redux";
|
|
|
|
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
|
|
import Spottable from "@enact/spotlight/Spottable";
|
|
|
|
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
|
|
import TItemCard from "../../../components/TItemCard/TItemCard";
|
|
import TScroller from "../../../components/TScroller/TScroller";
|
|
import useScrollReset from "../../../hooks/useScrollReset";
|
|
import useScrollTo from "../../../hooks/useScrollTo";
|
|
import { $L } from "../../../utils/helperMethods";
|
|
import css from "./BestSeller.module.less";
|
|
|
|
const SpottableComponent = Spottable("div");
|
|
const Container = SpotlightContainerDecorator(
|
|
{ enterTo: "last-focused", leaveFor: { left: "", right: "" } },
|
|
"div"
|
|
);
|
|
|
|
const BestSeller = () => {
|
|
const bestSellerDatas = useSelector(
|
|
(state) => state.product.bestSellerData.bestSeller
|
|
);
|
|
const [drawChk, setDrawChk] = useState(false);
|
|
const { getScrollTo, scrollLeft } = useScrollTo();
|
|
const { handleScrollReset, handleStopScrolling } = useScrollReset(
|
|
scrollLeft,
|
|
true
|
|
);
|
|
useEffect(() => {
|
|
setDrawChk(true);
|
|
}, [bestSellerDatas]);
|
|
return (
|
|
<Container className={css.bestSellerWrap}>
|
|
<SectionTitle title={$L(`BEST SELLER`)} />
|
|
|
|
<TScroller
|
|
className={css.homeBestSeller}
|
|
direction="horizontal"
|
|
cbScrollTo={getScrollTo}
|
|
noScrollByWheel
|
|
>
|
|
{bestSellerDatas &&
|
|
bestSellerDatas.map((item, index) => (
|
|
<TItemCard
|
|
key={item.prdtId}
|
|
imageAlt={item.prdtId}
|
|
imageSource={item.imgUrl}
|
|
priceInfo={item.priceInfo}
|
|
productName={item.prdtNm}
|
|
isBestSeller={true}
|
|
rank={item.rankOrd}
|
|
onFocus={index === 0 ? handleScrollReset : null}
|
|
onBlur={handleStopScrolling}
|
|
/>
|
|
))}
|
|
|
|
{drawChk && (
|
|
<SpottableComponent className={css.addItem}></SpottableComponent>
|
|
)}
|
|
</TScroller>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default BestSeller;
|