From 21a95ce587de69f361021a08fefd0e0060bd3571 Mon Sep 17 00:00:00 2001 From: Vincent Date: Wed, 13 May 2020 12:57:46 +1000 Subject: [PATCH] Closable overlay finished --- ts/components/MainViewController.tsx | 15 +++---- .../session/LeftPaneContactSection.tsx | 7 ++-- .../session/LeftPaneMessageSection.tsx | 36 ++++++++-------- .../session/LeftPaneSectionHeader.tsx | 1 - .../session/SessionClosableOverlay.tsx | 41 ++++++++++--------- 5 files changed, 48 insertions(+), 52 deletions(-) diff --git a/ts/components/MainViewController.tsx b/ts/components/MainViewController.tsx index c43950ebf..fccd0e85a 100644 --- a/ts/components/MainViewController.tsx +++ b/ts/components/MainViewController.tsx @@ -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, onSuccess: any @@ -172,12 +171,10 @@ function renderSettingsView(category: SessionSettingCategory) { ); if (document.getElementById('main-view')) { ReactDOM.render( - ( - - ), + , document.getElementById('main-view') ); } diff --git a/ts/components/session/LeftPaneContactSection.tsx b/ts/components/session/LeftPaneContactSection.tsx index 84705236d..dd884a8f7 100644 --- a/ts/components/session/LeftPaneContactSection.tsx +++ b/ts/components/session/LeftPaneContactSection.tsx @@ -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; diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index 0ed6ccf73..954b624c0 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -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 { 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 { } // 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 { const openGroupElement = ( { this.handleToggleOverlay(undefined); @@ -315,7 +318,7 @@ export class LeftPaneMessageSection extends React.Component { const closedGroupElement = ( { this.handleToggleOverlay(undefined); @@ -323,7 +326,7 @@ export class LeftPaneMessageSection extends React.Component { onButtonClick={async ( groupName: string, groupMembers: Array - ) => 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 { const messageElement = ( { this.handleToggleOverlay(undefined); @@ -398,11 +401,9 @@ export class LeftPaneMessageSection extends React.Component { 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 { } } - private handleJoinChannelButtonClick(groupUrl: string) { const { loading } = this.state; @@ -478,14 +478,14 @@ export class LeftPaneMessageSection extends React.Component { return true; } - private async handleCreateClosedGroupButtonClick ( + private async onCreateClosedGroup( groupName: string, groupMembers: Array ) { // 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 { private handleNewSessionButtonClick() { this.handleToggleOverlay(SessionComposeToType.Message); } - } - diff --git a/ts/components/session/LeftPaneSectionHeader.tsx b/ts/components/session/LeftPaneSectionHeader.tsx index 4a01cceb6..c9ed53aeb 100644 --- a/ts/components/session/LeftPaneSectionHeader.tsx +++ b/ts/components/session/LeftPaneSectionHeader.tsx @@ -94,7 +94,6 @@ export class LeftPaneSectionHeader extends React.Component { ) : ( buttonLabel ); -; const button = ( {buttonContent} diff --git a/ts/components/session/SessionClosableOverlay.tsx b/ts/components/session/SessionClosableOverlay.tsx index b585bcb04..d748c72ee 100644 --- a/ts/components/session/SessionClosableOverlay.tsx +++ b/ts/components/session/SessionClosableOverlay.tsx @@ -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 { }; 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 { 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 { const contacts = this.getContacts(); const noContactsForClosedGroup = - overlayMode === SessionClosableOverlayType.ClosedGroup && contacts.length === 0; - + overlayMode === SessionClosableOverlayType.ClosedGroup && + contacts.length === 0; return (
@@ -202,7 +205,6 @@ export class SessionClosableOverlay extends React.Component { {isClosedGroupView && ( <>
-
{noContactsForClosedGroup ? (
@@ -255,10 +257,6 @@ export class SessionClosableOverlay extends React.Component { } private renderMemberList(members: any) { - - console.log('[vince] sdsdf:'); - console.log('[vince] members:', members); - return members.map((member: ContactType) => ( { } 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(); + } } }