73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import React, { memo } from '../../../lib/teact/teact';
|
|
|
|
import type { FC } from '../../../lib/teact/teact';
|
|
import type { ApiAvailableReaction, ApiReaction } from '../../../api/types';
|
|
|
|
import { IS_COMPACT_MENU } from '../../../util/environment';
|
|
import { createClassNameBuilder } from '../../../util/buildClassName';
|
|
import useMedia from '../../../hooks/useMedia';
|
|
import useFlag from '../../../hooks/useFlag';
|
|
|
|
import AnimatedSticker from '../../common/AnimatedSticker';
|
|
|
|
import './ReactionSelectorReaction.scss';
|
|
|
|
const REACTION_SIZE = IS_COMPACT_MENU ? 24 : 32;
|
|
|
|
type OwnProps = {
|
|
reaction: ApiAvailableReaction;
|
|
previewIndex: number;
|
|
isReady?: boolean;
|
|
chosen?: boolean;
|
|
onToggleReaction: (reaction: ApiReaction) => void;
|
|
};
|
|
|
|
const cn = createClassNameBuilder('ReactionSelectorReaction');
|
|
|
|
const ReactionSelectorReaction: FC<OwnProps> = ({
|
|
reaction,
|
|
previewIndex,
|
|
isReady,
|
|
chosen,
|
|
onToggleReaction,
|
|
}) => {
|
|
const mediaData = useMedia(`document${reaction.selectAnimation?.id}`, !isReady);
|
|
|
|
const [isActivated, activate, deactivate] = useFlag();
|
|
const [isAnimationLoaded, markAnimationLoaded] = useFlag();
|
|
|
|
const shouldRenderStatic = !isReady || !isAnimationLoaded;
|
|
const shouldRenderAnimated = Boolean(isReady && mediaData);
|
|
|
|
function handleClick() {
|
|
onToggleReaction(reaction.reaction);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn('&', IS_COMPACT_MENU && 'compact', chosen && 'chosen')}
|
|
onClick={handleClick}
|
|
onMouseEnter={isReady ? activate : undefined}
|
|
>
|
|
{shouldRenderStatic && (
|
|
<div
|
|
className={cn('static')}
|
|
style={`background-position-x: ${previewIndex * -REACTION_SIZE}px;`}
|
|
/>
|
|
)}
|
|
{shouldRenderAnimated && (
|
|
<AnimatedSticker
|
|
tgsUrl={mediaData}
|
|
play={isActivated}
|
|
noLoop
|
|
size={REACTION_SIZE}
|
|
onLoad={markAnimationLoaded}
|
|
onEnded={deactivate}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(ReactionSelectorReaction);
|