// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import {FormattedMessage} from 'react-intl';
import UserList from 'components/user_list.jsx';
import * as Utils from 'utils/utils.jsx';
const NEXT_BUTTON_TIMEOUT = 500;
export default class SearchableUserList extends React.Component {
static propTypes = {
users: React.PropTypes.arrayOf(React.PropTypes.object),
usersPerPage: React.PropTypes.number,
total: React.PropTypes.number,
extraInfo: React.PropTypes.object,
nextPage: React.PropTypes.func.isRequired,
previousPage: React.PropTypes.func.isRequired,
search: React.PropTypes.func.isRequired,
actions: React.PropTypes.arrayOf(React.PropTypes.func),
actionProps: React.PropTypes.object,
actionUserProps: React.PropTypes.object,
focusOnMount: React.PropTypes.bool,
renderCount: React.PropTypes.func,
renderFilterRow: React.PropTypes.func,
page: React.PropTypes.number.isRequired,
term: React.PropTypes.string.isRequired,
onTermChange: React.PropTypes.func.isRequired
};
static defaultProps = {
users: [],
usersPerPage: 50, // eslint-disable-line no-magic-numbers
extraInfo: {},
actions: [],
actionProps: {},
actionUserProps: {},
showTeamToggle: false,
focusOnMount: false
};
constructor(props) {
super(props);
this.nextPage = this.nextPage.bind(this);
this.previousPage = this.previousPage.bind(this);
this.focusSearchBar = this.focusSearchBar.bind(this);
this.handleInput = this.handleInput.bind(this);
this.renderCount = this.renderCount.bind(this);
this.nextTimeoutId = 0;
this.state = {
nextDisabled: false
};
}
componentDidMount() {
this.focusSearchBar();
}
componentDidUpdate(prevProps) {
if (this.props.page !== prevProps.page || this.props.term !== prevProps.term) {
this.refs.userList.scrollToTop();
}
this.focusSearchBar();
}
componentWillUnmount() {
clearTimeout(this.nextTimeoutId);
}
nextPage(e) {
e.preventDefault();
this.setState({nextDisabled: true});
this.nextTimeoutId = setTimeout(() => this.setState({nextDisabled: false}), NEXT_BUTTON_TIMEOUT);
this.props.nextPage();
}
previousPage(e) {
e.preventDefault();
this.props.previousPage();
}
focusSearchBar() {
if (this.props.focusOnMount) {
this.refs.filter.focus();
}
}
handleInput(e) {
this.props.onTermChange(e.target.value);
this.props.search(e.target.value);
}
renderCount(users) {
if (!users) {
return null;
}
const count = users.length;
const total = this.props.total;
const isSearch = Boolean(this.props.term);
let startCount;
let endCount;
if (isSearch) {
startCount = -1;
endCount = -1;
} else {
startCount = this.props.page * this.props.usersPerPage;
endCount = startCount + count;
}
if (this.props.renderCount) {
return this.props.renderCount(count, this.props.total, startCount, endCount, isSearch);
}
if (this.props.total) {
if (isSearch) {
return (