Replace onHeightChanged with ResizeObserver (#29602)

* 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

View File

@@ -292,6 +292,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
this.props.room?.currentState.off(RoomStateEvent.Update, this.calculateRoomMembersCount);
SettingsStore.unwatchSetting(this.showTypingNotificationsWatcherRef);
this.readReceiptMap = {};
this.resizeObserver.disconnect();
}
public componentDidUpdate(prevProps: IProps, prevState: IState): void {
@@ -800,7 +801,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
isRedacted={mxEv.isRedacted()}
replacingEventId={mxEv.replacingEventId()}
editState={isEditing ? this.props.editState : undefined}
onHeightChanged={this.onHeightChanged}
resizeObserver={this.resizeObserver}
readReceipts={readReceipts}
readReceiptMap={this.readReceiptMap}
showUrlPreview={this.props.showUrlPreview}
@@ -953,15 +954,13 @@ export default class MessagePanel extends React.Component<IProps, IState> {
this.eventTiles[eventId] = node;
};
// once dynamic content in the events load, make the scrollPanel check the
// scroll offsets.
// Once dynamic content in the events load, make the scrollPanel check the scroll offsets.
public onHeightChanged = (): void => {
const scrollPanel = this.scrollPanel.current;
if (scrollPanel) {
scrollPanel.checkScroll();
}
this.scrollPanel.current?.checkScroll();
};
private resizeObserver = new ResizeObserver(this.onHeightChanged);
private onTypingShown = (): void => {
const scrollPanel = this.scrollPanel.current;
// this will make the timeline grow, so checkScroll

View File

@@ -198,12 +198,6 @@ export const RoomSearchView = forwardRef<ScrollPanel, Props>(
}
}
// once dynamic content in the search results load, make the scrollPanel check
// the scroll offsets.
const onHeightChanged = (): void => {
innerRef.current?.checkScroll();
};
const onRef = (e: ScrollPanel | null): void => {
if (typeof ref === "function") {
ref(e);
@@ -302,7 +296,6 @@ export const RoomSearchView = forwardRef<ScrollPanel, Props>(
searchHighlights={highlights ?? []}
resultLink={resultLink}
permalinkCreator={permalinkCreator}
onHeightChanged={onHeightChanged}
/>,
);