ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gift Modal: Fix header (#5691)

Browse Source
This commit is contained in:
Alexander Zinchuk 2025-03-07 15:16:42 +01:00
parent 52ce4e1885
commit befbc6a4c9
1 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/modals/gift/GiftModal.tsx
View File

@ -89,8 +89,9 @@ const PremiumGiftModal: FC<OwnProps & StateProps> = ({
const chat = peer && isApiPeerChat(peer) ? peer : undefined; const chat = peer && isApiPeerChat(peer) ? peer : undefined;
const [selectedGift, setSelectedGift] = useState<GiftOption | undefined>(); const [selectedGift, setSelectedGift] = useState<GiftOption | undefined>();
const [isHeaderHidden, setIsHeaderHidden] = useState(true); const [shouldShowMainScreenHeader, setShouldShowMainScreenHeader] = useState(false);
const [isHeaderForStarGifts, setIsHeaderForStarGifts] = useState(false); const [isMainScreenHeaderForStarGifts, setIsMainScreenHeaderForStarGifts] = useState(false);
const [isGiftScreenHeaderForStarGifts, setIsGiftScreenHeaderForStarGifts] = useState(false);
const [selectedCategory, setSelectedCategory] = useState<StarGiftCategory>('all'); const [selectedCategory, setSelectedCategory] = useState<StarGiftCategory>('all');
@ -110,27 +111,31 @@ const PremiumGiftModal: FC<OwnProps & StateProps> = ({
observe: observeIntersection, observe: observeIntersection,
} = useIntersectionObserver({ rootRef: scrollerRef, throttleMs: INTERSECTION_THROTTLE, isDisabled: !isOpen }); } = useIntersectionObserver({ rootRef: scrollerRef, throttleMs: INTERSECTION_THROTTLE, isDisabled: !isOpen });
const isGiftScreen = Boolean(selectedGift);
const shouldShowHeader = isGiftScreen || shouldShowMainScreenHeader;
const isHeaderForStarGifts = isGiftScreen ? isGiftScreenHeaderForStarGifts : isMainScreenHeaderForStarGifts;
useEffect(() => { useEffect(() => {
if (!isOpen) { if (!isOpen) {
setIsHeaderHidden(true); setShouldShowMainScreenHeader(false);
setSelectedGift(undefined); setSelectedGift(undefined);
setSelectedCategory('all'); setSelectedCategory('all');
} }
}, [isOpen]); }, [isOpen]);
const handleScroll = useLastCallback((e: React.UIEvent<HTMLDivElement>) => { const handleScroll = useLastCallback((e: React.UIEvent<HTMLDivElement>) => {
if (selectedGift) return; if (isGiftScreen) return;
const currentTarget = e.currentTarget; const currentTarget = e.currentTarget;
runThrottledForScroll(() => { runThrottledForScroll(() => {
const { scrollTop } = currentTarget; const { scrollTop } = currentTarget;
setIsHeaderHidden(scrollTop <= 150); setShouldShowMainScreenHeader(scrollTop > 150);
if (transitionRef.current && giftHeaderRef.current) { if (transitionRef.current && giftHeaderRef.current) {
const { top: headerTop } = giftHeaderRef.current.getBoundingClientRect(); const { top: headerTop } = giftHeaderRef.current.getBoundingClientRect();
const { top: transitionTop } = transitionRef.current.getBoundingClientRect(); const { top: transitionTop } = transitionRef.current.getBoundingClientRect();
setIsHeaderForStarGifts(headerTop - transitionTop <= 0); setIsMainScreenHeaderForStarGifts(headerTop - transitionTop <= 0);
} }
}); });
}); });
@ -193,8 +198,7 @@ const PremiumGiftModal: FC<OwnProps & StateProps> = ({
const handleGiftClick = useLastCallback((gift: GiftOption) => { const handleGiftClick = useLastCallback((gift: GiftOption) => {
setSelectedGift(gift); setSelectedGift(gift);
setIsHeaderForStarGifts('id' in gift); setIsGiftScreenHeaderForStarGifts('id' in gift);
setIsHeaderHidden(false);
}); });
function renderStarGifts() { function renderStarGifts() {
@ -235,7 +239,7 @@ const PremiumGiftModal: FC<OwnProps & StateProps> = ({
}); });
const handleCloseButtonClick = useLastCallback(() => { const handleCloseButtonClick = useLastCallback(() => {
if (selectedGift) { if (isGiftScreen) {
setSelectedGift(undefined); setSelectedGift(undefined);
return; return;
} }
@ -270,7 +274,7 @@ const PremiumGiftModal: FC<OwnProps & StateProps> = ({
); );
} }
const isBackButton = Boolean(selectedGift); const isBackButton = isGiftScreen;
const buttonClassName = buildClassName( const buttonClassName = buildClassName(
'animated-close-icon', 'animated-close-icon',
@ -298,7 +302,7 @@ const PremiumGiftModal: FC<OwnProps & StateProps> = ({
<div className={buttonClassName} /> <div className={buttonClassName} />
</Button> </Button>
<BalanceBlock className={styles.balance} balance={starBalance} withAddButton /> <BalanceBlock className={styles.balance} balance={starBalance} withAddButton />
<div className={buildClassName(styles.header, isHeaderHidden && styles.hiddenHeader)}> <div className={buildClassName(styles.header, !shouldShowHeader && styles.hiddenHeader)}>
<Transition <Transition
name="slideVerticalFade" name="slideVerticalFade"
activeKey={Number(isHeaderForStarGifts)} activeKey={Number(isHeaderForStarGifts)}
@ -313,10 +317,10 @@ const PremiumGiftModal: FC<OwnProps & StateProps> = ({
ref={transitionRef} ref={transitionRef}
className={styles.transition} className={styles.transition}
name="pushSlide" name="pushSlide"
activeKey={selectedGift ? 1 : 0} activeKey={isGiftScreen ? 1 : 0}
> >
{!selectedGift && renderMainScreen()} {!isGiftScreen && renderMainScreen()}
{selectedGift && renderingModal?.forPeerId && ( {isGiftScreen && renderingModal?.forPeerId && (
<GiftSendingOptions gift={selectedGift} peerId={renderingModal.forPeerId} /> <GiftSendingOptions gift={selectedGift} peerId={renderingModal.forPeerId} />
)} )}
</Transition> </Transition>