This commit is contained in:
Scott Nonnenberg 2024-07-30 16:25:42 -07:00
commit 13ff8fd32e
13 changed files with 158 additions and 17 deletions

View file

@ -62,6 +62,7 @@ const defaultConversations: Array<ConversationType> = [
];
const defaultSearchProps = {
isSearchingGlobally: true,
searchConversation: undefined,
searchDisabled: false,
searchTerm: 'hello',
@ -145,6 +146,8 @@ const useProps = (overrideProps: OverridePropsType = {}): PropsType => {
composeReplaceAvatar: action('composeReplaceAvatar'),
composeSaveAvatarToDisk: action('composeSaveAvatarToDisk'),
createGroup: action('createGroup'),
endConversationSearch: action('endConversationSearch'),
endSearch: action('endSearch'),
getPreferredBadge: () => undefined,
hasFailedStorySends: false,
hasPendingUpdate: false,
@ -609,6 +612,7 @@ export function ArchiveNoArchivedConversations(): JSX.Element {
modeSpecificProps: {
mode: LeftPaneMode.Archive,
archivedConversations: [],
isSearchingGlobally: false,
searchConversation: undefined,
searchTerm: '',
startSearchCounter: 0,
@ -625,6 +629,7 @@ export function ArchiveArchivedConversations(): JSX.Element {
modeSpecificProps: {
mode: LeftPaneMode.Archive,
archivedConversations: defaultConversations,
isSearchingGlobally: false,
searchConversation: undefined,
searchTerm: '',
startSearchCounter: 0,
@ -641,6 +646,7 @@ export function ArchiveSearchingAConversation(): JSX.Element {
modeSpecificProps: {
mode: LeftPaneMode.Archive,
archivedConversations: defaultConversations,
isSearchingGlobally: false,
searchConversation: undefined,
searchTerm: '',
startSearchCounter: 0,

View file

@ -120,6 +120,8 @@ export type PropsType = {
composeReplaceAvatar: ReplaceAvatarActionType;
composeSaveAvatarToDisk: SaveAvatarToDiskActionType;
createGroup: () => void;
endConversationSearch: () => void;
endSearch: () => void;
navTabsCollapsed: boolean;
openUsernameReservationModal: () => void;
onOutgoingAudioCallInConversation: (conversationId: string) => void;
@ -183,6 +185,8 @@ export function LeftPane({
composeSaveAvatarToDisk,
crashReportCount,
createGroup,
endConversationSearch,
endSearch,
getPreferredBadge,
hasExpiredDialog,
hasFailedStorySends,
@ -704,6 +708,8 @@ export function LeftPane({
{helper.getSearchInput({
clearConversationSearch,
clearSearch,
endConversationSearch,
endSearch,
i18n,
onChangeComposeSearchTerm: event => {
setComposeSearchTerm(event.target.value);

View file

@ -15,7 +15,10 @@ type PropsType = {
clearConversationSearch: () => void;
clearSearch: () => void;
disabled?: boolean;
endConversationSearch: () => void;
endSearch: () => void;
i18n: LocalizerType;
isSearchingGlobally: boolean;
onEnterKeyDown?: (
clearSearch: () => void,
showConversation: ShowConversationType
@ -31,7 +34,10 @@ export function LeftPaneSearchInput({
clearConversationSearch,
clearSearch,
disabled,
endConversationSearch,
endSearch,
i18n,
isSearchingGlobally,
onEnterKeyDown,
searchConversation,
searchTerm,
@ -46,6 +52,7 @@ export function LeftPaneSearchInput({
searchConversation?.id
);
const prevSearchCounter = usePrevious(startSearchCounter, startSearchCounter);
const wasSearchingGlobally = usePrevious(false, isSearchingGlobally);
useEffect(() => {
// When user chooses to search in a given conversation we focus the field for them
@ -56,7 +63,10 @@ export function LeftPaneSearchInput({
inputRef.current?.focus();
}
// When user chooses to start a new search, we focus the field
if (startSearchCounter !== prevSearchCounter) {
if (
(isSearchingGlobally && !wasSearchingGlobally) ||
startSearchCounter !== prevSearchCounter
) {
inputRef.current?.select();
}
}, [
@ -64,6 +74,8 @@ export function LeftPaneSearchInput({
prevSearchCounter,
searchConversation,
startSearchCounter,
isSearchingGlobally,
wasSearchingGlobally,
]);
const changeValue = (nextSearchTerm: string) => {
@ -82,11 +94,6 @@ export function LeftPaneSearchInput({
}
};
const clearAndFocus = () => {
clearSearch();
inputRef.current?.focus();
};
const label = searchConversation ? i18n('icu:searchIn') : i18n('icu:search');
return (
@ -98,7 +105,7 @@ export function LeftPaneSearchInput({
moduleClassName="LeftPaneSearchInput"
onBlur={() => {
if (!searchConversation && !searchTerm) {
clearSearch();
endSearch();
}
}}
onKeyDown={event => {
@ -112,10 +119,14 @@ export function LeftPaneSearchInput({
changeValue(event.currentTarget.value);
}}
onClear={() => {
if (searchConversation && searchTerm) {
changeValue('');
if (searchTerm) {
clearSearch();
inputRef.current?.focus();
} else if (searchConversation) {
endConversationSearch();
inputRef.current?.focus();
} else {
clearAndFocus();
inputRef.current?.blur();
}
}}
ref={inputRef}
@ -151,7 +162,7 @@ export function LeftPaneSearchInput({
<button
aria-label={i18n('icu:clearSearch')}
className="LeftPaneSearchInput__in-conversation-pill__x-button"
onClick={clearAndFocus}
onClick={endConversationSearch}
type="button"
/>
</div>

View file

@ -23,6 +23,7 @@ import * as KeyboardLayout from '../../services/keyboardLayout';
type LeftPaneArchiveBasePropsType = {
archivedConversations: ReadonlyArray<ConversationListItemPropsType>;
isSearchingGlobally: boolean;
searchConversation: undefined | ConversationType;
searchTerm: string;
startSearchCounter: number;
@ -35,6 +36,8 @@ export type LeftPaneArchivePropsType =
export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsType> {
private readonly archivedConversations: ReadonlyArray<ConversationListItemPropsType>;
private readonly isSearchingGlobally: boolean;
private readonly searchConversation: undefined | ConversationType;
private readonly searchTerm: string;
@ -47,6 +50,7 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
super();
this.archivedConversations = props.archivedConversations;
this.isSearchingGlobally = props.isSearchingGlobally;
this.searchConversation = props.searchConversation;
this.searchTerm = props.searchTerm;
this.startSearchCounter = props.startSearchCounter;
@ -82,12 +86,16 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
override getSearchInput({
clearConversationSearch,
clearSearch,
endConversationSearch,
endSearch,
i18n,
updateSearchTerm,
showConversation,
}: Readonly<{
clearConversationSearch: () => unknown;
clearSearch: () => unknown;
endConversationSearch: () => unknown;
endSearch: () => unknown;
i18n: LocalizerType;
updateSearchTerm: (searchTerm: string) => unknown;
showConversation: ShowConversationType;
@ -100,7 +108,10 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
<LeftPaneSearchInput
clearConversationSearch={clearConversationSearch}
clearSearch={clearSearch}
endConversationSearch={endConversationSearch}
endSearch={endSearch}
i18n={i18n}
isSearchingGlobally={this.isSearchingGlobally}
searchConversation={this.searchConversation}
searchTerm={this.searchTerm}
showConversation={showConversation}

View file

@ -40,6 +40,8 @@ export abstract class LeftPaneHelper<T> {
_: Readonly<{
clearConversationSearch: () => unknown;
clearSearch: () => unknown;
endConversationSearch: () => unknown;
endSearch: () => unknown;
i18n: LocalizerType;
onChangeComposeSearchTerm: (
event: ChangeEvent<HTMLInputElement>

View file

@ -25,6 +25,7 @@ export type LeftPaneInboxPropsType = {
archivedConversations: ReadonlyArray<ConversationListItemPropsType>;
pinnedConversations: ReadonlyArray<ConversationListItemPropsType>;
isAboutToSearch: boolean;
isSearchingGlobally: boolean;
startSearchCounter: number;
searchDisabled: boolean;
searchTerm: string;
@ -40,6 +41,8 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
private readonly isAboutToSearch: boolean;
private readonly isSearchingGlobally: boolean;
private readonly startSearchCounter: number;
private readonly searchDisabled: boolean;
@ -53,6 +56,7 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
archivedConversations,
pinnedConversations,
isAboutToSearch,
isSearchingGlobally,
startSearchCounter,
searchDisabled,
searchTerm,
@ -64,6 +68,7 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
this.archivedConversations = archivedConversations;
this.pinnedConversations = pinnedConversations;
this.isAboutToSearch = isAboutToSearch;
this.isSearchingGlobally = isSearchingGlobally;
this.startSearchCounter = startSearchCounter;
this.searchDisabled = searchDisabled;
this.searchTerm = searchTerm;
@ -84,12 +89,16 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
override getSearchInput({
clearConversationSearch,
clearSearch,
endConversationSearch,
endSearch,
i18n,
showConversation,
updateSearchTerm,
}: Readonly<{
clearConversationSearch: () => unknown;
clearSearch: () => unknown;
endConversationSearch: () => unknown;
endSearch: () => unknown;
i18n: LocalizerType;
showConversation: ShowConversationType;
updateSearchTerm: (searchTerm: string) => unknown;
@ -98,8 +107,11 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
<LeftPaneSearchInput
clearConversationSearch={clearConversationSearch}
clearSearch={clearSearch}
endConversationSearch={endConversationSearch}
endSearch={endSearch}
disabled={this.searchDisabled}
i18n={i18n}
isSearchingGlobally={this.isSearchingGlobally}
searchConversation={this.searchConversation}
searchTerm={this.searchTerm}
showConversation={showConversation}

View file

@ -44,6 +44,7 @@ export type LeftPaneSearchPropsType = {
primarySendsSms: boolean;
searchTerm: string;
startSearchCounter: number;
isSearchingGlobally: boolean;
searchDisabled: boolean;
searchConversation: undefined | ConversationType;
};
@ -57,6 +58,8 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
private readonly contactResults: MaybeLoadedSearchResultsType<ConversationListItemPropsType>;
private readonly isSearchingGlobally: boolean;
private readonly messageResults: MaybeLoadedSearchResultsType<{
id: string;
conversationId: string;
@ -78,6 +81,7 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
constructor({
contactResults,
conversationResults,
isSearchingGlobally,
messageResults,
primarySendsSms,
searchConversation,
@ -90,6 +94,7 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
this.contactResults = contactResults;
this.conversationResults = conversationResults;
this.isSearchingGlobally = isSearchingGlobally;
this.messageResults = messageResults;
this.primarySendsSms = primarySendsSms;
this.searchConversation = searchConversation;
@ -103,12 +108,16 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
override getSearchInput({
clearConversationSearch,
clearSearch,
endConversationSearch,
endSearch,
i18n,
showConversation,
updateSearchTerm,
}: Readonly<{
clearConversationSearch: () => unknown;
clearSearch: () => unknown;
endConversationSearch: () => unknown;
endSearch: () => unknown;
i18n: LocalizerType;
showConversation: ShowConversationType;
updateSearchTerm: (searchTerm: string) => unknown;
@ -117,8 +126,11 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
<LeftPaneSearchInput
clearConversationSearch={clearConversationSearch}
clearSearch={clearSearch}
endConversationSearch={endConversationSearch}
endSearch={endSearch}
disabled={this.searchDisabled}
i18n={i18n}
isSearchingGlobally={this.isSearchingGlobally}
onEnterKeyDown={this.onEnterKeyDown}
searchConversation={this.searchConversation}
searchTerm={this.searchTerm}