Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/room-list/desync

 Conflicts:
	src/components/views/rooms/RoomTile.tsx
pull/21833/head
Michael Telatynski 2020-07-27 14:42:26 +01:00
commit a74470aff0
2 changed files with 22 additions and 28 deletions

View File

@ -72,6 +72,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
public componentWillUnmount() {
SettingsStore.unwatchSetting(this.countWatcherRef);
this.props.notification.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
}
public componentDidUpdate(prevProps: Readonly<IProps>) {

View File

@ -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<DOMRect, "left" | "bottom">;
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<INotifOptionProps> = ({active, onClick, iconClassNam
);
};
export default class RoomTile extends React.Component<IProps, IState> {
export default class RoomTile extends React.PureComponent<IProps, IState> {
private dispatcherRef: string;
private roomTileRef = createRef<HTMLDivElement>();
private notificationState: NotificationState;
@ -119,10 +117,12 @@ export default class RoomTile extends React.Component<IProps, IState> {
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<IProps, IState> {
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<IProps, IState> {
});
};
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<IProps, IState> {
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 = (
<div className="mx_RoomTile_messagePreview" id={messagePreviewId(this.props.room.roomId)}>
{text}
</div>
);
}
if (this.showMessagePreview && this.state.messagePreview) {
messagePreview = (
<div className="mx_RoomTile_messagePreview" id={messagePreviewId(this.props.room.roomId)}>
{this.state.messagePreview}
</div>
);
}
const nameClasses = classNames({
@ -574,8 +569,6 @@ export default class RoomTile extends React.Component<IProps, IState> {
tabIndex={isActive ? 0 : -1}
inputRef={ref}
className={classes}
onMouseEnter={this.onTileMouseEnter}
onMouseLeave={this.onTileMouseLeave}
onClick={this.onTileClick}
onContextMenu={this.onContextMenu}
role="treeitem"