125 lines
3.0 KiB
JavaScript
125 lines
3.0 KiB
JavaScript
import React, {
|
|
useCallback,
|
|
useMemo,
|
|
} from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { Marquee } from '@enact/sandstone/Marquee';
|
|
import SpotlightContainerDecorator
|
|
from '@enact/spotlight/SpotlightContainerDecorator';
|
|
import Spottable from '@enact/spotlight/Spottable';
|
|
|
|
import defaultLogoImg
|
|
from '../../../../assets/images/ic-tab-partners-default@3x.png';
|
|
import { $L } from '../../../utils/helperMethods';
|
|
import css from './THeaderCustom.module.less';
|
|
|
|
const Container = SpotlightContainerDecorator(
|
|
{ enterTo: "last-focused" },
|
|
"div"
|
|
);
|
|
const SpottableComponent = Spottable("button");
|
|
|
|
export default function THeaderCustom({
|
|
prdtId,
|
|
title,
|
|
type,
|
|
themeTitle,
|
|
selectedIndex,
|
|
className,
|
|
onBackButton,
|
|
onSpotlightUp,
|
|
onSpotlightLeft,
|
|
onBackButtonFocus,
|
|
marqueeDisabled = true,
|
|
onClick,
|
|
ariaLabel,
|
|
children,
|
|
kind,
|
|
logoImg,
|
|
patnrId,
|
|
themeData,
|
|
...rest
|
|
}) {
|
|
const convertedTitle = useMemo(() => {
|
|
if (title && typeof title === "string") {
|
|
const cleanedTitle = title.replace(/(\r\n|\n)/g, "");
|
|
return $L(marqueeDisabled ? title : cleanedTitle);
|
|
} else if(type === "theme") {
|
|
return themeData?.productInfos[selectedIndex].prdtNm;
|
|
}
|
|
return "";
|
|
}, [marqueeDisabled, title, selectedIndex, themeData, type]);
|
|
|
|
const _onClick = useCallback(
|
|
(e) => {
|
|
if (onClick) {
|
|
onClick(e);
|
|
}
|
|
},
|
|
[onClick]
|
|
);
|
|
|
|
const _onSpotlightUp = (e) => {
|
|
if (onSpotlightUp) {
|
|
onSpotlightUp(e);
|
|
}
|
|
};
|
|
|
|
const _onSpotlightLeft = (e) => {
|
|
if (onSpotlightLeft) {
|
|
onSpotlightLeft(e);
|
|
}
|
|
};
|
|
|
|
const _onBackButtonFocus = useCallback(() => {
|
|
if(onBackButtonFocus){
|
|
onBackButtonFocus();
|
|
}
|
|
},[onBackButtonFocus])
|
|
|
|
return (
|
|
<Container className={classNames(css.tHeaderCustom, className)} {...rest}>
|
|
{onBackButton && (
|
|
<SpottableComponent
|
|
className={css.button}
|
|
onClick={_onClick}
|
|
onFocus={_onBackButtonFocus}
|
|
spotlightId={"spotlightId_backBtn"}
|
|
onSpotlightUp={_onSpotlightUp}
|
|
onSpotlightLeft={_onSpotlightLeft}
|
|
aria-label="Back"
|
|
role="button"
|
|
/>
|
|
)}
|
|
{kind ? (
|
|
""
|
|
) : (
|
|
<div
|
|
className={css.centerImage}
|
|
style={{
|
|
backgroundImage: `url("${logoImg}")`,
|
|
backgroundSize: patnrId === "1" ? "43px 43px" : "contain",
|
|
}}
|
|
/>
|
|
)}
|
|
{type === "theme" && themeTitle && (
|
|
<span className={css.themeTitle} dangerouslySetInnerHTML={{ __html: `[${themeTitle}]` }} />
|
|
)}
|
|
<Marquee
|
|
marqueeOn="render"
|
|
className={css.title}
|
|
marqueeDisabled={marqueeDisabled}
|
|
aria-label={ariaLabel}
|
|
>
|
|
{(prdtId && patnrId !== "21") && <span className={css.prdtId}>ID : {prdtId}</span>}
|
|
{convertedTitle && (
|
|
<span dangerouslySetInnerHTML={{ __html: convertedTitle }} />
|
|
)}
|
|
</Marquee>
|
|
{children}
|
|
</Container>
|
|
);
|
|
}
|