+ );
+};
+
+EventListSummary.propTypes = {
+ // An array of member events to summarise
+ events: PropTypes.arrayOf(PropTypes.instanceOf(MatrixEvent)).isRequired,
+ // An array of EventTiles to render when expanded
+ children: PropTypes.arrayOf(PropTypes.element).isRequired,
+ // The minimum number of events needed to trigger summarisation
+ threshold: PropTypes.number,
+ // Called when the event list expansion is toggled
+ onToggle: PropTypes.func,
+ // Whether or not to begin with state.expanded=true
+ startExpanded: PropTypes.bool,
+
+ // The list of room members for which to show avatars next to the summary
+ summaryMembers: PropTypes.arrayOf(PropTypes.instanceOf(RoomMember)),
+ // The text to show as the summary of this event list
+ summaryText: PropTypes.string.isRequired,
+};
+
+export default EventListSummary;
diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index ba31eb5a38..98adbb2e5c 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -19,9 +19,9 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
-import MemberAvatar from '../avatars/MemberAvatar';
import { _t } from '../../../languageHandler';
import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
+import sdk from "../../../index";
module.exports = createReactClass({
displayName: 'MemberEventListSummary',
@@ -43,12 +43,6 @@ module.exports = createReactClass({
startExpanded: PropTypes.bool,
},
- getInitialState: function() {
- return {
- expanded: Boolean(this.props.startExpanded),
- };
- },
-
getDefaultProps: function() {
return {
summaryLength: 1,
@@ -57,37 +51,27 @@ module.exports = createReactClass({
};
},
- shouldComponentUpdate: function(nextProps, nextState) {
+ shouldComponentUpdate: function(nextProps) {
// Update if
// - The number of summarised events has changed
- // - or if the summary is currently expanded
// - or if the summary is about to toggle to become collapsed
// - or if there are fewEvents, meaning the child eventTiles are shown as-is
return (
nextProps.events.length !== this.props.events.length ||
- this.state.expanded || nextState.expanded ||
nextProps.events.length < this.props.threshold
);
},
- _toggleSummary: function() {
- this.setState({
- expanded: !this.state.expanded,
- });
- this.props.onToggle();
- },
-
/**
- * Render the JSX for users aggregated by their transition sequences (`eventAggregates`) where
+ * Generate the text for users aggregated by their transition sequences (`eventAggregates`) where
* the sequences are ordered by `orderedTransitionSequences`.
* @param {object[]} eventAggregates a map of transition sequence to array of user display names
* or user IDs.
* @param {string[]} orderedTransitionSequences an array which is some ordering of
* `Object.keys(eventAggregates)`.
- * @returns {ReactElement} a single containing the textual summary of the aggregated
- * events that occurred.
+ * @returns {string} the textual summary of the aggregated events that occurred.
*/
- _renderSummary: function(eventAggregates, orderedTransitionSequences) {
+ _generateSummary: function(eventAggregates, orderedTransitionSequences) {
const summaries = orderedTransitionSequences.map((transitions) => {
const userNames = eventAggregates[transitions];
const nameList = this._renderNameList(userNames);
@@ -118,11 +102,7 @@ module.exports = createReactClass({
return null;
}
- return (
-
- { summaries.join(", ") }
-
- );
+ return summaries.join(", ");
},
/**
@@ -208,7 +188,7 @@ module.exports = createReactClass({
* For a certain transition, t, describe what happened to the users that
* underwent the transition.
* @param {string} t the transition type.
- * @param {integer} userCount number of usernames
+ * @param {number} userCount number of usernames
* @param {number} repeats the number of times the transition was repeated in a row.
* @returns {string} the written Human Readable equivalent of the transition.
*/
@@ -288,19 +268,6 @@ module.exports = createReactClass({
return res;
},
- _renderAvatars: function(roomMembers) {
- const avatars = roomMembers.slice(0, this.props.avatarsMaxLength).map((m) => {
- return (
-
- );
- });
- return (
-
- { avatars }
-
- );
- },
-
_getTransitionSequence: function(events) {
return events.map(this._getTransition);
},
@@ -396,22 +363,6 @@ module.exports = createReactClass({
render: function() {
const eventsToRender = this.props.events;
- const eventIds = eventsToRender.map((e) => e.getId()).join(',');
- const fewEvents = eventsToRender.length < this.props.threshold;
- const expanded = this.state.expanded || fewEvents;
-
- let expandedEvents = null;
- if (expanded) {
- expandedEvents = this.props.children;
- }
-
- if (fewEvents) {
- return (
-
- { expandedEvents }
-
- );
- }
// Map user IDs to an array of objects:
const userEvents = {
@@ -455,30 +406,14 @@ module.exports = createReactClass({
(seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2],
);
- let summaryContainer = null;
- if (!expanded) {
- summaryContainer = (
-