[FeaturedBrandsPanel, TabLayout] issue fixed, SHOPTIME-2830, SHOPTIME-2867

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

@@ -1,21 +1,13 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
-import classNames from 'classnames';
-import compose from 'ramda/src/compose';
+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 { Job } from "@enact/core/util";
+import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
+import Spottable from "@enact/spotlight/Spottable";
 
-import css from './TabItemSub.module.less';
+import css from "./TabItemSub.module.less";
 
 const SpottableComponent = Spottable("div");
 const TabItemBase = ({
@@ -26,7 +18,7 @@ const TabItemBase = ({
   target,
   deActivateTab,
   onClick,
-  lgCatCd,
+  itemId,
   isSubItem,
   onFocus,
   path,
@@ -34,6 +26,7 @@ const TabItemBase = ({
   spotlightId,
   setLastFocusId,
   setSelectedTitle,
+  setSelectedSubItemId,
   label,
   ...rest
 }) => {
@@ -48,11 +41,21 @@ const TabItemBase = ({
     (ev) => {
       clearPressedJob.current.start(() => {
         if (onClick) {
-          onClick({ index, target, title, path });
-          if (path) {
-            setSelectedTitle(path);
-          } else {
-            setSelectedTitle(title);
+          onClick({
+            // index,
+            target,
+            // title,
+            // path,
+            itemId,
+          });
+          // if (path) {
+          //   setSelectedTitle(path);
+          // } else {
+          //   setSelectedTitle(title);
+          // }
+
+          if (itemId) {
+            setSelectedSubItemId(itemId);
           }
 
           if (spotlightId) {
@@ -61,7 +64,17 @@ const TabItemBase = ({
         }
       });
     },
-    [target, index, onClick]
+    [
+      target,
+      // index,
+      onClick,
+      // title,
+      // path,
+      itemId,
+      spotlightId,
+      setSelectedSubItemId,
+      setLastFocusId,
+    ]
   );
 
   const _onFocus = useCallback(() => {
@@ -156,7 +169,7 @@ const TabItemBase = ({
               css.icon,
               focused && css.focused,
               !path && selected && css.selected,
-              css[`category-icon-${lgCatCd}`]
+              css[`category-icon-${itemId}`]
             )}
           />
         )}