fetch theme for each dialog, as they are out of the themed tree for now
Audric Ackermann
4 years ago
parent
e38be266c2
commit
788cb2a5fc
@ -1,106 +0,0 @@
|
|||||||
/* 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.memberMapping = {};
|
|
||||||
this.selected_idx = 0;
|
|
||||||
this.onClicked = options.onClicked;
|
|
||||||
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);
|
|
||||||
},
|
|
||||||
updateMembers(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();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
replaceMentions(message) {
|
|
||||||
let result = message;
|
|
||||||
|
|
||||||
// Sort keys from long to short, so we don't have to
|
|
||||||
// worry about one key being a substring of another
|
|
||||||
const keys = _.sortBy(_.keys(this.memberMapping), d => -d.length);
|
|
||||||
|
|
||||||
keys.forEach(key => {
|
|
||||||
const pubkey = this.memberMapping[key];
|
|
||||||
result = result.split(key).join(`@${pubkey}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
return result;
|
|
||||||
},
|
|
||||||
pendingMentions() {
|
|
||||||
return this.memberMapping;
|
|
||||||
},
|
|
||||||
deleteMention(mention) {
|
|
||||||
if (mention) {
|
|
||||||
delete this.memberMapping[mention];
|
|
||||||
} else {
|
|
||||||
// Delete all mentions if no argument is passed
|
|
||||||
this.memberMapping = {};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
membersShown() {
|
|
||||||
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];
|
|
||||||
},
|
|
||||||
addPubkeyMapping(name, pubkey) {
|
|
||||||
let handle = `@${name}`;
|
|
||||||
let chars = 4;
|
|
||||||
|
|
||||||
while (
|
|
||||||
_.has(this.memberMapping, handle) &&
|
|
||||||
this.memberMapping[handle] !== pubkey
|
|
||||||
) {
|
|
||||||
const shortenedPubkey = pubkey.substr(pubkey.length - chars);
|
|
||||||
handle = `@${name}(..${shortenedPubkey})`;
|
|
||||||
chars += 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.memberMapping[handle] = pubkey;
|
|
||||||
return handle;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
@ -1,225 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import { Contact, MemberList } from './MemberList';
|
|
||||||
|
|
||||||
import { SessionModal } from './../session/SessionModal';
|
|
||||||
import { createLegacyGroup } from '../../session/medium_group';
|
|
||||||
import { DefaultTheme, withTheme } from 'styled-components';
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface Window {
|
|
||||||
Lodash: any;
|
|
||||||
MEDIUM_GROUP_SIZE_LIMIT: number;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
titleText: string;
|
|
||||||
okText: string;
|
|
||||||
cancelText: string;
|
|
||||||
contactList: Array<any>;
|
|
||||||
i18n: any;
|
|
||||||
onClose: any;
|
|
||||||
theme: DefaultTheme;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
contactList: Array<Contact>;
|
|
||||||
groupName: string;
|
|
||||||
errorDisplayed: boolean;
|
|
||||||
errorMessage: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
class CreateGroupDialogInner extends React.Component<Props, State> {
|
|
||||||
constructor(props: any) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.onMemberClicked = this.onMemberClicked.bind(this);
|
|
||||||
this.onClickOK = this.onClickOK.bind(this);
|
|
||||||
this.onKeyUp = this.onKeyUp.bind(this);
|
|
||||||
this.closeDialog = this.closeDialog.bind(this);
|
|
||||||
this.onGroupNameChanged = this.onGroupNameChanged.bind(this);
|
|
||||||
|
|
||||||
let contacts = this.props.contactList;
|
|
||||||
|
|
||||||
contacts = contacts.map(d => {
|
|
||||||
const lokiProfile = d.getLokiProfile();
|
|
||||||
const name = lokiProfile ? lokiProfile.displayName : 'Anonymous';
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: d.id,
|
|
||||||
authorPhoneNumber: d.id,
|
|
||||||
authorProfileName: name,
|
|
||||||
selected: false,
|
|
||||||
authorName: name, // different from ProfileName?
|
|
||||||
checkmarked: false,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
contactList: contacts,
|
|
||||||
groupName: '',
|
|
||||||
errorDisplayed: false,
|
|
||||||
// if empty, the initial height is 0, which is not desirable
|
|
||||||
errorMessage: 'placeholder',
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('keyup', this.onKeyUp);
|
|
||||||
}
|
|
||||||
|
|
||||||
public onClickOK() {
|
|
||||||
const members = this.state.contactList
|
|
||||||
.filter(d => d.checkmarked)
|
|
||||||
.map(d => d.id);
|
|
||||||
|
|
||||||
if (!this.state.groupName.trim()) {
|
|
||||||
this.onShowError(this.props.i18n('emptyGroupNameError'));
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
void createLegacyGroup(this.state.groupName, members);
|
|
||||||
|
|
||||||
this.closeDialog();
|
|
||||||
}
|
|
||||||
|
|
||||||
public render() {
|
|
||||||
const checkMarkedCount = this.getMemberCount();
|
|
||||||
|
|
||||||
const titleText = `${this.props.titleText} (Members: ${checkMarkedCount})`;
|
|
||||||
const okText = this.props.okText;
|
|
||||||
const cancelText = this.props.cancelText;
|
|
||||||
|
|
||||||
const errorMessageClasses = classNames(
|
|
||||||
'error-message',
|
|
||||||
this.state.errorDisplayed ? 'error-shown' : 'error-faded'
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SessionModal
|
|
||||||
title={titleText}
|
|
||||||
onClose={this.closeDialog}
|
|
||||||
onOk={() => null}
|
|
||||||
theme={this.props.theme}
|
|
||||||
>
|
|
||||||
<div className="spacer-lg" />
|
|
||||||
|
|
||||||
{this.state.errorDisplayed && (
|
|
||||||
<p className={errorMessageClasses}>{this.state.errorMessage}</p>
|
|
||||||
)}
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="group-name"
|
|
||||||
className="group-name"
|
|
||||||
placeholder={this.props.i18n('groupNamePlaceholder')}
|
|
||||||
value={this.state.groupName}
|
|
||||||
onChange={this.onGroupNameChanged}
|
|
||||||
tabIndex={0}
|
|
||||||
required={true}
|
|
||||||
autoFocus={true}
|
|
||||||
aria-required={true}
|
|
||||||
/>
|
|
||||||
<div className="contact-selection-list">
|
|
||||||
<MemberList
|
|
||||||
members={this.state.contactList}
|
|
||||||
selected={{}}
|
|
||||||
i18n={this.props.i18n}
|
|
||||||
onMemberClicked={this.onMemberClicked}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="spacer-lg" />
|
|
||||||
|
|
||||||
<div className="buttons">
|
|
||||||
<button className="cancel" tabIndex={0} onClick={this.closeDialog}>
|
|
||||||
{cancelText}
|
|
||||||
</button>
|
|
||||||
<button className="ok" tabIndex={0} onClick={this.onClickOK}>
|
|
||||||
{okText}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</SessionModal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private onShowError(msg: string) {
|
|
||||||
if (this.state.errorDisplayed) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
errorDisplayed: true,
|
|
||||||
errorMessage: msg,
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.setState({
|
|
||||||
errorDisplayed: false,
|
|
||||||
});
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
|
|
||||||
private onGroupNameChanged(event: any) {
|
|
||||||
event.persist();
|
|
||||||
|
|
||||||
this.setState(state => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
groupName: event.target.value,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private onKeyUp(event: any) {
|
|
||||||
switch (event.key) {
|
|
||||||
case 'Enter':
|
|
||||||
this.onClickOK();
|
|
||||||
break;
|
|
||||||
case 'Esc':
|
|
||||||
case 'Escape':
|
|
||||||
this.closeDialog();
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private getMemberCount() {
|
|
||||||
// Add 1 to include yourself
|
|
||||||
return this.state.contactList.filter(d => d.checkmarked).length + 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
private closeDialog() {
|
|
||||||
window.removeEventListener('keyup', this.onKeyUp);
|
|
||||||
|
|
||||||
this.props.onClose();
|
|
||||||
}
|
|
||||||
|
|
||||||
private onMemberClicked(selected: any) {
|
|
||||||
const updatedContacts = this.state.contactList.map(member => {
|
|
||||||
if (member.id === selected.id) {
|
|
||||||
return { ...member, checkmarked: !member.checkmarked };
|
|
||||||
} else {
|
|
||||||
return member;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (
|
|
||||||
updatedContacts.filter(d => d.checkmarked).length >
|
|
||||||
window.CONSTANTS.MEDIUM_GROUP_SIZE_LIMIT - 1
|
|
||||||
) {
|
|
||||||
const msg = this.props.i18n('closedGroupMaxSize');
|
|
||||||
this.onShowError(msg);
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState(state => {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
contactList: updatedContacts,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const CreateGroupDialog = withTheme(CreateGroupDialogInner);
|
|
||||||
Loading…
Reference in New Issue