PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Use tooltip compound in ReadReceiptPerson component

Browse source
This commit is contained in:
Florian Duros 2024-05-22 09:29:54 +02:00
parent dbe00e5889
commit 25fa1238ec
No known key found for this signature in database
GPG key ID: A5BBB4041B493F15
1 changed files with 32 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/views/rooms/ReadReceiptGroup.tsx
View file

@ -23,12 +23,10 @@ import { IReadReceiptProps } from "./EventTile";
import AccessibleButton from "../elements/AccessibleButton"; import AccessibleButton from "../elements/AccessibleButton";
import MemberAvatar from "../avatars/MemberAvatar"; import MemberAvatar from "../avatars/MemberAvatar";
import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { Alignment } from "../elements/Tooltip";
import { formatDate } from "../../../DateUtils"; import { formatDate } from "../../../DateUtils";
import { Action } from "../../../dispatcher/actions"; import { Action } from "../../../dispatcher/actions";
import dis from "../../../dispatcher/dispatcher"; import dis from "../../../dispatcher/dispatcher";
import ContextMenu, { aboveLeftOf, MenuItem, useContextMenu } from "../../structures/ContextMenu"; import ContextMenu, { aboveLeftOf, MenuItem, useContextMenu } from "../../structures/ContextMenu";
import { useTooltip } from "../../../utils/useTooltip";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex"; import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
import { formatList } from "../../../utils/FormattingUtils"; import { formatList } from "../../../utils/FormattingUtils";
@ -219,18 +217,9 @@ function ReadReceiptPerson({
isTwelveHour, isTwelveHour,
onAfterClick, onAfterClick,
}: ReadReceiptPersonProps): JSX.Element { }: ReadReceiptPersonProps): JSX.Element {
const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
alignment: Alignment.Top,
tooltipClassName: "mx_ReadReceiptGroup_person--tooltip",
label: (
<>
<div className="mx_Tooltip_title">{roomMember?.rawDisplayName ?? userId}</div>
<div className="mx_Tooltip_sub">{userId}</div>
</>
),
});
return ( return (
<Tooltip label={roomMember?.rawDisplayName ?? userId} caption={userId} placement="top">
<div>
<MenuItem <MenuItem
className="mx_ReadReceiptGroup_person" className="mx_ReadReceiptGroup_person"
onClick={() => { onClick={() => {
@ -245,11 +234,6 @@ function ReadReceiptPerson({
}); });
onAfterClick?.(); onAfterClick?.();
}} }}
onMouseOver={showTooltip}
onMouseLeave={hideTooltip}
onFocus={showTooltip}
onBlur={hideTooltip}
onWheel={hideTooltip}
> >
<MemberAvatar <MemberAvatar
member={roomMember} member={roomMember}
@ -264,8 +248,9 @@ function ReadReceiptPerson({
<p>{roomMember?.name ?? userId}</p> <p>{roomMember?.name ?? userId}</p>
<p className="mx_ReadReceiptGroup_secondary">{formatDate(new Date(ts), isTwelveHour)}</p> <p className="mx_ReadReceiptGroup_secondary">{formatDate(new Date(ts), isTwelveHour)}</p>
</div> </div>
{tooltip}
</MenuItem> </MenuItem>
</div>
</Tooltip>
); );
} }