128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
import React, { memo, useMemo, useRef } from '../../../lib/teact/teact';
|
|
|
|
import type { FC } from '../../../lib/teact/teact';
|
|
import type {
|
|
ApiAvailableReaction, ApiChatReactions, ApiReaction, ApiReactionCount,
|
|
} from '../../../api/types';
|
|
import type { IAnchorPosition } from '../../../types';
|
|
|
|
import { createClassNameBuilder } from '../../../util/buildClassName';
|
|
import {
|
|
isSameReaction, canSendReaction, getReactionUniqueKey, sortReactions,
|
|
} from '../../../global/helpers';
|
|
|
|
import useLastCallback from '../../../hooks/useLastCallback';
|
|
import useLang from '../../../hooks/useLang';
|
|
|
|
import ReactionSelectorReaction from './ReactionSelectorReaction';
|
|
import Button from '../../ui/Button';
|
|
|
|
import './ReactionSelector.scss';
|
|
|
|
type OwnProps = {
|
|
enabledReactions?: ApiChatReactions;
|
|
onToggleReaction: (reaction: ApiReaction) => void;
|
|
isPrivate?: boolean;
|
|
topReactions?: ApiReaction[];
|
|
allAvailableReactions?: ApiAvailableReaction[];
|
|
currentReactions?: ApiReactionCount[];
|
|
maxUniqueReactions?: number;
|
|
isReady?: boolean;
|
|
canBuyPremium?: boolean;
|
|
isCurrentUserPremium?: boolean;
|
|
canPlayAnimatedEmojis?: boolean;
|
|
onShowMore: (position: IAnchorPosition) => void;
|
|
};
|
|
|
|
const cn = createClassNameBuilder('ReactionSelector');
|
|
const REACTIONS_AMOUNT = 6;
|
|
|
|
const ReactionSelector: FC<OwnProps> = ({
|
|
allAvailableReactions,
|
|
topReactions,
|
|
enabledReactions,
|
|
currentReactions,
|
|
maxUniqueReactions,
|
|
isPrivate,
|
|
isReady,
|
|
canPlayAnimatedEmojis,
|
|
onToggleReaction,
|
|
onShowMore,
|
|
}) => {
|
|
// eslint-disable-next-line no-null/no-null
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const lang = useLang();
|
|
|
|
const availableReactions = useMemo(() => {
|
|
const reactions = allAvailableReactions?.map((availableReaction) => {
|
|
if (availableReaction.isInactive) return undefined;
|
|
if (!isPrivate && (!enabledReactions || !canSendReaction(availableReaction.reaction, enabledReactions))) {
|
|
return undefined;
|
|
}
|
|
if (maxUniqueReactions && currentReactions && currentReactions.length >= maxUniqueReactions
|
|
&& !currentReactions.some(({ reaction }) => isSameReaction(reaction, availableReaction.reaction))) {
|
|
return undefined;
|
|
}
|
|
return availableReaction;
|
|
}).filter(Boolean) || [];
|
|
|
|
return sortReactions(reactions, topReactions);
|
|
}, [allAvailableReactions, currentReactions, enabledReactions, isPrivate, maxUniqueReactions, topReactions]);
|
|
|
|
const reactionsToRender = useMemo(() => {
|
|
return availableReactions.length === REACTIONS_AMOUNT + 1
|
|
? availableReactions
|
|
: availableReactions.slice(0, REACTIONS_AMOUNT);
|
|
}, [availableReactions]);
|
|
const withMoreButton = reactionsToRender.length < availableReactions.length;
|
|
|
|
const userReactionIndexes = useMemo(() => {
|
|
const chosenReactions = currentReactions?.filter(({ chosenOrder }) => chosenOrder !== undefined) || [];
|
|
return new Set(chosenReactions.map(({ reaction }) => (
|
|
reactionsToRender.findIndex((r) => r && isSameReaction(r.reaction, reaction))
|
|
)));
|
|
}, [currentReactions, reactionsToRender]);
|
|
|
|
const handleShowMoreClick = useLastCallback(() => {
|
|
const bound = ref.current?.getBoundingClientRect() || { x: 0, y: 0 };
|
|
onShowMore({
|
|
x: bound.x,
|
|
y: bound.y,
|
|
});
|
|
});
|
|
|
|
if (!reactionsToRender.length) return undefined;
|
|
|
|
return (
|
|
<div className={cn('&', lang.isRtl && 'isRtl')} ref={ref}>
|
|
<div className={cn('bubble-small', lang.isRtl && 'isRtl')} />
|
|
<div className={cn('items-wrapper')}>
|
|
<div className={cn('bubble-big', lang.isRtl && 'isRtl')} />
|
|
<div className={cn('items')} dir={lang.isRtl ? 'rtl' : undefined}>
|
|
{reactionsToRender.map((reaction, i) => (
|
|
<ReactionSelectorReaction
|
|
key={getReactionUniqueKey(reaction.reaction)}
|
|
isReady={isReady}
|
|
onToggleReaction={onToggleReaction}
|
|
reaction={reaction}
|
|
noAppearAnimation={!canPlayAnimatedEmojis}
|
|
chosen={userReactionIndexes.has(i)}
|
|
/>
|
|
))}
|
|
{withMoreButton && (
|
|
<Button
|
|
color="translucent"
|
|
className={cn('show-more')}
|
|
onClick={handleShowMoreClick}
|
|
>
|
|
<i className="icon icon-down" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(ReactionSelector);
|