1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import UserList from './user_list.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
const holders = defineMessages({
member: {
id: 'filtered_user_list.member',
defaultMessage: 'Member'
},
search: {
id: 'filtered_user_list.search',
defaultMessage: 'Search members'
}
});
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>
<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='user-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)
};
export default injectIntl(FilteredUserList);
|
