Message scrolling

This commit is contained in:
David Baker 2015-06-18 11:23:35 +01:00
parent ed58a59f82
commit a63299aae0
2 changed files with 22 additions and 7 deletions

View file

@ -17,6 +17,7 @@ module.exports = React.createClass({
componentWillMount: function() {
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
this.atBottom = true;
},
componentWillUnmount: function() {
@ -25,14 +26,16 @@ module.exports = React.createClass({
}
},
componentWillReceiveProps: function(props) {
this.setState({
room: MatrixClientPeg.get().getRoom(props.roomId)
});
},
// MatrixRoom still showing the messages from the old room?
// Set the key to the room_id. Sadly you can no longer get at
// the key from inside the component, or we'd check this in code.
/*componentWillReceiveProps: function(props) {
},*/
onRoomTimeline: function(ev, room, toStartOfTimeline) {
if (room.roomId != this.props.roomId) return;
var messageUl = this.refs.messageList.getDOMNode();
this.atBottom = messageUl.scrollHeight - messageUl.scrollTop <= messageUl.clientHeight;
this.setState({
room: MatrixClientPeg.get().getRoom(this.props.roomId)
});
@ -50,12 +53,24 @@ module.exports = React.createClass({
return (
<div className="mx_RoomView">
<RoomHeader room={this.state.room} />
<ul>
<ul ref="messageList">
{this.getMessageTiles()}
</ul>
<MessageComposer roomId={this.props.roomId} />
</div>
);
},
componentDidMount: function() {
var messageUl = this.refs.messageList.getDOMNode();
messageUl.scrollTop = messageUl.scrollHeight;
},
componentDidUpdate: function() {
if (this.atBottom) {
var messageUl = this.refs.messageList.getDOMNode();
messageUl.scrollTop = messageUl.scrollHeight;
}
}
});

View file

@ -77,7 +77,7 @@ module.exports = React.createClass({
<MatrixToolbar />
<RoomList selectedRoom={this.state.currentRoom} />
</div>
<RoomView roomId={this.state.currentRoom} />
<RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
</div>
);
} else if (this.state.logged_in) {