remove excess resize event listeners (#3169)

We add a resize handler to the window when the ChatContainer is created. If a
second ChatContainer is created due to React redrawing, remove the old handler.

Co-authored-by: janWilejan <>
This commit is contained in:
janWilejan 2023-07-13 19:36:21 +00:00 committed by GitHub
parent 34b531b214
commit 14baef4e36
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -33,6 +33,8 @@ export type ChatContainerProps = {
desktop?: boolean;
};
let resizeWindowCallback: () => void;
function shouldCollapseMessages(message: ChatMessage, previous: ChatMessage): boolean {
if (!message || !message.user) {
return false;
@ -290,13 +292,21 @@ export const ChatContainer: FC<ChatContainerProps> = ({
}
// Re-clamp the chat size whenever the window resizes
window.addEventListener('resize', () => {
function resize() {
const container = desktop && document.getElementById('chat-container');
if (container) {
const currentWidth = parseFloat(container.style.width) || defaultChatWidth;
container.style.width = `${clampChatWidth(currentWidth)}px`;
}
});
}
if (resizeWindowCallback) window.removeEventListener('resize', resizeWindowCallback);
if (desktop) {
window.addEventListener('resize', resize);
resizeWindowCallback = resize;
} else {
resizeWindowCallback = null;
}
return (
<ErrorBoundary