From 1bbb3cedd4206f83799c1578e538bb95e982f5a4 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 27 Dec 2019 13:40:59 +1100 Subject: [PATCH] render header from static method in LeftPane.tsx to be reused on subsection --- _locales/en/messages.json | 3 + .../_session_theme_dark_left_pane.scss | 6 +- ts/components/LeftPane.tsx | 61 +++++++++++- ts/components/session/ActionsPanel.tsx | 8 +- .../session/LeftPaneContactSection.tsx | 93 +++++++++++++++++++ .../session/LeftPaneMessageSection.tsx | 25 ++--- 6 files changed, 170 insertions(+), 26 deletions(-) create mode 100644 ts/components/session/LeftPaneContactSection.tsx diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 1a8eee6f5..361e554c5 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2412,5 +2412,8 @@ }, "message": { "message": "Message" + }, + "lists": { + "message": "Lists" } } diff --git a/stylesheets/_session_theme_dark_left_pane.scss b/stylesheets/_session_theme_dark_left_pane.scss index 756172a78..ee6236fc5 100644 --- a/stylesheets/_session_theme_dark_left_pane.scss +++ b/stylesheets/_session_theme_dark_left_pane.scss @@ -103,11 +103,15 @@ $session-compose-margin: 20px; display: flex; flex-direction: row; margin: 28px 7px 28px 0px; + + .session-button { + margin-left: auto; + } } &__title { - flex-grow: 1; cursor: pointer; + padding-right: 10px; } &__list { diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index 009e75f5b..0794df87b 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -6,6 +6,8 @@ import { LeftPaneMessageSection } from './session/LeftPaneMessageSection'; import { PropsData as ConversationListItemPropsType } from './ConversationListItem'; import { PropsData as SearchResultsProps } from './SearchResults'; import { SearchOptions } from '../types/Search'; +import { LeftPaneSectionHeader } from './session/LeftPaneSectionHeader'; +import { LeftPaneContactSection } from './session/LeftPaneContactSection'; interface State { selectedSection: SectionType; @@ -44,14 +46,22 @@ export class LeftPane extends React.Component { selectedSection={this.state.selectedSection} onSectionSelected={this.handleSectionSelected} /> -
- {this.state.selectedSection === SectionType.Message && - this.renderMessageSection()} -
+
{this.renderSection()}
); } + private renderSection(): JSX.Element | undefined { + switch (this.state.selectedSection) { + case SectionType.Message: + return this.renderMessageSection(); + case SectionType.Contact: + return this.renderContactSection(); + default: + return undefined; + } + } + private renderMessageSection() { const { openConversationInternal, @@ -77,4 +87,47 @@ export class LeftPane extends React.Component { /> ); } + + private renderContactSection() { + const { + openConversationInternal, + conversations, + searchResults, + searchTerm, + isSecondaryDevice, + updateSearchTerm, + search, + clearSearch, + } = this.props; + + return ( + + ); + } + + static renderHeader( + labels: Array, + onTabSelected?: any, + buttonLabel?: string, + buttonClicked?: any + ): JSX.Element { + return ( + + ); + } } diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index beaf0b1eb..4a1308f33 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -5,7 +5,7 @@ import { Avatar } from '../Avatar'; export enum SectionType { Profile, Message, - People, + Contact, Globe, Settings, Moon, @@ -74,7 +74,7 @@ const Section = ({ case SectionType.Message: iconType = SessionIconType.ChatBubble; break; - case SectionType.People: + case SectionType.Contact: iconType = SessionIconType.Users; break; case SectionType.Globe: @@ -150,8 +150,8 @@ export class ActionsPanel extends React.Component { notificationCount={0} />
; + + searchResults?: SearchResultsProps; + + updateSearchTerm: (searchTerm: string) => void; + search: (query: string, options: SearchOptions) => void; + openConversationInternal: (id: string, messageId?: string) => void; + clearSearch: () => void; +} + +export class LeftPaneContactSection extends React.Component { + private readonly debouncedSearch: (searchTerm: string) => void; + + public constructor(props: Props) { + super(props); + + this.debouncedSearch = debounce(this.search.bind(this), 20); + } + + public componentWillUnmount() { + this.updateSearch(''); + } + + public renderHeader(): JSX.Element { + const labels = [window.i18n('contactsHeader'), window.i18n('lists')]; + return LeftPane.renderHeader(labels, null, undefined, null); + } + + public render(): JSX.Element { + return
{this.renderHeader()}
; + } + + public updateSearch(searchTerm: string) { + const { updateSearchTerm, clearSearch } = this.props; + + if (!searchTerm) { + clearSearch(); + + return; + } + // reset our pubKeyPasted, we can either have a pasted sessionID or a sessionID got from a search + this.setState({ pubKeyPasted: '' }, () => { + window.Session.emptyContentEditableDivs(); + }); + + if (updateSearchTerm) { + updateSearchTerm(searchTerm); + } + + if (searchTerm.length < 2) { + return; + } + + const cleanedTerm = cleanSearchTerm(searchTerm); + if (!cleanedTerm) { + return; + } + + this.debouncedSearch(cleanedTerm); + } + + public clearSearch() { + this.props.clearSearch(); + //this.setFocus(); + } + + public search() { + const { search } = this.props; + const { searchTerm, isSecondaryDevice } = this.props; + + if (search) { + search(searchTerm, { + noteToSelf: window.i18n('noteToSelf').toLowerCase(), + ourNumber: window.textsecure.storage.user.getNumber(), + regionCode: '', + isSecondaryDevice, + }); + } + } +} diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index 5306a3ed6..2c987bdb6 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -22,7 +22,7 @@ import { SessionIconButton, SessionIconSize, SessionIconType } from './icon'; import { SessionIdEditable } from './SessionIdEditable'; import { UserSearchDropdown } from './UserSearchDropdown'; import { validateNumber } from '../../types/PhoneNumber'; -import { LeftPaneSectionHeader } from './LeftPaneSectionHeader'; +import { LeftPane } from '../LeftPane'; export interface Props { searchTerm: string; @@ -167,19 +167,12 @@ export class LeftPaneMessageSection extends React.Component { } public renderHeader(): JSX.Element { - const labels = []; - labels.push(window.i18n('messagesHeader')); - - return ( - { - console.log('tabselected'); - }} - selectedTab={0} - labels={labels} - buttonLabel={window.i18n('compose')} - buttonClicked={this.handleComposeClick} - /> + const labels = [window.i18n('messagesHeader')]; + return LeftPane.renderHeader( + labels, + null, + window.i18n('compose'), + this.handleComposeClick ); } @@ -282,9 +275,7 @@ export class LeftPaneMessageSection extends React.Component { } public clearSearch() { - const { clearSearch } = this.props; - - clearSearch(); + this.props.clearSearch(); //this.setFocus(); }