sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Refactor EventTile using the MVVM pattern - #3 (#33516)

Browse Source 
* Introduce thin EventTile view model snapshot

* Fix errors after merge conflict resolution
This commit is contained in:
rbondesson
2026-05-20 08:32:05 +00:00
committed by GitHub
parent 0140563b64
commit d41ff70057
4 changed files with 745 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/views/rooms/EventTile.tsx
+66 -132
View File
@@ -101,26 +101,9 @@ import PinningUtils from "../../../utils/PinningUtils";
import { EventPreview } from "./EventPreview";
import { E2eMessageSharedIcon } from "./EventTile/E2eMessageSharedIcon.tsx";
import { E2ePadlock, E2ePadlockIcon } from "./EventTile/E2ePadlock.tsx";
import {
getAriaLive,
getEventTileAvatarMember,
getEventTileClassState,
getEventTileLineClassState,
getEventTileSenderProfileState,
getEventTileTimestamp,
getFooterDisplayState,
getIsContinuation,
getReplyChainAlwaysShowTimestamps,
getScrollToken,
getSenderProfileMode,
getShouldShowMessageActionBar,
getShouldShowTimestamp,
getShouldViewUserOnClick,
getTimestampDisplayState,
isSendingStatus,
} from "./EventTile/eventTileDerivedState";
import SettingsStore from "../../../settings/SettingsStore";
import { CardContext } from "../right_panel/context";
import { EventTileViewModel } from "../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
import {
MessageTimestampViewModel,
type MessageTimestampViewModelProps,
@@ -1060,7 +1043,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
}
public render(): ReactNode {
const msgtype = this.props.mxEvent.getContent().msgtype;
const eventType = this.props.mxEvent.getType();
const replacingEventId = this.props.mxEvent.replacingEventId();
@@ -1093,56 +1075,67 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
const isProbablyMedia = MediaEventHelper.isEligible(this.props.mxEvent);
const lineClasses = classNames(
"mx_EventTile_line",
getEventTileLineClassState({
isProbablyMedia,
eventType,
msgtype,
}),
);
const isSending = isSendingStatus(this.props.eventSendStatus);
const isRedacted = isMessageEvent(this.props.mxEvent) && this.props.isRedacted;
const isEncryptionFailure = this.props.mxEvent.isDecryptionFailure();
const isContinuation = getIsContinuation(
this.props.continuation,
this.context.timelineRenderingType,
this.props.layout,
);
const isRenderingNotification = this.context.timelineRenderingType === TimelineRenderingType.Notification;
const isEditing = !!this.props.editState;
const classes = classNames(
getEventTileClassState({
const hasPinnedMessageBadge = PinningUtils.isPinned(MatrixClientPeg.safeGet(), this.props.mxEvent);
const hasReactionsRow = !isRedacted;
// Use `getSender()` because searched events might not have a proper `sender`.
const isOwnEvent = this.props.mxEvent?.getSender() === MatrixClientPeg.safeGet().getUserId();
const eventTileSnapshot = EventTileViewModel.createSnapshot({
event: {
mxEvent: this.props.mxEvent,
eventSendStatus: this.props.eventSendStatus,
isEditing,
isEncryptionFailure,
forExport: this.props.forExport,
},
display: {
timelineRenderingType: this.context.timelineRenderingType,
layout: this.props.layout,
continuation: this.props.continuation,
isProbablyMedia,
isBubbleMessage,
isLeftAlignedBubbleMessage,
isAlignedBetweenBubbles,
isEditing,
isInfoMessage,
noBubbleEvent,
isTwelveHour: this.props.isTwelveHour,
isSending,
isHighlighted: this.shouldHighlight(),
isSelected: this.props.isSelectedEvent || !!this.state.contextMenu,
isContinuation,
eventType,
isLast: this.props.last,
isLastInSection: this.props.lastInSection,
isContextual: this.props.contextual,
},
interaction: {
hover: this.state.hover,
showActionBarFromFocus: this.state.showActionBarFromFocus,
focusWithin: this.state.focusWithin,
isActionBarFocused: this.state.actionBarFocused,
isEncryptionFailure,
msgtype,
hasContextMenu: !!this.state.contextMenu,
inhibitInteraction: this.props.inhibitInteraction,
},
sender: {
hideSender: this.props.hideSender,
timelineRenderingType: this.context.timelineRenderingType,
isRenderingNotification,
noBubbleEvent,
}),
);
},
timestamp: {
alwaysShowTimestamps: this.props.alwaysShowTimestamps,
hideTimestamp: this.props.hideTimestamp,
threadReplyEventTs: this.state.thread?.replyToEvent?.getTs(),
},
footer: {
isOwnEvent,
hasReactionsRow,
hasReactions: !!this.state.reactions,
hasPinnedMessageBadge,
},
});
// If the tile is in the Sending state, don't speak the message.
const ariaLive = getAriaLive(this.props.eventSendStatus);
const lineClasses = classNames("mx_EventTile_line", eventTileSnapshot.line.classState);
const tileClasses = classNames(eventTileSnapshot.root.classState);
const tileAriaLive = eventTileSnapshot.root.ariaLive;
const isRenderingNotification = eventTileSnapshot.event.isRenderingNotification;
let permalink = "#";
if (this.props.permalinkCreator) {
@@ -1151,43 +1144,26 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
// we can't use local echoes as scroll tokens, because their event IDs change.
// Local echos have a send "status".
const scrollToken = getScrollToken(this.props.mxEvent);
const scrollToken = eventTileSnapshot.root.scrollToken;
let avatar: JSX.Element | null = null;
let sender: JSX.Element | null = null;
const { avatarSize, needsSenderProfile } = getEventTileSenderProfileState({
isRenderingNotification,
isInfoMessage,
timelineRenderingType: this.context.timelineRenderingType,
continuation: this.props.continuation,
eventType,
isBubbleMessage,
layout: this.props.layout,
});
const { avatarSize } = eventTileSnapshot.sender.profileState;
if (this.props.mxEvent.sender && avatarSize !== null) {
const member = getEventTileAvatarMember(this.props.mxEvent);
const viewUserOnClick = getShouldViewUserOnClick(
this.props.inhibitInteraction,
this.context.timelineRenderingType,
);
avatar = (
<div className="mx_EventTile_avatar">
<MemberAvatar
member={member}
member={eventTileSnapshot.sender.avatarMember}
size={avatarSize}
viewUserOnClick={viewUserOnClick}
viewUserOnClick={eventTileSnapshot.sender.viewUserOnClick}
forceHistorical={this.props.mxEvent.getType() === EventType.RoomMember}
/>
</div>
);
}
const senderProfileMode = getSenderProfileMode({
needsSenderProfile,
hideSender: this.props.hideSender,
timelineRenderingType: this.context.timelineRenderingType,
});
const senderProfileMode = eventTileSnapshot.sender.profileMode;
if (senderProfileMode === "clickable") {
sender = <SenderProfile onClick={this.onSenderProfileClick} mxEvent={this.props.mxEvent} />;
} else if (senderProfileMode === "tooltip") {
@@ -1196,15 +1172,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
sender = <SenderProfile mxEvent={this.props.mxEvent} />;
}
const showMessageActionBar = getShouldShowMessageActionBar({
isEditing,
forExport: this.props.forExport,
hover: this.state.hover,
showActionBarFromFocus: this.state.showActionBarFromFocus,
actionBarFocused: this.state.actionBarFocused,
hasContextMenu: !!this.state.contextMenu,
});
const actionBar = showMessageActionBar ? (
const actionBar = eventTileSnapshot.actionBar.show ? (
<ActionBarWrapper
mxEvent={this.props.mxEvent}
reactions={this.state.reactions}
@@ -1218,24 +1186,8 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
/>
) : undefined;
const showTimestamp = getShouldShowTimestamp({
eventTs: this.props.mxEvent.getTs(),
eventType,
hideTimestamp: this.props.hideTimestamp,
alwaysShowTimestamps: this.props.alwaysShowTimestamps,
last: this.props.last,
hover: this.state.hover,
focusWithin: this.state.focusWithin,
actionBarFocused: this.state.actionBarFocused,
hasContextMenu: Boolean(this.state.contextMenu),
});
// Thread panel shows the timestamp of the last reply in that thread
const ts = getEventTileTimestamp({
timelineRenderingType: this.context.timelineRenderingType,
eventTs: this.props.mxEvent.getTs(),
threadReplyEventTs: this.state.thread?.replyToEvent?.getTs(),
});
const ts = eventTileSnapshot.timestamp.value;
const messageTimestampProps: MessageTimestampViewModelProps = {
showRelative: this.context.timelineRenderingType === TimelineRenderingType.ThreadsList,
@@ -1253,24 +1205,19 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
/>
);
const { useIRCLayout, showRealTimestamp, showLinkedTimestamp } = getTimestampDisplayState({
layout: this.props.layout,
showTimestamp,
timestamp: ts,
hideTimestamp: this.props.hideTimestamp,
});
const { useIRCLayout, showRealTimestamp, showLinkedTimestamp } = eventTileSnapshot.timestamp.displayState;
// Used to simplify the UI layout where necessary by not conditionally rendering an element at the start
const dummyTimestamp = useIRCLayout ? <span className="mx_MessageTimestamp" /> : null;
const timestamp = showRealTimestamp ? messageTimestamp : dummyTimestamp;
const linkedTimestamp = showLinkedTimestamp ? linkedMessageTimestamp : dummyTimestamp;
let pinnedMessageBadge: JSX.Element | undefined;
if (PinningUtils.isPinned(MatrixClientPeg.safeGet(), this.props.mxEvent)) {
if (hasPinnedMessageBadge) {
pinnedMessageBadge = <PinnedMessageBadge aria-describedby={this.id} tabIndex={0} />;
}
let reactionsRow: JSX.Element | undefined;
if (!isRedacted) {
if (hasReactionsRow) {
reactionsRow = (
<ReactionsRowWrapper
mxEvent={this.props.mxEvent}
@@ -1312,11 +1259,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
forExport={this.props.forExport}
permalinkCreator={this.props.permalinkCreator}
layout={this.props.layout}
alwaysShowTimestamps={getReplyChainAlwaysShowTimestamps({
alwaysShowTimestamps: this.props.alwaysShowTimestamps,
hover: this.state.hover,
focusWithin: this.state.focusWithin,
})}
alwaysShowTimestamps={eventTileSnapshot.replyChain.alwaysShowTimestamps}
isQuoteExpanded={isQuoteExpanded}
setQuoteExpanded={this.setQuoteExpanded}
getRelationsForEvent={this.props.getRelationsForEvent}
@@ -1324,16 +1267,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
);
}
// Use `getSender()` because searched events might not have a proper `sender`.
const isOwnEvent = this.props.mxEvent?.getSender() === MatrixClientPeg.safeGet().getUserId();
const { hasFooter, showMainPinnedMessageBadge, showBubblePinnedMessageBadge } = getFooterDisplayState({
hasReactionsRow: !!reactionsRow,
hasReactions: !!this.state.reactions,
hasPinnedMessageBadge: !!pinnedMessageBadge,
layout: this.props.layout,
isOwnEvent,
});
const { hasFooter, showMainPinnedMessageBadge, showBubblePinnedMessageBadge } = eventTileSnapshot.footer;
switch (this.context.timelineRenderingType) {
case TimelineRenderingType.Thread: {
@@ -1341,8 +1275,8 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
this.props.as || "li",
{
"ref": this.ref,
"className": classes,
"aria-live": ariaLive,
"className": tileClasses,
"aria-live": tileAriaLive,
"aria-atomic": true,
"data-scroll-tokens": scrollToken,
"data-has-reply": !!replyChain,
@@ -1403,9 +1337,9 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
this.props.as || "li",
{
"ref": this.ref,
"className": classes,
"className": tileClasses,
"tabIndex": -1,
"aria-live": ariaLive,
"aria-live": tileAriaLive,
"aria-atomic": "true",
"data-scroll-tokens": scrollToken,
"data-layout": this.props.layout,
@@ -1491,8 +1425,8 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
return React.createElement(
this.props.as || "li",
{
"className": classes,
"aria-live": ariaLive,
"className": tileClasses,
"aria-live": tileAriaLive,
"aria-atomic": true,
"data-scroll-tokens": scrollToken,
},
@@ -1536,9 +1470,9 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
this.props.as || "li",
{
"ref": this.ref,
"className": classes,
"className": tileClasses,
"tabIndex": -1,
"aria-live": ariaLive,
"aria-live": tileAriaLive,
"aria-atomic": "true",
"data-scroll-tokens": scrollToken,
"data-layout": this.props.layout,
apps/web/src/components/views/rooms/EventTile/eventTileDerivedState.ts
-493
View File
@@ -1,493 +0,0 @@
/*
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 { EventStatus, EventType, type MatrixEvent, MsgType, type RoomMember } from "matrix-js-sdk/src/matrix";
import { ElementCallEventType } from "../../../../call-types";
import { TimelineRenderingType } from "../../../../contexts/RoomContext";
import { Layout } from "../../../../settings/enums/Layout";
/**
* Pure EventTile derivations extracted ahead of EventTileViewModel.
* Keep this module free of React lifecycle, DOM access, dispatch, and MatrixClientPeg lookups.
*/
/** Whether the event send status represents a pending send state. */
export function isSendingStatus(eventSendStatus?: EventStatus): boolean {
return [EventStatus.SENDING, EventStatus.QUEUED, EventStatus.ENCRYPTING].includes(eventSendStatus!);
}
/** The aria-live setting used by EventTile for the current send status. */
export function getAriaLive(eventSendStatus?: EventStatus | null): "off" | undefined {
return eventSendStatus === null ? undefined : "off";
}
/** The stable scroll token for a non-local-echo event. */
export function getScrollToken(mxEvent: MatrixEvent): string | undefined {
return mxEvent.status ? undefined : mxEvent.getId();
}
/** Whether EventTile should render as a continuation in the current layout/rendering mode. */
export function getIsContinuation(
continuation: boolean | undefined,
timelineRenderingType: TimelineRenderingType,
layout: Layout | undefined,
): boolean | undefined {
if (
timelineRenderingType !== TimelineRenderingType.Room &&
timelineRenderingType !== TimelineRenderingType.Search &&
timelineRenderingType !== TimelineRenderingType.Thread &&
layout !== Layout.Bubble
) {
return false;
}
return continuation;
}
/** Inputs for EventTile line CSS class derivation. */
export interface EventTileLineClassState {
/** Whether the event body is likely to render media content. */
isProbablyMedia: boolean;
/** The Matrix event type for event-type class derivation. */
eventType: string;
/** The Matrix message type for message-type class derivation. */
msgtype?: string;
}
/** The EventTile line CSS class flags for the current derived state. */
export function getEventTileLineClassState({
isProbablyMedia,
eventType,
msgtype,
}: EventTileLineClassState): Record<string, boolean> {
return {
mx_EventTile_mediaLine: isProbablyMedia,
mx_EventTile_image: eventType === EventType.RoomMessage && msgtype === MsgType.Image,
mx_EventTile_sticker: eventType === EventType.Sticker,
mx_EventTile_emote: eventType === EventType.RoomMessage && msgtype === MsgType.Emote,
};
}
/** Inputs for EventTile avatar and sender profile derivation. */
export interface EventTileSenderProfileStateInput {
/** Whether the tile is rendering as a notification. */
isRenderingNotification: boolean;
/** Whether the event renders as an informational timeline item. */
isInfoMessage: boolean;
/** The current timeline rendering mode. */
timelineRenderingType: TimelineRenderingType;
/** Whether the tile is a continuation of the previous event. */
continuation?: boolean;
/** The Matrix event type for event-type sender profile derivation. */
eventType: string;
/** Whether the tile should use bubble container styling. */
isBubbleMessage: boolean;
/** The current timeline layout. */
layout?: Layout;
}
/** EventTile avatar and sender profile display state. */
export interface EventTileSenderProfileState {
/** The avatar size to render, or null when no avatar should render. */
avatarSize: string | null;
/** Whether sender profile details should render. */
needsSenderProfile: boolean;
}
/** The EventTile avatar and sender profile state for the current derived state. */
export function getEventTileSenderProfileState({
isRenderingNotification,
isInfoMessage,
timelineRenderingType,
continuation,
eventType,
isBubbleMessage,
layout,
}: EventTileSenderProfileStateInput): EventTileSenderProfileState {
if (isRenderingNotification) {
return { avatarSize: "24px", needsSenderProfile: true };
}
if (isInfoMessage) {
return { avatarSize: "14px", needsSenderProfile: false };
}
if (
timelineRenderingType === TimelineRenderingType.ThreadsList ||
(timelineRenderingType === TimelineRenderingType.Thread && !continuation)
) {
return { avatarSize: "32px", needsSenderProfile: true };
}
if (eventType === EventType.RoomCreate || isBubbleMessage) {
return { avatarSize: null, needsSenderProfile: false };
}
if (layout === Layout.IRC) {
return { avatarSize: "14px", needsSenderProfile: true };
}
if (
(continuation && timelineRenderingType !== TimelineRenderingType.File) ||
eventType === EventType.CallInvite ||
ElementCallEventType.matches(eventType) ||
eventType === EventType.RTCNotification
) {
return { avatarSize: null, needsSenderProfile: false };
}
if (timelineRenderingType === TimelineRenderingType.File) {
return { avatarSize: "20px", needsSenderProfile: true };
}
return { avatarSize: "30px", needsSenderProfile: true };
}
/** The room member whose avatar should render for the EventTile. */
export function getEventTileAvatarMember(mxEvent: MatrixEvent): RoomMember | null {
if (mxEvent.getContent().third_party_invite) {
return mxEvent.target;
}
return mxEvent.sender;
}
/** Whether clicking the avatar should open the user profile. */
export function getShouldViewUserOnClick(
inhibitInteraction: boolean | undefined,
timelineRenderingType: TimelineRenderingType,
): boolean {
return (
!inhibitInteraction &&
![TimelineRenderingType.ThreadsList, TimelineRenderingType.Notification].includes(timelineRenderingType)
);
}
/** SenderProfile rendering mode for EventTile. */
export type SenderProfileMode = "hidden" | "clickable" | "tooltip" | "default";
/** Inputs for EventTile sender profile mode derivation. */
export interface SenderProfileModeInput {
/** Whether sender profile details should render. */
needsSenderProfile: boolean;
/** Whether sender details should be hidden. */
hideSender?: boolean;
/** The current timeline rendering mode. */
timelineRenderingType: TimelineRenderingType;
}
/** The SenderProfile rendering mode for the current EventTile state. */
export function getSenderProfileMode({
needsSenderProfile,
hideSender,
timelineRenderingType,
}: SenderProfileModeInput): SenderProfileMode {
if (!needsSenderProfile || hideSender === true) {
return "hidden";
}
if (
timelineRenderingType === TimelineRenderingType.Room ||
timelineRenderingType === TimelineRenderingType.Search ||
timelineRenderingType === TimelineRenderingType.Pinned ||
timelineRenderingType === TimelineRenderingType.Thread
) {
return "clickable";
}
if (timelineRenderingType === TimelineRenderingType.ThreadsList) {
return "tooltip";
}
return "default";
}
/** Inputs for EventTile message action bar visibility derivation. */
export interface ShouldShowMessageActionBarInput {
/** Whether the event is currently being edited. */
isEditing: boolean;
/** Whether the tile is rendering for export. */
forExport?: boolean;
/** Whether the tile is currently hovered. */
hover: boolean;
/** Whether focus should force the action bar visible. */
showActionBarFromFocus: boolean;
/** Whether the action bar currently has focus. */
actionBarFocused: boolean;
/** Whether an EventTile context menu is currently open. */
hasContextMenu: boolean;
}
/** Whether EventTile should render the message action bar. */
export function getShouldShowMessageActionBar({
isEditing,
forExport,
hover,
showActionBarFromFocus,
actionBarFocused,
hasContextMenu,
}: ShouldShowMessageActionBarInput): boolean {
return !isEditing && !forExport && (hover || showActionBarFromFocus || (actionBarFocused && !hasContextMenu));
}
/** Inputs for EventTile timestamp visibility derivation. */
export interface ShouldShowTimestampInput {
/** The event origin timestamp. */
eventTs: number;
/** The Matrix event type for event-type timestamp derivation. */
eventType: string;
/** Whether timestamp rendering is disabled. */
hideTimestamp?: boolean;
/** Whether timestamps should always show. */
alwaysShowTimestamps?: boolean;
/** Whether the tile is the last event in the timeline. */
last?: boolean;
/** Whether the tile is currently hovered. */
hover: boolean;
/** Whether focus is currently inside the tile. */
focusWithin: boolean;
/** Whether the action bar currently has focus. */
actionBarFocused: boolean;
/** Whether an EventTile context menu is currently open. */
hasContextMenu: boolean;
}
/** Whether EventTile should render the message timestamp. */
export function getShouldShowTimestamp({
eventTs,
eventType,
hideTimestamp,
alwaysShowTimestamps,
last,
hover,
focusWithin,
actionBarFocused,
hasContextMenu,
}: ShouldShowTimestampInput): boolean {
return (
!!eventTs &&
eventType !== EventType.RTCNotification &&
!hideTimestamp &&
(alwaysShowTimestamps || last || hover || focusWithin || actionBarFocused || hasContextMenu)
);
}
/** Inputs for EventTile timestamp value derivation. */
export interface EventTileTimestampInput {
/** The current timeline rendering mode. */
timelineRenderingType: TimelineRenderingType;
/** The event origin timestamp. */
eventTs: number;
/** The latest thread reply timestamp, when available. */
threadReplyEventTs?: number;
}
/** The timestamp EventTile should display for the current rendering mode. */
export function getEventTileTimestamp({
timelineRenderingType,
eventTs,
threadReplyEventTs,
}: EventTileTimestampInput): number {
if (timelineRenderingType === TimelineRenderingType.ThreadsList && typeof threadReplyEventTs === "number") {
return threadReplyEventTs;
}
return eventTs;
}
/** Inputs for EventTile timestamp display state derivation. */
export interface TimestampDisplayStateInput {
/** The current timeline layout. */
layout?: Layout;
/** Whether the timestamp should render. */
showTimestamp: boolean;
/** The timestamp EventTile may display. */
timestamp: number;
/** Whether timestamp rendering is disabled. */
hideTimestamp?: boolean;
}
/** EventTile timestamp display state. */
export interface TimestampDisplayState {
/** Whether the current layout is IRC. */
useIRCLayout: boolean;
/** Whether EventTile should render the real timestamp element. */
showRealTimestamp: boolean;
/** Whether EventTile should render the linked timestamp element. */
showLinkedTimestamp: boolean;
}
/** The EventTile timestamp display state for the current derived state. */
export function getTimestampDisplayState({
layout,
showTimestamp,
timestamp,
hideTimestamp,
}: TimestampDisplayStateInput): TimestampDisplayState {
const showRealTimestamp = showTimestamp && !!timestamp;
return {
useIRCLayout: layout === Layout.IRC,
showRealTimestamp,
showLinkedTimestamp: showRealTimestamp && !hideTimestamp,
};
}
/** Inputs for ReplyChain timestamp visibility derivation. */
export interface ReplyChainTimestampInput {
/** Whether timestamps should always show. */
alwaysShowTimestamps?: boolean;
/** Whether the tile is currently hovered. */
hover: boolean;
/** Whether focus is currently inside the tile. */
focusWithin: boolean;
}
/** Whether ReplyChain should always show timestamps. */
export function getReplyChainAlwaysShowTimestamps({
alwaysShowTimestamps,
hover,
focusWithin,
}: ReplyChainTimestampInput): boolean {
return !!alwaysShowTimestamps || hover || focusWithin;
}
/** Inputs for EventTile footer display state derivation. */
export interface FooterDisplayStateInput {
/** Whether a reactions row element will render. */
hasReactionsRow: boolean;
/** Whether reactions data is available. */
hasReactions: boolean;
/** Whether a pinned message badge element will render. */
hasPinnedMessageBadge: boolean;
/** The current timeline layout. */
layout?: Layout;
/** Whether the event was sent by the current user. */
isOwnEvent: boolean;
}
/** EventTile footer display state. */
export interface FooterDisplayState {
/** Whether EventTile should render a footer. */
hasFooter: boolean;
/** Whether the main footer position should render the pinned message badge. */
showMainPinnedMessageBadge: boolean;
/** Whether the bubble footer position should render the pinned message badge. */
showBubblePinnedMessageBadge: boolean;
}
/** The EventTile footer display state for the current derived state. */
export function getFooterDisplayState({
hasReactionsRow,
hasReactions,
hasPinnedMessageBadge,
layout,
isOwnEvent,
}: FooterDisplayStateInput): FooterDisplayState {
return {
hasFooter: (hasReactionsRow && hasReactions) || hasPinnedMessageBadge,
showMainPinnedMessageBadge: hasPinnedMessageBadge && (layout === Layout.Group || !isOwnEvent),
showBubblePinnedMessageBadge: hasPinnedMessageBadge && layout === Layout.Bubble && isOwnEvent,
};
}
/** Inputs for EventTile root CSS class derivation. */
export interface EventTileClassState {
/** Whether the tile should use bubble container styling. */
isBubbleMessage: boolean;
/** Whether the bubble tile is left-aligned. */
isLeftAlignedBubbleMessage: boolean;
/** Whether the event is aligned between the bubbles */
isAlignedBetweenBubbles: boolean;
/** Whether the event is currently being edited. */
isEditing: boolean;
/** Whether the event renders as an informational timeline item. */
isInfoMessage: boolean;
/** Whether timestamps use twelve-hour formatting. */
isTwelveHour?: boolean;
/** Whether the event is in a pending send state. */
isSending: boolean;
/** Whether the event should be highlighted. */
isHighlighted: boolean;
/** Whether the tile is selected or has an open context menu. */
isSelected: boolean;
/** Whether the tile is a continuation of the previous event. */
isContinuation?: boolean;
/** The Matrix event type for event-type class derivation. */
eventType: string;
/** Whether the tile is the last event in the timeline. */
isLast?: boolean;
/** Whether the tile is the last event in its section. */
isLastInSection?: boolean;
/** Whether the tile is being rendered in contextual mode. */
isContextual?: boolean;
/** Whether the action bar currently has focus. */
isActionBarFocused: boolean;
/** Whether the event failed decryption. */
isEncryptionFailure: boolean;
/** The Matrix message type for message-type class derivation. */
msgtype?: string;
/** Whether sender details should be hidden. */
hideSender?: boolean;
/** The current timeline rendering mode. */
timelineRenderingType: TimelineRenderingType;
/** Whether the tile is rendering as a notification. */
isRenderingNotification: boolean;
/** Whether bubble styling should be suppressed for this event. */
noBubbleEvent: boolean;
}
/** The EventTile root CSS class flags for the current derived state. */
export function getEventTileClassState({
isBubbleMessage,
isLeftAlignedBubbleMessage,
isAlignedBetweenBubbles,
isEditing,
isInfoMessage,
isTwelveHour,
isSending,
isHighlighted,
isSelected,
isContinuation,
eventType,
isLast,
isLastInSection,
isContextual,
isActionBarFocused,
isEncryptionFailure,
msgtype,
hideSender,
timelineRenderingType,
isRenderingNotification,
noBubbleEvent,
}: EventTileClassState): Record<string, boolean | undefined> {
return {
mx_EventTile_bubbleContainer: isBubbleMessage,
mx_EventTile_leftAlignedBubble: isLeftAlignedBubbleMessage,
mx_EventTile_alignedBetweenBubbles: isAlignedBetweenBubbles,
mx_EventTile: true,
mx_EventTile_isEditing: isEditing,
mx_EventTile_info: isInfoMessage,
mx_EventTile_12hr: isTwelveHour,
// Note: we keep the `sending` state class for tests, not for our styles
mx_EventTile_sending: !isEditing && isSending,
mx_EventTile_highlight: isHighlighted,
mx_EventTile_selected: isSelected,
mx_EventTile_continuation:
isContinuation || eventType === EventType.CallInvite || ElementCallEventType.matches(eventType),
mx_EventTile_last: isLast,
mx_EventTile_lastInSection: isLastInSection,
mx_EventTile_contextual: isContextual,
mx_EventTile_actionBarFocused: isActionBarFocused,
mx_EventTile_bad: isEncryptionFailure,
mx_EventTile_emote: msgtype === MsgType.Emote,
mx_EventTile_noSender: hideSender,
mx_EventTile_clamp: timelineRenderingType === TimelineRenderingType.ThreadsList || isRenderingNotification,
mx_EventTile_noBubble: noBubbleEvent,
};
}