Wrap GeminiScrollbar in a component, enabled forceGemini

Fixes https://github.com/vector-im/riot-web/issues/6294

src/components/views/rooms/MemberInfo.js

@@ -39,7 +39,6 @@ import Unread from '../../../Unread';
 import { findReadReceiptFromUserId } from '../../../utils/Receipt';
 import withMatrixClient from '../../../wrappers/withMatrixClient';
 import AccessibleButton from '../elements/AccessibleButton';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import SdkConfig from '../../../SdkConfig';
 
@@ -897,11 +896,12 @@ module.exports = withMatrixClient(React.createClass({
             </div>;
         }
 
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const EmojiText = sdk.getComponent('elements.EmojiText');
         return (
             <div className="mx_MemberInfo">
-                <GeminiScrollbar autoshow={true}>
+                <GeminiScrollbarWrapper autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
                     <div className="mx_MemberInfo_avatar">
                         <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
@@ -925,7 +925,7 @@ module.exports = withMatrixClient(React.createClass({
                     { this._renderDevices() }
 
                     { spinner }
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             </div>
         );
     },

src/components/views/rooms/MemberList.js

@@ -21,7 +21,6 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 const MatrixClientPeg = require("../../../MatrixClientPeg");
 const sdk = require('../../../index');
-const GeminiScrollbar = require('react-gemini-scrollbar');
 const rate_limited_func = require('../../../ratelimitedfunc');
 const CallHandler = require("../../../CallHandler");
 
@@ -395,6 +394,7 @@ module.exports = React.createClass({
 
     render: function() {
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         let invitedSection = null;
         if (this._getChildCountInvited() > 0) {
@@ -423,14 +423,14 @@ module.exports = React.createClass({
         return (
             <div className="mx_MemberList">
                 { inputBox }
-                <GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
+                <GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
                     <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtJoined}
                             createOverflowElement={this._createOverflowTileJoined}
                             getChildren={this._getChildrenJoined}
                             getChildCount={this._getChildCountJoined}
                     />
                     { invitedSection }
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             </div>
         );
     },

src/components/views/rooms/RoomList.js

@@ -20,7 +20,6 @@ const React = require("react");
 const ReactDOM = require("react-dom");
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-const GeminiScrollbar = require('react-gemini-scrollbar');
 const MatrixClientPeg = require("../../../MatrixClientPeg");
 const CallHandler = require('../../../CallHandler');
 const dis = require("../../../dispatcher");
@@ -351,7 +350,7 @@ module.exports = React.createClass({
 
                 return Boolean(isRoomVisible[taggedRoom.roomId]);
             });
-            
+
             if (filteredRooms.length > 0 || tagName.match(STANDARD_TAGS_REGEX)) {
                 filteredLists[tagName] = filteredRooms;
             }
@@ -601,10 +600,11 @@ module.exports = React.createClass({
 
     render: function() {
         const RoomSubList = sdk.getComponent('structures.RoomSubList');
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         const self = this;
         return (
-            <GeminiScrollbar className="mx_RoomList_scrollbar"
+            <GeminiScrollbarWrapper className="mx_RoomList_scrollbar"
                  autoshow={true} onScroll={self._whenScrolling} ref="gemscroll">
             <div className="mx_RoomList">
                 <RoomSubList list={[]}
@@ -711,7 +711,7 @@ module.exports = React.createClass({
                              searchFilter={self.props.searchFilter}
                              onShowMoreRooms={self.onShowMoreRooms} />
             </div>
-            </GeminiScrollbar>
+            </GeminiScrollbarWrapper>
         );
     },
 });

src/components/views/rooms/SearchableEntityList.js

@@ -19,7 +19,6 @@ const MatrixClientPeg = require("../../../MatrixClientPeg");
 const Modal = require("../../../Modal");
 const sdk = require("../../../index");
 import { _t } from '../../../languageHandler';
-const GeminiScrollbar = require('react-gemini-scrollbar');
 
 // A list capable of displaying entities which conform to the SearchableEntity
 // interface which is an object containing getJsx(): Jsx and matches(query: string): boolean
@@ -164,11 +163,12 @@ const SearchableEntityList = React.createClass({
                     </div>
                 );
             }
+            const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
             list = (
-                <GeminiScrollbar autoshow={true}
+                <GeminiScrollbarWrapper autoshow={true}
                                  className="mx_SearchableEntityList_listWrapper">
                     { list }
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             );
         }