kelt-ui-kit-react 2.0.8 → 2.1.0

package/src/search/Search.tsx

@@ -1,161 +1,161 @@
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { DynamicForm } from "../form/Form";
-import { TypeInputEnum } from "../form/form.enum";
-import { FormInterface, FormValuesInterface } from "../form/form.interface";
-import { Icon } from "../icon/Icon";
-import "./search.css";
-
-interface SearchProps {
-  children?: JSX.Element;
-  placeholder?: string;
-  isVisible?: boolean;
-  focus?: boolean;
-  name?: string;
-  id?: string;
-  debounceTime?: number;
-  handleChange?: (values: FormValuesInterface<FormData>) => void;
-  setIsVisible?: (visible: boolean) => void;
-}
-
-interface FormData {
-  recherche: string;
-  [key: string]: string | number | boolean | Date | string[]; // Signature d'index ajoutée
-}
-
-export const Search = forwardRef<
-  {
-    clearInput: (name: string) => void;
-    resetForm: () => void;
-    focusInitialElement: () => void;
-  },
-  SearchProps
->(
-  (
-    {
-      children,
-      name,
-      placeholder,
-      isVisible,
-      focus,
-      debounceTime,
-      handleChange,
-      setIsVisible,
-      id,
-    },
-    ref
-  ) => {
-    const [isOpen, setIsOpen] = useState(isVisible ?? false);
-    const debounceRef = useRef<NodeJS.Timeout | null>(null);
-    const formRef = useRef<{
-      clearInput: (name: string) => void;
-      resetForm: () => void;
-      focusInitialElement: () => void;
-    }>(null);
-
-    const initialValues: FormInterface[] = useMemo(
-      () => [
-        {
-          value: "",
-          id: id,
-          name: name ?? "recherche",
-          placeholder: placeholder ?? "Recherche",
-          type: TypeInputEnum.TEXT,
-          focus: focus,
-          icon: "bi-search",
-          className: "search-input",
-          autoComplete: "off",
-        },
-      ],
-      [placeholder, focus]
-    );
-
-    useEffect(() => {
-      if (isVisible !== undefined) {
-        setIsOpen(isVisible);
-      }
-    }, [isVisible]);
-
-    const setShowSearch = useCallback(
-      (value: boolean) => {
-        if (setIsVisible) {
-          setIsVisible(value);
-        }
-        setIsOpen(value);
-      },
-      [setIsVisible]
-    );
-
-    const onChange = useCallback(
-      (values: FormValuesInterface<FormData>) => {
-        if (!values || !values[name ?? "recherche"]) {
-          return setShowSearch(false);
-        }
-        setShowSearch(true);
-
-        if (debounceRef.current) {
-          clearTimeout(debounceRef.current);
-        }
-
-        debounceRef.current = setTimeout(() => {
-          if (handleChange) {
-            handleChange(values);
-          }
-        }, debounceTime ?? 500);
-      },
-      [setShowSearch, handleChange, debounceTime]
-    );
-
-    const handleSubmit = useCallback(
-      (values: FormValuesInterface<FormData>) => {
-        console.log("Form Submitted: ", values);
-      },
-      []
-    );
-
-    // Expose clearInput et resetForm via le ref du parent
-    useImperativeHandle(ref, () => ({
-      clearInput: (name: string) => {
-        formRef.current?.clearInput(name);
-      },
-      resetForm: () => {
-        formRef.current?.resetForm();
-      },
-      focusInitialElement: () => {
-        formRef.current?.focusInitialElement();
-      },
-    }));
-
-    return (
-      <div className="search">
-        <DynamicForm
-          ref={formRef}
-          onSubmit={handleSubmit}
-          onChange={onChange}
-          hideSubmit={true}
-          initialForm={initialValues}
-        />
-        {isOpen && (
-          <div className="search-result">
-            <div className="search-result-close">
-              <button
-                className="toggle-btn"
-                onClick={() => setShowSearch(false)}
-              >
-                <Icon classIcon="bi-x-lg" />
-              </button>
-            </div>
-            <div className="search-result-content">{children}</div>
-          </div>
-        )}
-      </div>
-    );
-  }
-);
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { DynamicForm } from "../form/Form";
+import { TypeInputEnum } from "../form/form.enum";
+import { FormInterface, FormValuesInterface } from "../form/form.interface";
+import { Icon } from "../icon/Icon";
+import "./search.css";
+
+interface SearchProps {
+  children?: JSX.Element;
+  placeholder?: string;
+  isVisible?: boolean;
+  focus?: boolean;
+  name?: string;
+  id?: string;
+  debounceTime?: number;
+  handleChange?: (values: FormValuesInterface<FormData>) => void;
+  setIsVisible?: (visible: boolean) => void;
+}
+
+interface FormData {
+  recherche: string;
+  [key: string]: string | number | boolean | Date | string[]; // Signature d'index ajoutée
+}
+
+export const Search = forwardRef<
+  {
+    clearInput: (name: string) => void;
+    resetForm: () => void;
+    focusInitialElement: () => void;
+  },
+  SearchProps
+>(
+  (
+    {
+      children,
+      name,
+      placeholder,
+      isVisible,
+      focus,
+      debounceTime,
+      handleChange,
+      setIsVisible,
+      id,
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(isVisible ?? false);
+    const debounceRef = useRef<NodeJS.Timeout | null>(null);
+    const formRef = useRef<{
+      clearInput: (name: string) => void;
+      resetForm: () => void;
+      focusInitialElement: () => void;
+    }>(null);
+
+    const initialValues: FormInterface[] = useMemo(
+      () => [
+        {
+          value: "",
+          id: id,
+          name: name ?? "recherche",
+          placeholder: placeholder ?? "Recherche",
+          type: TypeInputEnum.TEXT,
+          focus: focus,
+          icon: "bi-search",
+          className: "search-input",
+          autoComplete: "off",
+        },
+      ],
+      [placeholder, focus]
+    );
+
+    useEffect(() => {
+      if (isVisible !== undefined) {
+        setIsOpen(isVisible);
+      }
+    }, [isVisible]);
+
+    const setShowSearch = useCallback(
+      (value: boolean) => {
+        if (setIsVisible) {
+          setIsVisible(value);
+        }
+        setIsOpen(value);
+      },
+      [setIsVisible]
+    );
+
+    const onChange = useCallback(
+      (values: FormValuesInterface<FormData>) => {
+        if (!values || !values[name ?? "recherche"]) {
+          return setShowSearch(false);
+        }
+        setShowSearch(true);
+
+        if (debounceRef.current) {
+          clearTimeout(debounceRef.current);
+        }
+
+        debounceRef.current = setTimeout(() => {
+          if (handleChange) {
+            handleChange(values);
+          }
+        }, debounceTime ?? 500);
+      },
+      [setShowSearch, handleChange, debounceTime]
+    );
+
+    const handleSubmit = useCallback(
+      (values: FormValuesInterface<FormData>) => {
+        console.log("Form Submitted: ", values);
+      },
+      []
+    );
+
+    // Expose clearInput et resetForm via le ref du parent
+    useImperativeHandle(ref, () => ({
+      clearInput: (name: string) => {
+        formRef.current?.clearInput(name);
+      },
+      resetForm: () => {
+        formRef.current?.resetForm();
+      },
+      focusInitialElement: () => {
+        formRef.current?.focusInitialElement();
+      },
+    }));
+
+    return (
+      <div className="search">
+        <DynamicForm
+          ref={formRef}
+          onSubmit={handleSubmit}
+          onChange={onChange}
+          hideSubmit={true}
+          initialForm={initialValues}
+        />
+        {isOpen && (
+          <div className="search-result">
+            <div className="search-result-close">
+              <button
+                className="toggle-btn"
+                onClick={() => setShowSearch(false)}
+              >
+                <Icon classIcon="bi-x-lg" />
+              </button>
+            </div>
+            <div className="search-result-content">{children}</div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);

package/src/search/Search.view.tsx

@@ -1,14 +1,14 @@
-import { FormValuesInterface } from "../form/form.interface";
-import { Search } from "./Search";
-interface FormData {
-  recherche: string;
-  [key: string]: string | number | boolean | Date | string[]; // Signature d'index ajoutée
-}
-export const SearchView = (): JSX.Element => {
-  const onChange = (values: FormValuesInterface<FormData>) => {
-    console.log(values);
-  };
-  return (
-    <Search focus={true} handleChange={onChange} children={<div>test</div>} />
-  );
-};
+import { FormValuesInterface } from "../form/form.interface";
+import { Search } from "./Search";
+interface FormData {
+  recherche: string;
+  [key: string]: string | number | boolean | Date | string[]; // Signature d'index ajoutée
+}
+export const SearchView = (): JSX.Element => {
+  const onChange = (values: FormValuesInterface<FormData>) => {
+    console.log(values);
+  };
+  return (
+    <Search focus={true} handleChange={onChange} children={<div>test</div>} />
+  );
+};

package/src/search/search.css

@@ -1,59 +1,59 @@
-.search {
-  position: relative;
-  .search-input {
-    border: 0px;
-    background-color: #ebe8e8;
-    border-radius: 4px;
-    padding: 0.75rem;
-    flex-direction: row;
-    align-items: center;
-    .bi {
-      color: #868585;
-      font-size: 1rem;
-    }
-    input {
-      border: none;
-      background-color: transparent;
-      border-radius: 0px;
-      padding: 0px;
-      margin-left: 0.25rem;
-      padding: 0.25rem 0.5rem;
-      width: 100%;
-      outline: none;
-      min-width: auto;
-    }
-  }
-  .search-result {
-    position: absolute;
-    width: 100%;
-    top: 70px;
-    border: 1px solid #cfbdbd;
-    min-height: 100px;
-    z-index: 3;
-    background-color: #fff;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
-    padding: 0rem 1rem;
-    .search-result-close {
-      position: relative;
-
-      .toggle-btn {
-        position: absolute;
-        right: -10px;
-        top: 10px;
-
-        .bi {
-          font-size: 1rem;
-        }
-      }
-    }
-
-    .search-result-content {
-      margin-right: 1rem;
-      padding: 1rem 0rem;
-      & > div {
-        max-height: 350px;
-        overflow: auto;
-      }
-    }
-  }
-}
+.search {
+  position: relative;
+  .search-input {
+    border: 0px;
+    background-color: #ebe8e8;
+    border-radius: 4px;
+    padding: 0.75rem;
+    flex-direction: row;
+    align-items: center;
+    .bi {
+      color: #868585;
+      font-size: 1rem;
+    }
+    input {
+      border: none;
+      background-color: transparent;
+      border-radius: 0px;
+      padding: 0px;
+      margin-left: 0.25rem;
+      padding: 0.25rem 0.5rem;
+      width: 100%;
+      outline: none;
+      min-width: auto;
+    }
+  }
+  .search-result {
+    position: absolute;
+    width: 100%;
+    top: 70px;
+    border: 1px solid #cfbdbd;
+    min-height: 100px;
+    z-index: 3;
+    background-color: #fff;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
+    padding: 0rem 1rem;
+    .search-result-close {
+      position: relative;
+
+      .toggle-btn {
+        position: absolute;
+        right: -10px;
+        top: 10px;
+
+        .bi {
+          font-size: 1rem;
+        }
+      }
+    }
+
+    .search-result-content {
+      margin-right: 1rem;
+      padding: 1rem 0rem;
+      & > div {
+        max-height: 350px;
+        overflow: auto;
+      }
+    }
+  }
+}