next-helios-fe 1.6.13 → 1.6.15

package/src/components/form/other/select.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, { useState, useEffect, useRef } from "react";
+import { Dropdown } from "../../../components";
 import { Icon } from "@iconify/react";
-import { createPortal } from "react-dom";
 
 export interface SelectProps
   extends React.SelectHTMLAttributes<HTMLSelectElement> {
@@ -27,13 +27,9 @@ export const Select: React.FC<SelectProps> = ({
 }) => {
   const [tempValue, setTempValue] = useState("");
   const [openDropdown, setOpenDropdown] = useState(false);
-  const [position, setPosition] = useState<{
-    top: number;
-    left: number;
-  } | null>(null);
   const [dropdownWidth, setDropdownWidth] = useState<number>(0);
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLButtonElement>(null);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
@@ -43,51 +39,13 @@ export const Select: React.FC<SelectProps> = ({
       : "py-1.5";
 
   useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(e.target as Node) &&
-        !triggerRef.current?.contains(e.target as Node)
-      ) {
+    document.addEventListener("mousedown", (e) => {
+      if (e.target instanceof HTMLElement) {
         setOpenDropdown(false);
       }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
+    });
   }, []);
 
-  useEffect(() => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
-      const dropdownHeight = dropdownRef.current?.offsetHeight || 0;
-      const windowHeight = window.innerHeight;
-
-      setPosition({
-        top: rect.bottom + window.scrollY + 10,
-        left: rect.left + window.scrollX,
-      });
-
-      setDropdownWidth(rect.width);
-
-      if (rect.bottom + dropdownHeight > windowHeight) {
-        setPosition((prev) =>
-          prev
-            ? { ...prev, top: rect.top + window.scrollY - dropdownHeight - 10 }
-            : null
-        );
-      }
-    }
-
-    if (openDropdown) {
-      document.getElementById("body")!.style.overflow = "hidden";
-    } else {
-      document.getElementById("body")!.style.overflow = "auto";
-    }
-  }, [openDropdown]);
-
   useEffect(() => {
     if (rest.value || rest.value === "") {
       setTempValue(rest.value as string);
@@ -108,24 +66,27 @@ export const Select: React.FC<SelectProps> = ({
   }, [tempValue]);
 
   return (
-    <label className={`grid gap-2 ${width}`}>
-      {label && (
-        <span
-          className={`text-sm select-none ${
-            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
-          }`}
-        >
-          {label}
-        </span>
-      )}
-      <div className="relative" ref={triggerRef}>
-        <div
-          className="relative flex items-center cursor-pointer"
-          onClick={() => setOpenDropdown(!openDropdown)}
-        >
+    <div className="flex flex-row-reverse items-end">
+      <label className={`grid gap-2 ${width}`}>
+        {label && (
+          <span
+            className={`text-sm select-none ${
+              rest.required &&
+              "after:content-['*'] after:ml-1 after:text-danger"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        <div className="relative flex items-center cursor-pointer">
           <input
+            ref={inputRef}
             type="text"
-            className={`w-full px-4 border-default border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 disabled:cursor-default ${height}`}
+            className={`w-full px-4 border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-slate-300 focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 disabled:cursor-default ${height} ${
+              openDropdown
+                ? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
+                : "border-default placeholder:translate-x-0"
+            }`}
             placeholder={placeholder}
             required={rest.required}
             disabled={rest.disabled}
@@ -134,55 +95,67 @@ export const Select: React.FC<SelectProps> = ({
                 ? menus.find((item) => item.value === tempValue)?.label
                 : ""
             }
-            onClick={() => setOpenDropdown(true)}
+            onClick={(e) => {
+              e.preventDefault();
+              setOpenDropdown(true);
+              dropdownRef.current?.click();
+              setDropdownWidth(
+                inputRef?.current?.getBoundingClientRect()?.width || 0
+              );
+            }}
           />
           <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
             <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
           </div>
         </div>
-        {openDropdown &&
-          position &&
-          createPortal(
-            <div
+        <select className="hidden" {...rest}>
+          {menus.map((item, index) => (
+            <option key={index} value={item.value}>
+              {item.label}
+            </option>
+          ))}
+        </select>
+      </label>
+      <div className="w-0 overflow-hidden">
+        <Dropdown
+          placement="bottom-start"
+          trigger={
+            <button
+              type="button"
               ref={dropdownRef}
-              className="absolute max-h-40 p-1 z-50 pointer-events-auto bg-secondary-bg shadow border rounded-md overflow-auto"
-              style={{
-                top: position.top,
-                left: position.left,
-                width: dropdownWidth,
-              }}
+              className={`w-0 my-0.5 ${height}`}
             >
-              {menus.length === 0 ? (
-                <div className="flex justify-center">
-                  <span className="px-4 py-1">No data found</span>
-                </div>
-              ) : (
-                menus.map((item, index) => (
-                  <button
-                    key={index}
-                    type="button"
-                    className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default hover:bg-secondary-light disabled:bg-primary-transparent"
-                    disabled={tempValue === item.value}
-                    onMouseDown={() => {
-                      setTempValue(item.value);
-                      setOpenDropdown(false);
-                    }}
-                  >
-                    {item.label}
-                  </button>
-                ))
-              )}
-            </div>,
-            document.body
-          )}
+              1
+            </button>
+          }
+        >
+          <div
+            style={{
+              width: dropdownWidth - 11,
+            }}
+          >
+            {menus.length === 0 ? (
+              <div className="flex justify-center">
+                <span className="px-4 py-1">No data found</span>
+              </div>
+            ) : (
+              menus.map((item, index) => (
+                <button
+                  key={index}
+                  type="button"
+                  className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                  disabled={tempValue === item.value}
+                  onClick={() => {
+                    setTempValue(item.value);
+                  }}
+                >
+                  {item.label}
+                </button>
+              ))
+            )}
+          </div>
+        </Dropdown>
       </div>
-      <select className="hidden" {...rest}>
-        {menus.map((item, index) => (
-          <option key={index} value={item.value}>
-            {item.label}
-          </option>
-        ))}
-      </select>
-    </label>
+    </div>
   );
 };