87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
import React, { memo, useRef } from '../../../lib/teact/teact';
|
|
import { getActions } from '../../../global';
|
|
|
|
import type {
|
|
ApiStarGiftRegular,
|
|
} from '../../../api/types';
|
|
|
|
import buildClassName from '../../../util/buildClassName';
|
|
|
|
import useFlag from '../../../hooks/useFlag';
|
|
import { type ObserveFn, useOnIntersect } from '../../../hooks/useIntersectionObserver';
|
|
import useLang from '../../../hooks/useLang';
|
|
import useLastCallback from '../../../hooks/useLastCallback';
|
|
|
|
import AnimatedIconFromSticker from '../../common/AnimatedIconFromSticker';
|
|
import GiftRibbon from '../../common/gift/GiftRibbon';
|
|
import Icon from '../../common/icons/Icon';
|
|
import Button from '../../ui/Button';
|
|
|
|
import styles from './GiftItem.module.scss';
|
|
|
|
export type OwnProps = {
|
|
gift: ApiStarGiftRegular;
|
|
observeIntersection?: ObserveFn;
|
|
onClick: (gift: ApiStarGiftRegular) => void;
|
|
};
|
|
|
|
const GIFT_STICKER_SIZE = 90;
|
|
|
|
function GiftItemStar({ gift, observeIntersection, onClick }: OwnProps) {
|
|
const { openGiftInfoModal } = getActions();
|
|
|
|
// eslint-disable-next-line no-null/no-null
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
const lang = useLang();
|
|
const [shouldPlay, play] = useFlag();
|
|
|
|
const {
|
|
stars,
|
|
isLimited,
|
|
isSoldOut,
|
|
sticker,
|
|
} = gift;
|
|
|
|
const handleGiftClick = useLastCallback(() => {
|
|
if (isSoldOut) {
|
|
openGiftInfoModal({ gift });
|
|
return;
|
|
}
|
|
|
|
onClick(gift);
|
|
});
|
|
|
|
useOnIntersect(ref, observeIntersection, (entry) => {
|
|
if (entry.isIntersecting) play();
|
|
});
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={buildClassName(styles.container, styles.starGift)}
|
|
tabIndex={0}
|
|
role="button"
|
|
onClick={handleGiftClick}
|
|
>
|
|
<AnimatedIconFromSticker
|
|
sticker={sticker}
|
|
noLoop
|
|
play={shouldPlay}
|
|
nonInteractive
|
|
size={GIFT_STICKER_SIZE}
|
|
/>
|
|
<Button className={styles.buy} nonInteractive size="tiny" color="stars" withSparkleEffect pill fluid>
|
|
<Icon name="star" className={styles.star} />
|
|
<div className={styles.amount}>
|
|
{stars}
|
|
</div>
|
|
</Button>
|
|
{isLimited && !isSoldOut && <GiftRibbon color="blue" text={lang('GiftLimited')} />}
|
|
{isSoldOut && <GiftRibbon color="red" text={lang('GiftSoldOut')} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default memo(GiftItemStar);
|