49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
|
|
import Spotlight from '@enact/spotlight';
|
|
import Spottable from '@enact/spotlight/Spottable';
|
|
|
|
import { SpotlightIds } from '../../../../utils/SpotlightIds';
|
|
import css from './ShopNowButton.module.less';
|
|
|
|
const SpottableDiv = Spottable('div');
|
|
|
|
export default function ShopNowButton({ onClick }) {
|
|
const handleSpotlightUp = (e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
// tabIndexV2가 2일 때만 Back 버튼으로 포커스
|
|
// 이 속성은 부모 컴포넌트에서 props로 받아야 하지만, 일단 Back 버튼으로 직접 이동
|
|
Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
|
|
};
|
|
|
|
const handleSpotlightDown = (e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
// tabIndexV2가 2일 때만 CC 버튼으로 내려가기
|
|
Spotlight.focus('live-channel-next-button');
|
|
};
|
|
|
|
const handleSpotlightLeft = (e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
// tabIndexV2가 2일 때만 CC 버튼으로 내려가기
|
|
Spotlight.focus('player-subtitlebutton');
|
|
};
|
|
|
|
return (
|
|
<div className={css.container}>
|
|
<SpottableDiv
|
|
className={css.shopNowButton}
|
|
onClick={onClick}
|
|
spotlightId="below-tab-shop-now-button"
|
|
onSpotlightUp={handleSpotlightUp}
|
|
onSpotlightDown={handleSpotlightDown}
|
|
onSpotlightLeft={handleSpotlightLeft}
|
|
>
|
|
<span className={css.buttonText}>SHOP NOW</span>
|
|
</SpottableDiv>
|
|
</div>
|
|
);
|
|
}
|