Add useSizeObserver and replace most react-measure

This commit is contained in:
Jamie Kyle 2023-07-25 16:56:56 -07:00 committed by GitHub
parent 7267391de4
commit 6c70cd450b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 539 additions and 421 deletions

View file

@ -3,7 +3,6 @@
import type { ReactNode } from 'react';
import React from 'react';
import Measure from 'react-measure';
import classNames from 'classnames';
import {
ContextMenu,
@ -40,6 +39,7 @@ import {
import { PanelType } from '../../types/Panels';
import { UserText } from '../UserText';
import { Alert } from '../Alert';
import { SizeObserver } from '../../hooks/useSizeObserver';
export enum OutgoingCallButtonStyle {
None,
@ -783,16 +783,12 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
{this.renderDeleteMessagesConfirmationDialog()}
{this.renderLeaveGroupConfirmationDialog()}
{this.renderCannotLeaveGroupBecauseYouAreLastAdminAlert()}
<Measure
bounds
onResize={({ bounds }) => {
if (!bounds || !bounds.width) {
return;
}
this.setState({ isNarrow: bounds.width < 500 });
<SizeObserver
onSizeChange={size => {
this.setState({ isNarrow: size.width < 500 });
}}
>
{({ measureRef }) => (
{measureRef => (
<div
className={classNames('module-ConversationHeader', {
'module-ConversationHeader--narrow': isNarrow,
@ -821,7 +817,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
{this.renderMenu(triggerId)}
</div>
)}
</Measure>
</SizeObserver>
</>
);
}