Maxim Shishmarev
6 years ago
committed by
GitHub
commit
2ab0d084f1
@ -0,0 +1,58 @@
|
|||||||
|
/* global Whisper */
|
||||||
|
|
||||||
|
// eslint-disable-next-line func-names
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
window.Whisper = window.Whisper || {};
|
||||||
|
|
||||||
|
Whisper.InviteFriendsDialogView = Whisper.View.extend({
|
||||||
|
className: 'loki-dialog modal',
|
||||||
|
initialize(convo) {
|
||||||
|
this.close = this.close.bind(this);
|
||||||
|
this.submit = this.submit.bind(this);
|
||||||
|
|
||||||
|
const convos = window.getConversations().models;
|
||||||
|
|
||||||
|
const friends = convos.filter(
|
||||||
|
d => !!d && d.isFriend() && d.isPrivate() && !d.isMe()
|
||||||
|
);
|
||||||
|
|
||||||
|
this.friends = friends;
|
||||||
|
this.chatName = convo.get('name');
|
||||||
|
this.chatServer = convo.get('server');
|
||||||
|
this.channelId = convo.get('channelId');
|
||||||
|
|
||||||
|
this.$el.focus();
|
||||||
|
this.render();
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const view = new Whisper.ReactWrapperView({
|
||||||
|
className: 'invite-friends-dialog',
|
||||||
|
Component: window.Signal.Components.InviteFriendsDialog,
|
||||||
|
props: {
|
||||||
|
friendList: this.friends,
|
||||||
|
onSubmit: this.submit,
|
||||||
|
onClose: this.close,
|
||||||
|
chatName: this.chatName,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$el.append(view.el);
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.remove();
|
||||||
|
},
|
||||||
|
submit(pubkeys) {
|
||||||
|
window.sendGroupInvitations(
|
||||||
|
{
|
||||||
|
address: this.chatServer,
|
||||||
|
name: this.chatName,
|
||||||
|
channelId: this.channelId,
|
||||||
|
},
|
||||||
|
pubkeys
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
})();
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
serverName: string;
|
||||||
|
serverAddress: string;
|
||||||
|
direction: string;
|
||||||
|
onClick: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class GroupInvitation extends React.Component<Props> {
|
||||||
|
public render() {
|
||||||
|
const classes = ['group-invitation'];
|
||||||
|
|
||||||
|
if (this.props.direction === 'outgoing') {
|
||||||
|
classes.push('invitation-outgoing');
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={'group-invitation-container'}>
|
||||||
|
<div className={classNames(classes)}>
|
||||||
|
<div className="title">Group invitation</div>
|
||||||
|
<div className="contents">
|
||||||
|
<img
|
||||||
|
alt="group-avatar"
|
||||||
|
src="images/loki/loki_icon.png"
|
||||||
|
className="invite-group-avatar"
|
||||||
|
/>
|
||||||
|
<span className="group-details">
|
||||||
|
<span className="group-name">{this.props.serverName}</span>
|
||||||
|
<span className="group-address">{this.props.serverAddress}</span>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
role="button"
|
||||||
|
className="join-btn"
|
||||||
|
onClick={this.props.onClick}
|
||||||
|
>
|
||||||
|
Join
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Contact, MemberList } from './MemberList';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
friendList: Array<any>;
|
||||||
|
chatName: string;
|
||||||
|
onSubmit: any;
|
||||||
|
onClose: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
i18n: any;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
friendList: Array<Contact>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class InviteFriendsDialog extends React.Component<Props, State> {
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.onMemberClicked = this.onMemberClicked.bind(this);
|
||||||
|
this.closeDialog = this.closeDialog.bind(this);
|
||||||
|
this.onClickOK = this.onClickOK.bind(this);
|
||||||
|
this.onKeyUp = this.onKeyUp.bind(this);
|
||||||
|
|
||||||
|
let friends = this.props.friendList;
|
||||||
|
friends = friends.map(d => {
|
||||||
|
const lokiProfile = d.getLokiProfile();
|
||||||
|
const name = lokiProfile ? lokiProfile.displayName : 'Anonymous';
|
||||||
|
|
||||||
|
// TODO: should take existing members into account
|
||||||
|
const existingMember = false;
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: d.id,
|
||||||
|
authorPhoneNumber: d.id,
|
||||||
|
authorProfileName: name,
|
||||||
|
selected: false,
|
||||||
|
authorName: name,
|
||||||
|
authorColor: d.getColor(),
|
||||||
|
checkmarked: false,
|
||||||
|
existingMember,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
friendList: friends,
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keyup', this.onKeyUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const titleText = `${window.i18n('addingFriends')} ${this.props.chatName}`;
|
||||||
|
const cancelText = window.i18n('cancel');
|
||||||
|
const okText = window.i18n('ok');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="content">
|
||||||
|
<p className="titleText">{titleText}</p>
|
||||||
|
<div className="friend-selection-list">
|
||||||
|
<MemberList
|
||||||
|
members={this.state.friendList}
|
||||||
|
selected={{}}
|
||||||
|
i18n={window.i18n}
|
||||||
|
onMemberClicked={this.onMemberClicked}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="buttons">
|
||||||
|
<button className="cancel" tabIndex={0} onClick={this.closeDialog}>
|
||||||
|
{cancelText}
|
||||||
|
</button>
|
||||||
|
<button className="ok" tabIndex={0} onClick={this.onClickOK}>
|
||||||
|
{okText}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue