Consolidates the search inputs

2022-02-14 12:57:11 -05:00 · 2022-02-14 12:57:11 -05:00 · 67209d8881
commit 67209d8881
parent 1b352531ca
13 changed files with 263 additions and 319 deletions
--- a/stylesheets/components/LeftPaneSearchInput.scss
+++ b/stylesheets/components/LeftPaneSearchInput.scss
@ -2,65 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only

 .LeftPaneSearchInput {
-  position: relative;
-  margin: 0 16px;
-  margin-bottom: 8px;
-
-  &__input {
-    @include font-body-2;
-    border: solid 1px transparent;
-    border-radius: 8px;
-    height: 28px;
-    padding-left: 30px;
-    padding-right: 5px;
-    width: 100%;
-
-    @include light-theme {
-      background-color: $color-black-alpha-08;
-      color: $color-gray-90;
-
-      &:placeholder {
-        color: $color-gray-45;
-      }
-    }
-    @include dark-theme {
-      background-color: $color-white-alpha-12;
-      color: $color-gray-05;
-
-      &:placeholder {
-        color: $color-gray-25;
-      }
-    }
-
-    &:focus {
-      border: solid 1px $color-ultramarine;
-      outline: none;
-    }
-
-    &--with-text {
-      padding-right: 30px;
-    }
-
-    &--in-conversation {
+  &__input--with-children.module-SearchInput__input--with-children {
    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-45);
-    }
-    @include dark-theme {
-      @include color-svg('../images/icons/v2/search-16.svg', $color-gray-25);
-    }
-  }

  &__in-conversation-pill {
    @include button-reset;
@ -110,22 +54,9 @@
    }
  }

-  &__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 & {
+    &__container {
      display: none;
    }
+  }
 }
--- a/stylesheets/components/SearchInput.scss
+++ b/stylesheets/components/SearchInput.scss
@ -3,40 +3,28 @@

 .module-SearchInput {
  &__container {
-    border-radius: 8px;
-    border: none;
-    margin: 10px 16px;
-    padding: 5px 12px;
+    margin: {
+      left: 16px;
+      right: 16px;
+      bottom: 8px;
+    }
    position: relative;
-
-    @include font-body-2;
-
-    @include light-theme {
-      background-color: $color-gray-15;
-      border: solid 1px $color-gray-15;
-      color: $color-gray-90;
-    }
-
-    @include dark-theme {
-      background-color: $color-gray-65;
-      border: solid 1px $color-gray-65;
-      color: $color-gray-05;
-    }
-
-    &:focus-within {
-      border: solid 1px $color-ultramarine;
-      outline: none;
-    }
  }

  &__icon {
-    @include color-svg('../images/icons/v2/search-16.svg', $color-gray-45);
-    cursor: text;
    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-45);
+    }
+    @include dark-theme {
+      @include color-svg('../images/icons/v2/search-16.svg', $color-gray-25);
+    }
  }

  &__input {
@ -61,4 +49,55 @@
      outline: none;
    }
  }
+
+  &__input {
+    @include font-body-2;
+    border: solid 1px transparent;
+    border-radius: 8px;
+    height: 28px;
+    padding-left: 30px;
+    padding-right: 5px;
+    width: 100%;
+
+    @include light-theme {
+      background-color: $color-black-alpha-08;
+      color: $color-gray-90;
+
+      &:placeholder {
+        color: $color-gray-45;
+      }
+    }
+    @include dark-theme {
+      background-color: $color-white-alpha-12;
+      color: $color-gray-05;
+
+      &:placeholder {
+        color: $color-gray-25;
+      }
+    }
+
+    &:focus {
+      border: solid 1px $color-ultramarine;
+      outline: none;
+    }
+
+    &--with-text {
+      padding-right: 30px;
+    }
+  }
+
+  &__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);
+    }
+  }
 }
--- a/ts/components/ForwardMessageModal.tsx
+++ b/ts/components/ForwardMessageModal.tsx
@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

 import type { FunctionComponent } from 'react';
@ -372,6 +372,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
            <div className="module-ForwardMessageModal__main-body">
              <SearchInput
                disabled={candidateConversations.length === 0}
+                i18n={i18n}
                placeholder={i18n('contactSearchPlaceholder')}
                onChange={event => {
                  setSearchTerm(event.target.value);
--- a/ts/components/LeftPaneMainSearchInput.tsx
+++ b/ts/components/LeftPaneMainSearchInput.tsx
@ -1,92 +0,0 @@
-// Copyright 2022 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import React, { useEffect, useRef } from 'react';
-
-import type { LocalizerType } from '../types/Util';
-import type { ConversationType } from '../state/ducks/conversations';
-import { LeftPaneSearchInput } from './LeftPaneSearchInput';
-import { usePrevious } from '../hooks/usePrevious';
-
-export type PropsType = {
-  clearConversationSearch: () => void;
-  clearSearch: () => void;
-  disabled?: boolean;
-  i18n: LocalizerType;
-  searchConversation: undefined | ConversationType;
-  searchTerm: string;
-  startSearchCounter: number;
-  updateSearchTerm: (searchTerm: string) => void;
-};
-
-export const LeftPaneMainSearchInput = ({
-  clearConversationSearch,
-  clearSearch,
-  disabled,
-  i18n,
-  searchConversation,
-  searchTerm,
-  startSearchCounter,
-  updateSearchTerm,
-}: PropsType): JSX.Element => {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const prevSearchConversationId = usePrevious(
-    undefined,
-    searchConversation?.id
-  );
-  const prevSearchCounter = usePrevious(startSearchCounter, startSearchCounter);
-
-  useEffect(() => {
-    // When user chooses to search in a given conversation we focus the field for them
-    if (
-      searchConversation &&
-      searchConversation.id !== prevSearchConversationId
-    ) {
-      inputRef.current?.focus();
-    }
-    // When user chooses to start a new search, we focus the field
-    if (startSearchCounter !== prevSearchCounter) {
-      inputRef.current?.select();
-    }
-  }, [
-    prevSearchConversationId,
-    prevSearchCounter,
-    searchConversation,
-    startSearchCounter,
-  ]);
-
-  return (
-    <LeftPaneSearchInput
-      disabled={disabled}
-      i18n={i18n}
-      onBlur={() => {
-        if (!searchConversation && !searchTerm) {
-          clearSearch();
-        }
-      }}
-      onChangeValue={nextSearchTerm => {
-        if (!nextSearchTerm) {
-          if (searchConversation) {
-            clearConversationSearch();
-          } else {
-            clearSearch();
-          }
-
-          return;
-        }
-
-        if (updateSearchTerm) {
-          updateSearchTerm(nextSearchTerm);
-        }
-      }}
-      onClear={() => {
-        clearSearch();
-        inputRef.current?.focus();
-      }}
-      ref={inputRef}
-      searchConversation={searchConversation}
-      value={searchTerm}
-    />
-  );
-};
--- a/ts/components/LeftPaneSearchInput.tsx
+++ b/ts/components/LeftPaneSearchInput.tsx
@ -1,48 +1,111 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 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 React, { useEffect, useRef } from 'react';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
 import { Avatar, AvatarSize } from './Avatar';
+import { SearchInput } from './SearchInput';
+import { usePrevious } from '../hooks/usePrevious';

 type PropsType = {
+  clearConversationSearch: () => void;
+  clearSearch: () => void;
  disabled?: boolean;
  i18n: LocalizerType;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onChangeValue: (newValue: string) => unknown;
-  onClear: () => unknown;
  searchConversation?: ConversationType;
-  value: string;
+  searchTerm: string;
+  startSearchCounter: number;
+  updateSearchTerm: (searchTerm: string) => void;
 };

-// TODO DESKTOP-3068: merge with <SearchInput />
-export const LeftPaneSearchInput = forwardRef<HTMLInputElement, PropsType>(
-  (
-    {
+export const LeftPaneSearchInput = ({
+  clearConversationSearch,
+  clearSearch,
  disabled,
  i18n,
-      onBlur,
-      onChangeValue,
-      onClear,
  searchConversation,
-      value,
-    },
-    outerRef
-  ) => {
+  searchTerm,
+  startSearchCounter,
+  updateSearchTerm,
+}: PropsType): JSX.Element => {
  const inputRef = useRef<null | HTMLInputElement>(null);

-    const emptyOrClear =
-      searchConversation && value ? () => onChangeValue('') : onClear;
+  const prevSearchConversationId = usePrevious(
+    undefined,
+    searchConversation?.id
+  );
+  const prevSearchCounter = usePrevious(startSearchCounter, startSearchCounter);
+
+  useEffect(() => {
+    // When user chooses to search in a given conversation we focus the field for them
+    if (
+      searchConversation &&
+      searchConversation.id !== prevSearchConversationId
+    ) {
+      inputRef.current?.focus();
+    }
+    // When user chooses to start a new search, we focus the field
+    if (startSearchCounter !== prevSearchCounter) {
+      inputRef.current?.select();
+    }
+  }, [
+    prevSearchConversationId,
+    prevSearchCounter,
+    searchConversation,
+    startSearchCounter,
+  ]);
+
+  const changeValue = (nextSearchTerm: string) => {
+    if (!nextSearchTerm) {
+      if (searchConversation) {
+        clearConversationSearch();
+      } else {
+        clearSearch();
+      }
+
+      return;
+    }
+
+    if (updateSearchTerm) {
+      updateSearchTerm(nextSearchTerm);
+    }
+  };
+
+  const clearAndFocus = () => {
+    clearSearch();
+    inputRef.current?.focus();
+  };

  const label = i18n(searchConversation ? 'searchIn' : 'search');

  return (
-      <div className="LeftPaneSearchInput">
-        {searchConversation ? (
+    <SearchInput
+      disabled={disabled}
+      label={label}
+      hasSearchIcon={!searchConversation}
+      i18n={i18n}
+      moduleClassName="LeftPaneSearchInput"
+      onBlur={() => {
+        if (!searchConversation && !searchTerm) {
+          clearSearch();
+        }
+      }}
+      onChange={event => {
+        changeValue(event.currentTarget.value);
+      }}
+      onClear={() => {
+        if (searchConversation && searchTerm) {
+          changeValue('');
+        } else {
+          clearAndFocus();
+        }
+      }}
+      ref={inputRef}
+      placeholder={label}
+      value={searchTerm}
+    >
+      {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.
@ -71,53 +134,11 @@ export const LeftPaneSearchInput = forwardRef<HTMLInputElement, PropsType>(
          <button
            aria-label={i18n('clearSearch')}
            className="LeftPaneSearchInput__in-conversation-pill__x-button"
-              onClick={onClear}
+            onClick={clearAndFocus}
            type="button"
          />
        </div>
-        ) : (
-          <div className="LeftPaneSearchInput__icon" />
      )}
-        <input
-          aria-label={label}
-          className={classNames(
-            'LeftPaneSearchInput__input',
-            value && 'LeftPaneSearchInput__input--with-text',
-            searchConversation && 'LeftPaneSearchInput__input--in-conversation'
-          )}
-          dir="auto"
-          disabled={disabled}
-          onBlur={onBlur}
-          onChange={event => {
-            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 && (
-          <button
-            aria-label={i18n('cancel')}
-            className="LeftPaneSearchInput__cancel"
-            onClick={emptyOrClear}
-            tabIndex={-1}
-            type="button"
-          />
-        )}
-      </div>
+    </SearchInput>
  );
-  }
-);
+};
--- a/ts/components/SearchInput.tsx
+++ b/ts/components/SearchInput.tsx
@ -1,13 +1,26 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

-import type { ChangeEvent, KeyboardEvent } from 'react';
+import type {
+  ChangeEvent,
+  FocusEventHandler,
+  KeyboardEvent,
+  ReactNode,
+} from 'react';
 import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import type { LocalizerType } from '../types/Util';
 import { getClassNamesFor } from '../util/getClassNamesFor';

 export type PropTypes = {
+  readonly children?: ReactNode;
  readonly disabled?: boolean;
+  readonly label?: string;
+  readonly hasSearchIcon?: boolean;
+  readonly i18n: LocalizerType;
  readonly moduleClassName?: string;
+  readonly onClear?: () => unknown;
+  readonly onBlur?: FocusEventHandler<HTMLInputElement>;
  readonly onChange: (ev: ChangeEvent<HTMLInputElement>) => unknown;
  readonly onKeyDown?: (ev: KeyboardEvent<HTMLInputElement>) => unknown;
  readonly placeholder: string;
@ -19,8 +32,14 @@ const BASE_CLASS_NAME = 'module-SearchInput';
 export const SearchInput = forwardRef<HTMLInputElement, PropTypes>(
  (
    {
+      children,
      disabled = false,
+      hasSearchIcon = true,
+      i18n,
+      label,
      moduleClassName,
+      onClear,
+      onBlur,
      onChange,
      onKeyDown,
      placeholder,
@ -31,18 +50,48 @@ export const SearchInput = forwardRef<HTMLInputElement, PropTypes>(
    const getClassName = getClassNamesFor(BASE_CLASS_NAME, moduleClassName);
    return (
      <div className={getClassName('__container')}>
-        <i className={getClassName('__icon')} />
+        {hasSearchIcon && <i className={getClassName('__icon')} />}
+        {children}
        <input
-          className={getClassName('__input')}
+          aria-label={label || i18n('search')}
+          className={classNames(
+            getClassName('__input'),
+            value && getClassName('__input--with-text'),
+            children && getClassName('__input--with-children')
+          )}
          dir="auto"
          disabled={disabled}
+          onBlur={onBlur}
          onChange={onChange}
-          onKeyDown={onKeyDown}
+          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' && onClear) {
+              onClear();
+              event.preventDefault();
+              event.stopPropagation();
+            }
+
+            onKeyDown?.(event);
+          }}
          placeholder={placeholder}
          ref={ref}
          type="text"
          value={value}
        />
+        {value && onClear && (
+          <button
+            aria-label={i18n('cancel')}
+            className={getClassName('__cancel')}
+            onClick={onClear}
+            tabIndex={-1}
+            type="button"
+          />
+        )}
      </div>
    );
  }
--- a/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx
+++ b/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx
@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

 import type { FunctionComponent } from 'react';
@ -139,6 +139,7 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
        </h1>
        <SearchInput
          disabled={candidateContacts.length === 0}
+          i18n={i18n}
          placeholder={i18n('contactSearchPlaceholder')}
          onChange={event => {
            setSearchTerm(event.target.value);
--- a/ts/components/leftPane/LeftPaneArchiveHelper.tsx
+++ b/ts/components/leftPane/LeftPaneArchiveHelper.tsx
@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

 import type { ReactChild } from 'react';
@ -13,7 +13,7 @@ import { RowType } from '../ConversationList';
 import type { PropsData as ConversationListItemPropsType } from '../conversationList/ConversationListItem';
 import type { LocalizerType } from '../../types/Util';
 import type { ConversationType } from '../../state/ducks/conversations';
-import { LeftPaneMainSearchInput } from '../LeftPaneMainSearchInput';
+import { LeftPaneSearchInput } from '../LeftPaneSearchInput';
 import type { LeftPaneSearchPropsType } from './LeftPaneSearchHelper';
 import { LeftPaneSearchHelper } from './LeftPaneSearchHelper';

@ -91,7 +91,7 @@ export class LeftPaneArchiveHelper extends LeftPaneHelper<LeftPaneArchivePropsTy
    }

    return (
-      <LeftPaneMainSearchInput
+      <LeftPaneSearchInput
        clearConversationSearch={clearConversationSearch}
        clearSearch={clearSearch}
        i18n={i18n}
--- a/ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx
+++ b/ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx
@ -116,6 +116,7 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
  }>): ReactChild {
    return (
      <SearchInput
+        i18n={i18n}
        moduleClassName="module-left-pane__compose-search-form"
        onChange={onChangeComposeSearchTerm}
        placeholder={i18n('contactSearchPlaceholder')}
--- a/ts/components/leftPane/LeftPaneComposeHelper.tsx
+++ b/ts/components/leftPane/LeftPaneComposeHelper.tsx
@ -105,6 +105,7 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
  }>): ReactChild {
    return (
      <SearchInput
+        i18n={i18n}
        moduleClassName="module-left-pane__compose-search-form"
        onChange={onChangeComposeSearchTerm}
        placeholder={i18n('contactSearchPlaceholder')}
--- a/ts/components/leftPane/LeftPaneInboxHelper.tsx
+++ b/ts/components/leftPane/LeftPaneInboxHelper.tsx
@ -15,7 +15,7 @@ import { RowType } from '../ConversationList';
 import type { PropsData as ConversationListItemPropsType } from '../conversationList/ConversationListItem';
 import type { LocalizerType } from '../../types/Util';
 import { handleKeydownForSearch } from './handleKeydownForSearch';
-import { LeftPaneMainSearchInput } from '../LeftPaneMainSearchInput';
+import { LeftPaneSearchInput } from '../LeftPaneSearchInput';

 export type LeftPaneInboxPropsType = {
  conversations: ReadonlyArray<ConversationListItemPropsType>;
@ -90,7 +90,7 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
    updateSearchTerm: (searchTerm: string) => unknown;
  }>): ReactChild {
    return (
-      <LeftPaneMainSearchInput
+      <LeftPaneSearchInput
        clearConversationSearch={clearConversationSearch}
        clearSearch={clearSearch}
        disabled={this.searchDisabled}
--- a/ts/components/leftPane/LeftPaneSearchHelper.tsx
+++ b/ts/components/leftPane/LeftPaneSearchHelper.tsx
@ -12,7 +12,7 @@ import { RowType } from '../ConversationList';
 import type { PropsData as ConversationListItemPropsType } from '../conversationList/ConversationListItem';
 import { handleKeydownForSearch } from './handleKeydownForSearch';
 import type { ConversationType } from '../../state/ducks/conversations';
-import { LeftPaneMainSearchInput } from '../LeftPaneMainSearchInput';
+import { LeftPaneSearchInput } from '../LeftPaneSearchInput';

 import { Intl } from '../Intl';
 import { Emojify } from '../conversation/Emojify';
@ -108,7 +108,7 @@ export class LeftPaneSearchHelper extends LeftPaneHelper<LeftPaneSearchPropsType
    updateSearchTerm: (searchTerm: string) => unknown;
  }>): ReactChild {
    return (
-      <LeftPaneMainSearchInput
+      <LeftPaneSearchInput
        clearConversationSearch={clearConversationSearch}
        clearSearch={clearSearch}
        disabled={this.searchDisabled}
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@ -7515,20 +7515,12 @@
    "reasonCategory": "falseMatch",
    "updated": "2020-07-21T18:34:59.251Z"
  },
-  {
-    "rule": "React-useRef",
-    "path": "ts/components/LeftPaneMainSearchInput.tsx",
-    "line": "  const inputRef = useRef<HTMLInputElement | null>(null);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2022-01-26T23:11:05.369Z"
-  },
  {
    "rule": "React-useRef",
    "path": "ts/components/LeftPaneSearchInput.tsx",
    "line": "  const inputRef = useRef<null | HTMLInputElement>(null);",
    "reasonCategory": "usageTrusted",
-    "updated": "2021-10-29T22:48:58.354Z",
-    "reasonDetail": "Only used to focus the input."
+    "updated": "2022-02-11T20:49:03.879Z"
  },
  {
    "rule": "React-useRef",