github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add tooltip for user info

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-09-06 12:04:18 +05:30
parent 60c3d1a6e9
commit ac4127c93d
1 changed files with 44 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
space/components/issues/peek-overview/comment/comment-reactions.tsx
View File

@ -6,7 +6,7 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { ReactionSelector } from "components/ui";
import { ReactionSelector, Tooltip } from "components/ui";
// helpers
import { groupReactions, renderEmoji } from "helpers/emoji.helper";
@ -77,10 +77,24 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
size="md"
/>
{Object.keys(groupedReactions || {}).map(
(reaction) =>
groupedReactions?.[reaction]?.length &&
groupedReactions[reaction].length > 0 && (
{Object.keys(groupedReactions || {}).map((reaction) => {
const reactions = groupedReactions?.[reaction] ?? [];
const REACTIONS_LIMIT = 1000;
if (reactions.length > 0)
return (
<Tooltip
key={reaction}
tooltipContent={
<div>
{reactions
.map((r) => r.actor_detail.display_name)
.splice(0, REACTIONS_LIMIT)
.join(", ")}
{reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
</div>
}
>
<button
type="button"
onClick={() => {
@ -88,7 +102,6 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
handleReactionClick(reaction);
});
}}
key={reaction}
className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
commentReactions?.some(
(r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
@ -110,8 +123,9 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
{groupedReactions?.[reaction].length}{" "}
</span>
</button>
)
)}
</Tooltip>
);
})}
</div>
);
});