diff --git a/images/icons/v2/profile-circle-solid-24.svg b/images/icons/v2/profile-circle-solid-24.svg deleted file mode 100644 index 21e219d249..0000000000 --- a/images/icons/v2/profile-circle-solid-24.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 2b1aaf7d9a..34c77a2c90 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -2699,158 +2699,6 @@ button.ConversationDetails__action-button { } } - &__search { - flex-grow: 1; - position: relative; - display: flex; - flex-direction: row; - -webkit-app-region: no-drag; - - &__input { - width: 100%; - height: 28px; - - padding-left: 30px; - padding-right: 5px; - - border-radius: 14px; - border: none; - - @include font-body-2; - - @include light-theme { - background-color: $color-gray-05; - color: $color-gray-90; - border: solid 1px $color-gray-02; - } - @include dark-theme { - color: $color-gray-05; - background-color: $color-gray-95; - border: solid 1px $color-gray-80; - } - - &:placeholder { - color: $color-gray-45; - } - - &:focus { - border: solid 1px $color-ultramarine; - outline: none; - } - - &--with-text { - padding-right: 30px; - } - - &--in-conversation { - padding-left: 50px; - } - } - - &__icon { - position: absolute; - left: 8px; - top: 6px; - height: 16px; - width: 16px; - - cursor: text; - - @include light-theme { - @include color-svg('../images/icons/v2/search-16.svg', $color-gray-75); - } - @include dark-theme { - @include color-svg('../images/icons/v2/search-16.svg', $color-gray-25); - } - } - - &__in-conversation-pill { - position: absolute; - left: 3px; - top: 3px; - bottom: 3px; - - border-radius: 14px; - width: 42px; - - display: flex; - flex-direction: row; - align-items: center; - - // Overriding some default button styling - border: none; - padding: 0; - outline: none; - - @include light-theme { - background-color: $color-gray-15; - } - @include dark-theme { - background-color: $color-gray-75; - } - - &__avatar-container { - margin-left: 4px; - height: 16px; - width: 16px; - border-radius: 8px; - - background-color: $color-ultramarine; - } - - &__avatar { - height: 16px; - width: 16px; - - @include light-theme { - @include color-svg( - '../images/icons/v2/profile-circle-outline-24.svg', - $color-white - ); - } - @include dark-theme { - @include color-svg( - '../images/icons/v2/profile-circle-solid-24.svg', - $color-gray-05 - ); - } - } - - &__x-button { - margin-left: 2px; - - height: 16px; - width: 16px; - - @include light-theme { - @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); - } - @include dark-theme { - @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25); - } - } - } - - &__cancel-icon { - position: absolute; - right: 8px; - top: 5px; - height: 18px; - width: 18px; - - @include light-theme { - @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); - } - @include dark-theme { - @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25); - } - } - - .module-left-pane--width-narrow & { - display: none; - } - } - &__compose-icon { $icon: '../images/icons/v2/compose-outline-24.svg'; @@ -5712,6 +5560,8 @@ button.module-image__border-overlay:focus { &__text { @include font-body-1-bold; + flex-grow: 1; + padding-right: 16px; @include light-theme { color: $color-gray-90; diff --git a/stylesheets/components/LeftPaneSearchInput.scss b/stylesheets/components/LeftPaneSearchInput.scss new file mode 100644 index 0000000000..ecce62425d --- /dev/null +++ b/stylesheets/components/LeftPaneSearchInput.scss @@ -0,0 +1,131 @@ +// Copyright 2021 Signal Messenger, LLC +// SPDX-License-Identifier: AGPL-3.0-only + +.LeftPaneSearchInput { + -webkit-app-region: no-drag; + display: flex; + flex-direction: row; + flex-grow: 1; + position: relative; + + &__input { + @include font-body-2; + @include rounded-corners; + border: none; + height: 28px; + padding-left: 30px; + padding-right: 5px; + width: 100%; + + @include light-theme { + background-color: $color-gray-05; + color: $color-gray-90; + border: solid 1px $color-gray-02; + } + @include dark-theme { + color: $color-gray-05; + background-color: $color-gray-95; + border: solid 1px $color-gray-80; + } + + &:placeholder { + color: $color-gray-45; + } + + &:focus { + border: solid 1px $color-ultramarine; + outline: none; + } + + &--with-text { + padding-right: 30px; + } + + &--in-conversation { + padding-left: 50px; + } + } + + &__icon { + height: 16px; + left: 8px; + pointer-events: none; + position: absolute; + top: 6px; + width: 16px; + + @include light-theme { + @include color-svg('../images/icons/v2/search-16.svg', $color-gray-75); + } + @include dark-theme { + @include color-svg('../images/icons/v2/search-16.svg', $color-gray-25); + } + } + + &__in-conversation-pill { + @include button-reset; + @include rounded-corners; + align-items: center; + bottom: 3px; + display: flex; + flex-direction: row; + left: 3px; + padding: 1px 3px 1px 4px; + position: absolute; + top: 3px; + + @include light-theme { + background-color: $color-gray-15; + } + @include dark-theme { + background-color: $color-gray-75; + } + + &__x-button { + height: 16px; + margin-left: 2px; + width: 16px; + + @include light-theme { + @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); + } + @include dark-theme { + @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25); + } + + @include light-theme { + &:hover, + &:focus, + &:active { + background: $color-ultramarine; + } + } + @include dark-theme { + &:hover, + &:focus, + &:active { + background: $color-ultramarine-light; + } + } + } + } + + &__cancel { + height: 18px; + position: absolute; + right: 8px; + top: 5px; + width: 18px; + + @include light-theme { + @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); + } + @include dark-theme { + @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25); + } + } + + .module-left-pane--width-narrow & { + display: none; + } +} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index c1d3032b37..57f566f825 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -66,6 +66,7 @@ @import './components/IncomingCallBar.scss'; @import './components/Input.scss'; @import './components/LeftPaneDialog.scss'; +@import './components/LeftPaneSearchInput.scss'; @import './components/Lightbox.scss'; @import './components/MediaQualitySelector.scss'; @import './components/MessageAudio.scss'; diff --git a/ts/background.ts b/ts/background.ts index f8df656b6e..932e5d89e3 100644 --- a/ts/background.ts +++ b/ts/background.ts @@ -1149,7 +1149,7 @@ export async function startApp(): Promise { document.querySelector( '.module-left-pane__header__contents__back-button' ), - document.querySelector('.module-main-header__search__input'), + document.querySelector('.LeftPaneSearchInput__input'), document.querySelector('.module-main-header__compose-icon'), document.querySelector( '.module-left-pane__compose-search-form__input' @@ -1228,8 +1228,8 @@ export async function startApp(): Promise { return; } - // MainHeader search box - if (className.includes('module-main-header__search__input')) { + // Search box + if (className.includes('LeftPaneSearchInput__input')) { return; } } diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index 9d87655f44..078c6aad0e 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -27,6 +27,7 @@ export enum AvatarBlur { } export enum AvatarSize { + SIXTEEN = 16, TWENTY_EIGHT = 28, THIRTY_TWO = 32, THIRTY_SIX = 36, diff --git a/ts/components/LeftPane.stories.tsx b/ts/components/LeftPane.stories.tsx index 400be6acac..768e3ba1fb 100644 --- a/ts/components/LeftPane.stories.tsx +++ b/ts/components/LeftPane.stories.tsx @@ -83,6 +83,7 @@ const createProps = (overrideProps: Partial = {}): PropsType => ({ cantAddContactToGroup: action('cantAddContactToGroup'), canResizeLeftPane: true, clearGroupCreationError: action('clearGroupCreationError'), + clearSearch: action('clearSearch'), closeCantAddContactToGroupModal: action('closeCantAddContactToGroupModal'), closeMaximumGroupSizeModal: action('closeMaximumGroupSizeModal'), closeRecommendedGroupSizeModal: action('closeRecommendedGroupSizeModal'), @@ -131,6 +132,7 @@ const createProps = (overrideProps: Partial = {}): PropsType => ({ selectedConversationId: undefined, selectedMessageId: undefined, savePreferredLeftPaneWidth: action('savePreferredLeftPaneWidth'), + searchInConversation: action('searchInConversation'), setComposeSearchTerm: action('setComposeSearchTerm'), setComposeGroupAvatar: action('setComposeGroupAvatar'), setComposeGroupName: action('setComposeGroupName'), @@ -142,11 +144,13 @@ const createProps = (overrideProps: Partial = {}): PropsType => ({ startNewConversationFromPhoneNumber: action( 'startNewConversationFromPhoneNumber' ), + startSearch: action('startSearch'), startSettingGroupMetadata: action('startSettingGroupMetadata'), toggleComposeEditingAvatar: action('toggleComposeEditingAvatar'), toggleConversationInChooseMembers: action( 'toggleConversationInChooseMembers' ), + updateSearchTerm: action('updateSearchTerm'), ...overrideProps, }); @@ -393,6 +397,8 @@ story.add('Archive: no archived conversations', () => ( modeSpecificProps: { mode: LeftPaneMode.Archive, archivedConversations: [], + searchConversation: undefined, + searchTerm: '', }, })} /> @@ -404,6 +410,25 @@ story.add('Archive: archived conversations', () => ( modeSpecificProps: { mode: LeftPaneMode.Archive, archivedConversations: defaultConversations, + searchConversation: undefined, + searchTerm: '', + }, + })} + /> +)); + +story.add('Archive: searching a conversation', () => ( + diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index ab0e216dea..9843436c3f 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -94,6 +94,7 @@ export type PropsType = { // Action Creators cantAddContactToGroup: (conversationId: string) => void; clearGroupCreationError: () => void; + clearSearch: () => void; closeCantAddContactToGroupModal: () => void; closeMaximumGroupSizeModal: () => void; closeRecommendedGroupSizeModal: () => void; @@ -105,6 +106,7 @@ export type PropsType = { switchToAssociatedView?: boolean; }) => void; savePreferredLeftPaneWidth: (_: number) => void; + searchInConversation: (conversationId: string) => unknown; setComposeSearchTerm: (composeSearchTerm: string) => void; setComposeGroupAvatar: (_: undefined | Uint8Array) => void; setComposeGroupName: (_: string) => void; @@ -112,6 +114,7 @@ export type PropsType = { showArchivedConversations: () => void; showInbox: () => void; startComposing: () => void; + startSearch: () => unknown; showChooseGroupMembers: () => void; startSettingGroupMetadata: () => void; toggleConversationInChooseMembers: (conversationId: string) => void; @@ -119,6 +122,7 @@ export type PropsType = { composeReplaceAvatar: ReplaceAvatarActionType; composeSaveAvatarToDisk: SaveAvatarToDiskActionType; toggleComposeEditingAvatar: () => unknown; + updateSearchTerm: (_: string) => void; // Render Props renderExpiredBuildDialog: ( @@ -143,6 +147,7 @@ export const LeftPane: React.FC = ({ canResizeLeftPane, challengeStatus, clearGroupCreationError, + clearSearch, closeCantAddContactToGroupModal, closeMaximumGroupSizeModal, closeRecommendedGroupSizeModal, @@ -162,6 +167,7 @@ export const LeftPane: React.FC = ({ renderRelinkDialog, renderUpdateDialog, savePreferredLeftPaneWidth, + searchInConversation, selectedConversationId, selectedMessageId, setChallengeStatus, @@ -173,10 +179,12 @@ export const LeftPane: React.FC = ({ showChooseGroupMembers, showInbox, startComposing, + startSearch, startNewConversationFromPhoneNumber, startSettingGroupMetadata, toggleComposeEditingAvatar, toggleConversationInChooseMembers, + updateSearchTerm, }) => { const [preferredWidth, setPreferredWidth] = useState( // This clamp is present just in case we get a bogus value from storage. @@ -354,6 +362,12 @@ export const LeftPane: React.FC = ({ event.preventDefault(); event.stopPropagation(); } + + helper.onKeyDown(event, { + searchInConversation, + selectedConversationId, + startSearch, + }); }; document.addEventListener('keydown', onKeyDown); @@ -363,11 +377,13 @@ export const LeftPane: React.FC = ({ }, [ helper, openConversationInternal, + searchInConversation, selectedConversationId, selectedMessageId, showChooseGroupMembers, showInbox, startComposing, + startSearch, ]); const requiresFullWidth = helper.requiresFullWidth(); @@ -524,10 +540,12 @@ export const LeftPane: React.FC = ({ {/* eslint-enable jsx-a11y/no-static-element-interactions */}
{helper.getHeaderContents({ + clearSearch, i18n, showInbox, startComposing, showChooseGroupMembers, + updateSearchTerm, }) || renderMainHeader()}
{renderExpiredBuildDialog({ containerWidthBreakpoint: widthBreakpoint })} diff --git a/ts/components/LeftPaneSearchInput.tsx b/ts/components/LeftPaneSearchInput.tsx new file mode 100644 index 0000000000..15a71f75ba --- /dev/null +++ b/ts/components/LeftPaneSearchInput.tsx @@ -0,0 +1,127 @@ +// Copyright 2021 Signal Messenger, LLC +// SPDX-License-Identifier: AGPL-3.0-only + +import type { FocusEventHandler } from 'react'; +import React, { forwardRef, useRef } from 'react'; +import classNames from 'classnames'; +import { refMerger } from '../util/refMerger'; +import type { ConversationType } from '../state/ducks/conversations'; +import type { LocalizerType } from '../types/Util'; +import { Avatar, AvatarSize } from './Avatar'; + +type PropsType = { + disabled?: boolean; + i18n: LocalizerType; + onBlur?: FocusEventHandler; + onChangeValue: (newValue: string) => unknown; + onClear: () => unknown; + searchConversation?: ConversationType; + value: string; +}; + +export const LeftPaneSearchInput = forwardRef( + ( + { + disabled, + i18n, + onBlur, + onChangeValue, + onClear, + searchConversation, + value, + }, + outerRef + ) => { + const inputRef = useRef(null); + + const emptyOrClear = + searchConversation && value ? () => onChangeValue('') : onClear; + + const label = searchConversation + ? i18n('searchIn', [ + searchConversation.isMe + ? i18n('noteToSelf') + : searchConversation.title, + ]) + : i18n('search'); + + return ( +
+ {searchConversation ? ( + // Clicking the non-X part of the pill should focus the input but have a normal + // cursor. This effectively simulates `pointer-events: none` while still + // letting us change the cursor. + // eslint-disable-next-line max-len + // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions +
{ + inputRef.current?.focus(); + }} + > + +
+ ) : ( +
+ )} + { + onChangeValue(event.currentTarget.value); + }} + onKeyDown={event => { + const { ctrlKey, key } = event; + + // On Linux, this key combo selects all text. + if (window.platform === 'linux' && ctrlKey && key === '/') { + event.preventDefault(); + event.stopPropagation(); + } else if (key === 'Escape') { + emptyOrClear(); + event.preventDefault(); + event.stopPropagation(); + } + }} + placeholder={label} + ref={refMerger(inputRef, outerRef)} + value={value} + /> + {value && ( +
+ ); + } +); diff --git a/ts/components/MainHeader.stories.tsx b/ts/components/MainHeader.stories.tsx index 58724071f7..71b94739a5 100644 --- a/ts/components/MainHeader.stories.tsx +++ b/ts/components/MainHeader.stories.tsx @@ -3,13 +3,14 @@ import * as React from 'react'; import { storiesOf } from '@storybook/react'; -import { text, withKnobs } from '@storybook/addon-knobs'; +import { text } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; import { setupI18n } from '../util/setupI18n'; import enMessages from '../../_locales/en/messages.json'; import type { PropsType } from './MainHeader'; import { MainHeader } from './MainHeader'; +import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation'; const i18n = setupI18n('en', enMessages); @@ -20,28 +21,12 @@ const requiredText = (name: string, value: string | undefined) => const optionalText = (name: string, value: string | undefined) => text(name, value || '') || undefined; -// Storybook types are incorrect -// eslint-disable-next-line @typescript-eslint/no-explicit-any -story.addDecorator((withKnobs as any)({ escapeHTML: false })); - const createProps = (overrideProps: Partial = {}): PropsType => ({ searchTerm: requiredText('searchTerm', overrideProps.searchTerm), - searchConversationName: optionalText( - 'searchConversationName', - overrideProps.searchConversationName - ), - searchConversationId: optionalText( - 'searchConversationId', - overrideProps.searchConversationId - ), + searchConversation: overrideProps.searchConversation, selectedConversation: undefined, startSearchCounter: 0, - ourConversationId: '', - ourUuid: '', - ourNumber: '', - regionCode: '', - phoneNumber: optionalText('phoneNumber', overrideProps.phoneNumber), title: requiredText('title', overrideProps.title), name: optionalText('name', overrideProps.name), @@ -51,10 +36,6 @@ const createProps = (overrideProps: Partial = {}): PropsType => ({ i18n, updateSearchTerm: action('updateSearchTerm'), - searchMessages: action('searchMessages'), - searchDiscussions: action('searchDiscussions'), - startSearch: action('startSearch'), - searchInConversation: action('searchInConversation'), clearConversationSearch: action('clearConversationSearch'), clearSearch: action('clearSearch'), startUpdate: action('startUpdate'), @@ -101,8 +82,7 @@ story.add('Search Term', () => { story.add('Searching Conversation', () => { const props = createProps({ name: 'John Smith', - searchConversationId: 'group-id-1', - searchConversationName: 'Everyone', + searchConversation: getDefaultConversation(), }); return ; @@ -112,8 +92,7 @@ story.add('Searching Conversation with Term', () => { const props = createProps({ name: 'John Smith', searchTerm: 'address', - searchConversationId: 'group-id-1', - searchConversationName: 'Everyone', + searchConversation: getDefaultConversation(), }); return ; diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx index f90ba70bb5..6ca7fd105a 100644 --- a/ts/components/MainHeader.tsx +++ b/ts/components/MainHeader.tsx @@ -2,8 +2,6 @@ // SPDX-License-Identifier: AGPL-3.0-only import React from 'react'; -import classNames from 'classnames'; -import { debounce, get } from 'lodash'; import { Manager, Popper, Reference } from 'react-popper'; import { createPortal } from 'react-dom'; @@ -13,20 +11,14 @@ import { AvatarPopup } from './AvatarPopup'; import type { LocalizerType } from '../types/Util'; import type { AvatarColorType } from '../types/Colors'; import type { ConversationType } from '../state/ducks/conversations'; +import { LeftPaneSearchInput } from './LeftPaneSearchInput'; export type PropsType = { searchTerm: string; - searchConversationName?: string; - searchConversationId?: string; + searchConversation: undefined | ConversationType; startSearchCounter: number; selectedConversation: undefined | ConversationType; - // To be used as an ID - ourConversationId: string; - ourUuid: string; - ourNumber: string; - regionCode: string; - // For display phoneNumber?: string; isMe?: boolean; @@ -42,24 +34,6 @@ export type PropsType = { i18n: LocalizerType; updateSearchTerm: (searchTerm: string) => void; - startSearch: () => void; - searchInConversation: (id: string, name: string) => void; - searchMessages: ( - query: string, - options: { - searchConversationId?: string; - regionCode: string; - } - ) => void; - searchDiscussions: ( - query: string, - options: { - ourConversationId: string; - ourNumber: string; - ourUuid: string; - noteToSelf: string; - } - ) => void; startUpdate: () => unknown; clearConversationSearch: () => void; clearSearch: () => void; @@ -89,12 +63,12 @@ export class MainHeader extends React.Component { } public componentDidUpdate(prevProps: PropsType): void { - const { searchConversationId, startSearchCounter } = this.props; + const { searchConversation, startSearchCounter } = this.props; // When user chooses to search in a given conversation we focus the field for them if ( - searchConversationId && - searchConversationId !== prevProps.searchConversationId + searchConversation && + searchConversation.id !== prevProps.searchConversation?.id ) { this.setFocus(); } @@ -157,46 +131,16 @@ export class MainHeader extends React.Component { } } - public search = debounce((searchTerm: string): void => { - const { - i18n, - ourConversationId, - ourNumber, - ourUuid, - regionCode, - searchDiscussions, - searchMessages, - searchConversationId, - } = this.props; - - if (searchDiscussions && !searchConversationId) { - searchDiscussions(searchTerm, { - noteToSelf: i18n('noteToSelf').toLowerCase(), - ourConversationId, - ourNumber, - ourUuid, - }); - } - - if (searchMessages) { - searchMessages(searchTerm, { - searchConversationId, - regionCode, - }); - } - }, 200); - - public updateSearch = (event: React.FormEvent): void => { + private updateSearch = (searchTerm: string): void => { const { updateSearchTerm, clearConversationSearch, clearSearch, - searchConversationId, + searchConversation, } = this.props; - const searchTerm = event.currentTarget.value; if (!searchTerm) { - if (searchConversationId) { + if (searchConversation) { clearConversationSearch(); } else { clearSearch(); @@ -208,132 +152,30 @@ export class MainHeader extends React.Component { if (updateSearchTerm) { updateSearchTerm(searchTerm); } - - if (searchTerm.length < 1) { - return; - } - - this.search(searchTerm); }; public clearSearch = (): void => { const { clearSearch } = this.props; - clearSearch(); this.setFocus(); }; - public clearConversationSearch = (): void => { - const { clearConversationSearch } = this.props; - - clearConversationSearch(); - this.setFocus(); - }; - private handleInputBlur = (): void => { - const { clearSearch, searchConversationId, searchTerm } = this.props; - if (!searchConversationId && !searchTerm) { + const { clearSearch, searchConversation, searchTerm } = this.props; + if (!searchConversation && !searchTerm) { clearSearch(); } }; - public handleInputKeyDown = ( - event: React.KeyboardEvent - ): void => { - const { - clearConversationSearch, - clearSearch, - searchConversationId, - searchTerm, - } = this.props; - - const { ctrlKey, metaKey, key } = event; - const commandKey = get(window, 'platform') === 'darwin' && metaKey; - const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey; - const commandOrCtrl = commandKey || controlKey; - - // On linux, this keyboard combination selects all text - if (commandOrCtrl && key === '/') { - event.preventDefault(); - event.stopPropagation(); - - return; - } - - if (key !== 'Escape') { - return; - } - - if (searchConversationId && searchTerm) { - clearConversationSearch(); - } else { - clearSearch(); - } - - event.preventDefault(); - event.stopPropagation(); - }; - public handleGlobalKeyDown = (event: KeyboardEvent): void => { const { showingAvatarPopup } = this.state; - const { - i18n, - selectedConversation, - startSearch, - searchInConversation, - } = this.props; - - const { ctrlKey, metaKey, shiftKey, key } = event; - const commandKey = get(window, 'platform') === 'darwin' && metaKey; - const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey; - const commandOrCtrl = commandKey || controlKey; - const commandAndCtrl = commandKey && ctrlKey; + const { key } = event; if (showingAvatarPopup && key === 'Escape') { this.hideAvatarPopup(); - } else if ( - commandOrCtrl && - !commandAndCtrl && - !shiftKey && - (key === 'f' || key === 'F') - ) { - startSearch(); - - event.preventDefault(); - event.stopPropagation(); - } else if ( - selectedConversation && - commandOrCtrl && - !commandAndCtrl && - shiftKey && - (key === 'f' || key === 'F') - ) { - const name = selectedConversation.isMe - ? i18n('noteToSelf') - : selectedConversation.title; - searchInConversation(selectedConversation.id, name); - - event.preventDefault(); - event.stopPropagation(); } }; - public handleXButton = (): void => { - const { - searchConversationId, - clearConversationSearch, - clearSearch, - } = this.props; - - if (searchConversationId) { - clearConversationSearch(); - } else { - clearSearch(); - } - - this.setFocus(); - }; - public setFocus = (): void => { if (this.inputRef.current) { this.inputRef.current.focus(); @@ -356,8 +198,7 @@ export class MainHeader extends React.Component { name, phoneNumber, profileName, - searchConversationId, - searchConversationName, + searchConversation, searchTerm, showArchivedConversations, startComposing, @@ -367,13 +208,7 @@ export class MainHeader extends React.Component { } = this.props; const { showingAvatarPopup, popperRoot } = this.state; - const placeholder = searchConversationName - ? i18n('searchIn', [searchConversationName]) - : i18n('search'); - - const isSearching = Boolean( - searchConversationId || searchTerm.trim().length - ); + const isSearching = Boolean(searchConversation || searchTerm.trim().length); return (
@@ -447,59 +282,16 @@ export class MainHeader extends React.Component { ) : null} -
- {searchConversationId ? ( - - ) : ( -
+ {!isSearching && (