next-helios-fe 1.0.0

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

@@ -0,0 +1,199 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Icon } from "@iconify/react";
+import { createPortal } from "react-dom";
+
+export interface AutocompleteProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+  menus: {
+    label: string;
+    value: string;
+    [key: string]: any;
+  }[];
+  placeholder?: string;
+}
+
+export const Autocomplete: React.FC<AutocompleteProps> = ({
+  options,
+  label,
+  menus,
+  placeholder,
+  ...rest
+}) => {
+  const [tempValue, setTempValue] = useState("");
+  const [isOpen, setIsOpen] = 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 width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "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)
+      ) {
+        setIsOpen(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 (isOpen) {
+      document.getElementById("body")!.style.overflow = "hidden";
+    } else {
+      document.getElementById("body")!.style.overflow = "auto";
+    }
+  }, [isOpen, tempValue]);
+
+  useEffect(() => {
+    if (rest.value) {
+      setTempValue(rest.value as string);
+      return;
+    } else if (rest.defaultValue) {
+      setTempValue(rest.defaultValue as string);
+      return;
+    }
+  }, [rest.value, rest.defaultValue]);
+
+  useEffect(() => {
+    if (tempValue) {
+      rest.onChange &&
+        rest.onChange({
+          target: { value: tempValue } as HTMLSelectElement,
+        } as any);
+    }
+  }, [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={() => setIsOpen(!isOpen)}
+        >
+          <input
+            type="text"
+            className={`w-full px-4 border-default border rounded-md bg-secondary-bg 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 ${height}`}
+            placeholder={placeholder}
+            disabled={rest.disabled}
+            value={tempValue}
+            onChange={(e) => {
+              setTempValue(e.target.value);
+            }}
+            onClick={() => {
+              setIsOpen(true);
+              setTempValue("");
+            }}
+          />
+          <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
+            <Icon icon={`gravity-ui:chevron-${isOpen ? "up" : "down"}`} />
+          </div>
+        </div>
+        {isOpen &&
+          position &&
+          createPortal(
+            <div
+              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,
+              }}
+            >
+              {menus.filter((item) =>
+                item.label.toLowerCase().includes(tempValue.toLowerCase())
+              ).length === 0 ? (
+                <div className="flex justify-center">
+                  <span className="px-4 py-1">No data found</span>
+                </div>
+              ) : (
+                menus
+                  .filter((item) =>
+                    item.label.toLowerCase().includes(tempValue.toLowerCase())
+                  )
+                  .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 ${
+                        (menus.find((item) => item.value === rest.value)
+                          ?.label || tempValue) === item.label
+                          ? "bg-primary-transparent cursor-default"
+                          : "hover:bg-secondary-light "
+                      }`}
+                      onMouseDown={() => {
+                        setTempValue(item.label);
+                        setIsOpen(false);
+                      }}
+                    >
+                      {item.label}
+                    </button>
+                  ))
+              )}
+            </div>,
+            document.body
+          )}
+      </div>
+      <select className="hidden" {...rest}>
+        {menus.map((item, index) => (
+          <option key={index} value={item.value}>
+            {item.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+};

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

@@ -0,0 +1,211 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Icon } from "@iconify/react";
+import { createPortal } from "react-dom";
+
+export interface MultipleSelectProps
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "onChange" | "value"
+  > {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+  menus: {
+    label: string;
+    value: string;
+    [key: string]: any;
+  }[];
+  placeholder?: string;
+  required?: boolean;
+  value?: string[];
+  onClick?: () => void;
+  onChange?: (e: {
+    target: {
+      value: string[];
+    };
+  }) => void;
+}
+
+export const MultipleSelect: React.FC<MultipleSelectProps> = ({
+  options,
+  label,
+  menus,
+  placeholder,
+  required,
+  value,
+  onClick,
+  onChange,
+  ...rest
+}) => {
+  const [tempValue, setTempValue] = useState<string[]>([]);
+  const [isOpen, setIsOpen] = 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 width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-0.5"
+      : options?.height === "high"
+      ? "py-1.5"
+      : "py-1";
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node) &&
+        !triggerRef.current?.contains(e.target as Node)
+      ) {
+        setIsOpen(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 (isOpen) {
+      document.getElementById("body")!.style.overflow = "hidden";
+    } else {
+      document.getElementById("body")!.style.overflow = "auto";
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (value) {
+      setTempValue(value);
+      return;
+    }
+  }, [value]);
+
+  useEffect(() => {
+    onChange &&
+      onChange({
+        target: { value: tempValue },
+      });
+  }, [tempValue]);
+
+  return (
+    <label className={`grid gap-2 ${width}`}>
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <div className="relative" ref={triggerRef}>
+        <button
+          type="button"
+          className={`group/button flex justify-between items-center gap-2 w-full min-h-10 px-4 border-default border rounded-md bg-secondary-bg cursor-pointer caret-transparent 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}`}
+          disabled={rest.disabled}
+          onClick={() => {
+            onClick && onClick();
+            setIsOpen(true);
+          }}
+          {...rest}
+        >
+          {!tempValue || tempValue?.length === 0 ? (
+            <span className="text-slate-300 duration-300 translate-x-0 group-focus/button:translate-x-1">
+              {placeholder}
+            </span>
+          ) : (
+            <div className="flex flex-wrap gap-2 h-min">
+              {tempValue?.map((item) => {
+                return (
+                  <div
+                    key={item}
+                    className="flex items-center gap-2 px-2 py-0.5 rounded-md bg-primary text-white cursor-default"
+                  >
+                    <span>{menus.find((i) => i.value === item)?.label}</span>
+                    <div
+                      className="cursor-pointer"
+                      onClick={() => {
+                        setTempValue(tempValue.filter((i) => i !== item));
+                      }}
+                    >
+                      <Icon icon="pajamas:close" />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          <div className="text-xl text-slate-400 pointer-events-none">
+            <Icon icon={`gravity-ui:chevron-${isOpen ? "up" : "down"}`} />
+          </div>
+        </button>
+        {isOpen &&
+          position &&
+          createPortal(
+            <div
+              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,
+              }}
+            >
+              {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?.find((i) => i === item.value) ? true : false
+                    }
+                    onMouseDown={() => {
+                      setTempValue([...tempValue, item.value]);
+                    }}
+                  >
+                    {item.label}
+                  </button>
+                ))
+              )}
+            </div>,
+            document.body
+          )}
+      </div>
+    </label>
+  );
+};