Merge branch 'develop' into t3chguy/m.relates_to

src/components/structures/GroupView.js

@@ -31,7 +31,6 @@ import GroupStoreCache from '../../stores/GroupStoreCache';
 import GroupStore from '../../stores/GroupStore';
 import FlairStore from '../../stores/FlairStore';
 import { showGroupAddRoomDialog } from '../../GroupAddressPicker';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 import {makeGroupPermalink, makeUserPermalink} from "../../matrix-to";
 
 const LONG_DESC_PLACEHOLDER = _td(
@@ -969,6 +968,7 @@ export default React.createClass({
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
         const Spinner = sdk.getComponent("elements.Spinner");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         if (this.state.summaryLoading && this.state.error === null || this.state.saving) {
             return <Spinner />;
@@ -1119,9 +1119,9 @@ export default React.createClass({
                             { rightButtons }
                         </div>
                     </div>
-                    <GeminiScrollbar className="mx_GroupView_body">
+                    <GeminiScrollbarWrapper className="mx_GroupView_body">
                         { bodyNodes }
-                    </GeminiScrollbar>
+                    </GeminiScrollbarWrapper>
                 </div>
             );
         } else if (this.state.error) {

src/components/structures/MyGroups.js

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 import sdk from '../../index';
 import { _t } from '../../languageHandler';
 import dis from '../../dispatcher';
@@ -63,6 +62,8 @@ export default withMatrixClient(React.createClass({
         const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const GroupTile = sdk.getComponent("groups.GroupTile");
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+
 
         let content;
         let contentHeader;
@@ -73,7 +74,7 @@ export default withMatrixClient(React.createClass({
             });
             contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
             content = groupNodes.length > 0 ?
-                <GeminiScrollbar>
+                <GeminiScrollbarWrapper>
                     <div className="mx_MyGroups_microcopy">
                         <p>
                             { _t(
@@ -92,7 +93,7 @@ export default withMatrixClient(React.createClass({
                     <div className="mx_MyGroups_joinedGroups">
                         { groupNodes }
                     </div>
-                </GeminiScrollbar> :
+                </GeminiScrollbarWrapper> :
                 <div className="mx_MyGroups_placeholder">
                     { _t(
                         "You're not currently a member of any communities.",

src/components/structures/ScrollPanel.js

@@ -17,9 +17,9 @@ limitations under the License.
 const React = require("react");
 const ReactDOM = require("react-dom");
 import PropTypes from 'prop-types';
-const GeminiScrollbar = require('react-gemini-scrollbar');
 import Promise from 'bluebird';
 import { KeyCode } from '../../Keyboard';
+import sdk from '../../index.js';
 
 const DEBUG_SCROLL = false;
 // var DEBUG_SCROLL = true;
@@ -224,7 +224,7 @@ module.exports = React.createClass({
     onResize: function() {
         this.props.onResize();
         this.checkScroll();
-        this.refs.geminiPanel.forceUpdate();
+        if (this._gemScroll) this._gemScroll.forceUpdate();
     },
 
     // after an update to the contents of the panel, check that the scroll is
@@ -665,14 +665,25 @@ module.exports = React.createClass({
             throw new Error("ScrollPanel._getScrollNode called when unmounted");
         }
 
-        return this.refs.geminiPanel.scrollbar.getViewElement();
+        if (!this._gemScroll) {
+            // Likewise, we should have the ref by this point, but if not
+            // turn the NPE into something meaningful.
+            throw new Error("ScrollPanel._getScrollNode called before gemini ref collected");
+        }
+
+        return this._gemScroll.scrollbar.getViewElement();
+    },
+
+    _collectGeminiScroll: function(gemScroll) {
+        this._gemScroll = gemScroll;
     },
 
     render: function() {
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         // TODO: the classnames on the div and ol could do with being updated to
         // reflect the fact that we don't necessarily contain a list of messages.
         // it's not obvious why we have a separate div and ol anyway.
-        return (<GeminiScrollbar autoshow={true} ref="geminiPanel"
+        return (<GeminiScrollbarWrapper autoshow={true} wrappedRef={this._collectGeminiScroll}
                 onScroll={this.onScroll} onResize={this.onResize}
                 className={this.props.className} style={this.props.style}>
                     <div className="mx_RoomView_messageListWrapper">
@@ -680,7 +691,7 @@ module.exports = React.createClass({
                             { this.props.children }
                         </ol>
                     </div>
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
                );
     },
 });

src/components/structures/TagPanel.js

@@ -17,7 +17,6 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 import TagOrderStore from '../../stores/TagOrderStore';
 
 import GroupActions from '../../actions/GroupActions';
@@ -102,6 +101,8 @@ const TagPanel = React.createClass({
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+
 
         const tags = this.state.orderedTags.map((tag, index) => {
             return <DNDTagTile
@@ -124,7 +125,7 @@ const TagPanel = React.createClass({
                 { clearButton }
             </AccessibleButton>
             <div className="mx_TagPanel_divider" />
-            <GeminiScrollbar
+            <GeminiScrollbarWrapper
                 className="mx_TagPanel_scroller"
                 autoshow={true}
                 // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
@@ -145,7 +146,7 @@ const TagPanel = React.createClass({
                             </div>
                     ) }
                 </Droppable>
-            </GeminiScrollbar>
+            </GeminiScrollbarWrapper>
             <div className="mx_TagPanel_divider" />
             <div className="mx_TagPanel_createGroupButton">
                 <GroupsButton tooltip={true} />

src/components/structures/UserSettings.js

@@ -30,7 +30,6 @@ import Promise from 'bluebird';
 const packageJson = require('../../../package.json');
 const UserSettingsStore = require('../../UserSettingsStore');
 const CallMediaHandler = require('../../CallMediaHandler');
-const GeminiScrollbar = require('react-gemini-scrollbar');
 const Email = require('../../email');
 const AddThreepid = require('../../AddThreepid');
 const SdkConfig = require('../../SdkConfig');
@@ -1118,6 +1117,7 @@ module.exports = React.createClass({
         const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
         const Notifications = sdk.getComponent("settings.Notifications");
         const EditableText = sdk.getComponent('elements.EditableText');
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         const avatarUrl = (
             this.state.avatarUrl ? MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl) : null
@@ -1213,8 +1213,9 @@ module.exports = React.createClass({
                     onCancelClick={this.props.onClose}
                 />
 
-                <GeminiScrollbar className="mx_UserSettings_body"
-                                 autoshow={true}>
+                <GeminiScrollbarWrapper
+                    className="mx_UserSettings_body"
+                    autoshow={true}>
 
                 <h3>{ _t("Profile") }</h3>
 
@@ -1327,7 +1328,7 @@ module.exports = React.createClass({
 
                 { this._renderDeactivateAccount() }
 
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             </div>
         );
     },