Merge pull request #643 from matrix-org/luke/fix-typing-indication

Sync typing indication with avatar typing indication
This commit is contained in:
David Baker 2017-01-25 11:13:55 +00:00 committed by GitHub
commit f66e412d3a
3 changed files with 34 additions and 12 deletions

View file

@ -32,17 +32,24 @@ module.exports = {
return whoIsTyping; return whoIsTyping;
}, },
whoIsTypingString: function(room) { whoIsTypingString: function(room, limit) {
var whoIsTyping = this.usersTypingApartFromMe(room); const whoIsTyping = this.usersTypingApartFromMe(room);
const othersCount = limit === undefined ?
0 : Math.max(whoIsTyping.length - limit, 0);
if (whoIsTyping.length == 0) { if (whoIsTyping.length == 0) {
return null; return '';
} else if (whoIsTyping.length == 1) { } else if (whoIsTyping.length == 1) {
return whoIsTyping[0].name + ' is typing'; return whoIsTyping[0].name + ' is typing';
} else { }
var names = whoIsTyping.map(function(m) { const names = whoIsTyping.map(function(m) {
return m.name; 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'; return names.join(', ') + ' and ' + lastPerson + ' are typing';
} }
} }

View file

@ -21,8 +21,6 @@ var WhoIsTyping = require("../../WhoIsTyping");
var MatrixClientPeg = require("../../MatrixClientPeg"); var MatrixClientPeg = require("../../MatrixClientPeg");
const MemberAvatar = require("../views/avatars/MemberAvatar"); const MemberAvatar = require("../views/avatars/MemberAvatar");
const TYPING_AVATARS_LIMIT = 2;
const HIDE_DEBOUNCE_MS = 10000; const HIDE_DEBOUNCE_MS = 10000;
const STATUS_BAR_HIDDEN = 0; const STATUS_BAR_HIDDEN = 0;
const STATUS_BAR_EXPANDED = 1; const STATUS_BAR_EXPANDED = 1;
@ -53,6 +51,10 @@ module.exports = React.createClass({
// more interesting) // more interesting)
hasActiveCall: React.PropTypes.bool, 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 // callback for when the user clicks on the 'resend all' button in the
// 'unsent messages' bar // 'unsent messages' bar
onResendAllClick: React.PropTypes.func, onResendAllClick: React.PropTypes.func,
@ -77,10 +79,19 @@ module.exports = React.createClass({
onVisible: React.PropTypes.func, onVisible: React.PropTypes.func,
}, },
getDefaultProps: function() {
return {
whoIsTypingLimit: 2,
};
},
getInitialState: function() { getInitialState: function() {
return { return {
syncState: MatrixClientPeg.get().getSyncState(), syncState: MatrixClientPeg.get().getSyncState(),
whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room), whoisTypingString: WhoIsTyping.whoIsTypingString(
this.props.room,
this.props.whoIsTypingLimit
),
}; };
}, },
@ -127,7 +138,10 @@ module.exports = React.createClass({
onRoomMemberTyping: function(ev, member) { onRoomMemberTyping: function(ev, member) {
this.setState({ this.setState({
whoisTypingString: WhoIsTyping.whoIsTypingString(this.props.room), whoisTypingString: WhoIsTyping.whoIsTypingString(
this.props.room,
this.props.whoIsTypingLimit
),
}); });
}, },
@ -194,7 +208,7 @@ module.exports = React.createClass({
if (wantPlaceholder) { if (wantPlaceholder) {
return ( return (
<div className="mx_RoomStatusBar_typingIndicatorAvatars"> <div className="mx_RoomStatusBar_typingIndicatorAvatars">
{this._renderTypingIndicatorAvatars(TYPING_AVATARS_LIMIT)} {this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit)}
</div> </div>
); );
} }

View file

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