+
{titleText}
+
+
+
+
+
+
+
+
+ );
+ }
+
+ private onClickOK() {
+ const selectedFriends = this.state.friendList
+ .filter(d => d.checkmarked)
+ .map(d => d.id);
+
+ if (selectedFriends.length > 0) {
+ this.props.onSubmit(selectedFriends);
+ }
+
+ this.closeDialog();
+ }
+
+ private onKeyUp(event: any) {
+ switch (event.key) {
+ case 'Enter':
+ this.onClickOK();
+ break;
+ case 'Esc':
+ case 'Escape':
+ this.closeDialog();
+ break;
+ default:
+ }
+ }
+
+ private closeDialog() {
+ window.removeEventListener('keyup', this.onKeyUp);
+
+ this.props.onClose();
+ }
+
+ private onMemberClicked(selected: any) {
+ const updatedFriends = this.state.friendList.map(member => {
+ if (member.id === selected.id) {
+ return { ...member, checkmarked: !member.checkmarked };
+ } else {
+ return member;
+ }
+ });
+
+ this.setState(state => {
+ return {
+ ...state,
+ friendList: updatedFriends,
+ };
+ });
+ }
+}