카테고리 브랜드 데이터 전달

2024-02-06 18:33:50 +09:00
parent 364cf7ce23
commit a7967fa242
6 changed files with 377 additions and 220 deletions
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
@@ -0,0 +1,126 @@
+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 "./TabItemSub.module.less";
+
+const SpottableComponent = Spottable("div");
+const TabItemBase = ({
+  title,
+  expanded = false,
+  selected = false,
+  index = 0,
+  target,
+  deActivateTab,
+  onClick,
+  lgCatCd,
+  isSubItem,
+  onFocus,
+  onBlur,
+  path,
+  subTitle,
+  ...rest
+}) => {
+  const [focused, setFocused] = useState(false);
+  const itemRef = useRef();
+
+  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]);
+
+  const _onBlur = useCallback(() => {
+    setFocused(false);
+
+    if (onBlur) {
+      onBlur(index);
+    }
+  }, [index]);
+
+  const onKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowRight") {
+        _onClick();
+      }
+    },
+    [deActivateTab]
+  );
+
+  const ImageComponent = useCallback(() => {
+    return (
+      <div className={css.imageLayout}>
+        <span className={classNames(css.outline)} />
+        <img src={path} alt="" />
+      </div>
+    );
+  }, [path]);
+
+  const TextComponent = useCallback(() => {
+    return (
+      <>
+        {expanded && (
+          <Marquee
+            marqueeOn={"focus"}
+            className={classNames(css.text, isSubItem && css.subItem)}
+          >
+            {title}
+          </Marquee>
+        )}
+      </>
+    );
+  }, [title]);
+
+  delete rest.hasChildren;
+  delete rest.getChildren;
+  return (
+    <SpottableComponent
+      ref={itemRef}
+      className={classNames(
+        css.tabItem,
+        !path && focused && css.focused,
+        path && css.path
+
+        // focused && path && css.imageFocus,
+        // selected && css.imageSelect
+      )}
+      onKeyDown={onKeyDown}
+      onFocus={_onFocus}
+      onBlur={_onBlur}
+      onClick={_onClick}
+    >
+      <div className={css.layout}>
+        <div className={classNames(isSubItem && css.subWrap)}>
+          {!path && <span className={css[`category-icon-${lgCatCd}`]} />}
+          {path ? <ImageComponent /> : <TextComponent />}
+        </div>
+      </div>
+    </SpottableComponent>
+  );
+};
+const ItemDecorator = compose(MarqueeController({ marqueeOnFocus: true }));
+const TabItemSub = ItemDecorator(TabItemBase);
+
+export default TabItemSub;