One SearchInput to rule them all

ts/components/SearchInput.tsx

@@ -0,0 +1,48 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { ChangeEvent, KeyboardEvent, forwardRef } from 'react';
+import { getClassNamesFor } from '../util/getClassNamesFor';
+
+export type PropTypes = {
+  readonly disabled?: boolean;
+  readonly moduleClassName?: string;
+  readonly onChange: (ev: ChangeEvent<HTMLInputElement>) => unknown;
+  readonly onKeyDown?: (ev: KeyboardEvent<HTMLInputElement>) => unknown;
+  readonly placeholder: string;
+  readonly value: string;
+};
+
+const BASE_CLASS_NAME = 'module-SearchInput';
+
+export const SearchInput = forwardRef<HTMLInputElement, PropTypes>(
+  (
+    {
+      disabled = false,
+      moduleClassName,
+      onChange,
+      onKeyDown,
+      placeholder,
+      value,
+    },
+    ref
+  ) => {
+    const getClassName = getClassNamesFor(BASE_CLASS_NAME, moduleClassName);
+    return (
+      <div className={getClassName('__container')}>
+        <i className={getClassName('__icon')} />
+        <input
+          className={getClassName('__input')}
+          dir="auto"
+          disabled={disabled}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          placeholder={placeholder}
+          ref={ref}
+          type="text"
+          value={value}
+        />
+      </div>
+    );
+  }
+);