[CategoryPanel] SpotlightIds 전역 변수화
This commit is contained in:
@@ -1,4 +1,8 @@
|
||||
export const SpotlightIds = {
|
||||
TBODY: "tbody",
|
||||
TITEM_CARD: "tItemCard",
|
||||
|
||||
// categoryPanel
|
||||
CATEGORY_CONTENTS_BOX: "categoryContentsBox",
|
||||
SHOW_PRODUCTS_BOX: "showProductsBox",
|
||||
};
|
||||
|
||||
@@ -8,6 +8,7 @@ import { pushPanel } from "../../../../actions/panelActions";
|
||||
import TItemCard from "../../../../components/TItemCard/TItemCard";
|
||||
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
|
||||
import { panel_names } from "../../../../utils/Config";
|
||||
import { SpotlightIds } from "../../../../utils/SpotlightIds";
|
||||
import NoResultsCategoryItems from "../NoResultsCategory/NoResultsCategoryItems";
|
||||
import css from "./ItemContents.module.less";
|
||||
|
||||
@@ -85,7 +86,7 @@ export default function ItemContents() {
|
||||
<Container className={css.container}>
|
||||
{itemListDatas && itemListDatas.length > 0 && (
|
||||
<TVirtualGridList
|
||||
spotlightId="categoryContentsBox"
|
||||
spotlightId={SpotlightIds.CATEGORY_CONTENTS_BOX}
|
||||
dataSize={itemListDatas.length}
|
||||
renderItem={renderItem}
|
||||
itemWidth={324}
|
||||
|
||||
@@ -8,6 +8,7 @@ import TItemCard, {
|
||||
TYPES,
|
||||
} from "../../../../../components/TItemCard/TItemCard";
|
||||
import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
|
||||
import { SpotlightIds } from "../../../../../utils/SpotlightIds";
|
||||
import css from "./ShowLists.module.less";
|
||||
|
||||
const Container = SpotlightContainerDecorator(
|
||||
@@ -54,7 +55,7 @@ export default function ShowLists() {
|
||||
<Container className={css.container}>
|
||||
{showListDatas && showListDatas.length > 0 && (
|
||||
<TVirtualGridList
|
||||
spotlightId="categoryContentsBox"
|
||||
spotlightId={SpotlightIds.CATEGORY_CONTENTS_BOX}
|
||||
itemType={TYPES.videoShow}
|
||||
itemRenderer={renderItem}
|
||||
dataSize={showListDatas.length}
|
||||
|
||||
@@ -9,6 +9,7 @@ import TItemCard from "../../../../../components/TItemCard/TItemCard";
|
||||
import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
|
||||
import useScrollTo from "../../../../../hooks/useScrollTo";
|
||||
import { panel_names } from "../../../../../utils/Config";
|
||||
import { SpotlightIds } from "../../../../../utils/SpotlightIds";
|
||||
import css from "./ShowProductContents.module.less";
|
||||
|
||||
const Container = SpotlightContainerDecorator(
|
||||
@@ -66,7 +67,7 @@ export default function ShowProductContents() {
|
||||
{productInfos && productInfos.length > 0 && (
|
||||
<TVirtualGridList
|
||||
cbScrollTo={getScrollTo}
|
||||
spotlightId="showProductBox"
|
||||
spotlightId={SpotlightIds.SHOW_PRODUCTS_BOX}
|
||||
className={css.grid}
|
||||
itemRenderer={renderItem}
|
||||
dataSize={productInfos.length}
|
||||
|
||||
@@ -104,18 +104,18 @@ export default function CategoryPanel() {
|
||||
useEffect(() => {
|
||||
scrollTop({ animate: false });
|
||||
setContainerLastFocusedElement(null, [SpotlightIds.TBODY]);
|
||||
setContainerLastFocusedElement(null, ["showProductBox"]);
|
||||
setContainerLastFocusedElement(null, ["categoryContentsBox"]);
|
||||
setContainerLastFocusedElement(null, [SpotlightIds.SHOW_PRODUCTS_BOX]);
|
||||
setContainerLastFocusedElement(null, [SpotlightIds.CATEGORY_CONTENTS_BOX]);
|
||||
Spotlight.focus("tab-0");
|
||||
}, [panelInfos]);
|
||||
|
||||
useEffect(() => {
|
||||
setContainerLastFocusedElement(null, ["showProductBox"]);
|
||||
setContainerLastFocusedElement(null, [SpotlightIds.SHOW_PRODUCTS_BOX]);
|
||||
}, [dropDownTab]);
|
||||
|
||||
const handleTopButtonClick = useCallback(() => {
|
||||
scrollTop();
|
||||
setContainerLastFocusedElement(null, ["categoryContentsBox"]);
|
||||
setContainerLastFocusedElement(null, [SpotlightIds.CATEGORY_CONTENTS_BOX]);
|
||||
Spotlight.focus(`tab-${tab}`);
|
||||
}, [scrollTop, tab]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user