[components, HomePanel, CategoryPanel] TopButton 삭제
Detail Notes : 1. TopButton → TButton TYPES: topButton 대체 2. HomePanel, CategoryPanel의 TopButton 삭제
This commit is contained in:
@@ -1,49 +0,0 @@
|
||||
import React, { memo, useCallback, useState } from "react";
|
||||
|
||||
import Spotlight from "@enact/spotlight";
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
|
||||
import css from "./TopButton.module.less";
|
||||
|
||||
const SpottableComponent = Spottable("button");
|
||||
|
||||
export default memo(function TopButton({
|
||||
className,
|
||||
onTopButtonBlur,
|
||||
onTopButtonClick,
|
||||
onTopButtonFocus,
|
||||
targetId,
|
||||
...rest
|
||||
}) {
|
||||
const [_, setIsFocused] = useState(false);
|
||||
|
||||
const handleBlur = useCallback(() => {
|
||||
setIsFocused(false);
|
||||
onTopButtonBlur && onTopButtonBlur();
|
||||
}, [onTopButtonBlur]);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (targetId) {
|
||||
Spotlight.focus(targetId);
|
||||
}
|
||||
|
||||
onTopButtonClick && onTopButtonClick();
|
||||
}, [onTopButtonClick, targetId]);
|
||||
|
||||
const handleFocus = useCallback(() => {
|
||||
setIsFocused(true);
|
||||
onTopButtonFocus && onTopButtonFocus();
|
||||
}, [onTopButtonFocus]);
|
||||
|
||||
return (
|
||||
<div className={css.container}>
|
||||
<SpottableComponent
|
||||
className={className && className}
|
||||
onBlur={handleBlur}
|
||||
onClick={handleClick}
|
||||
onFocus={handleFocus}
|
||||
{...rest}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -1,21 +0,0 @@
|
||||
@import "../../style/CommonStyle.module.less";
|
||||
@import "../../style/utils.module.less";
|
||||
|
||||
.container {
|
||||
.flex();
|
||||
width: 100%;
|
||||
|
||||
/* normal */
|
||||
button {
|
||||
.size(@w: 120px, @h: 120px);
|
||||
margin: 60px 0;
|
||||
background-image: url("../../../assets/images/btn/btn-top-nor@3x.png");
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
|
||||
/* focuesd */
|
||||
&:focus {
|
||||
background-image: url("../../../assets/images/btn/btn-top-foc@3x.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"main": "TopButton.jsx",
|
||||
"styles": [
|
||||
"TopButton.module.less"
|
||||
]
|
||||
}
|
||||
@@ -12,7 +12,6 @@ import TBody from "../../components/TBody/TBody";
|
||||
import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab";
|
||||
import TDropDown from "../../components/TDropDown/TDropDown";
|
||||
import THeader from "../../components/THeader/THeader";
|
||||
import TopButton from "../../components/TopButton/TopButton";
|
||||
import TPanel from "../../components/TPanel/TPanel";
|
||||
import useScrollTo from "../../hooks/useScrollTo";
|
||||
import { $L } from "../../utils/helperMethods";
|
||||
@@ -160,7 +159,6 @@ export default function CategoryPanel() {
|
||||
)}
|
||||
{tab === 0 && <ShowContents />}
|
||||
{tab === 1 && <ItemContents />}
|
||||
<TopButton onTopButtonClick={handleTopButtonClick} />
|
||||
</div>
|
||||
</TBody>
|
||||
</TPanel>
|
||||
|
||||
@@ -1,25 +1,18 @@
|
||||
import React, {
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import {
|
||||
useDispatch,
|
||||
useSelector,
|
||||
} from 'react-redux';
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import TBody from '../../components/TBody/TBody';
|
||||
import TopButton from '../../components/TopButton/TopButton';
|
||||
import TPanel from '../../components/TPanel/TPanel';
|
||||
import useDebugKey from '../../hooks/useDebugKey';
|
||||
import BestSeller from '../HomePanel/BestSeller/BestSeller';
|
||||
import HomeBannerTemplate1 from '../HomePanel/HomeBanner/HomeBannerTemplate1';
|
||||
import HomeBannerTemplate2 from '../HomePanel/HomeBanner/HomeBannerTemplate2';
|
||||
import HomeBannerTemplate3 from '../HomePanel/HomeBanner/HomeBannerTemplate3';
|
||||
import HomeOnSale from '../HomePanel/HomeOnSale/HomeOnSale';
|
||||
import css from '../HomePanel/HomePanel.module.less';
|
||||
import PopularShow from '../HomePanel/PopularShow/PopularShow';
|
||||
import SubCategory from '../HomePanel/SubCategory/SubCategory';
|
||||
import TBody from "../../components/TBody/TBody";
|
||||
import TPanel from "../../components/TPanel/TPanel";
|
||||
import useDebugKey from "../../hooks/useDebugKey";
|
||||
import BestSeller from "../HomePanel/BestSeller/BestSeller";
|
||||
import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
|
||||
import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
|
||||
import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";
|
||||
import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
|
||||
import css from "../HomePanel/HomePanel.module.less";
|
||||
import PopularShow from "../HomePanel/PopularShow/PopularShow";
|
||||
import SubCategory from "../HomePanel/SubCategory/SubCategory";
|
||||
|
||||
export default function HomePanel() {
|
||||
const dispatch = useDispatch();
|
||||
@@ -57,7 +50,6 @@ export default function HomePanel() {
|
||||
<HomeOnSale />
|
||||
<PopularShow />
|
||||
<BestSeller />
|
||||
<TopButton targetId={"top"} className={css.homeTopButton} />
|
||||
</TBody>
|
||||
</TPanel>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user