Edit profile

ts/components/GroupDescriptionInput.tsx

@@ -1,21 +1,10 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, {
-  ClipboardEvent,
-  forwardRef,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import classNames from 'classnames';
+import React, { forwardRef } from 'react';
 
+import { Input } from './Input';
 import { LocalizerType } from '../types/Util';
-import { multiRef } from '../util/multiRef';
-import * as grapheme from '../util/grapheme';
-
-const MAX_GRAPHEME_COUNT = 256;
-const SHOW_REMAINING_COUNT = 150;
 
 type PropsType = {
   disabled?: boolean;
@@ -24,128 +13,20 @@ type PropsType = {
   value: string;
 };
 
-/**
- * Group titles must have fewer than MAX_GRAPHEME_COUNT glyphs. Ideally, we'd use the
- * `maxLength` property on inputs, but that doesn't account for glyphs that are more than
- * one UTF-16 code units. For example: `'💩💩'.length === 4`.
- *
- * This component effectively implements a "max grapheme length" on an input.
- *
- * At a high level, this component handles two methods of input:
- *
- * - `onChange`. *Before* the value is changed (in `onKeyDown`), we save the value and the
- *   cursor position. Then, in `onChange`, we see if the new value is too long. If it is,
- *   we revert the value and selection. Otherwise, we fire `onChangeValue`.
- *
- * - `onPaste`. If you're pasting something that will fit, we fall back to normal browser
- *   behavior, which calls `onChange`. If you're pasting something that won't fit, it's a
- *   noop.
- */
-export const GroupDescriptionInput = forwardRef<HTMLTextAreaElement, PropsType>(
+export const GroupDescriptionInput = forwardRef<HTMLInputElement, PropsType>(
   ({ i18n, disabled = false, onChangeValue, value }, ref) => {
-    const innerRef = useRef<HTMLTextAreaElement | null>(null);
-    const valueOnKeydownRef = useRef<string>(value);
-    const selectionStartOnKeydownRef = useRef<number>(value.length);
-    const [isLarge, setIsLarge] = useState(false);
-
-    function maybeSetLarge() {
-      const inputEl = innerRef.current;
-      if (!inputEl) {
-        return;
-      }
-
-      if (inputEl.scrollHeight > inputEl.clientHeight) {
-        setIsLarge(true);
-      }
-    }
-
-    const onKeyDown = () => {
-      const inputEl = innerRef.current;
-      if (!inputEl) {
-        return;
-      }
-
-      valueOnKeydownRef.current = inputEl.value;
-      selectionStartOnKeydownRef.current = inputEl.selectionStart || 0;
-    };
-
-    const onChange = () => {
-      const inputEl = innerRef.current;
-      if (!inputEl) {
-        return;
-      }
-
-      const newValue = inputEl.value;
-      const newGraphemeCount = grapheme.count(newValue);
-
-      if (newGraphemeCount <= MAX_GRAPHEME_COUNT) {
-        onChangeValue(newValue);
-      } else {
-        inputEl.value = valueOnKeydownRef.current;
-        inputEl.selectionStart = selectionStartOnKeydownRef.current;
-        inputEl.selectionEnd = selectionStartOnKeydownRef.current;
-      }
-
-      maybeSetLarge();
-    };
-
-    const onPaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
-      const inputEl = innerRef.current;
-      if (!inputEl) {
-        return;
-      }
-
-      const selectionStart = inputEl.selectionStart || 0;
-      const selectionEnd = inputEl.selectionEnd || inputEl.selectionStart || 0;
-      const textBeforeSelection = value.slice(0, selectionStart);
-      const textAfterSelection = value.slice(selectionEnd);
-
-      const pastedText = event.clipboardData.getData('Text');
-
-      const newGraphemeCount =
-        grapheme.count(textBeforeSelection) +
-        grapheme.count(pastedText) +
-        grapheme.count(textAfterSelection);
-
-      if (newGraphemeCount > MAX_GRAPHEME_COUNT) {
-        event.preventDefault();
-      }
-
-      maybeSetLarge();
-    };
-
-    useEffect(() => {
-      maybeSetLarge();
-    }, []);
-
-    const graphemeCount = grapheme.count(value);
-
     return (
-      <>
-        <div className="module-GroupInput--container module-GroupInput__description--container">
-          <textarea
-            className={classNames({
-              'module-GroupInput': true,
-              'module-GroupInput__description': true,
-              'module-GroupInput__description--large': isLarge,
-            })}
-            disabled={disabled}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            onPaste={onPaste}
-            placeholder={i18n(
-              'setGroupMetadata__group-description-placeholder'
-            )}
-            ref={multiRef<HTMLTextAreaElement>(ref, innerRef)}
-            value={value}
-          />
-          {graphemeCount >= SHOW_REMAINING_COUNT && (
-            <div className="module-GroupInput__description--remaining">
-              {MAX_GRAPHEME_COUNT - graphemeCount}
-            </div>
-          )}
-        </div>
-      </>
+      <Input
+        disabled={disabled}
+        expandable
+        i18n={i18n}
+        onChange={onChangeValue}
+        placeholder={i18n('setGroupMetadata__group-description-placeholder')}
+        maxGraphemeCount={256}
+        ref={ref}
+        value={value}
+        whenToShowRemainingCount={150}
+      />
     );
   }
 );