render header from static method in LeftPane.tsx to be reused on subsection
This commit is contained in:
parent
8b40bacc70
commit
1bbb3cedd4
|
@ -2412,5 +2412,8 @@
|
|||
},
|
||||
"message": {
|
||||
"message": "Message"
|
||||
},
|
||||
"lists": {
|
||||
"message": "Lists"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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<Props, State> {
|
|||
selectedSection={this.state.selectedSection}
|
||||
onSectionSelected={this.handleSectionSelected}
|
||||
/>
|
||||
<div className="module-left-pane">
|
||||
{this.state.selectedSection === SectionType.Message &&
|
||||
this.renderMessageSection()}
|
||||
</div>
|
||||
<div className="module-left-pane">{this.renderSection()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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<Props, State> {
|
|||
/>
|
||||
);
|
||||
}
|
||||
|
||||
private renderContactSection() {
|
||||
const {
|
||||
openConversationInternal,
|
||||
conversations,
|
||||
searchResults,
|
||||
searchTerm,
|
||||
isSecondaryDevice,
|
||||
updateSearchTerm,
|
||||
search,
|
||||
clearSearch,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<LeftPaneContactSection
|
||||
openConversationInternal={openConversationInternal}
|
||||
conversations={conversations}
|
||||
searchResults={searchResults}
|
||||
searchTerm={searchTerm}
|
||||
isSecondaryDevice={isSecondaryDevice}
|
||||
updateSearchTerm={updateSearchTerm}
|
||||
search={search}
|
||||
clearSearch={clearSearch}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
static renderHeader(
|
||||
labels: Array<string>,
|
||||
onTabSelected?: any,
|
||||
buttonLabel?: string,
|
||||
buttonClicked?: any
|
||||
): JSX.Element {
|
||||
return (
|
||||
<LeftPaneSectionHeader
|
||||
onTabSelected={onTabSelected}
|
||||
selectedTab={0}
|
||||
labels={labels}
|
||||
buttonLabel={buttonLabel}
|
||||
buttonClicked={buttonClicked}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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<Props, State> {
|
|||
notificationCount={0}
|
||||
/>
|
||||
<Section
|
||||
type={SectionType.People}
|
||||
isSelected={selectedSection === SectionType.People}
|
||||
type={SectionType.Contact}
|
||||
isSelected={selectedSection === SectionType.Contact}
|
||||
onSelect={this.handleSectionSelect}
|
||||
/>
|
||||
<Section
|
||||
|
|
|
@ -0,0 +1,93 @@
|
|||
import React from 'react';
|
||||
|
||||
import { PropsData as ConversationListItemPropsType } from '../ConversationListItem';
|
||||
import { PropsData as SearchResultsProps } from '../SearchResults';
|
||||
import { debounce } from 'lodash';
|
||||
import { cleanSearchTerm } from '../../util/cleanSearchTerm';
|
||||
import { SearchOptions } from '../../types/Search';
|
||||
import { LeftPane } from '../LeftPane';
|
||||
|
||||
export interface Props {
|
||||
searchTerm: string;
|
||||
isSecondaryDevice: boolean;
|
||||
|
||||
conversations?: Array<ConversationListItemPropsType>;
|
||||
|
||||
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<Props, any> {
|
||||
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 <div>{this.renderHeader()}</div>;
|
||||
}
|
||||
|
||||
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,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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<Props, any> {
|
|||
}
|
||||
|
||||
public renderHeader(): JSX.Element {
|
||||
const labels = [];
|
||||
labels.push(window.i18n('messagesHeader'));
|
||||
|
||||
return (
|
||||
<LeftPaneSectionHeader
|
||||
onTabSelected={() => {
|
||||
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<Props, any> {
|
|||
}
|
||||
|
||||
public clearSearch() {
|
||||
const { clearSearch } = this.props;
|
||||
|
||||
clearSearch();
|
||||
this.props.clearSearch();
|
||||
//this.setFocus();
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue