You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.6 KiB
JavaScript
66 lines
1.6 KiB
JavaScript
/* global _, Whisper, */
|
|
|
|
// eslint-disable-next-line func-names
|
|
(function() {
|
|
'use strict';
|
|
|
|
window.Whisper = window.Whisper || {};
|
|
|
|
Whisper.MemberListView = Whisper.View.extend({
|
|
initialize(options) {
|
|
this.member_list = [];
|
|
this.selected_idx = 0;
|
|
this.onClicked = options.onClicked;
|
|
|
|
this.listenTo(this.model, 'change', this.render);
|
|
},
|
|
render() {
|
|
if (this.memberView) {
|
|
this.memberView.remove();
|
|
this.memberView = null;
|
|
}
|
|
|
|
this.memberView = new Whisper.ReactWrapperView({
|
|
className: 'member-list',
|
|
Component: window.Signal.Components.MemberList,
|
|
props: {
|
|
members: this.member_list,
|
|
selected: this.selectedMember(),
|
|
onMemberClicked: this.handleMemberClicked.bind(this),
|
|
},
|
|
});
|
|
|
|
this.$el.append(this.memberView.el);
|
|
return this;
|
|
},
|
|
handleMemberClicked(member) {
|
|
this.onClicked(member);
|
|
},
|
|
update_members(members) {
|
|
if (!_.isEqual(this.member_list, members)) {
|
|
// Whenever the list is updated, we reset the selection
|
|
this.selected_idx = 0;
|
|
this.member_list = members;
|
|
this.render();
|
|
}
|
|
},
|
|
members_shown() {
|
|
return this.member_list.length !== 0;
|
|
},
|
|
selectUp() {
|
|
this.selected_idx = Math.max(this.selected_idx - 1, 0);
|
|
this.render();
|
|
},
|
|
selectDown() {
|
|
this.selected_idx = Math.min(
|
|
this.selected_idx + 1,
|
|
this.member_list.length - 1
|
|
);
|
|
this.render();
|
|
},
|
|
selectedMember() {
|
|
return this.member_list[this.selected_idx];
|
|
},
|
|
});
|
|
})();
|