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