shoptime/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx

import React, {
  useCallback,
  useEffect,
  useMemo,
  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 { getTargetByDirectionFromElement } from "@enact/spotlight/src/target";

import css from "./TabItem.module.less";

const SpottableComponent = Spottable("div");
const TabItemBase = ({
  icons,
  title,
  expanded = false,
  selected = false,
  index = 0,
  target,
  panel,
  deActivateTab,
  className,
  onClick,
  mainExpandend,
  lgCatCd,
  isSubItem,
  subTitle,
  showSubTab = false,
  onFocus,
  path,
  ...rest
}) => {
  const [focused, setFocused] = useState(false);
  // const [subFocused , setSubFocused] = useState(false)
  const [pressed, setPressed] = useState(false);
  const [changeFocused, setChangeFocused] = useState(false);
  const itemRef = useRef();

  const clearPressedJob = useRef(
    new Job((func) => {
      setTimeout(func, 100);
    }, 100)
  );
  const _onClick = useCallback(
    (ev) => {
      setPressed(true);
      setChangeFocused(false);
      clearPressedJob.current.start(() => {
        if (onClick) {
          onClick({ index, target });
        }
      });

      setPressed(true);

      onClick({ index, target });
    },
    [target, index, onClick]
  );

  useEffect(() => {}, [pressed]);

  const _onFocus = useCallback(() => {
    setFocused(true);

    if (onFocus) {
      onFocus(index);
    }
  }, [index]);

  const _onBlur = useCallback(() => {
    setFocused(false);
    setPressed(false);
    setChangeFocused(true);
    clearPressedJob.current.stop();
  }, []);

  const isDivider = useMemo(() => {
    return !title;
  }, []);

  const onKeyDown = useCallback(
    (event) => {
      if (event.key === "ArrowRight") {
        const next = getTargetByDirectionFromElement(
          "right",
          itemRef.current.node
        );
        if (!next && deActivateTab) {
          deActivateTab();
        }
      }
    },
    [deActivateTab]
  );

  const renderIcon = useCallback(() => {
    if (icons) {
      const Component = icons;
      return (
        <Component
          iconType={
            focused
              ? "focused"
              : selected
              ? "selected"
              : expanded
              ? "expanded"
              : "normal"
          }
        />
      );
    } else {
      return null;
    }
  }, [focused, expanded]);

  delete rest.hasChildren;
  delete rest.getChildren;
  return (
    <SpottableComponent
      ref={itemRef}
      className={classNames(
        css.tabItem,
        focused && css.focused,
        isSubItem && css.subDepth,
        pressed && css.arrow,
        !isDivider && selected && css.selected
      )}
      onKeyDown={onKeyDown}
      onFocus={_onFocus}
      onBlur={_onBlur}
      onClick={_onClick}
      spotlightDisabled={isDivider}
    >
      <div className={classNames(css.layout, focused && css.focused)}>
        {icons && <div className={css.icon}>{renderIcon()}</div>}
        <div className={classNames(isSubItem && css.subWrap)}>
          <span className={classNames(css[`category-icon-${lgCatCd}`])} />

          {expanded && (
            <Marquee
              marqueeOn={"focus"}
              className={classNames(css.text, isSubItem && css.subItem)}
            >
              {path ? <img src={path} alt="" /> : title}
            </Marquee>
          )}
        </div>
      </div>
    </SpottableComponent>
  );
};
const ItemDecorator = compose(MarqueeController({ marqueeOnFocus: true }));
const TabItem = ItemDecorator(TabItemBase);

export default TabItem;