feat: attachment click handler

widgetbot-io · Aug 15, 2023 · 6c24c87 · 6c24c87
1 parent 3ae289f
commit 6c24c87
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/src/Content/Attachment/ImageAttachment.tsx b/src/Content/Attachment/ImageAttachment.tsx
@@ -3,12 +3,15 @@ import React from "react";
 import * as Styles from "./style";
 import type { APIAttachment } from "discord-api-types/v10";
 import { t } from "i18next";
+import { useConfig } from "../../core/ConfigContext";
 
 interface ImageAttachmentProps {
   attachment: APIAttachment;
 }
 
 function ImageAttachment(props: ImageAttachmentProps) {
+  const { openImageOnClick } = useConfig();
+
   if (!props.attachment.width || !props.attachment.height) {
     // todo: dev mode only
     console.error(
@@ -23,11 +26,14 @@ function ImageAttachment(props: ImageAttachmentProps) {
     props.attachment.height
   );
 
+  console.log(openImageOnClick);
+
   return (
     <Styles.ImageAttachment
       src={props.attachment.url}
       width={width}
       height={height}
+      onClick={() => openImageOnClick?.(props.attachment)}
       placeholder={
         <Styles.LazyImagePlaceholder style={{ width, height }}>
           {t("loading")}

diff --git a/src/Message/MessageAuthor.tsx b/src/Message/MessageAuthor.tsx
@@ -28,7 +28,7 @@ function MessageAuthor({
   guildId,
   ...props
 }: MessageAuthorProps) {
-  const { resolveRole, resolveMember, userMentionOnClick } = useConfig();
+  const { resolveRole, resolveMember, userOnClick } = useConfig();
   const member = guildId ? resolveMember(author.id, guildId) : null;
   const isGuildMember = member !== null;
 
@@ -74,9 +74,9 @@ function MessageAuthor({
   if (onlyShowUsername) {
     return (
       <Styles.MessageAuthor
-        clickable={userMentionOnClick !== undefined}
+        clickable={userOnClick !== undefined}
         {...props}
-        onClick={() => userMentionOnClick?.(author)}
+        onClick={() => userOnClick?.(author)}
       >
         <Styles.Username style={{ color: dominantRoleColor }}>
           {displayName}
@@ -87,9 +87,9 @@ function MessageAuthor({
 
   return (
     <Styles.MessageAuthor
-      clickable={userMentionOnClick !== undefined}
+      clickable={userOnClick !== undefined}
       {...props}
-      onClick={() => userMentionOnClick?.(author)}
+      onClick={() => userOnClick?.(author)}
     >
       <Styles.Avatar
         src={getAvatar(author, {

diff --git a/src/core/ConfigContext.ts b/src/core/ConfigContext.ts
@@ -1,4 +1,4 @@
-import type { ReactElement} from "react";
+import type { ReactElement } from "react";
 import { createContext, useContext } from "react";
 import type {
   APIChannel,
@@ -11,6 +11,7 @@ import type {
 } from "discord-api-types/v10";
 import type { SvgConfig } from "./svgs";
 import type { Tag } from "../ChatTag/style";
+import type { APIAttachment } from "discord-api-types/v10";
 
 export type PartialSvgConfig = Partial<SvgConfig>;
 
@@ -39,11 +40,12 @@ export type Config<SvgConfig extends PartialSvgConfig> = {
   // Click handlers
   currentUser(): APIUser | null;
   seeThreadOnClick?(messageId: Snowflake, thread: APIChannel): void;
-  userMentionOnClick?(user: APIUser): void;
+  userOnClick?(user: APIUser): void;
   roleMentionOnClick?(role: APIRole): void;
   channelMentionOnClick?(channel: APIChannel): void;
   openPinnedMessagesOnClick?(channel: APIChannel): void;
   messageComponentButtonOnClick?(message: APIMessage, customId: string): void;
+  openImageOnClick?(attachment: APIAttachment): void;
 };
 
 export const ConfigContext = createContext<Config<PartialSvgConfig>>({

diff --git a/src/markdown/render/elements/mentions/userMention.tsx b/src/markdown/render/elements/mentions/userMention.tsx
@@ -10,7 +10,7 @@ interface UserMentionProps {
 }
 
 function UserMention({ userId }: UserMentionProps) {
-  const { resolveUser, userMentionOnClick } = useConfig();
+  const { resolveUser, userOnClick } = useConfig();
 
   // todo: resolve current channel to resolve member
   const user = resolveUser(userId);
@@ -19,9 +19,9 @@ function UserMention({ userId }: UserMentionProps) {
   return (
     <Styles.Mention
       onClick={() => {
-        if (user !== null) userMentionOnClick?.(user);
+        if (user !== null) userOnClick?.(user);
       }}
-      canBeClicked={userMentionOnClick !== undefined}
+      canBeClicked={userOnClick !== undefined}
     >
       <Styles.MentionIcon>@</Styles.MentionIcon>
       {text}

diff --git a/src/stories/Wrapper.tsx b/src/stories/Wrapper.tsx
@@ -380,9 +380,7 @@ const Wrapper: Decorator = (Story) => {
       seeThreadOnClick={(messageId, thread) =>
         alert(`See Thread "${thread.name}" clicked on message ${messageId}`)
       }
-      userMentionOnClick={(user) =>
-        alert(`User "${getDisplayName(user)}" mention clicked!`)
-      }
+      userOnClick={(user) => alert(`User "${getDisplayName(user)}" clicked!`)}
       roleMentionOnClick={(role) =>
         alert(`Role "${role.name}" mention clicked!`)
       }
@@ -403,6 +401,9 @@ const Wrapper: Decorator = (Story) => {
 
         return null;
       }}
+      openImageOnClick={(imageAttachment) => {
+        alert(`Image attachment ${imageAttachment.filename} clicked!`);
+      }}
     >
       {({ themeClass }) => (
         <div className={themeClass}>