mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-03-02 12:01:41 +01:00
Code Issues Projects Releases Wiki Activity

Refactor Reactions Row Button to shared-components (#31993)

Browse Source 
* Refactoring of ReactionRowButton to shared component MVVM

* Removal of old component and creation of unit tests

* Update

* Update tests

* Update tests to mimic VM

* Update Lint Spacing

* Added onKeyDown to follow wcag rules

* Remove Unused code

* Update screenshots

* Removal of unessecery test and story

* Update snapshot

* Refactor reactions row VMs to granular setters and merge cheap snapshot updates

* Elist Fix

* Revert ReactionRowButtonToolTip Test

* Fix ReactionsRowButtonViewModel tooltip sync to use tooltip setProps

* Add dedicated ReactionsRowButtonViewModel unit tests for setters, tooltip sync, and click actions

* Better Wording On Functions

* Update snapshot

* Update packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButtonView.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* use native button and tighten view model

* Update Snapshots + small fixes on reactionrow

* Removal of Null on viewmodel and adapting ReactionRow

* Update test and removal of unused test since me MVVMD ReactionRowButton

* align assertions with refactored update behavior

* FIx issue with classNames component

* Update snapshot

* Removal of old test snapshot

* Update Snapshot

* Implement Css + Snapshot Updates

* Update Snapshot and css to match old component style

* restore MatrixClientContext fallback in ReactionsRow for export/test rendering

* restore client fallback in ReactionsRow to preserve export rendering

* Remove Unused Pcss FIle

* Update Css

* Update misstake always having button default to disabled render

* Remove unsimiler css to original component

* Update Snapshot to reflect css adjustments

* Update css

* Update font to compund

* Update css to reflect old component

* Update css to compund

* Update Snapshot and css

* Update css

* Update HTML snapshot

* Update css

* Update Css

* Update snapshots

* Update HTML snapshot

* Update css + snapshot

* Update HTML snapshot

* Removal of mx css

* Update snapshot based on css removal

* Update Html snapshot

* Apply suggestion from @florianduros

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* remove setContext from ReactionsRowButtonViewModel

* Update packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButtonView.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* add tooltipVm to ReactionsRowButtonViewSnapshot

* added compound token variables

* remove className from content and count inner elements

* use useMatrixClientContext() directly for ReactionsRowButtonViewModel

* Update snapshots

* Update snapshot + fix Typescript error on test file

* Removal of line-height in css

* Added line-height back and removed font: inherit;

* derive ReactionsRowButton className/ariaLabel types from HTML button attrs

* Update packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButtonView.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Update src/viewmodels/message-body/ReactionsRowButtonViewModel.ts

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Update src/viewmodels/message-body/ReactionsRowButtonViewModel.ts

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Update test/viewmodels/message-body/ReactionsRowButtonViewModel-test.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Update snapshots and lint issues

* Update model to respond to changes

* Update aria label on view

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
This commit is contained in:
Zack 2026-02-25 12:18:03 +01:00 committed by GitHub
parent 05598a3229
commit e26cbba541
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 760 additions and 869 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/res/css/_components.pcss
View File

@ -241,7 +241,6 @@
@import "./views/messages/_MjolnirBody.pcss";
@import "./views/messages/_PinnedMessageBadge.pcss";
@import "./views/messages/_ReactionsRow.pcss";
@import "./views/messages/_ReactionsRowButton.pcss";
@import "./views/messages/_RedactedBody.pcss";
@import "./views/messages/_RoomAvatarEvent.pcss";
@import "./views/messages/_TextualEvent.pcss";

34
apps/web/res/css/views/messages/_ReactionsRowButton.pcss
View File

@ -1,34 +0,0 @@
/*
Copyright 2019-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_ReactionsRowButton {
display: inline-flex;
line-height: $font-20px;
padding: 1px 6px;
border: 1px solid var(--cpd-color-gray-400);
border-radius: 10px;
background-color: var(--cpd-color-gray-200);
user-select: none;
align-items: center;
&.mx_ReactionsRowButton_selected {
background-color: $accent-300;
border-color: $accent-800;
}
&.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
.mx_ReactionsRowButton_content {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 4px;
}
}

54
apps/web/src/components/views/messages/ReactionsRow.tsx
View File

@ -6,22 +6,24 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, type SyntheticEvent } from "react";
import React, { useEffect, type JSX, type SyntheticEvent } from "react";
import classNames from "classnames";
import { type MatrixEvent, MatrixEventEvent, type Relations, RelationsEvent } from "matrix-js-sdk/src/matrix";
import { uniqBy } from "lodash";
import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
import { ReactionAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { ReactionsRowButtonView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
import { _t } from "../../../languageHandler";
import { isContentActionable } from "../../../utils/EventUtils";
import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
import ContextMenu, { aboveLeftOf, useContextMenu } from "../../structures/ContextMenu";
import ReactionPicker from "../emojipicker/ReactionPicker";
import ReactionsRowButton from "./ReactionsRowButton";
import RoomContext from "../../../contexts/RoomContext";
import AccessibleButton from "../elements/AccessibleButton";
import SettingsStore from "../../../settings/SettingsStore";
import { ReactionsRowButtonViewModel } from "../../../viewmodels/message-body/ReactionsRowButtonViewModel";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
// The maximum number of reactions to initially show on a message.
const MAX_ITEMS_WHEN_LIMITED = 8;
@ -64,6 +66,52 @@ const ReactButton: React.FC<IProps> = ({ mxEvent, reactions }) => {
);
};
interface ReactionsRowButtonItemProps {
mxEvent: MatrixEvent;
content: string;
count: number;
reactionEvents: MatrixEvent[];
myReactionEvent?: MatrixEvent;
disabled?: boolean;
customReactionImagesEnabled?: boolean;
}
const ReactionsRowButtonItem: React.FC<ReactionsRowButtonItemProps> = (props) => {
const client = useMatrixClientContext();
const vm = useCreateAutoDisposedViewModel(
() =>
new ReactionsRowButtonViewModel({
client,
mxEvent: props.mxEvent,
content: props.content,
count: props.count,
reactionEvents: props.reactionEvents,
myReactionEvent: props.myReactionEvent,
disabled: props.disabled,
customReactionImagesEnabled: props.customReactionImagesEnabled,
}),
);
useEffect(() => {
vm.setReactionData(props.content, props.reactionEvents, props.customReactionImagesEnabled);
}, [props.content, props.reactionEvents, props.customReactionImagesEnabled, vm]);
useEffect(() => {
vm.setCount(props.count);
}, [props.count, vm]);
useEffect(() => {
vm.setMyReactionEvent(props.myReactionEvent);
}, [props.myReactionEvent, vm]);
useEffect(() => {
vm.setDisabled(props.disabled);
}, [props.disabled, vm]);
return <ReactionsRowButtonView vm={vm} />;
};
interface IProps {
// The event we're displaying reactions for
mxEvent: MatrixEvent;
@ -186,7 +234,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
return mxEvent.getRelation()?.key === content;
});
return (
<ReactionsRowButton
<ReactionsRowButtonItem
key={content}
content={content}
count={deduplicatedEvents.length}

164
apps/web/src/components/views/messages/ReactionsRowButton.tsx
View File

@ -1,164 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019-2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import classNames from "classnames";
import { EventType, type MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
import { ReactionsRowButtonTooltipView } from "@element-hq/web-shared-components";
import { mediaFromMxc } from "../../../customisations/Media";
import { _t } from "../../../languageHandler";
import { formatList } from "../../../utils/FormattingUtils";
import dis from "../../../dispatcher/dispatcher";
import { ReactionsRowButtonTooltipViewModel } from "../../../viewmodels/message-body/ReactionsRowButtonTooltipViewModel";
import AccessibleButton from "../elements/AccessibleButton";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
export interface IProps {
// The event we're displaying reactions for
mxEvent: MatrixEvent;
// The reaction content / key / emoji
content: string;
// The count of votes for this key
count: number;
// A list of Matrix reaction events for this key
reactionEvents: MatrixEvent[];
// A possible Matrix event if the current user has voted for this type
myReactionEvent?: MatrixEvent;
// Whether to prevent quick-reactions by clicking on this reaction
disabled?: boolean;
// Whether to render custom image reactions
customReactionImagesEnabled?: boolean;
}
export default class ReactionsRowButton extends React.PureComponent<IProps> {
public static contextType = MatrixClientContext;
declare public context: React.ContextType<typeof MatrixClientContext>;
private reactionsRowButtonTooltipViewModel: ReactionsRowButtonTooltipViewModel;
public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
super(props, context);
this.reactionsRowButtonTooltipViewModel = new ReactionsRowButtonTooltipViewModel({
client: context,
mxEvent: props.mxEvent,
content: props.content,
reactionEvents: props.reactionEvents,
customReactionImagesEnabled: props.customReactionImagesEnabled,
});
}
public componentDidUpdate(prevProps: IProps): void {
if (
prevProps.mxEvent !== this.props.mxEvent ||
prevProps.content !== this.props.content ||
prevProps.reactionEvents !== this.props.reactionEvents ||
prevProps.customReactionImagesEnabled !== this.props.customReactionImagesEnabled
) {
// View model bails out if derived snapshot hasn't changed.
this.reactionsRowButtonTooltipViewModel.setProps({
client: this.context,
mxEvent: this.props.mxEvent,
content: this.props.content,
reactionEvents: this.props.reactionEvents,
customReactionImagesEnabled: this.props.customReactionImagesEnabled,
});
}
}
public componentWillUnmount(): void {
this.reactionsRowButtonTooltipViewModel.dispose();
}
public onClick = (): void => {
const { mxEvent, myReactionEvent, content } = this.props;
if (myReactionEvent) {
this.context.redactEvent(mxEvent.getRoomId()!, myReactionEvent.getId()!);
} else {
this.context.sendEvent(mxEvent.getRoomId()!, EventType.Reaction, {
"m.relates_to": {
rel_type: RelationType.Annotation,
event_id: mxEvent.getId()!,
key: content,
},
});
dis.dispatch({ action: "message_sent" });
}
};
public render(): React.ReactNode {
const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props;
const classes = classNames({
mx_ReactionsRowButton: true,
mx_ReactionsRowButton_selected: !!myReactionEvent,
});
const room = this.context.getRoom(mxEvent.getRoomId());
let label: string | undefined;
let customReactionName: string | undefined;
if (room) {
const senders: string[] = [];
for (const reactionEvent of reactionEvents) {
const member = room.getMember(reactionEvent.getSender()!);
senders.push(member?.name || reactionEvent.getSender()!);
customReactionName =
(this.props.customReactionImagesEnabled &&
REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) ||
undefined;
}
const reactors = formatList(senders, 6);
if (content) {
label = _t("timeline|reactions|label", {
reactors,
content: customReactionName || content,
});
} else {
label = reactors;
}
}
let reactionContent = (
<span className="mx_ReactionsRowButton_content" aria-hidden="true">
{content}
</span>
);
if (this.props.customReactionImagesEnabled && content.startsWith("mxc://")) {
const imageSrc = mediaFromMxc(content).srcHttp;
if (imageSrc) {
reactionContent = (
<img
className="mx_ReactionsRowButton_content"
alt={customReactionName || _t("timeline|reactions|custom_reaction_fallback_label")}
src={imageSrc}
width="16"
height="16"
/>
);
}
}
return (
<ReactionsRowButtonTooltipView vm={this.reactionsRowButtonTooltipViewModel}>
<AccessibleButton
className={classes}
aria-label={label}
onClick={this.onClick}
disabled={this.props.disabled}
>
{reactionContent}
<span className="mx_ReactionsRowButton_count" aria-hidden="true">
{count}
</span>
</AccessibleButton>
</ReactionsRowButtonTooltipView>
);
}
}

211
apps/web/src/viewmodels/message-body/ReactionsRowButtonViewModel.ts Normal file
View File

@ -0,0 +1,211 @@
/*
* Copyright 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import { EventType, type MatrixClient, type MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
import {
BaseViewModel,
type ReactionsRowButtonViewSnapshot,
type ReactionsRowButtonViewModel as ReactionsRowButtonViewModelInterface,
} from "@element-hq/web-shared-components";
import { mediaFromMxc } from "../../customisations/Media";
import { _t } from "../../languageHandler";
import { formatList } from "../../utils/FormattingUtils";
import dis from "../../dispatcher/dispatcher";
import { REACTION_SHORTCODE_KEY } from "../../components/views/messages/ReactionsRow";
import { ReactionsRowButtonTooltipViewModel } from "./ReactionsRowButtonTooltipViewModel";
export interface ReactionsRowButtonViewModelProps {
/**
* The Matrix client instance.
*/
client: MatrixClient;
/**
* The event we're displaying reactions for.
*/
mxEvent: MatrixEvent;
/**
* The reaction content / key / emoji.
*/
content: string;
/**
* The count of votes for this key.
*/
count: number;
/**
* The CSS class name.
*/
className?: string;
/**
* A list of Matrix reaction events for this key.
*/
reactionEvents: MatrixEvent[];
/**
* A possible Matrix event if the current user has voted for this type.
*/
myReactionEvent?: MatrixEvent;
/**
* Whether to prevent quick-reactions by clicking on this reaction.
*/
disabled?: boolean;
/**
* Whether to render custom image reactions.
*/
customReactionImagesEnabled?: boolean;
}
export class ReactionsRowButtonViewModel
extends BaseViewModel<ReactionsRowButtonViewSnapshot, ReactionsRowButtonViewModelProps>
implements ReactionsRowButtonViewModelInterface
{
private readonly tooltipVm: ReactionsRowButtonTooltipViewModel;
private static readonly getAriaLabel = (snapshot: ReactionsRowButtonViewSnapshot): string | undefined =>
(snapshot as ReactionsRowButtonViewSnapshot & { ariaLabel?: string }).ariaLabel;
private static readonly computeSnapshot = (
props: ReactionsRowButtonViewModelProps,
tooltipVm: ReactionsRowButtonTooltipViewModel,
): ReactionsRowButtonViewSnapshot => {
const {
client,
mxEvent,
content,
count,
className,
reactionEvents,
myReactionEvent,
disabled,
customReactionImagesEnabled,
} = props;
const room = client.getRoom(mxEvent.getRoomId());
let ariaLabel: string | undefined;
let customReactionName: string | undefined;
if (room) {
const senders: string[] = [];
for (const reactionEvent of reactionEvents) {
const member = room.getMember(reactionEvent.getSender()!);
senders.push(member?.name || reactionEvent.getSender()!);
customReactionName =
(customReactionImagesEnabled && REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) ||
undefined;
}
const reactors = formatList(senders, 6);
if (content) {
ariaLabel = _t("timeline|reactions|label", {
reactors,
content: customReactionName || content,
});
} else {
ariaLabel = reactors;
}
}
let imageSrc: string | undefined;
let imageAlt: string | undefined;
if (customReactionImagesEnabled && content.startsWith("mxc://")) {
const resolved = mediaFromMxc(content).srcHttp;
if (resolved) {
imageSrc = resolved;
imageAlt = customReactionName || _t("timeline|reactions|custom_reaction_fallback_label");
}
}
const snapshot = {
content,
count,
className,
ariaLabel,
isSelected: !!myReactionEvent,
isDisabled: !!disabled,
imageSrc,
imageAlt,
tooltipVm,
};
return snapshot;
};
public constructor(props: ReactionsRowButtonViewModelProps) {
const tooltipVm = new ReactionsRowButtonTooltipViewModel({
client: props.client,
mxEvent: props.mxEvent,
content: props.content,
reactionEvents: props.reactionEvents,
customReactionImagesEnabled: props.customReactionImagesEnabled,
});
super(props, ReactionsRowButtonViewModel.computeSnapshot(props, tooltipVm));
this.tooltipVm = tooltipVm;
this.disposables.track(tooltipVm);
}
private setSnapshot(nextSnapshot: ReactionsRowButtonViewSnapshot): void {
const currentSnapshot = this.snapshot.current;
if (
nextSnapshot.content === currentSnapshot.content &&
nextSnapshot.count === currentSnapshot.count &&
ReactionsRowButtonViewModel.getAriaLabel(nextSnapshot) ===
ReactionsRowButtonViewModel.getAriaLabel(currentSnapshot) &&
nextSnapshot.isSelected === currentSnapshot.isSelected &&
nextSnapshot.isDisabled === currentSnapshot.isDisabled &&
nextSnapshot.imageSrc === currentSnapshot.imageSrc &&
nextSnapshot.imageAlt === currentSnapshot.imageAlt
) {
return;
}
this.snapshot.set(nextSnapshot);
}
public setReactionData(
content: string,
reactionEvents: MatrixEvent[],
customReactionImagesEnabled?: boolean,
): void {
this.props = { ...this.props, content, reactionEvents, customReactionImagesEnabled };
this.tooltipVm.setProps({ content, reactionEvents, customReactionImagesEnabled });
this.setSnapshot(ReactionsRowButtonViewModel.computeSnapshot(this.props, this.tooltipVm));
}
public setCount(count: number): void {
this.props = { ...this.props, count };
this.snapshot.merge({ count });
}
public setMyReactionEvent(myReactionEvent?: MatrixEvent): void {
this.props = { ...this.props, myReactionEvent };
this.snapshot.merge({ isSelected: !!myReactionEvent });
}
public setDisabled(disabled?: boolean): void {
this.props = { ...this.props, disabled };
this.snapshot.merge({ isDisabled: !!disabled });
}
public onClick = (): void => {
const { client, mxEvent, myReactionEvent, content, disabled } = this.props;
if (disabled) return;
if (myReactionEvent) {
client.redactEvent(mxEvent.getRoomId()!, myReactionEvent.getId()!);
return;
}
client.sendEvent(mxEvent.getRoomId()!, EventType.Reaction, {
"m.relates_to": {
rel_type: RelationType.Annotation,
event_id: mxEvent.getId()!,
key: content,
},
});
dis.dispatch({ action: "message_sent" });
};
}

546
apps/web/test/unit-tests/components/views/messages/ReactionsRowButton-test.tsx
View File

@ -1,546 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 Beeper
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { EventType, type IContent, MatrixEvent, RelationType, Room } from "matrix-js-sdk/src/matrix";
import { fireEvent, render } from "jest-matrix-react";
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
import { getMockClientWithEventEmitter } from "../../../../test-utils";
import ReactionsRowButton, { type IProps } from "../../../../../src/components/views/messages/ReactionsRowButton";
import dis from "../../../../../src/dispatcher/dispatcher";
import { type Media, mediaFromMxc } from "../../../../../src/customisations/Media";
jest.mock("../../../../../src/dispatcher/dispatcher");
jest.mock("../../../../../src/customisations/Media", () => ({
mediaFromMxc: jest.fn(),
}));
jest.mock("@element-hq/web-shared-components", () => {
const actual = jest.requireActual("@element-hq/web-shared-components");
return {
...actual,
ReactionsRowButtonTooltipView: ({ children }: { children: React.ReactNode }) => <>{children}</>,
};
});
const mockMediaFromMxc = mediaFromMxc as jest.MockedFunction<typeof mediaFromMxc>;
describe("ReactionsRowButton", () => {
const userId = "@alice:server";
const roomId = "!randomcharacters:aser.ver";
const mockClient = getMockClientWithEventEmitter({
getRoom: jest.fn(),
sendEvent: jest.fn().mockResolvedValue({ event_id: "$sent_event" }),
redactEvent: jest.fn().mockResolvedValue({}),
});
const room = new Room(roomId, mockClient, userId);
const createProps = (relationContent: IContent): IProps => ({
mxEvent: new MatrixEvent({
room_id: roomId,
event_id: "$test:example.com",
content: { body: "test" },
}),
content: relationContent["m.relates_to"]?.key || "",
count: 2,
reactionEvents: [
new MatrixEvent({
type: "m.reaction",
sender: "@user1:example.com",
content: relationContent,
}),
new MatrixEvent({
type: "m.reaction",
sender: "@user2:example.com",
content: relationContent,
}),
],
customReactionImagesEnabled: true,
});
beforeEach(function () {
jest.clearAllMocks();
mockClient.credentials = { userId: userId };
mockClient.getRoom.mockImplementation((roomId: string): Room | null => {
return roomId === room.roomId ? room : null;
});
// Default mock for mediaFromMxc
mockMediaFromMxc.mockReturnValue({
srcHttp: "https://not.a.real.url",
} as unknown as Media);
});
it("renders reaction row button emojis correctly", () => {
const props = createProps({
"m.relates_to": {
event_id: "$user2:example.com",
key: "👍",
rel_type: "m.annotation",
},
});
const root = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
expect(root.asFragment()).toMatchSnapshot();
// Try hover and make sure that the ReactionsRowButtonTooltip works
const reactionButton = root.getByRole("button");
const event = new MouseEvent("mouseover", {
bubbles: true,
cancelable: true,
});
reactionButton.dispatchEvent(event);
expect(root.asFragment()).toMatchSnapshot();
});
it("renders reaction row button custom image reactions correctly", () => {
const props = createProps({
"com.beeper.reaction.shortcode": ":test:",
"shortcode": ":test:",
"m.relates_to": {
event_id: "$user1:example.com",
key: "mxc://example.com/123456789",
rel_type: "m.annotation",
},
});
const root = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
expect(root.asFragment()).toMatchSnapshot();
// Try hover and make sure that the ReactionsRowButtonTooltip works
const reactionButton = root.getByRole("button");
const event = new MouseEvent("mouseover", {
bubbles: true,
cancelable: true,
});
reactionButton.dispatchEvent(event);
expect(root.asFragment()).toMatchSnapshot();
});
it("renders without a room", () => {
mockClient.getRoom.mockImplementation(() => null);
const props = createProps({});
const root = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
expect(root.asFragment()).toMatchSnapshot();
});
it("calls setProps on ViewModel when props change", () => {
const props = createProps({
"m.relates_to": {
event_id: "$user1:example.com",
key: "👍",
rel_type: "m.annotation",
},
});
const { rerender, container } = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
// Create new props with different values
const newMxEvent = new MatrixEvent({
room_id: roomId,
event_id: "$test2:example.com",
content: { body: "test2" },
});
const newReactionEvents = [
new MatrixEvent({
type: "m.reaction",
sender: "@user3:example.com",
content: {
"m.relates_to": {
event_id: "$user3:example.com",
key: "👎",
rel_type: "m.annotation",
},
},
}),
];
const updatedProps: IProps = {
...props,
mxEvent: newMxEvent,
content: "👎",
reactionEvents: newReactionEvents,
customReactionImagesEnabled: false,
};
rerender(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...updatedProps} />
</MatrixClientContext.Provider>,
);
// The component should have updated - verify by checking the rendered content
expect(container.querySelector(".mx_ReactionsRowButton_content")?.textContent).toBe("👎");
});
it("disposes ViewModel on unmount", () => {
const props = createProps({
"m.relates_to": {
event_id: "$user1:example.com",
key: "👍",
rel_type: "m.annotation",
},
});
const { unmount } = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
// Unmount should not throw
expect(() => unmount()).not.toThrow();
});
it("redacts reaction when clicking with myReactionEvent", () => {
const myReactionEvent = new MatrixEvent({
type: "m.reaction",
sender: userId,
event_id: "$my_reaction:example.com",
content: {
"m.relates_to": {
event_id: "$user1:example.com",
key: "👍",
rel_type: "m.annotation",
},
},
});
const props: IProps = {
...createProps({
"m.relates_to": {
event_id: "$user1:example.com",
key: "👍",
rel_type: "m.annotation",
},
}),
myReactionEvent,
};
const root = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
const button = root.getByRole("button");
fireEvent.click(button);
expect(mockClient.redactEvent).toHaveBeenCalledWith(roomId, "$my_reaction:example.com");
});
it("sends reaction when clicking without myReactionEvent", () => {
const props = createProps({
"m.relates_to": {
event_id: "$test:example.com",
key: "👍",
rel_type: "m.annotation",
},
});
const root = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
const button = root.getByRole("button");
fireEvent.click(button);
expect(mockClient.sendEvent).toHaveBeenCalledWith(roomId, EventType.Reaction, {
"m.relates_to": {
rel_type: RelationType.Annotation,
event_id: "$test:example.com",
key: "👍",
},
});
expect(dis.dispatch).toHaveBeenCalledWith({ action: "message_sent" });
});
it("uses reactors as label when content is empty", () => {
const props: IProps = {
mxEvent: new MatrixEvent({
room_id: roomId,
event_id: "$test:example.com",
content: { body: "test" },
}),
content: "", // Empty content
count: 2,
reactionEvents: [
new MatrixEvent({
type: "m.reaction",
sender: "@user1:example.com",
content: {},
}),
new MatrixEvent({
type: "m.reaction",
sender: "@user2:example.com",
content: {},
}),
],
customReactionImagesEnabled: true,
};
const root = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
// The button should still render
const button = root.getByRole("button");
expect(button).toBeInTheDocument();
});
it("renders custom image reaction with fallback label when no shortcode", () => {
const props: IProps = {
mxEvent: new MatrixEvent({
room_id: roomId,
event_id: "$test:example.com",
content: { body: "test" },
}),
content: "mxc://example.com/custom_image",
count: 1,
reactionEvents: [
new MatrixEvent({
type: "m.reaction",
sender: "@user1:example.com",
content: {
"m.relates_to": {
event_id: "$test:example.com",
key: "mxc://example.com/custom_image",
rel_type: "m.annotation",
},
},
}),
],
customReactionImagesEnabled: true,
};
const root = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
// Should render an image element for custom reaction
const img = root.container.querySelector("img.mx_ReactionsRowButton_content");
expect(img).toBeInTheDocument();
expect(img).toHaveAttribute("src", "https://not.a.real.url");
});
it("falls back to text when mxc URL cannot be converted to HTTP", () => {
// Make mediaFromMxc return null srcHttp to simulate failed conversion
mockMediaFromMxc.mockReturnValueOnce({
srcHttp: null,
} as unknown as Media);
const props: IProps = {
mxEvent: new MatrixEvent({
room_id: roomId,
event_id: "$test:example.com",
content: { body: "test" },
}),
content: "mxc://example.com/invalid_image",
count: 1,
reactionEvents: [
new MatrixEvent({
type: "m.reaction",
sender: "@user1:example.com",
content: {
"m.relates_to": {
event_id: "$test:example.com",
key: "mxc://example.com/invalid_image",
rel_type: "m.annotation",
},
},
}),
],
customReactionImagesEnabled: true,
};
const root = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
// Should render span (not img) when imageSrc is null
const span = root.container.querySelector("span.mx_ReactionsRowButton_content");
expect(span).toBeInTheDocument();
const img = root.container.querySelector("img.mx_ReactionsRowButton_content");
expect(img).not.toBeInTheDocument();
});
it("updates ViewModel when only mxEvent changes", () => {
const props = createProps({
"m.relates_to": {
event_id: "$user1:example.com",
key: "👍",
rel_type: "m.annotation",
},
});
const { rerender } = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
// Only change mxEvent
const newMxEvent = new MatrixEvent({
room_id: roomId,
event_id: "$test2:example.com",
content: { body: "test2" },
});
expect(() =>
rerender(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} mxEvent={newMxEvent} />
</MatrixClientContext.Provider>,
),
).not.toThrow();
});
it("updates ViewModel when only content changes", () => {
const props = createProps({
"m.relates_to": {
event_id: "$user1:example.com",
key: "👍",
rel_type: "m.annotation",
},
});
const { rerender, container } = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
// Only change content
rerender(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} content="👎" />
</MatrixClientContext.Provider>,
);
expect(container.querySelector(".mx_ReactionsRowButton_content")?.textContent).toBe("👎");
});
it("updates ViewModel when only reactionEvents changes", () => {
const props = createProps({
"m.relates_to": {
event_id: "$user1:example.com",
key: "👍",
rel_type: "m.annotation",
},
});
const { rerender } = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
// Only change reactionEvents
const newReactionEvents = [
new MatrixEvent({
type: "m.reaction",
sender: "@user3:example.com",
content: {
"m.relates_to": {
event_id: "$user1:example.com",
key: "👍",
rel_type: "m.annotation",
},
},
}),
];
expect(() =>
rerender(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} reactionEvents={newReactionEvents} />
</MatrixClientContext.Provider>,
),
).not.toThrow();
});
it("updates ViewModel when only customReactionImagesEnabled changes", () => {
const props = createProps({
"m.relates_to": {
event_id: "$user1:example.com",
key: "👍",
rel_type: "m.annotation",
},
});
const { rerender } = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
// Only change customReactionImagesEnabled
expect(() =>
rerender(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} customReactionImagesEnabled={false} />
</MatrixClientContext.Provider>,
),
).not.toThrow();
});
it("does not update ViewModel when props stay the same", () => {
const props = createProps({
"m.relates_to": {
event_id: "$user1:example.com",
key: "👍",
rel_type: "m.annotation",
},
});
const { rerender } = render(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
);
// Rerender with same props - setProps should not be called
expect(() =>
rerender(
<MatrixClientContext.Provider value={mockClient}>
<ReactionsRowButton {...props} />
</MatrixClientContext.Provider>,
),
).not.toThrow();
});
});

120
apps/web/test/unit-tests/components/views/messages/__snapshots__/ReactionsRowButton-test.tsx.snap
View File

@ -1,120 +0,0 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`ReactionsRowButton renders reaction row button custom image reactions correctly 1`] = `
<DocumentFragment>
<div
aria-label="@user1:example.com and @user2:example.com reacted with :test:"
class="mx_AccessibleButton mx_ReactionsRowButton"
role="button"
tabindex="0"
>
<img
alt=":test:"
class="mx_ReactionsRowButton_content"
height="16"
src="https://not.a.real.url"
width="16"
/>
<span
aria-hidden="true"
class="mx_ReactionsRowButton_count"
>
2
</span>
</div>
</DocumentFragment>
`;
exports[`ReactionsRowButton renders reaction row button custom image reactions correctly 2`] = `
<DocumentFragment>
<div
aria-label="@user1:example.com and @user2:example.com reacted with :test:"
class="mx_AccessibleButton mx_ReactionsRowButton"
role="button"
tabindex="0"
>
<img
alt=":test:"
class="mx_ReactionsRowButton_content"
height="16"
src="https://not.a.real.url"
width="16"
/>
<span
aria-hidden="true"
class="mx_ReactionsRowButton_count"
>
2
</span>
</div>
</DocumentFragment>
`;
exports[`ReactionsRowButton renders reaction row button emojis correctly 1`] = `
<DocumentFragment>
<div
aria-label="@user1:example.com and @user2:example.com reacted with 👍"
class="mx_AccessibleButton mx_ReactionsRowButton"
role="button"
tabindex="0"
>
<span
aria-hidden="true"
class="mx_ReactionsRowButton_content"
>
👍
</span>
<span
aria-hidden="true"
class="mx_ReactionsRowButton_count"
>
2
</span>
</div>
</DocumentFragment>
`;
exports[`ReactionsRowButton renders reaction row button emojis correctly 2`] = `
<DocumentFragment>
<div
aria-label="@user1:example.com and @user2:example.com reacted with 👍"
class="mx_AccessibleButton mx_ReactionsRowButton"
role="button"
tabindex="0"
>
<span
aria-hidden="true"
class="mx_ReactionsRowButton_content"
>
👍
</span>
<span
aria-hidden="true"
class="mx_ReactionsRowButton_count"
>
2
</span>
</div>
</DocumentFragment>
`;
exports[`ReactionsRowButton renders without a room 1`] = `
<DocumentFragment>
<div
class="mx_AccessibleButton mx_ReactionsRowButton"
role="button"
tabindex="0"
>
<span
aria-hidden="true"
class="mx_ReactionsRowButton_content"
/>
<span
aria-hidden="true"
class="mx_ReactionsRowButton_count"
>
2
</span>
</div>
</DocumentFragment>
`;

2
apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
View File

File diff suppressed because one or more lines are too long

171
apps/web/test/viewmodels/message-body/ReactionsRowButtonViewModel-test.tsx Normal file
View File

@ -0,0 +1,171 @@
/*
* Copyright 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import { EventType, type MatrixClient, type MatrixEvent, RelationType, type Room } from "matrix-js-sdk/src/matrix";
import {
ReactionsRowButtonViewModel,
type ReactionsRowButtonViewModelProps,
} from "../../../src/viewmodels/message-body/ReactionsRowButtonViewModel";
import { type ReactionsRowButtonTooltipViewModel } from "../../../src/viewmodels/message-body/ReactionsRowButtonTooltipViewModel";
import { createTestClient, mkEvent, mkStubRoom } from "../../test-utils";
import dis from "../../../src/dispatcher/dispatcher";
jest.mock("../../../src/dispatcher/dispatcher");
describe("ReactionsRowButtonViewModel", () => {
let client: MatrixClient;
let room: Room;
let mxEvent: MatrixEvent;
const createReactionEvent = (senderId: string, key = "👍"): MatrixEvent => {
return mkEvent({
event: true,
type: "m.reaction",
room: room.roomId,
user: senderId,
content: {
"m.relates_to": {
rel_type: "m.annotation",
event_id: mxEvent.getId(),
key,
},
},
});
};
const createProps = (overrides?: Partial<ReactionsRowButtonViewModelProps>): ReactionsRowButtonViewModelProps => ({
client,
mxEvent,
content: "👍",
count: 2,
reactionEvents: [createReactionEvent("@alice:example.org"), createReactionEvent("@bob:example.org")],
disabled: false,
customReactionImagesEnabled: false,
...overrides,
});
const getTooltipVm = (vm: ReactionsRowButtonViewModel): ReactionsRowButtonTooltipViewModel =>
vm.getSnapshot().tooltipVm as ReactionsRowButtonTooltipViewModel;
const getAriaLabel = (vm: ReactionsRowButtonViewModel): string | undefined =>
(vm.getSnapshot() as { ariaLabel?: string }).ariaLabel;
beforeEach(() => {
jest.clearAllMocks();
client = createTestClient();
room = mkStubRoom("!room:example.org", "Test Room", client);
jest.spyOn(client, "getRoom").mockReturnValue(room);
mxEvent = mkEvent({
event: true,
type: "m.room.message",
room: room.roomId,
user: "@sender:example.org",
content: { body: "Test message", msgtype: "m.text" },
});
});
it("updates count with merge and does not touch tooltip props", () => {
const vm = new ReactionsRowButtonViewModel(createProps());
const tooltipSetPropsSpy = jest.spyOn(getTooltipVm(vm), "setProps");
const listener = jest.fn();
vm.subscribe(listener);
vm.setCount(5);
expect(vm.getSnapshot().count).toBe(5);
expect(listener).toHaveBeenCalledTimes(1);
expect(tooltipSetPropsSpy).not.toHaveBeenCalled();
vm.setCount(5);
expect(listener).toHaveBeenCalledTimes(2);
});
it("includes an ariaLabel in the snapshot", () => {
const vm = new ReactionsRowButtonViewModel(createProps());
expect(getAriaLabel(vm)).toContain("reacted with 👍");
});
it("updates selected state with myReactionEvent without touching tooltip props", () => {
const vm = new ReactionsRowButtonViewModel(createProps());
const tooltipSetPropsSpy = jest.spyOn(getTooltipVm(vm), "setProps");
const listener = jest.fn();
vm.subscribe(listener);
const myReactionEvent = createReactionEvent("@me:example.org");
vm.setMyReactionEvent(myReactionEvent);
expect(vm.getSnapshot().isSelected).toBe(true);
expect(listener).toHaveBeenCalledTimes(1);
expect(tooltipSetPropsSpy).not.toHaveBeenCalled();
});
it("updates disabled state without touching tooltip props", () => {
const vm = new ReactionsRowButtonViewModel(createProps({ disabled: false }));
const tooltipSetPropsSpy = jest.spyOn(getTooltipVm(vm), "setProps");
vm.setDisabled(true);
expect(vm.getSnapshot().isDisabled).toBe(true);
expect(tooltipSetPropsSpy).not.toHaveBeenCalled();
});
it("setReactionData forwards to tooltip via setProps and updates snapshot content", () => {
const vm = new ReactionsRowButtonViewModel(createProps());
const tooltipSetPropsSpy = jest.spyOn(getTooltipVm(vm), "setProps");
const reactionEvents = [createReactionEvent("@carol:example.org", "👎")];
vm.setReactionData("👎", reactionEvents, false);
expect(vm.getSnapshot().content).toBe("👎");
expect(tooltipSetPropsSpy).toHaveBeenCalledWith({
content: "👎",
reactionEvents,
customReactionImagesEnabled: false,
});
vm.setReactionData("👎", reactionEvents, false);
expect(tooltipSetPropsSpy).toHaveBeenCalledTimes(2);
});
it("redacts reaction on click when myReactionEvent exists", () => {
const myReactionEvent = createReactionEvent("@me:example.org");
const vm = new ReactionsRowButtonViewModel(createProps({ myReactionEvent }));
vm.onClick();
expect(client.redactEvent).toHaveBeenCalledWith(room.roomId, myReactionEvent.getId());
expect(client.sendEvent).not.toHaveBeenCalled();
});
it("sends reaction and dispatches message_sent when no myReactionEvent exists", () => {
const vm = new ReactionsRowButtonViewModel(createProps());
vm.onClick();
expect(client.sendEvent).toHaveBeenCalledWith(room.roomId, EventType.Reaction, {
"m.relates_to": {
rel_type: RelationType.Annotation,
event_id: mxEvent.getId(),
key: "👍",
},
});
expect(dis.dispatch).toHaveBeenCalledWith({ action: "message_sent" });
});
it("does nothing on click when disabled", () => {
const vm = new ReactionsRowButtonViewModel(createProps({ disabled: true }));
vm.onClick();
expect(client.redactEvent).not.toHaveBeenCalled();
expect(client.sendEvent).not.toHaveBeenCalled();
expect(dis.dispatch).not.toHaveBeenCalled();
});
});

BIN
packages/shared-components/__vis__/linux/__baselines__/message-body/ReactionsRowButton/ReactionsRowButton.stories.tsx/default-auto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
packages/shared-components/__vis__/linux/__baselines__/message-body/ReactionsRowButton/ReactionsRowButton.stories.tsx/selected-auto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
packages/shared-components/__vis__/linux/__baselines__/message-body/ReactionsRowButton/ReactionsRowButton.stories.tsx/with-tooltip-auto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

1
packages/shared-components/src/index.ts
View File

@ -20,6 +20,7 @@ export * from "./message-body/MediaBody";
export * from "./message-body/MessageTimestampView";
export * from "./message-body/DecryptionFailureBodyView";
export * from "./message-body/ReactionsRowButtonTooltip";
export * from "./message-body/ReactionsRowButton";
export * from "./message-body/TimelineSeparator/";
export * from "./pill-input/Pill";
export * from "./pill-input/PillInput";

39
packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButton.module.css Normal file
View File

@ -0,0 +1,39 @@
/*
* Copyright 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
.reactionsRowButton {
display: inline-flex;
all: unset;
line-height: var(--cpd-font-size-heading-sm);
padding: 1px var(--cpd-space-1-5x);
border: 1px solid var(--cpd-color-gray-400);
border-radius: 10px;
background-color: var(--cpd-color-gray-200);
user-select: none;
align-items: center;
}
.reactionsRowButtonSelected {
background-color: var(--cpd-color-green-300);
border-color: var(--cpd-color-green-800);
}
.reactionsRowButtonDisabled {
cursor: not-allowed;
}
.reactionsRowButtonContent {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: var(--cpd-space-1x);
}
.reactionsRowButtonCount {
white-space: nowrap;
}

93
packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButton.stories.tsx Normal file
View File

@ -0,0 +1,93 @@
/*
* Copyright 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX } from "react";
import { fn } from "storybook/test";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { useMockedViewModel } from "../../viewmodel";
import { type ReactionsRowButtonTooltipViewSnapshot } from "../ReactionsRowButtonTooltip";
import {
ReactionsRowButtonView,
type ReactionsRowButtonViewSnapshot,
type ReactionsRowButtonViewActions,
} from "./ReactionsRowButtonView";
type WrapperProps = Omit<ReactionsRowButtonViewSnapshot, "tooltipVm"> &
Partial<ReactionsRowButtonViewActions> & {
ariaLabel?: string;
tooltipFormattedSenders?: ReactionsRowButtonTooltipViewSnapshot["formattedSenders"];
tooltipCaption?: ReactionsRowButtonTooltipViewSnapshot["caption"];
tooltipOpen?: ReactionsRowButtonTooltipViewSnapshot["tooltipOpen"];
};
const ReactionsRowButtonViewWrapper = ({
tooltipFormattedSenders,
tooltipCaption,
tooltipOpen,
onClick,
...snapshotProps
}: WrapperProps): JSX.Element => {
const tooltipVm = useMockedViewModel(
{
formattedSenders: tooltipFormattedSenders,
caption: tooltipCaption,
tooltipOpen,
},
{},
);
const vm = useMockedViewModel(
{
...snapshotProps,
tooltipVm,
},
{
onClick: onClick ?? fn(),
},
);
return <ReactionsRowButtonView vm={vm} />;
};
const meta = {
title: "MessageBody/ReactionsRowButton",
component: ReactionsRowButtonViewWrapper,
tags: ["autodocs"],
args: {
content: "👍",
count: 2,
ariaLabel: "Alice and Bob reacted with 👍",
isSelected: false,
isDisabled: false,
imageSrc: undefined,
imageAlt: undefined,
tooltipFormattedSenders: undefined,
tooltipCaption: undefined,
tooltipOpen: true,
},
} satisfies Meta<typeof ReactionsRowButtonViewWrapper>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};
export const Selected: Story = {
args: {
isSelected: true,
},
};
export const WithTooltip: Story = {
args: {
count: 3,
tooltipFormattedSenders: "Alice, Bob and Charlie",
tooltipCaption: ":thumbsup:",
tooltipOpen: true,
},
};

27
packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButton.test.tsx Normal file
View File

@ -0,0 +1,27 @@
/*
* Copyright 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import { composeStories } from "@storybook/react-vite";
import { render } from "@test-utils";
import React from "react";
import { describe, it, expect } from "vitest";
import * as stories from "./ReactionsRowButton.stories";
const { Default, Selected } = composeStories(stories);
describe("ReactionsRowButton", () => {
it("renders the default reaction button", () => {
const { container } = render(<Default />);
expect(container).toMatchSnapshot();
});
it("renders the selected reaction button", () => {
const { container } = render(<Selected />);
expect(container).toMatchSnapshot();
});
});

104
packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButtonView.tsx Normal file
View File

@ -0,0 +1,104 @@
/*
* Copyright 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import React, { type HTMLAttributes, type JSX } from "react";
import classNames from "classnames";
import { type ViewModel, useViewModel } from "../../viewmodel";
import { ReactionsRowButtonTooltipView, type ReactionsRowButtonTooltipViewModel } from "../ReactionsRowButtonTooltip";
import styles from "./ReactionsRowButton.module.css";
export interface ReactionsRowButtonViewSnapshot extends Pick<
HTMLAttributes<HTMLButtonElement>,
"className" | "aria-label"
> {
/**
* The reaction content to display when not using a custom image.
*/
content?: string;
/**
* The total number of reactions for this content.
*/
count: number;
/**
* Whether the reaction button is selected by the current user.
*/
isSelected: boolean;
/**
* Whether the reaction button is disabled.
* @default false
*/
isDisabled?: boolean;
/**
* The image URL to render when using a custom reaction image.
*/
imageSrc?: string;
/**
* The alt text for the custom reaction image.
*/
imageAlt?: string;
/**
* View model for the tooltip wrapper.
*/
tooltipVm: ReactionsRowButtonTooltipViewModel;
}
export interface ReactionsRowButtonViewActions {
/**
* Called when the user activates the reaction button.
*/
onClick: () => void;
}
export type ReactionsRowButtonViewModel = ViewModel<ReactionsRowButtonViewSnapshot> & ReactionsRowButtonViewActions;
interface ReactionsRowButtonViewProps {
/**
* The view model for the reactions row button.
*/
vm: ReactionsRowButtonViewModel;
}
/**
* Renders the reaction button in a reactions row.
*/
export function ReactionsRowButtonView({ vm }: Readonly<ReactionsRowButtonViewProps>): JSX.Element {
const snapshot = useViewModel(vm) as ReactionsRowButtonViewSnapshot & { ariaLabel?: string };
const { content, count, className, isSelected, isDisabled, imageSrc, imageAlt, tooltipVm } = snapshot;
const ariaLabel = snapshot["aria-label"] ?? snapshot.ariaLabel;
const ariaDisabled = isDisabled ? true : undefined;
const classes = classNames(className, styles.reactionsRowButton, {
[styles.reactionsRowButtonSelected]: isSelected,
[styles.reactionsRowButtonDisabled]: isDisabled,
});
const reactionContent = imageSrc ? (
<img className={styles.reactionsRowButtonContent} alt={imageAlt ?? ""} src={imageSrc} width="16" height="16" />
) : (
<span className={styles.reactionsRowButtonContent} aria-hidden="true">
{content ?? ""}
</span>
);
return (
<ReactionsRowButtonTooltipView vm={tooltipVm}>
<button
type="button"
className={classes}
tabIndex={0}
aria-label={ariaLabel}
aria-disabled={ariaDisabled}
onClick={isDisabled ? undefined : vm.onClick}
>
{reactionContent}
<span className={styles.reactionsRowButtonCount} aria-hidden="true">
{count}
</span>
</button>
</ReactionsRowButtonTooltipView>
);
}

49
packages/shared-components/src/message-body/ReactionsRowButton/__snapshots__/ReactionsRowButton.test.tsx.snap Normal file
View File

@ -0,0 +1,49 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`ReactionsRowButton > renders the default reaction button 1`] = `
<div>
<button
aria-label="Alice and Bob reacted with 👍"
class="reactionsRowButton"
tabindex="0"
type="button"
>
<span
aria-hidden="true"
class="reactionsRowButtonContent"
>
👍
</span>
<span
aria-hidden="true"
class="reactionsRowButtonCount"
>
2
</span>
</button>
</div>
`;
exports[`ReactionsRowButton > renders the selected reaction button 1`] = `
<div>
<button
aria-label="Alice and Bob reacted with 👍"
class="reactionsRowButton reactionsRowButtonSelected"
tabindex="0"
type="button"
>
<span
aria-hidden="true"
class="reactionsRowButtonContent"
>
👍
</span>
<span
aria-hidden="true"
class="reactionsRowButtonCount"
>
2
</span>
</button>
</div>
`;

13
packages/shared-components/src/message-body/ReactionsRowButton/index.tsx Normal file
View File

@ -0,0 +1,13 @@
/*
* Copyright 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
export {
ReactionsRowButtonView,
type ReactionsRowButtonViewSnapshot,
type ReactionsRowButtonViewModel,
type ReactionsRowButtonViewActions,
} from "./ReactionsRowButtonView";