nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Replace onHeightChanged with ResizeObserver (#29602)

Browse Source 
* Replace onHeightChanged with ResizeObserver

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-03-28 10:36:10 +00:00
committed by GitHub
parent 6ae11dab52
commit 209ab59978
31 changed files with 24 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/views/rooms/EventTile.tsx
View File

@@ -157,8 +157,7 @@ export interface EventTileProps {
// is this the focused event
isSelectedEvent?: boolean;
// callback called when dynamic content in events are loaded
onHeightChanged?: () => void;
resizeObserver?: ResizeObserver;
// a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'.
readReceipts?: IReadReceiptProps[];
@@ -289,8 +288,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
public readonly ref = createRef<HTMLElement>();
public static defaultProps = {
// no-op function because onHeightChanged is optional yet some sub-components assume its existence
onHeightChanged: function () {},
forExport: false,
layout: Layout.Group,
};
@@ -443,14 +440,10 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
}
this.props.mxEvent.off(ThreadEvent.Update, this.updateThread);
this.unmounted = false;
if (this.props.resizeObserver && this.ref.current) this.props.resizeObserver.unobserve(this.ref.current);
}
public componentDidUpdate(prevProps: Readonly<EventTileProps>, prevState: Readonly<IState>): void {
// If the shield state changed, the height might have changed.
// XXX: does the shield *actually* cause a change in height? Not sure.
if (prevState.shieldColour !== this.state.shieldColour && this.props.onHeightChanged) {
this.props.onHeightChanged();
}
// If we're not listening for receipts and expect to be, register a listener.
if (!this.isListeningForReceipts && (this.shouldShowSentReceipt || this.shouldShowSendingReceipt)) {
MatrixClientPeg.safeGet().on(RoomEvent.Receipt, this.onRoomReceipt);
@@ -460,6 +453,8 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
if (prevProps.eventSendStatus !== this.props.eventSendStatus) {
this.verifyEvent();
}
if (this.props.resizeObserver && this.ref.current) this.props.resizeObserver.observe(this.ref.current);
}
private onNewThread = (thread: Thread): void => {
@@ -564,8 +559,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
private onDecrypted = (): void => {
// we need to re-verify the sending device.
this.verifyEvent();
// decryption might, of course, trigger a height change, so call onHeightChanged after the re-render
this.forceUpdate(this.props.onHeightChanged);
this.forceUpdate();
};
private onUserVerificationChanged = (userId: string, _trustStatus: UserVerificationStatus): void => {
@@ -1201,7 +1195,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
replyChain = (
<ReplyChain
parentEv={this.props.mxEvent}
onHeightChanged={this.props.onHeightChanged}
ref={this.replyChain}
forExport={this.props.forExport}
permalinkCreator={this.props.permalinkCreator}
@@ -1254,7 +1247,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
// appease TS
highlights: this.props.highlights,
highlightLink: this.props.highlightLink,
onHeightChanged: () => this.props.onHeightChanged,
permalinkCreator: this.props.permalinkCreator!,
},
this.context.showHiddenEvents,
@@ -1401,7 +1393,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
// appease TS
highlights: this.props.highlights,
highlightLink: this.props.highlightLink,
onHeightChanged: this.props.onHeightChanged,
permalinkCreator: this.props.permalinkCreator,
},
this.context.showHiddenEvents,
@@ -1453,7 +1444,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
// appease TS
highlights: this.props.highlights,
highlightLink: this.props.highlightLink,
onHeightChanged: this.props.onHeightChanged,
permalinkCreator: this.props.permalinkCreator,
},
this.context.showHiddenEvents,