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

탭 레이아웃 조건부 렌더링 / 마진값

Browse Source
This commit is contained in:
hyunwoo93.cha
2024-01-24 19:31:49 +09:00
parent 297376537f
commit 7bffd38571
6 changed files with 68 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,38 +4,34 @@ import React, {
useMemo,
useRef,
useState,
} from 'react';
} from "react";
import classNames from 'classnames';
import {
useDispatch,
useSelector,
} from 'react-redux';
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
//아이콘
import { Job } from '@enact/core/util';
import { Job } from "@enact/core/util";
//enact
import Skinnable from '@enact/sandstone/Skinnable';
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import { Cancelable } from '@enact/ui/Cancelable';
import Skinnable from "@enact/sandstone/Skinnable";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import { Cancelable } from "@enact/ui/Cancelable";
//이미지
import shoptimeFullIcon
from '../../../assets/icons/ic-lnb-logo-shoptime@3x.png';
import shopTimeIcon from '../../../assets/icons/ic-lnb-shoptime-symbol@3x.png';
import CartIcon from './iconComponents/CartIcon';
import CategoryIcon from './iconComponents/CategoryIcon';
import FeaturedBrandIcon from './iconComponents/FeaturedBrandIcon';
import HomeIcon from './iconComponents/HomeIcon';
import HotPicksIcon from './iconComponents/HotPicksIcon';
import MyPageIcon from './iconComponents/MyPageIcon';
import OnSaleIcon from './iconComponents/OnSaleIcon';
import SearchIcon from './iconComponents/SearchIcon';
import TrendingNowIcon from './iconComponents/TrendingNowIcon';
import TabItem from './TabItem';
import css from './TabLayout.module.less';
import shoptimeFullIcon from "../../../assets/icons/ic-lnb-logo-shoptime@3x.png";
import shopTimeIcon from "../../../assets/icons/ic-lnb-shoptime-symbol@3x.png";
import CartIcon from "./iconComponents/CartIcon";
import CategoryIcon from "./iconComponents/CategoryIcon";
import FeaturedBrandIcon from "./iconComponents/FeaturedBrandIcon";
import HomeIcon from "./iconComponents/HomeIcon";
import HotPicksIcon from "./iconComponents/HotPicksIcon";
import MyPageIcon from "./iconComponents/MyPageIcon";
import OnSaleIcon from "./iconComponents/OnSaleIcon";
import SearchIcon from "./iconComponents/SearchIcon";
import TrendingNowIcon from "./iconComponents/TrendingNowIcon";
import TabItem from "./TabItem";
import css from "./TabLayout.module.less";
import { panel_names } from "../../utils/Config";
const Container = SpotlightContainerDecorator(
{ enterTo: "default-element" },
@@ -88,6 +84,18 @@ const ACTIVATED_MAIN = 1;
const ACTIVATED_SUB = 2;
const EXTRA_AREA = 3;
const PANELS_HAS_TAB = [
panel_names.CART_PANEL,
panel_names.CATEGORY_PANEL,
panel_names.FEATURED_BRANDS_PANEL,
panel_names.HOME_PANEL,
panel_names.HOT_PICKS_PANEL,
panel_names.MY_PAGE_PANEL,
panel_names.ON_SALE_PANEL,
panel_names.SEARCH_PANEL,
panel_names.TRENDING_NOW_PANEL,
];
export default function TabLayout({ topPanelName, onTabActivated }) {
const dispatch = useDispatch();
const [mainExpanded, setMainExpanded] = useState(false);
@@ -313,11 +321,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
}, [mainExpanded, mainSelectedIndex]);
const showTab = useMemo(() => {
if (!topPanelName) {
if (!topPanelName || PANELS_HAS_TAB.indexOf(topPanelName) >= 0) {
return true;
}
return false;
}, [topPanelName]);
const showSubTab = useMemo(() => {
if (
tabActivated &&
@@ -353,6 +362,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
}, [tabActivated, showTab]);
useEffect(() => {}, [showSubTab, mainSelectedIndex]);
if (!showTab) {
return null;
}