New Interface (initial commit)

src/components/base/base-search-box.tsx

@@ -1,11 +1,12 @@
-import { Box, SvgIcon, TextField, styled } from "@mui/material";
-import Tooltip from "@mui/material/Tooltip";
-import { ChangeEvent, useEffect, useRef, useState, useMemo } from "react";
-
+import { ChangeEvent, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import matchCaseIcon from "@/assets/image/component/match_case.svg?react";
-import matchWholeWordIcon from "@/assets/image/component/match_whole_word.svg?react";
-import useRegularExpressionIcon from "@/assets/image/component/use_regular_expression.svg?react";
+import { cn } from "@root/lib/utils";
+
+// Новые импорты
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { CaseSensitive, WholeWord, Regex } from "lucide-react"; // Иконки из lucide-react
 
 export type SearchState = {
   text: string;
@@ -16,150 +17,97 @@ export type SearchState = {
 
 type SearchProps = {
   placeholder?: string;
-  matchCase?: boolean;
-  matchWholeWord?: boolean;
-  useRegularExpression?: boolean;
   onSearch: (match: (content: string) => boolean, state: SearchState) => void;
 };
 
-const StyledTextField = styled(TextField)(({ theme }) => ({
-  "& .MuiInputBase-root": {
-    background: theme.palette.mode === "light" ? "#fff" : undefined,
-    paddingRight: "4px",
-  },
-  "& .MuiInputBase-root svg[aria-label='active'] path": {
-    fill: theme.palette.primary.light,
-  },
-  "& .MuiInputBase-root svg[aria-label='inactive'] path": {
-    fill: "#A7A7A7",
-  },
-}));
-
 export const BaseSearchBox = (props: SearchProps) => {
   const { t } = useTranslation();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [matchCase, setMatchCase] = useState(props.matchCase ?? false);
-  const [matchWholeWord, setMatchWholeWord] = useState(
-    props.matchWholeWord ?? false,
-  );
-  const [useRegularExpression, setUseRegularExpression] = useState(
-    props.useRegularExpression ?? false,
-  );
+  const [text, setText] = useState("");
+  const [matchCase, setMatchCase] = useState(false);
+  const [matchWholeWord, setMatchWholeWord] = useState(false);
+  const [useRegularExpression, setUseRegularExpression] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
 
-  const iconStyle = {
-    style: {
-      height: "24px",
-      width: "24px",
-      cursor: "pointer",
-    } as React.CSSProperties,
-    inheritViewBox: true,
-  };
-
   const createMatcher = useMemo(() => {
     return (searchText: string) => {
       try {
+        setErrorMessage(""); // Сбрасываем ошибку при новой попытке
         return (content: string) => {
           if (!searchText) return true;
-
-          let item = !matchCase ? content.toLowerCase() : content;
-          let searchItem = !matchCase ? searchText.toLowerCase() : searchText;
+          const flags = matchCase ? "" : "i";
 
           if (useRegularExpression) {
-            return new RegExp(searchItem).test(item);
+            return new RegExp(searchText, flags).test(content);
           }
 
+          let pattern = searchText.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); // Экранируем спецсимволы
           if (matchWholeWord) {
-            return new RegExp(`\\b${searchItem}\\b`).test(item);
+            pattern = `\\b${pattern}\\b`;
           }
 
-          return item.includes(searchItem);
+          return new RegExp(pattern, flags).test(content);
         };
-      } catch (err) {
-        setErrorMessage(`${err}`);
-        return () => true;
+      } catch (err: any) {
+        setErrorMessage(err.message);
+        return () => true; // Возвращаем "безопасный" матчер в случае ошибки
       }
     };
   }, [matchCase, matchWholeWord, useRegularExpression]);
 
   useEffect(() => {
-    if (!inputRef.current) return;
-    const value = inputRef.current.value;
-    setErrorMessage("");
-    props.onSearch(createMatcher(value), {
-      text: value,
-      matchCase,
-      matchWholeWord,
-      useRegularExpression,
-    });
-  }, [matchCase, matchWholeWord, useRegularExpression, createMatcher]);
+    props.onSearch(createMatcher(text), { text, matchCase, matchWholeWord, useRegularExpression });
+  }, [matchCase, matchWholeWord, useRegularExpression, createMatcher]); // Убрали text из зависимостей
 
-  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const value = e.target?.value ?? "";
-    setErrorMessage("");
-    props.onSearch(createMatcher(value), {
-      text: value,
-      matchCase,
-      matchWholeWord,
-      useRegularExpression,
-    });
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setText(value);
+    props.onSearch(createMatcher(value), { text: value, matchCase, matchWholeWord, useRegularExpression });
   };
 
+  const getToggleVariant = (isActive: boolean) => (isActive ? "secondary" : "ghost");
+
   return (
-    <Tooltip title={errorMessage} placement="bottom-start">
-      <StyledTextField
-        autoComplete="new-password"
-        inputRef={inputRef}
-        hiddenLabel
-        fullWidth
-        size="small"
-        variant="outlined"
-        spellCheck="false"
-        placeholder={props.placeholder ?? t("Filter conditions")}
-        sx={{ input: { py: 0.65, px: 1.25 } }}
-        onChange={onChange}
-        slotProps={{
-          input: {
-            sx: { pr: 1 },
-            endAdornment: (
-              <Box display="flex">
-                <Tooltip title={t("Match Case")}>
-                  <div>
-                    <SvgIcon
-                      component={matchCaseIcon}
-                      {...iconStyle}
-                      aria-label={matchCase ? "active" : "inactive"}
-                      onClick={() => setMatchCase(!matchCase)}
-                    />
-                  </div>
-                </Tooltip>
-                <Tooltip title={t("Match Whole Word")}>
-                  <div>
-                    <SvgIcon
-                      component={matchWholeWordIcon}
-                      {...iconStyle}
-                      aria-label={matchWholeWord ? "active" : "inactive"}
-                      onClick={() => setMatchWholeWord(!matchWholeWord)}
-                    />
-                  </div>
-                </Tooltip>
-                <Tooltip title={t("Use Regular Expression")}>
-                  <div>
-                    <SvgIcon
-                      component={useRegularExpressionIcon}
-                      aria-label={useRegularExpression ? "active" : "inactive"}
-                      {...iconStyle}
-                      onClick={() =>
-                        setUseRegularExpression(!useRegularExpression)
-                      }
-                    />{" "}
-                  </div>
-                </Tooltip>
-              </Box>
-            ),
-          },
-        }}
-      />
-    </Tooltip>
+    <div className="w-full">
+      <div className="relative">
+        {/* Добавляем правый отступ, чтобы текст не заезжал под иконки */}
+        <Input
+          placeholder={props.placeholder ?? t("Filter conditions")}
+          value={text}
+          onChange={handleChange}
+          className="pr-28" // pr-[112px]
+        />
+        {/* Контейнер для иконок, абсолютно спозиционированный справа */}
+        <div className="absolute inset-y-0 right-0 flex items-center pr-2">
+          <TooltipProvider delayDuration={100}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant={getToggleVariant(matchCase)} size="icon" className="h-7 w-7" onClick={() => setMatchCase(!matchCase)}>
+                  <CaseSensitive className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent><p>{t("Match Case")}</p></TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant={getToggleVariant(matchWholeWord)} size="icon" className="h-7 w-7" onClick={() => setMatchWholeWord(!matchWholeWord)}>
+                  <WholeWord className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent><p>{t("Match Whole Word")}</p></TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant={getToggleVariant(useRegularExpression)} size="icon" className="h-7 w-7" onClick={() => setUseRegularExpression(!useRegularExpression)}>
+                  <Regex className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent><p>{t("Use Regular Expression")}</p></TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+      {/* Отображение ошибки под полем ввода */}
+      {errorMessage && <p className="mt-1 text-xs text-destructive">{errorMessage}</p>}
+    </div>
   );
 };