...

1 files changed, 32 insertions, 61 deletions

diff --git a/FrontEnd/src/views/common/SearchInput.tsx b/FrontEnd/src/views/common/SearchInput.tsx
index 9d644ab7..e3216b86 100644
--- a/FrontEnd/src/views/common/SearchInput.tsx
+++ b/FrontEnd/src/views/common/SearchInput.tsx
@@ -1,79 +1,50 @@
-import { useCallback } from "react";
-import * as React from "react";
-import classnames from "classnames";
-import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 
+import { useC, Text } from "./common";
 import LoadingButton from "./button/LoadingButton";
 
 import "./SearchInput.css";
 
-export interface SearchInputProps {
+interface SearchInputProps {
   value: string;
   onChange: (value: string) => void;
   onButtonClick: () => void;
-  className?: string;
   loading?: boolean;
-  buttonText?: string;
-  placeholder?: string;
-  additionalButton?: React.ReactNode;
-  alwaysOneline?: boolean;
+  className?: string;
+  buttonText?: Text;
 }
 
-const SearchInput: React.FC<SearchInputProps> = (props) => {
-  const { onChange, onButtonClick, alwaysOneline } = props;
-
-  const { t } = useTranslation();
-
-  const onInputChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>): void => {
-      onChange(event.currentTarget.value);
-    },
-    [onChange]
-  );
-
-  const onInputKeyPress = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>): void => {
-      if (event.key === "Enter") {
-        onButtonClick();
-        event.preventDefault();
-      }
-    },
-    [onButtonClick]
-  );
+export default function SearchInput({
+  value,
+  onChange,
+  onButtonClick,
+  loading,
+  className,
+  buttonText,
+}: SearchInputProps) {
+  const c = useC();
 
   return (
-    <div
-      className={classnames(
-        "cru-search-input",
-        alwaysOneline ? "flex-nowrap" : "flex-sm-nowrap",
-        props.className
-      )}
-    >
+    <div className={classNames("cru-search-input", className)}>
       <input
         type="text"
-        className="cru-search-input-input me-sm-2 flex-grow-1"
-        value={props.value}
-        onChange={onInputChange}
-        onKeyPress={onInputKeyPress}
-        placeholder={props.placeholder}
+        className="cru-search-input-input"
+        value={value}
+        onChange={(event) => {
+          const { value } = event.currentTarget;
+          onChange(value);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            onButtonClick();
+            event.preventDefault();
+          }
+        }}
       />
-      {props.additionalButton ? (
-        <div className="mt-2 mt-sm-0 flex-shrink-0 order-sm-last ms-sm-2">
-          {props.additionalButton}
-        </div>
-      ) : null}
-      <div
-        className={classnames(
-          alwaysOneline ? "mt-0 ms-2" : "mt-2 mt-sm-0 ms-auto ms-sm-0",
-          "flex-shrink-0"
-        )}
-      >
-        <LoadingButton loading={props.loading} onClick={props.onButtonClick}>
-          {props.buttonText ?? t("search")}
-        </LoadingButton>
-      </div>
+
+      <LoadingButton loading={loading} onClick={onButtonClick}>
+        {c(buttonText ?? "search")}
+      </LoadingButton>
     </div>
   );
-};
-
-export default SearchInput;
+}