2019-02-12 13:04:25 +03:00
|
|
|
/*
|
2019-02-12 14:21:40 +03:00
|
|
|
Copyright 2019 New Vector Ltd
|
2019-02-12 13:04:25 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
import React from "react";
|
|
|
|
import dis from "../../../dispatcher";
|
|
|
|
import MatrixClientPeg from "../../../MatrixClientPeg";
|
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
|
|
|
import RoomAvatar from '../avatars/RoomAvatar';
|
2019-02-12 14:16:56 +03:00
|
|
|
import classNames from 'classnames';
|
2019-03-28 02:46:34 +03:00
|
|
|
import sdk from "../../../index";
|
2019-02-12 13:04:25 +03:00
|
|
|
|
|
|
|
const MAX_ROOMS = 20;
|
|
|
|
|
|
|
|
export default class RoomBreadcrumbs extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {rooms: []};
|
|
|
|
this.onAction = this.onAction.bind(this);
|
|
|
|
this._dispatcherRef = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
this._dispatcherRef = dis.register(this.onAction);
|
2019-03-28 00:32:51 +03:00
|
|
|
|
|
|
|
const roomStr = localStorage.getItem("mx_breadcrumb_rooms");
|
|
|
|
if (roomStr) {
|
|
|
|
try {
|
|
|
|
const roomIds = JSON.parse(roomStr);
|
|
|
|
this.setState({
|
|
|
|
rooms: roomIds.map((r) => {
|
|
|
|
return {
|
|
|
|
room: MatrixClientPeg.get().getRoom(r),
|
|
|
|
animated: false,
|
|
|
|
};
|
|
|
|
}).filter((r) => r.room),
|
|
|
|
});
|
|
|
|
} catch (e) {
|
|
|
|
console.error("Failed to parse breadcrumbs:", e);
|
|
|
|
}
|
|
|
|
}
|
2019-02-12 13:04:25 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
dis.unregister(this._dispatcherRef);
|
|
|
|
}
|
|
|
|
|
2019-02-12 14:16:56 +03:00
|
|
|
componentDidUpdate() {
|
|
|
|
const rooms = this.state.rooms.slice();
|
2019-03-28 00:32:51 +03:00
|
|
|
|
2019-02-12 14:16:56 +03:00
|
|
|
if (rooms.length) {
|
|
|
|
const {room, animated} = rooms[0];
|
|
|
|
if (!animated) {
|
|
|
|
rooms[0] = {room, animated: true};
|
|
|
|
setTimeout(() => this.setState({rooms}), 0);
|
|
|
|
}
|
|
|
|
}
|
2019-03-28 00:32:51 +03:00
|
|
|
|
|
|
|
const roomStr = JSON.stringify(rooms.map((r) => r.room.roomId));
|
|
|
|
localStorage.setItem("mx_breadcrumb_rooms", roomStr);
|
2019-02-12 14:16:56 +03:00
|
|
|
}
|
|
|
|
|
2019-02-12 13:04:25 +03:00
|
|
|
onAction(payload) {
|
|
|
|
switch (payload.action) {
|
|
|
|
case 'view_room':
|
2019-03-28 00:38:42 +03:00
|
|
|
this._appendRoomId(payload.room_id);
|
|
|
|
break;
|
2019-02-12 13:04:25 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_appendRoomId(roomId) {
|
|
|
|
const room = MatrixClientPeg.get().getRoom(roomId);
|
|
|
|
if (!room) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const rooms = this.state.rooms.slice();
|
2019-02-12 14:16:56 +03:00
|
|
|
const existingIdx = rooms.findIndex((r) => r.room.roomId === room.roomId);
|
2019-02-12 13:04:25 +03:00
|
|
|
if (existingIdx !== -1) {
|
|
|
|
rooms.splice(existingIdx, 1);
|
|
|
|
}
|
2019-02-12 14:16:56 +03:00
|
|
|
rooms.splice(0, 0, {room, animated: false});
|
2019-02-12 13:04:25 +03:00
|
|
|
if (rooms.length > MAX_ROOMS) {
|
2019-02-12 13:26:46 +03:00
|
|
|
rooms.splice(MAX_ROOMS, rooms.length - MAX_ROOMS);
|
2019-02-12 13:04:25 +03:00
|
|
|
}
|
|
|
|
this.setState({rooms});
|
|
|
|
}
|
|
|
|
|
|
|
|
_viewRoom(room) {
|
|
|
|
dis.dispatch({action: "view_room", room_id: room.roomId});
|
|
|
|
}
|
|
|
|
|
2019-03-28 02:46:34 +03:00
|
|
|
_onMouseEnter(room) {
|
|
|
|
this._onHover(room);
|
|
|
|
}
|
|
|
|
|
|
|
|
_onMouseLeave(room) {
|
|
|
|
this._onHover(null); // clear hover states
|
|
|
|
}
|
|
|
|
|
|
|
|
_onHover(room) {
|
|
|
|
const rooms = this.state.rooms.slice();
|
|
|
|
for (const r of rooms) {
|
|
|
|
r.hover = room && r.room.roomId === room.roomId;
|
|
|
|
}
|
|
|
|
this.setState({rooms});
|
|
|
|
}
|
|
|
|
|
2019-02-12 13:04:25 +03:00
|
|
|
render() {
|
2019-03-28 02:46:34 +03:00
|
|
|
const Tooltip = sdk.getComponent('elements.Tooltip');
|
2019-03-28 02:51:23 +03:00
|
|
|
const IndicatorScrollbar = sdk.getComponent('structures.IndicatorScrollbar');
|
|
|
|
|
2019-02-12 13:31:50 +03:00
|
|
|
// check for collapsed here and
|
|
|
|
// not at parent so we keep
|
|
|
|
// rooms in our state
|
|
|
|
// when collapsing and expanding
|
|
|
|
if (this.props.collapsed) {
|
|
|
|
return null;
|
|
|
|
}
|
2019-02-12 14:16:56 +03:00
|
|
|
const rooms = this.state.rooms;
|
2019-03-28 02:46:34 +03:00
|
|
|
const avatars = rooms.map(({room, animated, hover}, i) => {
|
2019-02-12 14:16:56 +03:00
|
|
|
const isFirst = i === 0;
|
|
|
|
const classes = classNames({
|
2019-03-28 02:51:23 +03:00
|
|
|
"mx_RoomBreadcrumbs_crumb": true,
|
2019-02-12 14:16:56 +03:00
|
|
|
"mx_RoomBreadcrumbs_preAnimate": isFirst && !animated,
|
|
|
|
"mx_RoomBreadcrumbs_animate": isFirst,
|
|
|
|
});
|
2019-03-28 02:46:34 +03:00
|
|
|
|
|
|
|
let tooltip = null;
|
|
|
|
if (hover) {
|
|
|
|
tooltip = <Tooltip label={room.name} />;
|
|
|
|
}
|
|
|
|
|
2019-02-12 13:04:25 +03:00
|
|
|
return (
|
2019-03-28 02:46:34 +03:00
|
|
|
<AccessibleButton className={classes} key={room.roomId} onClick={() => this._viewRoom(room)}
|
|
|
|
onMouseEnter={() => this._onMouseEnter(room)} onMouseLeave={() => this._onMouseLeave(room)}>
|
2019-02-12 13:04:25 +03:00
|
|
|
<RoomAvatar room={room} width={32} height={32} />
|
2019-03-28 02:46:34 +03:00
|
|
|
{tooltip}
|
2019-02-12 13:04:25 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
);
|
|
|
|
});
|
2019-03-28 02:51:23 +03:00
|
|
|
return (
|
2019-03-28 19:43:01 +03:00
|
|
|
<IndicatorScrollbar ref="scroller" className="mx_RoomBreadcrumbs" trackHorizontalOverflow={true}>
|
2019-03-28 02:51:23 +03:00
|
|
|
{ avatars }
|
|
|
|
</IndicatorScrollbar>
|
|
|
|
);
|
2019-02-12 13:04:25 +03:00
|
|
|
}
|
|
|
|
}
|