Merge pull request #2698 from matrix-org/t3chguy/room_member_filter_clear

Add abilities to clear Filter room members input

src/components/structures/LeftPanel.js

@@ -26,6 +26,7 @@ import dis from '../../dispatcher';
 import VectorConferenceHandler from '../../VectorConferenceHandler';
 import TagPanelButtons from './TagPanelButtons';
 import SettingsStore from '../../settings/SettingsStore';
+import {_t} from "../../languageHandler";
 
 
 const LeftPanel = React.createClass({
@@ -212,6 +213,7 @@ const LeftPanel = React.createClass({
         );
 
         const searchBox = (<SearchBox
+            placeholder={ _t('Filter room names') }
             onSearch={ this.onSearch }
             onCleared={ this.onSearchCleared }
             collapsed={this.props.collapsed} />);

src/components/structures/SearchBox.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,12 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
-import { _t } from '../../languageHandler';
+import PropTypes from 'prop-types';
 import { KeyCode } from '../../Keyboard';
-import sdk from '../../index';
 import dis from '../../dispatcher';
 import { throttle } from 'lodash';
 import AccessibleButton from '../../components/views/elements/AccessibleButton';
@@ -28,8 +26,10 @@ module.exports = React.createClass({
     displayName: 'SearchBox',
 
     propTypes: {
-        onSearch: React.PropTypes.func,
+        onSearch: PropTypes.func,
-        onCleared: React.PropTypes.func,
+        onCleared: PropTypes.func,
+        className: PropTypes.string,
+        placeholder: PropTypes.string.isRequired,
     },
 
     getInitialState: function() {
@@ -102,21 +102,22 @@ module.exports = React.createClass({
         const clearButton = this.state.searchTerm.length > 0 ?
             (<AccessibleButton key="button"
                     className="mx_SearchBox_closeButton"
-                    onClick={ () => {this._clearSearch("button")} }>
+                    onClick={ () => {this._clearSearch("button"); } }>
             </AccessibleButton>) : undefined;
 
+        const className = this.props.className || "";
         return (
             <div className="mx_SearchBox mx_textinput">
                 <input
                     key="searchfield"
                     type="text"
                     ref="search"
-                    className="mx_textinput_icon mx_textinput_search"
+                    className={"mx_textinput_icon mx_textinput_search " + className}
                     value={ this.state.searchTerm }
                     onFocus={ this._onFocus }
                     onChange={ this.onChange }
                     onKeyDown={ this._onKeyDown }
-                    placeholder={ _t('Filter room names') }
+                    placeholder={ this.props.placeholder }
                 />
                 { clearButton }
             </div>

src/components/views/rooms/MemberList.js

@@ -339,12 +339,11 @@ module.exports = React.createClass({
         return nameA.localeCompare(nameB);
     },
 
-    onSearchQueryChanged: function(ev) {
+    onSearchQueryChanged: function(searchQuery) {
-        const q = ev.target.value;
         this.setState({
-            searchQuery: q,
+            searchQuery,
-            filteredJoinedMembers: this._filterMembers(this.state.members, 'join', q),
+            filteredJoinedMembers: this._filterMembers(this.state.members, 'join', searchQuery),
-            filteredInvitedMembers: this._filterMembers(this.state.members, 'invite', q),
+            filteredInvitedMembers: this._filterMembers(this.state.members, 'invite', searchQuery),
         });
     },
 
@@ -438,6 +437,7 @@ module.exports = React.createClass({
             return <div className="mx_MemberList"><Spinner /></div>;
         }
 
+        const SearchBox = sdk.getComponent('structures.SearchBox');
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
@@ -445,7 +445,6 @@ module.exports = React.createClass({
         const room = cli.getRoom(this.props.roomId);
         let inviteButton;
         if (room && room.getMyMembership() === 'join') {
-            const TintableSvg = sdk.getComponent("elements.TintableSvg");
             const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
             inviteButton =
                 <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
@@ -477,9 +476,10 @@ module.exports = React.createClass({
                         { invitedSection }
                     </div>
                 </GeminiScrollbarWrapper>
-                <input className="mx_MemberList_query mx_textinput_icon mx_textinput_search" id="mx_MemberList_query" type="text"
+
-                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                <SearchBox className="mx_MemberList_query mx_textinput_icon mx_textinput_search"
-                        placeholder={_t('Filter room members')} />
+                           placeholder={ _t('Filter room members') }
+                           onSearch={ this.onSearchQueryChanged } />
             </div>
         );
     },