WIP nicer join/part folding
This commit is contained in:
Luke Barnard
parent
cd241a4a17
commit
2f02c4b84e
2 changed files with 255 additions and 34 deletions
|
|
@ -20,7 +20,7 @@ var dis = require("../../dispatcher");
|
|||
var sdk = require('../../index');
|
||||
|
||||
var MatrixClientPeg = require('../../MatrixClientPeg')
|
||||
var TruncatedList = require('../views/elements/TruncatedList.js');
|
||||
var MemberEventListSummary = require('../views/elements/MemberEventListSummary.js');
|
||||
|
||||
/* (almost) stateless UI component which builds the event tiles in the room timeline.
|
||||
*/
|
||||
|
|
@ -287,54 +287,47 @@ module.exports = React.createClass({
|
|||
|
||||
var last = (i == lastShownEventIndex);
|
||||
|
||||
// Wrap consecutive member events in a TruncatedList
|
||||
if (mxEv.getType() === 'm.room.member') {
|
||||
var isMembershipChange = (e) =>
|
||||
e.getType() === 'm.room.member'
|
||||
&& ['join', 'leave'].indexOf(e.event.content.membership) !== -1
|
||||
&& (!e.event.prev_content || e.event.content.membership !== e.event.prev_content.membership);
|
||||
|
||||
// Wrap consecutive member events in a ListSummary
|
||||
if (isMembershipChange(mxEv)) {
|
||||
// Prevent message continuations between truncations
|
||||
prevEvent = null;
|
||||
|
||||
let collapsedEvents = [mxEv];
|
||||
let summarisedEvents = [mxEv];
|
||||
i++;
|
||||
for (;i < this.props.events.length; i++) {
|
||||
let collapsedMxEv = this.props.events[i];
|
||||
|
||||
if (collapsedMxEv.getType() !== 'm.room.member') {
|
||||
if (!isMembershipChange(collapsedMxEv)) {
|
||||
i--;
|
||||
break;
|
||||
}
|
||||
collapsedEvents.push(collapsedMxEv);
|
||||
summarisedEvents.push(collapsedMxEv);
|
||||
}
|
||||
let ePrev = null;
|
||||
collapsedEvents = collapsedEvents.map(
|
||||
(e) => {
|
||||
let ret = this._getTilesForEvent(ePrev, e);
|
||||
ePrev = e;
|
||||
return ret;
|
||||
let renderEvents = (events) => {
|
||||
if (events.length === 0) {
|
||||
return null;
|
||||
}
|
||||
).reduce((a,b) => a.concat(b));
|
||||
|
||||
let overflowElement = (overflowCount, totalCount, toggleTruncate, isExpanded) => {
|
||||
if (isExpanded) {
|
||||
return (
|
||||
<div className="mx_EventTile_line">
|
||||
<a onClick={toggleTruncate} href="javascript:;">collapse ^</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<div className="mx_EventTile_line">
|
||||
<a onClick={toggleTruncate} href="javascript:;">and {overflowCount} more...</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
return events.map(
|
||||
(e) => {
|
||||
let ret = this._getTilesForEvent(ePrev, e);
|
||||
ePrev = e;
|
||||
return ret;
|
||||
}
|
||||
).reduce((a,b) => a.concat(b));
|
||||
};
|
||||
ret.push(
|
||||
<TruncatedList truncateAt={2} createOverflowElement={overflowElement}>
|
||||
{collapsedEvents}
|
||||
</TruncatedList>
|
||||
<MemberEventListSummary
|
||||
events={summarisedEvents}
|
||||
renderEvents={renderEvents}
|
||||
/>
|
||||
);
|
||||
|
||||
wantTile = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (wantTile) {
|
||||
|
|
|
|||
228
src/components/views/elements/MemberEventListSummary.js
Normal file
228
src/components/views/elements/MemberEventListSummary.js
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
/*
|
||||
Copyright 2016 OpenMarket Ltd
|
||||
|
||||
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.
|
||||
*/
|
||||
const React = require('react');
|
||||
const MemberAvatar = require('../avatars/MemberAvatar.js');
|
||||
const dispatcher = require("../../../dispatcher");
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'MemberEventListSummary',
|
||||
|
||||
propTypes: {
|
||||
// An array of member events to summarise
|
||||
events: React.PropTypes.array,
|
||||
// The maximum number of names to show in either the join or leave summaries
|
||||
summaryLength: React.PropTypes.number,
|
||||
// The maximum number of avatars to display in the summary
|
||||
avatarsMaxLength: React.PropTypes.number,
|
||||
// The minimum number of events needed to trigger summarisation
|
||||
threshold: React.PropTypes.number,
|
||||
// The function to render events if they are not being summarised
|
||||
renderEvents: React.PropTypes.function,
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
summaryLength: 3,
|
||||
threshold: 3,
|
||||
avatarsMaxLength: 5
|
||||
};
|
||||
},
|
||||
|
||||
toggleSummary: function() {
|
||||
this.setState({
|
||||
expanded: !this.state.expanded,
|
||||
});
|
||||
},
|
||||
|
||||
getEventSenderName: function(ev) {
|
||||
if (!ev) {
|
||||
return 'undefined';
|
||||
}
|
||||
return ev.sender.name || ev.event.content.displayname || ev.getSender();
|
||||
},
|
||||
|
||||
renderNameList: function(events) {
|
||||
if (events.length === 0) {
|
||||
return null;
|
||||
}
|
||||
let originalNumber = events.length;
|
||||
events = events.slice(0, this.props.summaryLength);
|
||||
let lastEvent = events.pop();
|
||||
|
||||
let names = events.map((ev) => {
|
||||
return this.getEventSenderName(ev);
|
||||
}).join(', ');
|
||||
|
||||
if (names.length === 0) {
|
||||
return this.getEventSenderName(lastEvent);
|
||||
}
|
||||
|
||||
// Special case the last name. ' and ' might be included later
|
||||
// So you have two cases:
|
||||
if (originalNumber <= this.props.summaryLength) {
|
||||
// name1, name2 and name3
|
||||
names += ' and ';
|
||||
} else {
|
||||
// name1, name2, name3 [and 100 others]
|
||||
names += ', ';
|
||||
}
|
||||
return names + this.getEventSenderName(lastEvent);
|
||||
},
|
||||
|
||||
renderSummary: function(joinEvents, leaveEvents) {
|
||||
let joiners = this.renderNameList(joinEvents);
|
||||
let remainingJoiners = joinEvents.length - this.props.summaryLength;
|
||||
|
||||
let leavers = this.renderNameList(leaveEvents);
|
||||
let remainingLeavers = leaveEvents.length - this.props.summaryLength;
|
||||
|
||||
let joinSummary = null;
|
||||
|
||||
if (joiners) {
|
||||
joinSummary = (
|
||||
<span>
|
||||
{joiners} {remainingJoiners > 0 ? 'and ' + remainingJoiners + ' others ':''}joined the room
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
let leaveSummary = '';
|
||||
|
||||
if (leavers) {
|
||||
leaveSummary = (
|
||||
<span>
|
||||
{leavers} {remainingLeavers > 0 ? 'and ' + remainingLeavers + ' others ':''}left the room
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span>
|
||||
{joinSummary}{joinSummary && leaveSummary?'; ':''}
|
||||
{leaveSummary}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
|
||||
renderAvatars: function(events) {
|
||||
|
||||
let avatars = events.slice(0, this.props.avatarsMaxLength).map((e) => {
|
||||
let onClickAvatar = () => {
|
||||
dispatcher.dispatch({
|
||||
action: 'view_user',
|
||||
member: e.sender,
|
||||
});
|
||||
};
|
||||
return (
|
||||
<MemberAvatar
|
||||
key={e.getId()}
|
||||
member={e.sender}
|
||||
width={14}
|
||||
height={14}
|
||||
onClick={onClickAvatar}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<span>
|
||||
{avatars}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
let summary = null;
|
||||
|
||||
// Reorder events so that joins come before leaves
|
||||
let eventsToRender = this.props.events;
|
||||
|
||||
// Filter out those who joined, then left
|
||||
let filteredEvents = eventsToRender.filter(
|
||||
(e) => {
|
||||
return eventsToRender.filter(
|
||||
(e2) => {
|
||||
return e.getSender() === e2.getSender()
|
||||
&& e.event.content.membership !== e2.event.content.membership;
|
||||
}
|
||||
).length === 0;
|
||||
}
|
||||
);
|
||||
|
||||
let joinAndLeft = (eventsToRender.length - filteredEvents.length) / 2;
|
||||
if (joinAndLeft <= 0 || joinAndLeft % 1 !== 0) {
|
||||
joinAndLeft = null;
|
||||
}
|
||||
|
||||
let joinEvents = filteredEvents.filter((ev) => {
|
||||
return ev.event.content.membership === 'join';
|
||||
});
|
||||
|
||||
let leaveEvents = filteredEvents.filter((ev) => {
|
||||
return ev.event.content.membership === 'leave';
|
||||
});
|
||||
|
||||
let fewEvents = eventsToRender.length < this.props.threshold;
|
||||
console.log(eventsToRender.length, joinEvents.length, leaveEvents.length, this.state.expanded, fewEvents);
|
||||
|
||||
let expanded = this.state.expanded || fewEvents;
|
||||
let expandedEvents = null;
|
||||
|
||||
if (expanded) {
|
||||
expandedEvents = this.props.renderEvents(eventsToRender);
|
||||
}
|
||||
|
||||
let avatars = this.renderAvatars(joinEvents.concat(leaveEvents));
|
||||
|
||||
let toggleButton = null;
|
||||
let summaryContainer = null;
|
||||
if (!fewEvents) {
|
||||
summary = this.renderSummary(joinEvents, leaveEvents);
|
||||
toggleButton = (
|
||||
<a onClick={this.toggleSummary} href="javascript:;">{expanded?'collapse':'expand'}</a>
|
||||
);
|
||||
|
||||
summaryContainer = (
|
||||
<div className="mx_EventTile_line">
|
||||
<div className="mx_EventTile_info">
|
||||
<span className="mx_MemberEventListSummary_avatars">
|
||||
{avatars}
|
||||
</span>
|
||||
<span className="mx_TextualEvent mx_MemberEventListSummary_summary">
|
||||
{summary}{joinAndLeft? '. ' + joinAndLeft + ' others joined and left' : ''}
|
||||
</span>
|
||||
{toggleButton}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx_MemberEventListSummary">
|
||||
{summaryContainer}
|
||||
{expandedEvents}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
Loading…
Reference in a new issue