mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Remove media query from <Message>

Browse source
This commit is contained in:
Evan Hahn 2021-10-19 11:24:36 -05:00 • committed by GitHub
parent 755b549271
commit d372b47617
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

32
ts/components/conversation/Message.tsx
View file

@ -279,8 +279,6 @@ type State = {
reactionViewerRoot: HTMLDivElement | null; reactionViewerRoot: HTMLDivElement | null;
reactionPickerRoot: HTMLDivElement | null; reactionPickerRoot: HTMLDivElement | null;
isWide: boolean;
canDeleteForEveryone: boolean; canDeleteForEveryone: boolean;
}; };
@ -298,8 +296,6 @@ export class Message extends React.PureComponent<Props, State> {
public reactionsContainerRefMerger = createRefMerger(); public reactionsContainerRefMerger = createRefMerger();
public wideMl: MediaQueryList;
public expirationCheckInterval: NodeJS.Timeout | undefined; public expirationCheckInterval: NodeJS.Timeout | undefined;
public expiredTimeout: NodeJS.Timeout | undefined; public expiredTimeout: NodeJS.Timeout | undefined;
@ -311,9 +307,6 @@ export class Message extends React.PureComponent<Props, State> {
public constructor(props: Props) { public constructor(props: Props) {
super(props); super(props);
this.wideMl = window.matchMedia('(min-width: 926px)');
this.wideMl.addEventListener('change', this.handleWideMlChange);
this.state = { this.state = {
expiring: false, expiring: false,
expired: false, expired: false,
@ -325,8 +318,6 @@ export class Message extends React.PureComponent<Props, State> {
reactionViewerRoot: null, reactionViewerRoot: null,
reactionPickerRoot: null, reactionPickerRoot: null,
isWide: this.wideMl.matches,
canDeleteForEveryone: props.canDeleteForEveryone, canDeleteForEveryone: props.canDeleteForEveryone,
}; };
} }
@ -365,10 +356,6 @@ export class Message extends React.PureComponent<Props, State> {
return Boolean(reactions && reactions.length); return Boolean(reactions && reactions.length);
} }
public handleWideMlChange = (event: MediaQueryListEvent): void => {
this.setState({ isWide: event.matches });
};
public captureMenuTrigger = (triggerRef: Trigger): void => { public captureMenuTrigger = (triggerRef: Trigger): void => {
this.menuTriggerRef = triggerRef; this.menuTriggerRef = triggerRef;
}; };
@ -466,8 +453,6 @@ export class Message extends React.PureComponent<Props, State> {
} }
this.toggleReactionViewer(true); this.toggleReactionViewer(true);
this.toggleReactionPicker(true); this.toggleReactionPicker(true);
this.wideMl.removeEventListener('change', this.handleWideMlChange);
} }
public componentDidUpdate(prevProps: Props): void { public componentDidUpdate(prevProps: Props): void {
@ -1333,7 +1318,7 @@ export class Message extends React.PureComponent<Props, State> {
return null; return null;
} }
const { reactionPickerRoot, isWide } = this.state; const { reactionPickerRoot } = this.state;
const multipleAttachments = attachments && attachments.length > 1; const multipleAttachments = attachments && attachments.length > 1;
const firstAttachment = attachments && attachments[0]; const firstAttachment = attachments && attachments[0];
@ -1362,8 +1347,10 @@ export class Message extends React.PureComponent<Props, State> {
<Reference> <Reference>
{({ ref: popperRef }) => { {({ ref: popperRef }) => {
// Only attach the popper reference to the reaction button if it is // Only attach the popper reference to the reaction button if it is
// visible in the page (it is hidden when the page is narrow) // visible (it is hidden when the timeline is narrow)
const maybePopperRef = isWide ? popperRef : undefined; const maybePopperRef = this.shouldShowAdditionalMenuButtons()
? popperRef
: undefined;
return ( return (
// This a menu meant for mouse use only // This a menu meant for mouse use only
@ -1413,10 +1400,11 @@ export class Message extends React.PureComponent<Props, State> {
const menuButton = ( const menuButton = (
<Reference> <Reference>
{({ ref: popperRef }) => { {({ ref: popperRef }) => {
// Only attach the popper reference to the collapsed menu button if // Only attach the popper reference to the collapsed menu button if the reaction
// the reaction button is not visible in the page (it is hidden when // button is not visible (it is hidden when the timeline is narrow)
// the page is narrow) const maybePopperRef = !this.shouldShowAdditionalMenuButtons()
const maybePopperRef = !isWide ? popperRef : undefined; ? popperRef
: undefined;
return ( return (
<StopPropagation className="module-message__buttons__menu--container"> <StopPropagation className="module-message__buttons__menu--container">