Custom Discriminator in EditUsernameModalBody

ts/components/AutoSizeInput.tsx

@@ -0,0 +1,99 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { useCallback, useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+
+import { getClassNamesFor } from '../util/getClassNamesFor';
+
+export type PropsType = Readonly<{
+  disableSpellcheck?: boolean;
+  disabled?: boolean;
+  moduleClassName?: string;
+  onChange: (newValue: string) => void;
+  onEnter?: () => void;
+  placeholder: string;
+  value?: string;
+  maxLength?: number;
+}>;
+
+export function AutoSizeInput({
+  disableSpellcheck,
+  disabled,
+  moduleClassName,
+  onChange,
+  onEnter,
+  placeholder,
+  value = '',
+  maxLength,
+}: PropsType): JSX.Element {
+  const [root, setRoot] = useState<HTMLElement | null>(null);
+  const hiddenRef = useRef<HTMLSpanElement | null>(null);
+
+  const [width, setWidth] = useState<undefined | number>(undefined);
+  const getClassName = getClassNamesFor('AutoSizeInput', moduleClassName);
+
+  const handleChange = useCallback(
+    e => {
+      onChange(e.target.value);
+    },
+    [onChange]
+  );
+
+  const handleKeyDown = useCallback(
+    event => {
+      if (onEnter && event.key === 'Enter') {
+        onEnter();
+      }
+    },
+    [onEnter]
+  );
+
+  useEffect(() => {
+    const elem = document.createElement('div');
+    document.body.appendChild(elem);
+
+    setRoot(elem);
+
+    return () => {
+      document.body.removeChild(elem);
+    };
+  }, []);
+
+  useEffect(() => {
+    setWidth(hiddenRef.current?.clientWidth || undefined);
+  }, [value, root]);
+
+  return (
+    <div className={getClassName('__container')}>
+      <input
+        type="text"
+        className={getClassName('__input')}
+        dir="auto"
+        maxLength={maxLength}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        spellCheck={!disableSpellcheck}
+        style={{ width }}
+      />
+
+      {root &&
+        createPortal(
+          <span
+            ref={hiddenRef}
+            className={classNames(
+              getClassName('__input'),
+              getClassName('__input--sizer')
+            )}
+          >
+            {value || placeholder}
+          </span>,
+          root
+        )}
+    </div>
+  );
+}