feat: add option to make reactions non-interactive

Author: favna

packages/core/src/components.d.ts

@@ -213,12 +213,20 @@ export namespace Components {
           * The reaction emoji image URL.
          */
         "emoji": string;
+        /**
+          * Whether the reaction should be reactive.
+          * @remark When the reaction is interactive left clicking it will add 1 to the counter. Whereas when holding the Shift key and left clicking it will decrease the counter. The counter cannot go below 1.
+          * @default false
+         */
+        "interactive": boolean;
         /**
           * The name of the emoji to use as alternative image text.
+          * @default ':emoji'
          */
         "name": string;
         /**
           * Whether the reaction should show as reacted by the user.
+          * @default false
          */
         "reacted": boolean;
     }
@@ -513,12 +521,20 @@ declare namespace LocalJSX {
           * The reaction emoji image URL.
          */
         "emoji"?: string;
+        /**
+          * Whether the reaction should be reactive.
+          * @remark When the reaction is interactive left clicking it will add 1 to the counter. Whereas when holding the Shift key and left clicking it will decrease the counter. The counter cannot go below 1.
+          * @default false
+         */
+        "interactive"?: boolean;
         /**
           * The name of the emoji to use as alternative image text.
+          * @default ':emoji'
          */
         "name"?: string;
         /**
           * Whether the reaction should show as reacted by the user.
+          * @default false
          */
         "reacted"?: boolean;
     }

packages/core/src/components/discord-reaction/discord-reaction.tsx

@@ -20,6 +20,7 @@ export class DiscordReaction implements ComponentInterface {
 
 	/**
 	 * The name of the emoji to use as alternative image text.
+	 * @default ':emoji'
 	 */
 	@Prop()
 	public name = ':emoji:';
@@ -33,10 +34,21 @@ export class DiscordReaction implements ComponentInterface {
 
 	/**
 	 * Whether the reaction should show as reacted by the user.
+	 * @default false
 	 */
 	@Prop()
 	public reacted = false;
 
+	/**
+	 * Whether the reaction should be reactive.
+	 * @remark When the reaction is interactive left clicking it will add 1 to the counter.
+	 * Whereas when holding the Shift key and left clicking it will decrease the counter.
+	 * The counter cannot go below 1.
+	 * @default false
+	 */
+	@Prop()
+	public interactive = false;
+
 	public render() {
 		return (
 			<div class={clsx('discord-reaction', { 'discord-reaction-reacted': this.reacted })} onClick={this.handleReactionClick.bind(this)}>
@@ -49,14 +61,16 @@ export class DiscordReaction implements ComponentInterface {
 	}
 
 	private handleReactionClick(event: MouseEvent) {
-		if (event.shiftKey) {
-			this.count--;
-		} else {
-			this.count++;
-		}
+		if (this.interactive) {
+			if (event.shiftKey) {
+				this.count--;
+			} else {
+				this.count++;
+			}
 
-		if (this.count <= 0) {
-			this.count = 1;
+			if (this.count <= 0) {
+				this.count = 1;
+			}
 		}
 	}
 }

packages/core/src/components/discord-reaction/readme.md

@@ -4,12 +4,13 @@
 
 ## Properties
 
-| Property  | Attribute | Description                                              | Type      | Default     |
-| --------- | --------- | -------------------------------------------------------- | --------- | ----------- |
-| `count`   | `count`   | The number of people who reacted.                        | `number`  | `1`         |
-| `emoji`   | `emoji`   | The reaction emoji image URL.                            | `string`  | `undefined` |
-| `name`    | `name`    | The name of the emoji to use as alternative image text.  | `string`  | `':emoji:'` |
-| `reacted` | `reacted` | Whether the reaction should show as reacted by the user. | `boolean` | `false`     |
+| Property      | Attribute     | Description                                              | Type      | Default     |
+| ------------- | ------------- | -------------------------------------------------------- | --------- | ----------- |
+| `count`       | `count`       | The number of people who reacted.                        | `number`  | `1`         |
+| `emoji`       | `emoji`       | The reaction emoji image URL.                            | `string`  | `undefined` |
+| `interactive` | `interactive` | Whether the reaction should be reactive.                 | `boolean` | `false`     |
+| `name`        | `name`        | The name of the emoji to use as alternative image text.  | `string`  | `':emoji:'` |
+| `reacted`     | `reacted`     | Whether the reaction should show as reacted by the user. | `boolean` | `false`     |
 
 ---
 

packages/core/src/index.html

@@ -177,7 +177,7 @@ <h3 class="title">Reactions</h3>
 						<discord-reactions slot="reactions">
 							<discord-reaction name="👍" emoji="/static/thumbsup.svg" count="1"></discord-reaction>
 							<discord-reaction name="👀" emoji="/static/eyes.svg" count="2" reacted></discord-reaction>
-							<discord-reaction name="👀" emoji="/static/dragonite.png" count="10" reacted></discord-reaction>
+							<discord-reaction interactive="true" name="dragonite" emoji="/static/dragonite.png" count="10" reacted></discord-reaction>
 						</discord-reactions>
 					</discord-message>
 				</discord-messages>