enki/blap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Refactor className and children to component properties instead och view model snapshots in shared components (#32711)

Browse Source 
* Refactor className? to component property in EncryptionEventView

* Refactor extraClassNames to default react className as component property for DecryptionFailureBodyView

* Refactor className to component property for MessageTimestampView

* Refactor className and children to component properties for ReactionsRowButton

* Refactor className to component property for DisambiguatedProfile

* Refactor className to a component property in DateSeparatorView

* Fix for lint errors and EncryptionEventView unsupported icon color

* EncryptionEventView fix for icon color css specificity/order
This commit is contained in:
rbondesson
2026-03-05 09:36:45 +01:00
committed by GitHub
parent 1963f268aa
commit 83d732d60e
61 changed files with 232 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/shared-components/src/event-tiles/EncryptionEventView/EncryptionEventView.tsx
+32 -8
View File
@@ -7,6 +7,7 @@
import React, { type JSX } from "react";
import { LockSolidIcon, ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import classNames from "classnames";
import { type ViewModel, useViewModel } from "../../viewmodel";
import styles from "./EncryptionEventView.module.css";
@@ -35,8 +36,6 @@ export type EncryptionEventViewSnapshot = {
encryptedStateEvents?: boolean;
/** Display name for DM partner, used by ENABLED_DM subtitle text. */
userName?: string;
/** Optional CSS classes passed through to EventTileBubble. */
className?: string;
/** Optional timestamp element rendered in the EventTileBubble footer slot. */
timestamp?: JSX.Element;
};
@@ -52,16 +51,35 @@ export interface EncryptionEventViewProps {
*/
vm: ViewModel<EncryptionEventViewSnapshot>;
/**
* Ref forwarded to the root DOM element.
* Optional CSS classes passed through to EventTileBubble.
*/
className?: string;
/**
* Optional Ref forwarded to the root DOM element.
*/
ref?: React.RefObject<HTMLDivElement>;
}
export function EncryptionEventView({ vm, ref }: Readonly<EncryptionEventViewProps>): JSX.Element {
/**
* Renders a timeline bubble describing an encryption-related room event.
*
* Text and icon are selected from `snapshot.state` with optional context:
* - `encryptedStateEvents` switches to state-event specific wording.
* - `userName` is used for DM-specific subtitle text.
* - `timestamp` renders in the bubble footer slot.
*
* Use `className` for host-level styling, following the default React pattern.
*
* @example
* ```tsx
* <EncryptionEventView vm={encryptionEventVm} className="mx_EncryptionEvent" />
* ```
*/
export function EncryptionEventView({ vm, ref, className }: Readonly<EncryptionEventViewProps>): JSX.Element {
const { translate: _t } = useI18n();
const { state, encryptedStateEvents, userName, className, timestamp } = useViewModel(vm);
const { state, encryptedStateEvents, userName, timestamp } = useViewModel(vm);
let icon = <LockSolidIcon />;
let icon = <LockSolidIcon data-state="supported" />;
let title = encryptedStateEvents ? _t("common|state_encryption_enabled") : _t("common|encryption_enabled");
let subtitle = "";
@@ -86,14 +104,20 @@ export function EncryptionEventView({ vm, ref }: Readonly<EncryptionEventViewPro
break;
case EncryptionEventState.UNSUPPORTED:
default:
icon = <ErrorSolidIcon className={styles.error} />;
icon = <ErrorSolidIcon data-state="unsupported" />;
title = _t("timeline|m.room.encryption|disabled");
subtitle = _t("timeline|m.room.encryption|unsupported");
break;
}
return (
<EventTileBubble icon={icon} className={className} title={title} subtitle={subtitle} ref={ref}>
<EventTileBubble
icon={icon}
className={classNames(className, styles.content)}
title={title}
subtitle={subtitle}
ref={ref}
>
{timestamp}
</EventTileBubble>
);