124 lines
2.8 KiB
JavaScript
124 lines
2.8 KiB
JavaScript
import React, { useCallback, useRef, useState } from "react";
|
|
|
|
import classNames from "classnames";
|
|
import compose from "ramda/src/compose";
|
|
|
|
import { Job } from "@enact/core/util";
|
|
import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
|
|
import Spottable from "@enact/spotlight/Spottable";
|
|
|
|
import css from "./TabItem.module.less";
|
|
|
|
const SpottableComponent = Spottable("div");
|
|
const TabItemBase = ({
|
|
icons,
|
|
title,
|
|
expanded = false,
|
|
selected = false,
|
|
index = 0,
|
|
target,
|
|
deActivateTab,
|
|
onClick,
|
|
isSubItem,
|
|
onFocus,
|
|
showSubTab = false,
|
|
temp,
|
|
setTemp,
|
|
...rest
|
|
}) => {
|
|
const [focused, setFocused] = useState(false);
|
|
const [fixed, setFixed] = useState(false);
|
|
const clearPressedJob = useRef(
|
|
new Job((func) => {
|
|
setTimeout(func, 100);
|
|
}, 100)
|
|
);
|
|
const _onClick = useCallback(
|
|
(ev) => {
|
|
clearPressedJob.current.start(() => {
|
|
if (onClick) {
|
|
onClick({ index, target });
|
|
}
|
|
});
|
|
},
|
|
[target, index, onClick]
|
|
);
|
|
|
|
const _onFocus = useCallback(() => {
|
|
setFocused(true);
|
|
|
|
if (onFocus) {
|
|
onFocus(index);
|
|
}
|
|
}, [index, showSubTab, onFocus]);
|
|
|
|
const _onBlur = useCallback(() => {
|
|
setFocused(false);
|
|
}, [showSubTab]);
|
|
|
|
const onKeyDown = useCallback(
|
|
(event) => {
|
|
if (event.key === "ArrowRight") {
|
|
_onClick();
|
|
}
|
|
},
|
|
[deActivateTab]
|
|
);
|
|
|
|
const renderIcon = useCallback(() => {
|
|
if (icons) {
|
|
const Component = icons;
|
|
return (
|
|
<Component
|
|
iconType={
|
|
focused
|
|
? "focused"
|
|
: selected
|
|
? "selected"
|
|
: expanded
|
|
? "expanded"
|
|
: "normal"
|
|
}
|
|
/>
|
|
);
|
|
} else {
|
|
return null;
|
|
}
|
|
}, [focused, expanded, selected, fixed]);
|
|
|
|
delete rest.hasChildren;
|
|
delete rest.getChildren;
|
|
return (
|
|
<SpottableComponent
|
|
className={classNames(
|
|
css.tabItem,
|
|
focused && css.focused,
|
|
showSubTab && fixed && css.fixed,
|
|
!isSubItem && focused && showSubTab && css.arrow,
|
|
selected && css.selected
|
|
)}
|
|
onKeyDown={onKeyDown}
|
|
onFocus={_onFocus}
|
|
onBlur={_onBlur}
|
|
onClick={_onClick}
|
|
>
|
|
<div className={classNames(css.itemWrap, focused && css.focused)}>
|
|
{icons && <div className={css.icon}>{renderIcon()}</div>}
|
|
{expanded && title && (
|
|
<Marquee
|
|
className={classNames(css.text, isSubItem && css.subItem)}
|
|
marqueeOn={"focus"}
|
|
>
|
|
{title}
|
|
</Marquee>
|
|
)}
|
|
{/* <TabItemSub /> */}
|
|
</div>
|
|
</SpottableComponent>
|
|
);
|
|
};
|
|
const ItemDecorator = compose(MarqueeController({ marqueeOnFocus: true }));
|
|
const TabItem = ItemDecorator(TabItemBase);
|
|
|
|
export default TabItem;
|