optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TabLayout 기획변경으로 기능 추가 및 수정

Browse Source
This commit is contained in:
고동영
2024-03-08 14:41:37 +09:00
parent 945128b127
commit 8652bcc206
4 changed files with 56 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
View File

@@ -40,6 +40,10 @@ const TabItemBase = ({
(ev) => {
clearPressedJob.current.start(() => {
if (onClick) {
if (showSubTab) {
Spotlight.focus("activatedSub");
}
onClick({ index, target });
if (spotlightId) {
setLastFocusId(spotlightId);
@@ -47,7 +51,7 @@ const TabItemBase = ({
}
});
},
[target, index, onClick]
[target, index, onClick, showSubTab]
);
const _onFocus = useCallback(() => {
@@ -99,7 +103,8 @@ const TabItemBase = ({
<SpottableComponent
className={classNames(
css.tabItem,
(focused || opened) && css.focused,
focused && css.focused,
opened && css.opened,
!isSubItem && opened && showSubTab && css.arrow,
mainSelected && css.selected,
selected && css.selected

8
com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less
View File

@@ -21,6 +21,14 @@
z-index: 1;
margin-left: 30px;
position: relative;
}
&.opened {
color: #eee;
width: 402px;
z-index: 1;
margin-left: 30px;
position: relative;
&.arrow {
&::after {

12
com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
View File

@@ -1,10 +1,11 @@
import React, { useCallback, useRef, useState } from "react";
import React, { useCallback, useEffect, 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 Spotlight from "@enact/spotlight";
import Spottable from "@enact/spotlight/Spottable";
import css from "./TabItemSub.module.less";
@@ -22,6 +23,8 @@ const TabItemBase = ({
isSubItem,
onFocus,
path,
spotlightId,
setLastFocusId,
...rest
}) => {
const [focused, setFocused] = useState(false);
@@ -37,6 +40,9 @@ const TabItemBase = ({
clearPressedJob.current.start(() => {
if (onClick) {
onClick({ index, target });
if (spotlightId) {
setLastFocusId(spotlightId);
}
}
});
},
@@ -48,10 +54,11 @@ const TabItemBase = ({
if (onFocus) {
onFocus(index);
}
}, [index]);
}, [index, onFocus]);
const _onBlur = useCallback(() => {
setFocused(false);
setLastFocusId(null);
}, [index]);
const onKeyDown = useCallback(
@@ -111,6 +118,7 @@ const TabItemBase = ({
onFocus={_onFocus}
onBlur={_onBlur}
onClick={_onClick}
spotlightId={spotlightId}
>
<div className={classNames(isSubItem && css.subWrap)}>
{!path && (

40
com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
View File

@@ -128,6 +128,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
const [mainSelectedIndex, setMainSelectedIndex] = useState(-1);
const [secondDepthReduce, setSecondDepthReduce] = useState(false);
const [lastFocusId, setLastFocusId] = useState(null);
const [subTabLastFocusId, setSubTabLastFocusId] = useState(null);
const [tabs, setTabs] = useState([]);
const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB
const panelSwitching = useRef(null);
@@ -216,7 +217,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
result =
data?.shortFeaturedBrands &&
data.shortFeaturedBrands.map((item) => ({
Id: item.patnrId,
id: item.patnrId,
path: item.patncLogoPath,
target: [
{
@@ -230,6 +231,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
result =
data?.mypage &&
data.mypage.map((item) => ({
id: item.menuId,
title: item.menuNm,
target: [
{
@@ -240,7 +242,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
}));
break;
}
//console.log("#data", data);
return result;
};
@@ -279,6 +281,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
title: subItem.title,
path: subItem.path,
target: subItem.target,
spotlightId: `secondDetph-${subItem.id}`,
}));
}
}
@@ -339,9 +342,8 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
break;
}
case ACTIVATED_SUB: {
if (cursorVisible) {
if (!cursorVisible) {
}
break;
}
case EXTRA_AREA: {
if (cursorVisible) {
@@ -401,6 +403,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
dispatch(resetPanels());
deActivateTab();
Spotlight.focus(SpotlightIds.TBODY);
return;
}
if (target) {
@@ -453,7 +456,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
return true;
}
return false;
}, [tabActivated, tabs, mainSelectedIndex]);
}, [tabActivated, mainSelectedIndex]);
const backKeyHandler = useCallback(
(ev) => {
@@ -474,6 +477,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
} else {
Spotlight.focus("spotlight_home");
}
dispatch(gnbOpened(true));
}
if (onTabActivated) {
@@ -481,11 +485,17 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
}
}, [tabActivated, showTab, dispatch]);
useEffect(() => {
if (tabActivated && showSubTab && subTabLastFocusId !== null) {
Spotlight.focus(subTabLastFocusId);
}
}, [tabActivated, mainSelectedIndex, subTabLastFocusId]);
useEffect(() => {
setSecondDepthReduce(false);
if (showSubTab) {
tabs[mainSelectedIndex]?.children.map((item) => {
tabs[mainSelectedIndex]?.children.forEach((item) => {
if (item.path) {
setSecondDepthReduce(true);
}
@@ -514,7 +524,17 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
<TabItem
key={"tabitem" + index}
expanded={false}
selected={mainSelectedIndex === index}
mainSelected={
(panels.length === 0 && index === 3) ||
(Array.isArray(item.target) &&
item.target[0]?.name &&
panels[0]?.name === item.target[0]?.name)
}
selected={
Array.isArray(item.children[0]?.target) &&
item.children[0]?.target[0]?.name &&
panels[0]?.name === item.children[0]?.target?.[0].name
}
index={index}
onClick={handleNavigation}
icons={item.icons}
@@ -550,10 +570,10 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
tabs.map((item, index) => (
<TabItem
{...item}
key={"tabitemExpanded" + index}
onFocus={onFocus}
spotlightId={item.spotlightId}
setLastFocusId={setLastFocusId}
key={"tabitemExpanded" + index}
onClick={handleNavigation}
deActivateTab={deActivateTab}
showSubTab={showSubTab}
@@ -598,8 +618,10 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
<TabItemSub
{...item}
key={"tabitemSubmenu" + index}
spotlightId={item.spotlightId}
setLastFocusId={setSubTabLastFocusId}
onClick={onClickSubItem}
expanded={true}
expanded={mainExpanded}
index={index}
isSubItem={true}
deActivateTab={deActivateTab}