diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx index d215df9126..ab6ec3fbed 100644 --- a/src/components/views/rooms/NotificationBadge.tsx +++ b/src/components/views/rooms/NotificationBadge.tsx @@ -72,6 +72,7 @@ export default class NotificationBadge extends React.PureComponent) { diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 08078da557..fc7d3a528b 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -61,17 +61,15 @@ interface IProps { showMessagePreview: boolean; isMinimized: boolean; tag: TagID; - - // TODO: Incoming call boxes: https://github.com/vector-im/riot-web/issues/14177 } type PartialDOMRect = Pick; interface IState { - hover: boolean; selected: boolean; notificationsMenuPosition: PartialDOMRect; generalMenuPosition: PartialDOMRect; + messagePreview?: string; } const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`; @@ -110,7 +108,7 @@ const NotifOption: React.FC = ({active, onClick, iconClassNam ); }; -export default class RoomTile extends React.Component { +export default class RoomTile extends React.PureComponent { private dispatcherRef: string; private roomTileRef = createRef(); private notificationState: NotificationState; @@ -119,10 +117,12 @@ export default class RoomTile extends React.Component { super(props); this.state = { - hover: false, selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId, notificationsMenuPosition: null, generalMenuPosition: null, + + // generatePreview() will return nothing if the user has previews disabled + messagePreview: this.generatePreview(), }; ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate); @@ -170,10 +170,19 @@ export default class RoomTile extends React.Component { private onRoomPreviewChanged = (room: Room) => { if (this.props.room && room.roomId === this.props.room.roomId) { - this.forceUpdate(); // we don't have any state to set, so just complain that we need an update + // generatePreview() will return nothing if the user has previews disabled + this.setState({messagePreview: this.generatePreview()}); } }; + private generatePreview(): string | null { + if (!this.showMessagePreview) { + return null; + } + + return MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag); + } + private scrollIntoView = () => { if (!this.roomTileRef.current) return; this.roomTileRef.current.scrollIntoView({ @@ -182,14 +191,6 @@ export default class RoomTile extends React.Component { }); }; - private onTileMouseEnter = () => { - this.setState({hover: true}); - }; - - private onTileMouseLeave = () => { - this.setState({hover: false}); - }; - private onTileClick = (ev: React.KeyboardEvent) => { ev.preventDefault(); ev.stopPropagation(); @@ -509,18 +510,12 @@ export default class RoomTile extends React.Component { name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon let messagePreview = null; - if (this.showMessagePreview) { - // The preview store heavily caches this info, so should be safe to hammer. - const text = MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag); - - // Only show the preview if there is one to show. - if (text) { - messagePreview = ( -
- {text} -
- ); - } + if (this.showMessagePreview && this.state.messagePreview) { + messagePreview = ( +
+ {this.state.messagePreview} +
+ ); } const nameClasses = classNames({ @@ -574,8 +569,6 @@ export default class RoomTile extends React.Component { tabIndex={isActive ? 0 : -1} inputRef={ref} className={classes} - onMouseEnter={this.onTileMouseEnter} - onMouseLeave={this.onTileMouseLeave} onClick={this.onTileClick} onContextMenu={this.onContextMenu} role="treeitem"