diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index f8a68a88d9..58347a068d 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -31,6 +31,7 @@ var LeftPanel = React.createClass({ getInitialState: function() { return { showCallElement: null, + searchFilter: '', }; }, @@ -84,6 +85,10 @@ var LeftPanel = React.createClass({ } }, + onSearch: function(term) { + this.setState({ searchFilter: term }); + }, + render: function() { var RoomList = sdk.getComponent('rooms.RoomList'); var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu'); @@ -111,12 +116,13 @@ var LeftPanel = React.createClass({ return ( diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index ab89fd0f5b..497acdec07 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -65,16 +65,12 @@ var RoomSubList = React.createClass({ selectedRoom: React.PropTypes.string.isRequired, startAsHidden: React.PropTypes.bool, showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded - - // TODO: Fix the name of this. This is too easily confused with the - // "hidden" state which is the expanded (or not) view of the list of rooms. - // What this prop *really* does is control whether the room name is displayed - // so it should be named as such. - collapsed: React.PropTypes.bool.isRequired, + collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed? onHeaderClick: React.PropTypes.func, alwaysShowHeader: React.PropTypes.bool, incomingCall: React.PropTypes.object, - onShowMoreRooms: React.PropTypes.func + onShowMoreRooms: React.PropTypes.func, + searchFilter: React.PropTypes.string, }, getInitialState: function() { @@ -93,13 +89,20 @@ var RoomSubList = React.createClass({ }, componentWillMount: function() { - this.sortList(this.props.list, this.props.order); + this.sortList(this.applySearchFilter(this.props.list, this.props.searchFilter), this.props.order); }, componentWillReceiveProps: function(newProps) { // order the room list appropriately before we re-render //if (debug) console.log("received new props, list = " + newProps.list); - this.sortList(newProps.list, newProps.order); + this.sortList(this.applySearchFilter(newProps.list, newProps.searchFilter), newProps.order); + }, + + applySearchFilter: function(list, filter) { + if (filter === "") return list; + return list.filter((room) => { + return room.name && room.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0 + }); }, onClick: function(ev) { diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 69434dc2a0..553feffe0c 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -19,32 +19,78 @@ limitations under the License. var React = require('react'); var sdk = require('matrix-react-sdk') var dis = require('matrix-react-sdk/lib/dispatcher'); +var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc'); module.exports = React.createClass({ displayName: 'SearchBox', + propTypes: { + collapsed: React.PropTypes.bool, + onSearch: React.PropTypes.func, + }, + + onChange: new rate_limited_func( + function() { + if (this.refs.search) { + this.props.onSearch(this.refs.search.value); + } + }, + 100 + ), + + onToggleCollapse: function(show) { + if (show) { + dis.dispatch({ + action: 'show_left_panel', + }); + } + else { + dis.dispatch({ + action: 'hide_left_panel', + }); + } + }, + render: function() { var TintableSvg = sdk.getComponent('elements.TintableSvg'); var toggleCollapse; if (this.props.collapsed) { - toggleCollapse = ; + toggleCollapse = +