Merge pull request #2842 from matrix-org/bwindels/bacat-scrolling-merged-develop

BACAT Scrolling

src/components/views/rooms/MemberInfo.js

@@ -44,6 +44,7 @@ import SdkConfig from '../../../SdkConfig';
 import MultiInviter from "../../../utils/MultiInviter";
 import SettingsStore from "../../../settings/SettingsStore";
 import E2EIcon from "./E2EIcon";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 
 module.exports = withMatrixClient(React.createClass({
     displayName: 'MemberInfo',
@@ -1003,7 +1004,7 @@ module.exports = withMatrixClient(React.createClass({
                             { roomMemberDetails }
                         </div>
                     </div>
-                    <GeminiScrollbarWrapper autoshow={true} className="mx_MemberInfo_scrollContainer">
+                    <AutoHideScrollbar className="mx_MemberInfo_scrollContainer">
                         <div className="mx_MemberInfo_container">
                             { this._renderUserOptions() }
 
@@ -1015,7 +1016,7 @@ module.exports = withMatrixClient(React.createClass({
 
                             { spinner }
                         </div>
-                    </GeminiScrollbarWrapper>
+                    </AutoHideScrollbar>
             </div>
         );
     },

src/components/views/rooms/MemberList.js

@@ -20,6 +20,8 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import dis from '../../../dispatcher';
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+
 const MatrixClientPeg = require("../../../MatrixClientPeg");
 const sdk = require('../../../index');
 const rate_limited_func = require('../../../ratelimitedfunc');
@@ -439,7 +441,6 @@ module.exports = React.createClass({
 
         const SearchBox = sdk.getComponent('structures.SearchBox');
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
-        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.roomId);
@@ -466,7 +467,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_MemberList">
                 { inviteButton }
-                <GeminiScrollbarWrapper autoshow={true}>
+                <AutoHideScrollbar>
                     <div className="mx_MemberList_wrapper">
                         <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
                             createOverflowElement={this._createOverflowTileJoined}
@@ -475,7 +476,7 @@ module.exports = React.createClass({
                         { invitedHeader }
                         { invitedSection }
                     </div>
-                </GeminiScrollbarWrapper>
+                </AutoHideScrollbar>
 
                 <SearchBox className="mx_MemberList_query mx_textinput_icon mx_textinput_search"
                            placeholder={ _t('Filter room members') }

src/components/views/rooms/MessageComposer.js

@@ -412,7 +412,6 @@ export default class MessageComposer extends React.Component {
                 <MessageComposerInput
                     ref={(c) => this.messageComposerInput = c}
                     key="controls_input"
-                    onResize={this.props.onResize}
                     room={this.props.room}
                     placeholder={placeholderText}
                     onFilesPasted={this.uploadFiles}
@@ -505,10 +504,6 @@ export default class MessageComposer extends React.Component {
 }
 
 MessageComposer.propTypes = {
-    // a callback which is called when the height of the composer is
-    // changed due to a change in content.
-    onResize: PropTypes.func,
-
     // js-sdk Room object
     room: PropTypes.object.isRequired,
 

src/components/views/rooms/MessageComposerInput.js

@@ -135,10 +135,6 @@ function rangeEquals(a: Range, b: Range): boolean {
  */
 export default class MessageComposerInput extends React.Component {
     static propTypes = {
-        // a callback which is called when the height of the composer is
-        // changed due to a change in content.
-        onResize: PropTypes.func,
-
         // js-sdk Room object
         room: PropTypes.object.isRequired,
 

src/components/views/rooms/RoomList.js

@@ -212,7 +212,9 @@ module.exports = React.createClass({
         this._checkSubListsOverflow();
 
         this.resizer.attach();
-        window.addEventListener("resize", this.onWindowResize);
+        if (this.props.resizeNotifier) {
+            this.props.resizeNotifier.on("leftPanelResized", this.onResize);
+        }
         this.mounted = true;
     },
 
@@ -260,7 +262,6 @@ module.exports = React.createClass({
     componentWillUnmount: function() {
         this.mounted = false;
 
-        window.removeEventListener("resize", this.onWindowResize);
         dis.unregister(this.dispatcherRef);
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("Room", this.onRoom);
@@ -273,6 +274,11 @@ module.exports = React.createClass({
             MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
         }
 
+        if (this.props.resizeNotifier) {
+            this.props.resizeNotifier.removeListener("leftPanelResized", this.onResize);
+        }
+
+
         if (this._tagStoreToken) {
             this._tagStoreToken.remove();
         }
@@ -293,13 +299,14 @@ module.exports = React.createClass({
         this._delayedRefreshRoomList.cancelPendingCall();
     },
 
-    onWindowResize: function() {
+
+    onResize: function() {
         if (this.mounted && this._layout && this.resizeContainer &&
             Array.isArray(this._layoutSections)
         ) {
             this._layout.update(
                 this._layoutSections,
-                this.resizeContainer.offsetHeight
+                this.resizeContainer.offsetHeight,
             );
         }
     },

src/components/views/rooms/WhoIsTypingTile.js

@@ -29,7 +29,8 @@ module.exports = React.createClass({
     propTypes: {
         // the room this statusbar is representing.
         room: PropTypes.object.isRequired,
-        onVisible: PropTypes.func,
+        onShown: PropTypes.func,
+        onHidden: PropTypes.func,
         // 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: PropTypes.number,
@@ -59,11 +60,12 @@ module.exports = React.createClass({
     },
 
     componentDidUpdate: function(_, prevState) {
-        if (this.props.onVisible &&
-            !prevState.usersTyping.length &&
-            this.state.usersTyping.length
-        ) {
-            this.props.onVisible();
+        const wasVisible = this._isVisible(prevState);
+        const isVisible = this._isVisible(this.state);
+        if (this.props.onShown && !wasVisible && isVisible) {
+            this.props.onShown();
+        } else if (this.props.onHidden && wasVisible && !isVisible) {
+            this.props.onHidden();
         }
     },
 
@@ -77,8 +79,12 @@ module.exports = React.createClass({
         Object.values(this.state.delayedStopTypingTimers).forEach((t) => t.abort());
     },
 
+    _isVisible: function(state) {
+        return state.usersTyping.length !== 0 || Object.keys(state.delayedStopTypingTimers).length !== 0;
+    },
+
     isVisible: function() {
-        return this.state.usersTyping.length !== 0 || Object.keys(this.state.delayedStopTypingTimers).length !== 0;
+        return this._isVisible(this.state);
     },
 
     onRoomTimeline: function(event, room) {