1 files changed, 136 insertions, 0 deletions
diff --git a/webapp/components/filtered_user_list.jsx b/webapp/components/filtered_user_list.jsx
new file mode 100644
index 000000000..1e4afd2be
--- /dev/null
+++ b/webapp/components/filtered_user_list.jsx
@@ -0,0 +1,136 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import $ from 'jquery';
+import ReactDOM from 'react-dom';
+import UserList from './user_list.jsx';
+
+import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
+
+const holders = defineMessages({
+    member: {
+        id: 'filtered_user_list.member',
+        defaultMessage: 'Member'
+    },
+    search: {
+        id: 'filtered_user_list.search',
+        defaultMessage: 'Search members'
+    }
+});
+
+import React from 'react';
+
+class FilteredUserList extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleFilterChange = this.handleFilterChange.bind(this);
+
+        this.state = {
+            filter: ''
+        };
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.filter !== this.state.filter) {
+            $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0);
+        }
+    }
+
+    handleFilterChange(e) {
+        this.setState({
+            filter: e.target.value
+        });
+    }
+
+    render() {
+        const {formatMessage} = this.props.intl;
+
+        let users = this.props.users;
+
+        if (this.state.filter) {
+            const filter = this.state.filter.toLowerCase();
+
+            users = users.filter((user) => {
+                return user.username.toLowerCase().indexOf(filter) !== -1 ||
+                    (user.first_name && user.first_name.toLowerCase().indexOf(filter) !== -1) ||
+                    (user.last_name && user.last_name.toLowerCase().indexOf(filter) !== -1) ||
+                    (user.nickname && user.nickname.toLowerCase().indexOf(filter) !== -1);
+            });
+        }
+
+        let count;
+        if (users.length === this.props.users.length) {
+            count = (
+                <FormattedMessage
+                    id='filtered_user_list.count'
+                    defaultMessage='{count} {count, plural,
+                        one {member}
+                        other {members}
+                    }'
+                    values={{
+                        count: users.length
+                    }}
+                />
+            );
+        } else {
+            count = (
+                <FormattedMessage
+                    id='filtered_user_list.countTotal'
+                    defaultMessage='{count} {count, plural,
+                        one {member}
+                        other {members}
+                    } of {total} Total'
+                    values={{
+                        count: users.length,
+                        total: this.props.users.length
+                    }}
+                />
+            );
+        }
+
+        return (
+            <div
+                className='filtered-user-list'
+                style={this.props.style}
+            >
+                <div className='filter-row'>
+                    <div className='col-sm-6'>
+                        <input
+                            ref='filter'
+                            className='form-control filter-textbox'
+                            placeholder={formatMessage(holders.search)}
+                            onInput={this.handleFilterChange}
+                        />
+                    </div>
+                    <div className='col-sm-6'>
+                        <span className='member-count'>{count}</span>
+                    </div>
+                </div>
+                <div
+                    ref='userList'
+                    className='more-modal__list'
+                >
+                    <UserList
+                        users={users}
+                        actions={this.props.actions}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+FilteredUserList.defaultProps = {
+    users: [],
+    actions: []
+};
+
+FilteredUserList.propTypes = {
+    intl: intlShape.isRequired,
+    users: React.PropTypes.arrayOf(React.PropTypes.object),
+    actions: React.PropTypes.arrayOf(React.PropTypes.func),
+    style: React.PropTypes.object
+};
+
+export default injectIntl(FilteredUserList);