|
|
|
@@ -4,46 +4,54 @@ import React, {
|
|
|
|
useMemo,
|
|
|
|
useMemo,
|
|
|
|
useRef,
|
|
|
|
useRef,
|
|
|
|
useState,
|
|
|
|
useState,
|
|
|
|
} from "react";
|
|
|
|
} from 'react';
|
|
|
|
|
|
|
|
|
|
|
|
import classNames from "classnames";
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
|
|
import {
|
|
|
|
|
|
|
|
useDispatch,
|
|
|
|
|
|
|
|
useSelector,
|
|
|
|
|
|
|
|
} from 'react-redux';
|
|
|
|
|
|
|
|
|
|
|
|
import { Job } from "@enact/core/util";
|
|
|
|
import { Job } from '@enact/core/util';
|
|
|
|
import Spotlight from "@enact/spotlight";
|
|
|
|
import Spotlight from '@enact/spotlight';
|
|
|
|
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
|
|
|
import SpotlightContainerDecorator
|
|
|
|
import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
|
|
|
|
from '@enact/spotlight/SpotlightContainerDecorator';
|
|
|
|
|
|
|
|
import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
|
|
|
sendLogCuration,
|
|
|
|
|
|
|
|
sendLogGNB,
|
|
|
|
|
|
|
|
} from '../../actions/logActions';
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
continueGetSubCategory,
|
|
|
|
continueGetSubCategory,
|
|
|
|
getSubCategory,
|
|
|
|
getSubCategory,
|
|
|
|
} from "../../actions/mainActions";
|
|
|
|
} from '../../actions/mainActions';
|
|
|
|
import { updatePanel } from "../../actions/panelActions";
|
|
|
|
import { updatePanel } from '../../actions/panelActions';
|
|
|
|
import SectionTitle from "../../components/SectionTitle/SectionTitle";
|
|
|
|
import SectionTitle from '../../components/SectionTitle/SectionTitle';
|
|
|
|
import TBody from "../../components/TBody/TBody";
|
|
|
|
import TBody from '../../components/TBody/TBody';
|
|
|
|
import TButton, { TYPES } from "../../components/TButton/TButton";
|
|
|
|
import TButton, { TYPES } from '../../components/TButton/TButton';
|
|
|
|
import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab";
|
|
|
|
import TButtonTab, { LIST_TYPE } from '../../components/TButtonTab/TButtonTab';
|
|
|
|
import TDropDown from "../../components/TDropDown/TDropDown";
|
|
|
|
import TDropDown from '../../components/TDropDown/TDropDown';
|
|
|
|
import THeader from "../../components/THeader/THeader";
|
|
|
|
import THeader from '../../components/THeader/THeader';
|
|
|
|
import TPanel from "../../components/TPanel/TPanel";
|
|
|
|
import TPanel from '../../components/TPanel/TPanel';
|
|
|
|
import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
|
|
|
|
import TVerticalPagenator
|
|
|
|
import usePrevious from "../../hooks/usePrevious";
|
|
|
|
from '../../components/TVerticalPagenator/TVerticalPagenator';
|
|
|
|
|
|
|
|
import usePrevious from '../../hooks/usePrevious';
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
CATEGORY_DATA_MAX_RESULTS_LIMIT,
|
|
|
|
CATEGORY_DATA_MAX_RESULTS_LIMIT,
|
|
|
|
LOG_MENU,
|
|
|
|
LOG_MENU,
|
|
|
|
LOG_TP_NO,
|
|
|
|
LOG_TP_NO,
|
|
|
|
panel_names,
|
|
|
|
panel_names,
|
|
|
|
} from "../../utils/Config";
|
|
|
|
} from '../../utils/Config';
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
$L,
|
|
|
|
$L,
|
|
|
|
getSpottableDescendants,
|
|
|
|
getSpottableDescendants,
|
|
|
|
isElementInContainer,
|
|
|
|
isElementInContainer,
|
|
|
|
} from "../../utils/helperMethods";
|
|
|
|
} from '../../utils/helperMethods';
|
|
|
|
import { SpotlightIds } from "../../utils/SpotlightIds";
|
|
|
|
import { SpotlightIds } from '../../utils/SpotlightIds';
|
|
|
|
import ItemContents from "./CategoryContents/ItemContents/ItemContents";
|
|
|
|
import ItemContents from './CategoryContents/ItemContents/ItemContents';
|
|
|
|
import ShowContents from "./CategoryContents/ShowContents/ShowContents";
|
|
|
|
import ShowContents from './CategoryContents/ShowContents/ShowContents';
|
|
|
|
import css from "./CategoryPanel.module.less";
|
|
|
|
import css from './CategoryPanel.module.less';
|
|
|
|
import { sendLogGNB, sendLogCuration } from "../../actions/logActions";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Container = SpotlightContainerDecorator({ enterTo: null }, "div");
|
|
|
|
const Container = SpotlightContainerDecorator({ enterTo: null }, "div");
|
|
|
|
|
|
|
|
|
|
|
|
@@ -121,13 +129,15 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
|
|
|
|
const sortTpNm = dropDownTab === 0 ? "New" : "Popular";
|
|
|
|
const sortTpNm = dropDownTab === 0 ? "New" : "Popular";
|
|
|
|
|
|
|
|
|
|
|
|
logTimerRef.current = setTimeout(() => {
|
|
|
|
logTimerRef.current = setTimeout(() => {
|
|
|
|
dispatch(sendLogCuration({
|
|
|
|
dispatch(
|
|
|
|
cnttTpNm,
|
|
|
|
sendLogCuration({
|
|
|
|
lgCatCd,
|
|
|
|
cnttTpNm,
|
|
|
|
lgCatNm,
|
|
|
|
lgCatCd,
|
|
|
|
logTpNo: LOG_TP_NO.CURATION.CATEGORY,
|
|
|
|
lgCatNm,
|
|
|
|
sortTpNm,
|
|
|
|
logTpNo: LOG_TP_NO.CURATION.CATEGORY,
|
|
|
|
}));
|
|
|
|
sortTpNm,
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
);
|
|
|
|
}, 300);
|
|
|
|
}, 300);
|
|
|
|
|
|
|
|
|
|
|
|
return () => clearTimeout(logTimerRef.current);
|
|
|
|
return () => clearTimeout(logTimerRef.current);
|
|
|
|
@@ -151,7 +161,9 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
|
|
|
|
tabType: tabType,
|
|
|
|
tabType: tabType,
|
|
|
|
filterType: filterType,
|
|
|
|
filterType: filterType,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
1, null, true
|
|
|
|
1,
|
|
|
|
|
|
|
|
null,
|
|
|
|
|
|
|
|
true
|
|
|
|
)
|
|
|
|
)
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@@ -204,7 +216,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
|
|
|
|
reload();
|
|
|
|
reload();
|
|
|
|
if (categoryFilterCd) {
|
|
|
|
if (categoryFilterCd) {
|
|
|
|
const detailCdNmValues = categoryFilterCd
|
|
|
|
const detailCdNmValues = categoryFilterCd
|
|
|
|
.map((item) => item.detailCdNm)
|
|
|
|
.map((item) => $L(item.detailCdNm))
|
|
|
|
.reverse();
|
|
|
|
.reverse();
|
|
|
|
|
|
|
|
|
|
|
|
setFilterMethods(detailCdNmValues);
|
|
|
|
setFilterMethods(detailCdNmValues);
|
|
|
|
@@ -422,21 +434,22 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</TPanel>
|
|
|
|
</TPanel>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const propsAreEqual = (prev, next) => {
|
|
|
|
const propsAreEqual = (prev, next) => {
|
|
|
|
const keys = Object.keys(prev);
|
|
|
|
const keys = Object.keys(prev);
|
|
|
|
const nextKeys = Object.keys(next);
|
|
|
|
const nextKeys = Object.keys(next);
|
|
|
|
if(!next.isOnTop){ //ignore event on background
|
|
|
|
if (!next.isOnTop) {
|
|
|
|
|
|
|
|
//ignore event on background
|
|
|
|
return true;
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if(keys.length !== nextKeys.length){
|
|
|
|
if (keys.length !== nextKeys.length) {
|
|
|
|
return false;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
for(let i=0; i<keys.length; i++){
|
|
|
|
for (let i = 0; i < keys.length; i++) {
|
|
|
|
if(prev[keys[i]] !== next[keys[i]]){
|
|
|
|
if (prev[keys[i]] !== next[keys[i]]) {
|
|
|
|
return false;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
export default React.memo(CategoryPanel, propsAreEqual);
|
|
|
|
export default React.memo(CategoryPanel, propsAreEqual);
|