Sync typing indication with avatar typing indication

Follow the same rules for displaying "is typing" as with the typing avatars.
This commit is contained in:
Luke Barnard 2017-01-24 16:01:39 +00:00
parent 91a052f817
commit 7c66d1c867
3 changed files with 19 additions and 9 deletions

View file

@ -32,17 +32,22 @@ module.exports = {
return whoIsTyping;
},
whoIsTypingString: function(room) {
var whoIsTyping = this.usersTypingApartFromMe(room);
whoIsTypingString: function(room, limit) {
const whoIsTyping = this.usersTypingApartFromMe(room);
const othersCount = limit === undefined ? 0 : Math.max(whoIsTyping.length - limit, 0);
if (whoIsTyping.length == 0) {
return null;
return '';
} else if (whoIsTyping.length == 1) {
return whoIsTyping[0].name + ' is typing';
} else {
var names = whoIsTyping.map(function(m) {
}
const names = whoIsTyping.map(function(m) {
return m.name;
});
var lastPerson = names.shift();
if (othersCount) {
const other = ' other' + (othersCount > 1 ? 's' : '');
return names.slice(0, limit).join(', ') + ' and ' + othersCount + other + ' are typing';
} else {
const lastPerson = names.pop();
return names.join(', ') + ' and ' + lastPerson + ' are typing';
}
}

View file

@ -53,6 +53,10 @@ module.exports = React.createClass({
// more interesting)
hasActiveCall: React.PropTypes.bool,
// Number of names to display in typing indication. E.g. set to 3, will
// result in "X, Y, Z and 100 others are typing."
whoIsTypingLimit: React.PropTypes.number,
// callback for when the user clicks on the 'resend all' button in the
// 'unsent messages' bar
onResendAllClick: React.PropTypes.func,
@ -80,7 +84,7 @@ module.exports = React.createClass({
getInitialState: function() {
return {
syncState: MatrixClientPeg.get().getSyncState(),
whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room),
whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit),
};
},
@ -127,7 +131,7 @@ module.exports = React.createClass({
onRoomMemberTyping: function(ev, member) {
this.setState({
whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room),
whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room, this.props.whoIsTypingLimit),
});
},

View file

@ -1531,6 +1531,7 @@ module.exports = React.createClass({
onResize={this.onChildResize}
onVisible={this.onStatusBarVisible}
onHidden={this.onStatusBarHidden}
whoIsTypingLimit={2}
/>;
}