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

[DetailPanel] indicator default foucs

Browse Source
This commit is contained in:
고동영
2024-07-22 17:18:33 +09:00
parent b5d76a10a3
commit c0baede836
4 changed files with 33 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -351,7 +351,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
<TBody
className={css.tbody}
scrollable={false}
// spotlightDisabled={!isOnTop}
spotlightDisabled={isLoading}
isDefaultContainer
>
{/* 결제가능상품 영역 */}

6
com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
View File

@@ -23,7 +23,9 @@ export default function UnableOption({
soldoutFlag,
}) {
const dispatch = useDispatch();
const isLoading = useSelector(
(state) => state.common.appStatus?.showLoadingPanel?.show
);
const tooltipDes = $L("Scan for more information about the product.");
const {
@@ -68,7 +70,7 @@ export default function UnableOption({
} else if (!popupVisible) {
Spotlight.focus("shopbymobile_Btn");
}
}, [soldoutFlag]);
}, [soldoutFlag, productInfo, isLoading]);
const handleSMSClick = useCallback(() => {
dispatch(setShowPopup(Config.ACTIVE_POPUP.smsPopup));

2
com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableProduct.jsx
View File

@@ -20,7 +20,7 @@ import UnableOption from "./UnableOption";
import css from "./UnableProduct.module.less";
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", preserveld: true },
{ enterTo: "default-element" },
"div"
);
export default function UnableProduct({

64
com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx
View File

@@ -1,43 +1,29 @@
import React, {
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import React, { useCallback, useEffect, useMemo, useState } from "react";
import classNames from 'classnames';
import {
useDispatch,
useSelector,
} from 'react-redux';
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import playImg from '../../../../../assets/images/btn/btn-play-thumb-nor.png';
import indicatorDefaultImage
from '../../../../../assets/images/img-thumb-empty-144@3x.png';
import defaultImage from '../../../../../assets/images/img-thumb-empty-560.png';
import playImg from "../../../../../assets/images/btn/btn-play-thumb-nor.png";
import indicatorDefaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png";
import defaultImage from "../../../../../assets/images/img-thumb-empty-560.png";
import {
finishVideoPreview,
startVideoPlayer,
} from '../../../../actions/playActions';
import CustomImage from '../../../../components/CustomImage/CustomImage';
import TVirtualGridList
from '../../../../components/TVirtualGridList/TVirtualGridList';
import usePriceInfo from '../../../../hooks/usePriceInfo';
import useScrollTo from '../../../../hooks/useScrollTo';
import { panel_names } from '../../../../utils/Config';
import {
$L,
scaleW,
} from '../../../../utils/helperMethods';
import css from './Indicator.module.less';
} from "../../../../actions/playActions";
import CustomImage from "../../../../components/CustomImage/CustomImage";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import usePriceInfo from "../../../../hooks/usePriceInfo";
import useScrollTo from "../../../../hooks/useScrollTo";
import { panel_names } from "../../../../utils/Config";
import { $L, scaleW } from "../../../../utils/helperMethods";
import css from "./Indicator.module.less";
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", preserveld: true },
{ enterTo: "default-element", preserveld: true },
"div"
);
const SpottableComponent = Spottable("div");
@@ -53,7 +39,9 @@ function Indicator({
const dispatch = useDispatch();
const { cursorVisible } = useSelector((state) => state.common.appStatus);
const promotionPrcie = usePriceInfo(productInfo?.priceInfo);
const isLoading = useSelector(
(state) => state.common.appStatus?.showLoadingPanel?.show
);
const panels = useSelector((state) => state.panels.panels);
const [autoPlaying, setAutoPlaying] = useState(
!launchedFromPlayer && productInfo?.prdtMediaUrl
@@ -171,9 +159,11 @@ function Indicator({
useEffect(() => {
if (selectedIndex === 0) {
scrollTop();
scrollTop({
y: 0,
});
}
}, [panels, selectedIndex]);
}, [selectedIndex, isLoading]);
const handleVideoOnClick = useCallback(() => {
if (canPlayVideo) {
@@ -345,7 +335,7 @@ function Indicator({
)}
aria-label="Move to up"
/>
<Container className={css.tVirtualGridListContainer}>
<div className={css.tVirtualGridListContainer}>
{productInfo && (
<TVirtualGridList
cbScrollTo={getScrollTo}
@@ -358,7 +348,7 @@ function Indicator({
spotlightId="indicator-GridListContainer"
/>
)}
</Container>
</div>
<SpottableComponent
onClick={handleDownClick}
spotlightDisabled={!cursorVisible}