diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 2c4d1d0163..259d2aa5b8 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -61,18 +61,16 @@ 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; notificationState: NotificationState; selected: boolean; notificationsMenuPosition: PartialDOMRect; generalMenuPosition: PartialDOMRect; + messagePreview?: string; } const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`; @@ -111,7 +109,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(); @@ -119,11 +117,13 @@ export default class RoomTile extends React.Component { super(props); this.state = { - hover: false, notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room), 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); @@ -164,10 +164,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({ @@ -176,14 +185,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(); @@ -503,18 +504,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({ @@ -568,8 +563,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"