[components] TItemCard, TVirtualGridList 수정

Detail Notes :

1. [TItemCard] disabled, onClick, onBlur, onFocus 추가
2. [TVirtualGridList] TItemCard의 props 변경에 따른 수정
This commit is contained in:
younghoon100.park
2024-02-22 10:03:15 +09:00
parent 5bf8d13595
commit 58bcfeadb0
2 changed files with 31 additions and 8 deletions

View File

@@ -29,12 +29,15 @@ export const removeDotAndColon = (string) => {
export default memo(function TItemCard({
children,
disabled,
imageAlt,
imageSource,
logo,
logoDisplay = false,
isBestSeller = false,
onCardClick,
onBlur,
onClick,
onFocus,
priceInfo,
productId,
productName,
@@ -47,18 +50,38 @@ export default memo(function TItemCard({
const { originalPrice, discountedPrice, discountRate } =
usePriceInfo(priceInfo) || {};
const handleClick = useCallback(
(productId) => {
onCardClick && onCardClick(productId);
const _onBlur = useCallback(() => {
if (onBlur) {
onBlur();
}
}, [onBlur]);
const _onClick = useCallback(
(e) => {
if (disabled) {
e.stopPropagation();
return;
}
if (onClick) {
onClick(e);
}
},
[onCardClick, productId]
[onClick, disabled]
);
const _onFocus = useCallback(() => {
if (onFocus) {
onFocus();
}
}, [onFocus]);
return (
<SpottableComponent
{...rest}
className={classNames(css[type], nonPosition && css.nonPosition)}
onClick={() => handleClick(productId)}
onBlur={_onBlur}
onClick={_onClick}
onFocus={_onFocus}
spotlightId={"spotlightId-" + removeDotAndColon(productId)}
>
<div className={css.imageWrap}>

View File

@@ -37,7 +37,7 @@ export default function TVirtualGridList({
? itemPropsTransfomers["TItemCard"](itemData)
: itemData;
const onCardClick = onCardClick ? () => onClick(itemData) : null;
const _onClick = onClick ? () => onClick(itemData) : null;
return (
<>
@@ -46,7 +46,7 @@ export default function TVirtualGridList({
{...transformProps}
{...rest}
type={itemType}
onCardClick={onCardClick}
onClick={_onClick}
logoDisplay={logoDisplay}
/>
) : (