Closable overlay finished

pull/1122/head
Vincent 5 years ago
parent 5c02dc9371
commit 21a95ce587

@ -8,7 +8,7 @@ import {
export const MainViewController = {
joinChannelStateManager,
onCreateClosedGroup,
createClosedGroup,
renderMessageView,
renderSettingsView,
};
@ -36,7 +36,6 @@ export class MessageView extends React.Component {
}
}
// /////////////////////////////////////
// //////////// Management /////////////
// /////////////////////////////////////
@ -106,7 +105,7 @@ function joinChannelStateManager(
return true;
}
async function onCreateClosedGroup(
async function createClosedGroup(
groupName: string,
groupMembers: Array<ContactType>,
onSuccess: any
@ -172,12 +171,10 @@ function renderSettingsView(category: SessionSettingCategory) {
);
if (document.getElementById('main-view')) {
ReactDOM.render(
(
<SettingsView
category={category}
isSecondaryDevice={isSecondaryDevice}
/>
),
<SettingsView
category={category}
isSecondaryDevice={isSecondaryDevice}
/>,
document.getElementById('main-view')
);
}

@ -17,11 +17,12 @@ import {
import { AutoSizer, List } from 'react-virtualized';
import { validateNumber } from '../../types/PhoneNumber';
import { ConversationType } from '../../state/ducks/conversations';
import { SessionClosableOverlay, SessionClosableOverlayType } from './SessionClosableOverlay';
import {
SessionClosableOverlay,
SessionClosableOverlayType,
} from './SessionClosableOverlay';
import { MainViewController } from '../MainViewController';
export enum SessionClosableOverlayTypeContact { Contact = 'contact'}
export interface Props {
searchTerm: string;
isSecondaryDevice: boolean;

@ -17,7 +17,10 @@ import { cleanSearchTerm } from '../../util/cleanSearchTerm';
import { SearchOptions } from '../../types/Search';
import { validateNumber } from '../../types/PhoneNumber';
import { LeftPane, RowRendererParamsType } from '../LeftPane';
import { SessionClosableOverlay } from './SessionClosableOverlay';
import {
SessionClosableOverlay,
SessionClosableOverlayType,
} from './SessionClosableOverlay';
import { SessionIconType } from './icon';
import { ContactType } from './SessionMemberListItem';
import {
@ -91,14 +94,15 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
this.handleToggleOverlay = this.handleToggleOverlay.bind(this);
this.handleMessageButtonClick = this.handleMessageButtonClick.bind(this);
this.handleNewSessionButtonClick = this.handleNewSessionButtonClick.bind(this);
this.handleNewSessionButtonClick = this.handleNewSessionButtonClick.bind(
this
);
this.handleJoinChannelButtonClick = this.handleJoinChannelButtonClick.bind(
this
);
this.handleCreateClosedGroupButtonClick = this.handleCreateClosedGroupButtonClick.bind(this);
this.onCreateClosedGroup = this.onCreateClosedGroup.bind(this);
this.renderClosableOverlay = this.renderClosableOverlay.bind(this);
this.debouncedSearch = debounce(this.search.bind(this), 20);
}
@ -258,8 +262,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
}
// reset our pubKeyPasted, we can either have a pasted sessionID or a sessionID got from a search
this.setState({ valuePasted: '' });
this.setState({ valuePasted: '' });
if (updateSearchTerm) {
updateSearchTerm(searchTerm);
@ -301,7 +304,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
const openGroupElement = (
<SessionClosableOverlay
overlayMode={SessionComposeToType.OpenGroup}
overlayMode={SessionClosableOverlayType.OpenGroup}
onChangeSessionID={this.handleOnPaste}
onCloseClick={() => {
this.handleToggleOverlay(undefined);
@ -315,7 +318,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
const closedGroupElement = (
<SessionClosableOverlay
overlayMode={SessionComposeToType.ClosedGroup}
overlayMode={SessionClosableOverlayType.ClosedGroup}
onChangeSessionID={this.handleOnPaste}
onCloseClick={() => {
this.handleToggleOverlay(undefined);
@ -323,7 +326,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
onButtonClick={async (
groupName: string,
groupMembers: Array<ContactType>
) => this.handleCreateClosedGroupButtonClick(groupName, groupMembers)}
) => this.onCreateClosedGroup(groupName, groupMembers)}
searchTerm={searchTerm}
updateSearch={this.updateSearchBound}
showSpinner={loading}
@ -332,7 +335,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
const messageElement = (
<SessionClosableOverlay
overlayMode={SessionComposeToType.Message}
overlayMode={SessionClosableOverlayType.Message}
onChangeSessionID={this.handleOnPaste}
onCloseClick={() => {
this.handleToggleOverlay(undefined);
@ -398,11 +401,9 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
private handleToggleOverlay(conversationType?: SessionComposeToType) {
const { overlay } = this.state;
const overlayState = overlay
? false
: conversationType || false;
const overlayState = overlay ? false : conversationType || false;
this.setState({ overlay: overlayState});
this.setState({ overlay: overlayState });
// empty our generalized searchedString (one for the whole app)
this.updateSearch('');
@ -440,7 +441,6 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
}
}
private handleJoinChannelButtonClick(groupUrl: string) {
const { loading } = this.state;
@ -478,14 +478,14 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
return true;
}
private async handleCreateClosedGroupButtonClick (
private async onCreateClosedGroup(
groupName: string,
groupMembers: Array<ContactType>
) {
// console.log('[vince] groupName:', groupName);
// console.log('[vince] groupMembers:', groupMembers);
await MainViewController.onCreateClosedGroup(groupName, groupMembers, () => {
await MainViewController.createClosedGroup(groupName, groupMembers, () => {
this.handleToggleOverlay(undefined);
window.pushToast({
@ -498,6 +498,4 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
private handleNewSessionButtonClick() {
this.handleToggleOverlay(SessionComposeToType.Message);
}
}

@ -94,7 +94,6 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
) : (
buttonLabel
);
;
const button = (
<SessionButton onClick={buttonClicked} key="compose" disabled={false}>
{buttonContent}

@ -11,15 +11,14 @@ import {
SessionButtonType,
} from './SessionButton';
import { SessionSpinner } from './SessionSpinner';
import { SessionClosableOverlayTypeContact } from './LeftPaneContactSection';
import { SessionComposeToType } from './LeftPaneMessageSection';
import { PillDivider } from './PillDivider';
export const SessionClosableOverlayType = {
...SessionComposeToType,
...SessionClosableOverlayTypeContact,
};
export type SessionClosableOverlayType = SessionComposeToType | SessionClosableOverlayTypeContact;
export enum SessionClosableOverlayType {
Contact = 'contact',
Message = 'message',
OpenGroup = 'open-group',
ClosedGroup = 'closed-group',
}
interface Props {
overlayMode: SessionClosableOverlayType;
@ -50,7 +49,10 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
};
this.inputRef = React.createRef();
this.onKeyUp = this.onKeyUp.bind(this);
this.onGroupNameChanged = this.onGroupNameChanged.bind(this);
window.addEventListener('keyup', this.onKeyUp);
}
public componentDidMount() {
@ -106,9 +108,10 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
const isAddContactView = overlayMode === SessionClosableOverlayType.Contact;
const isMessageView = overlayMode === SessionClosableOverlayType.Message;
const isOpenGroupView = overlayMode === SessionClosableOverlayType.OpenGroup;
const isClosedGroupView = overlayMode === SessionClosableOverlayType.ClosedGroup;
const isOpenGroupView =
overlayMode === SessionClosableOverlayType.OpenGroup;
const isClosedGroupView =
overlayMode === SessionClosableOverlayType.ClosedGroup;
let title;
let buttonText;
@ -153,8 +156,8 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
const contacts = this.getContacts();
const noContactsForClosedGroup =
overlayMode === SessionClosableOverlayType.ClosedGroup && contacts.length === 0;
overlayMode === SessionClosableOverlayType.ClosedGroup &&
contacts.length === 0;
return (
<div className="module-left-pane-overlay">
@ -202,7 +205,6 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
{isClosedGroupView && (
<>
<div className="spacer-lg" />
<div className="group-member-list__container">
{noContactsForClosedGroup ? (
<div className="group-member-list__no-contacts">
@ -255,10 +257,6 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
}
private renderMemberList(members: any) {
console.log('[vince] sdsdf:');
console.log('[vince] members:', members);
return members.map((member: ContactType) => (
<SessionMemberListItem
member={member}
@ -293,12 +291,15 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
}
private onGroupNameChanged(event: any) {
console.log('[vince] event:', event);
this.setState({
groupName: event,
});
}
private onKeyUp(event: any) {
if (event.key === 'Escape') {
window.removeEventListener('keyup', this.onKeyUp);
this.props.onCloseClick();
}
}
}

Loading…
Cancel
Save