Merge pull request #53 from widgetbot-io/refactor/user-click-ref

[FR-252] Pass clicked element to userOnClick callback

Author: Yomanz

src/Message/MessageAuthor.tsx

@@ -101,7 +101,7 @@ function MessageAuthor({
       <Styles.MessageAuthor
         clickable={userOnClick !== undefined}
         {...props}
-        onClick={() => userOnClick?.(author)}
+        onClick={(e) => userOnClick?.(author, e.currentTarget)}
       >
         <Styles.Username style={{ color: dominantRoleColor }}>
           {displayName}
@@ -114,7 +114,7 @@ function MessageAuthor({
     <Styles.MessageAuthor
       clickable={userOnClick !== undefined}
       {...props}
-      onClick={() => userOnClick?.(author)}
+      onClick={(e) => userOnClick?.(author, e.currentTarget)}
     >
       <Styles.AnimatedAvatarTrigger
         data-is-animated={animatedAvatarUrl !== undefined}

src/core/ConfigContext.ts

@@ -54,7 +54,7 @@ export type Config<SvgConfig extends PartialSvgConfig> = {
   // Click handlers
   currentUser(): APIUser | null;
   seeThreadOnClick?(messageId: Snowflake, thread: APIChannel): void;
-  userOnClick?(user: APIUser): void;
+  userOnClick?(user: APIUser, element: EventTarget & HTMLSpanElement): void;
   roleMentionOnClick?(role: APIRole): void;
   channelMentionOnClick?(channel: APIChannel): void;
   openPinnedMessagesOnClick?(channel: APIChannel): void;

src/markdown/render/elements/mentions/userMention.tsx

@@ -18,8 +18,8 @@ function UserMention({ userId }: UserMentionProps) {
 
   return (
     <Styles.Mention
-      onClick={() => {
-        if (user !== null) userOnClick?.(user);
+      onClick={(e) => {
+        if (user !== null) userOnClick?.(user, e.currentTarget);
       }}
       canBeClicked={userOnClick !== undefined}
     >

src/stories/Wrapper.tsx

@@ -392,7 +392,17 @@ const Wrapper: Decorator = (Story) => {
       seeThreadOnClick={(messageId, thread) =>
         alert(`See Thread "${thread.name}" clicked on message ${messageId}`)
       }
-      userOnClick={(user) => alert(`User "${getDisplayName(user)}" clicked!`)}
+      userOnClick={(user, el) => {
+        const elPos = el.getBoundingClientRect();
+
+        return alert(
+          `User "${getDisplayName(
+            user
+          )}" clicked! \nClicked Position: X - ${Math.floor(
+            elPos.left
+          )}   Y - ${Math.floor(elPos.top)}`
+        );
+      }}
       roleMentionOnClick={(role) =>
         alert(`Role "${role.name}" mention clicked!`)
       }