135 lines
4.1 KiB
TypeScript
135 lines
4.1 KiB
TypeScript
import type { TeactNode } from '@teact';
|
|
import { memo, useMemo } from '@teact';
|
|
import { getActions } from '../../../global';
|
|
|
|
import type {
|
|
ApiPeer,
|
|
ApiSavedStarGift,
|
|
ApiStarGiftAttributeBackdrop, ApiStarGiftAttributeModel, ApiStarGiftAttributePattern,
|
|
ApiTypeCurrencyAmount } from '../../../api/types';
|
|
|
|
import {
|
|
formatStarsTransactionAmount,
|
|
} from '../../../global/helpers/payments';
|
|
import { IS_TOUCH_ENV } from '../../../util/browser/windowEnvironment.ts';
|
|
import buildClassName from '../../../util/buildClassName';
|
|
import buildStyle from '../../../util/buildStyle';
|
|
|
|
import { useTransitionActiveKey } from '../../../hooks/animations/useTransitionActiveKey';
|
|
import useFlag from '../../../hooks/useFlag';
|
|
import useLang from '../../../hooks/useLang';
|
|
|
|
import AnimatedIconFromSticker from '../../common/AnimatedIconFromSticker';
|
|
import Icon from '../../common/icons/Icon';
|
|
import StarIcon from '../../common/icons/StarIcon';
|
|
import RadialPatternBackground from '../../common/profile/RadialPatternBackground';
|
|
import Transition from '../../ui/Transition';
|
|
import UniqueGiftManageButtons from './UniqueGiftManageButtons';
|
|
|
|
import styles from './UniqueGiftHeader.module.scss';
|
|
|
|
type OwnProps = {
|
|
modelAttribute: ApiStarGiftAttributeModel;
|
|
backdropAttribute: ApiStarGiftAttributeBackdrop;
|
|
patternAttribute: ApiStarGiftAttributePattern;
|
|
title?: string;
|
|
subtitle?: TeactNode;
|
|
subtitlePeer?: ApiPeer;
|
|
className?: string;
|
|
resellPrice?: ApiTypeCurrencyAmount;
|
|
showManageButtons?: boolean;
|
|
savedGift?: ApiSavedStarGift;
|
|
};
|
|
|
|
const STICKER_SIZE = 120;
|
|
|
|
const UniqueGiftHeader = ({
|
|
modelAttribute,
|
|
backdropAttribute,
|
|
patternAttribute,
|
|
title,
|
|
subtitle,
|
|
subtitlePeer,
|
|
className,
|
|
resellPrice,
|
|
showManageButtons,
|
|
savedGift,
|
|
}: OwnProps) => {
|
|
const {
|
|
openChat,
|
|
} = getActions();
|
|
|
|
const lang = useLang();
|
|
const [isGiftHover, markGiftHover, unmarkGiftHover] = useFlag(false);
|
|
const activeKey = useTransitionActiveKey([modelAttribute, backdropAttribute, patternAttribute]);
|
|
const subtitleColor = backdropAttribute?.textColor;
|
|
|
|
const radialPatternBackdrop = useMemo(() => {
|
|
const backdropColors = [backdropAttribute.centerColor, backdropAttribute.edgeColor];
|
|
|
|
return (
|
|
<RadialPatternBackground
|
|
className={styles.radialPattern}
|
|
backgroundColors={backdropColors}
|
|
patternIcon={patternAttribute.sticker}
|
|
/>
|
|
);
|
|
}, [backdropAttribute, patternAttribute]);
|
|
|
|
return (
|
|
<div className={buildClassName(styles.root,
|
|
isGiftHover && 'interactive-gift',
|
|
showManageButtons && styles.withManageButtons,
|
|
className)}
|
|
>
|
|
<Transition
|
|
className={styles.transition}
|
|
slideClassName={buildClassName(styles.transitionSlide)}
|
|
activeKey={activeKey}
|
|
direction={1}
|
|
name="zoomBounceSemiFade"
|
|
>
|
|
{radialPatternBackdrop}
|
|
<AnimatedIconFromSticker
|
|
className={styles.sticker}
|
|
sticker={modelAttribute.sticker}
|
|
size={STICKER_SIZE}
|
|
noLoop={!isGiftHover}
|
|
onMouseEnter={!IS_TOUCH_ENV ? markGiftHover : undefined}
|
|
onMouseLeave={!IS_TOUCH_ENV ? unmarkGiftHover : undefined}
|
|
/>
|
|
</Transition>
|
|
{title && <h1 className={styles.title}>{title}</h1>}
|
|
{Boolean(subtitle) && (
|
|
<div
|
|
className={buildClassName(styles.subtitle, subtitlePeer && styles.subtitleBadge)}
|
|
style={buildStyle(subtitleColor && `color: ${subtitleColor}`)}
|
|
onClick={() => {
|
|
if (subtitlePeer) {
|
|
openChat({ id: subtitlePeer.id });
|
|
}
|
|
}}
|
|
>
|
|
{subtitle}
|
|
</div>
|
|
)}
|
|
{savedGift && showManageButtons && (
|
|
<UniqueGiftManageButtons
|
|
savedGift={savedGift}
|
|
/>
|
|
)}
|
|
{resellPrice && (
|
|
<p className={styles.amount}>
|
|
<span>
|
|
{formatStarsTransactionAmount(lang, resellPrice)}
|
|
</span>
|
|
{resellPrice.currency === 'XTR' && <StarIcon type="gold" size="middle" />}
|
|
{resellPrice.currency === 'TON' && <Icon name="toncoin" />}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(UniqueGiftHeader);
|