Merge pull request #1583 from matrix-org/luke/groups-disable-rooms-whilst-editing

Disable RoomDetailList in GroupView when editing

src/components/structures/GroupView.js

@@ -681,6 +681,10 @@ export default React.createClass({
                     { _t('Add rooms to this community') }
                 </div>
             </AccessibleButton>) : <div />;
+        const roomDetailListClassName = classnames({
+            "mx_fadable": true,
+            "mx_fadable_faded": this.state.editing,
+        });
         return <div className="mx_GroupView_rooms">
             <div className="mx_GroupView_rooms_header">
                 <h3>
@@ -691,7 +695,9 @@ export default React.createClass({
             </div>
             { this.state.groupRoomsLoading ?
                 <Spinner /> :
-                <RoomDetailList rooms={this.state.groupRooms} />
+                <RoomDetailList
+                    rooms={this.state.groupRooms}
+                    className={roomDetailListClassName} />
             }
         </div>;
     },

src/components/views/rooms/RoomDetailList.js

@@ -23,6 +23,7 @@ import sanitizeHtml from 'sanitize-html';
 import { ContentRepo } from 'matrix-js-sdk';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 function getDisplayAliasForRoom(room) {
     return room.canonicalAlias || (room.aliases ? room.aliases[0] : "");
@@ -117,6 +118,8 @@ export default React.createClass({
             worldReadable: PropTypes.bool,
             guestCanJoin: PropTypes.bool,
         })),
+
+        className: PropTypes.string,
     },
 
     getRows: function() {
@@ -138,7 +141,7 @@ export default React.createClass({
                 </tbody>
             </table>;
         }
-        return <div className="mx_RoomDetailList">
+        return <div className={classNames("mx_RoomDetailList", this.props.className)}>
             { rooms }
         </div>;
     },