93 lines
2.8 KiB
JavaScript
93 lines
2.8 KiB
JavaScript
import React, { useCallback, useEffect, useState } from "react";
|
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
|
|
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
|
|
import Spottable from "@enact/spotlight/Spottable";
|
|
|
|
import { pushPanel } from "../../../actions/panelActions";
|
|
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
|
|
import TItemCard, {
|
|
IMAGETYPES,
|
|
TYPES,
|
|
} from "../../../components/TItemCard/TItemCard";
|
|
import TScroller from "../../../components/TScroller/TScroller";
|
|
import useScrollReset from "../../../hooks/useScrollReset";
|
|
import useScrollTo from "../../../hooks/useScrollTo";
|
|
import { panel_names } from "../../../utils/Config";
|
|
import { $L } from "../../../utils/helperMethods";
|
|
import css from "../PopularShow/PopularShow.module.less";
|
|
|
|
const SpottableComponent = Spottable("div");
|
|
const Container = SpotlightContainerDecorator(
|
|
{ enterTo: "last-focused" },
|
|
"div"
|
|
);
|
|
|
|
const PopularShow = ({ ...rest }) => {
|
|
const dispatch = useDispatch();
|
|
const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
|
|
const [drawChk, setDrawChk] = useState(false);
|
|
const { getScrollTo, scrollLeft } = useScrollTo();
|
|
const { handleScrollReset, handleStopScrolling } = useScrollReset(
|
|
scrollLeft,
|
|
true
|
|
);
|
|
useEffect(() => {
|
|
setDrawChk(true);
|
|
}, [topInfos]);
|
|
const handleCardClick = useCallback(() => {
|
|
dispatch(
|
|
pushPanel(
|
|
{
|
|
name: panel_names.TRENDING_NOW_PANEL,
|
|
},
|
|
[dispatch]
|
|
)
|
|
);
|
|
});
|
|
return (
|
|
<Container className={css.popularShow}>
|
|
<SectionTitle className={css.subTitle} title={$L(`POPULAR SHOW`)} />
|
|
<TScroller
|
|
className={css.showList}
|
|
direction="horizontal"
|
|
cbScrollTo={getScrollTo}
|
|
noScrollByWheel
|
|
>
|
|
{topInfos &&
|
|
topInfos.map((item, index) => {
|
|
return (
|
|
<TItemCard
|
|
key={item.showId}
|
|
imageSource={
|
|
item.thumbnailUrl !== item.thumbnailUrl960
|
|
? item.thumbnailUrl960
|
|
: item.thumbnailUrl
|
|
}
|
|
imageAlt={item.showNm}
|
|
productName={item.showNm}
|
|
nonPosition={true}
|
|
type={TYPES.videoShow}
|
|
imgType={
|
|
item.vtctpYn !== "Y"
|
|
? IMAGETYPES.imgHorizontal
|
|
: IMAGETYPES.imgVertical
|
|
}
|
|
onFocus={index === 0 ? handleScrollReset : null}
|
|
onBlur={handleStopScrolling}
|
|
onClick={handleCardClick}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{drawChk && (
|
|
<SpottableComponent className={css.addItem}></SpottableComponent>
|
|
)}
|
|
</TScroller>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default PopularShow;
|