@edu-tosel/design 1.0.53 → 1.0.55

package/version.txt

@@ -1 +1 @@
-1.0.53
+1.0.55

package/widget/template/Select/Select.LG.d.ts

@@ -1,2 +1,2 @@
 import { HTMLSelectElement } from "../../../interface";
-export default function SelectLG<T>({ state, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;
+export default function SelectLG<T>({ state, selectOptions, placeholder, options, }: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Select.LG.js

@@ -1,22 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useId, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
 import { useActionStore } from "../../../store";
 import { useFlag } from "../../../hook";
-0;
+import { cn } from "../../../util";
+import { useTransition, animated } from "react-spring";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
-    md: "w-40",
+    md: "w-38",
     lg: "w-50",
 };
 const heightSize = {
     xs: "h-6.5",
+    sm: "h-9",
 };
-export default function SelectLG({ state,
-// selectOptions,
-// placeholder,
-// options,
- }) {
+export default function SelectLG({ state, selectOptions, placeholder, options, }) {
     const id = useId();
     const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;
@@ -26,6 +24,8 @@ export default function SelectLG({ state,
     const [isHover, setIsHover] = useState(false);
     const [filteredOptions, setFilterdOptions] = useState([]);
     const [index, setIndex] = useState();
+    const listRef = useRef(null);
+    const itemRefs = useRef([]);
     useFlag({ state: [false, setIsOpen], safe: "overlay" });
     const onKeyDown = (e) => {
         if (!filteredOptions)
@@ -36,10 +36,71 @@ export default function SelectLG({ state,
             setText(filteredOptions[index][1]);
             return setValue(filteredOptions[index][0]);
         }
-        if (e.key === "ArrowDown")
-            return setIndex((index + 1) % filteredOptions.length);
-        if (e.key === "ArrowUp")
-            return setIndex((index - 1 + filteredOptions.length) % filteredOptions.length);
+        if (e.key === "ArrowDown") {
+            setIndex((index + 1) % filteredOptions.length);
+        }
+        if (e.key === "ArrowUp") {
+            setIndex((index - 1 + filteredOptions.length) % filteredOptions.length);
+        }
+    };
+    useEffect(() => {
+        setFilterdOptions(selectOptions?.filter(([_, text]) => text.includes(search)));
+    }, [search, selectOptions]);
+    useEffect(() => {
+        if (typeof index === "number" && itemRefs.current[index]) {
+            itemRefs.current[index]?.scrollIntoView({ block: "nearest" });
+        }
+    }, [index]);
+    const isLong = selectOptions && selectOptions.length >= 4;
+    const container = {
+        positions: "relative ",
+        displays: "flex flex-col",
+    };
+    const button = {
+        displays: "flex items-center",
+        sizes: `${widthSize[options?.width ?? "md"]} ${heightSize[options?.height ?? "sm"]}`,
+        styles: "pl-1 rounded-md focus:outline-none duration-100 text-gray-400",
+        shadow: isOpen || isHover ? "box-shadow" : "shadow-none",
+    };
+    const input = {
+        positions: "absolute z-30",
+        layouts: cn(button),
+        styles: "focus:outline-none text-xs pl-1.5",
+    };
+    const body = {
+        positions: "absolute z-30",
+        displays: "flex flex-col gap-1",
+        sizes: `${widthSize[options?.width ?? "md"]} min-h-6.5 max-h-40`,
+        paddings: "p-2",
+        styles: "bg-white box-shadow rounded-md box-shadow overflow-y-scroll",
+    };
+    const label = {
+        displays: "flex items-center",
+        sizes: "h-7 w-full",
+        paddings: "px-2",
+        styles: "rounded-sm duration-500",
+        fonts: "text-xs text-gray-dim hover:bg-green-dark hover:text-white",
     };
-    return _jsx("select", { className: "w-64 h-32 border-2" });
+    const inputTransition = useTransition(isOpen, {
+        from: { top: 44 },
+        enter: { top: 44 },
+        leave: { top: 44 },
+        config: { duration: 0 },
+    });
+    const bodyTransitions = useTransition(isOpen, {
+        from: { top: isLong ? 88 : 44 },
+        enter: { top: isLong ? 88 : 44 },
+        leave: { top: isLong ? 88 : 44 },
+        config: { duration: 0 },
+    });
+    return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, onClick: () => setIsOwn(true), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label), children: selectOptions?.find((option) => value === option[0])?.[1] })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
+                item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
+                return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: filteredOptions?.map(([value, text], order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
+                                setValue(value);
+                                setText(text);
+                                return setIsOpen(false);
+                            }, className: cn(label, order === index
+                                ? "bg-green-dark text-white w-full"
+                                : "w-auto"), children: text }) }, id + value))) })));
+            })] }));
 }

package/widget/template/Select/Select.js

@@ -7,7 +7,7 @@ import { useFlag } from "../../../hook";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
-    md: "w-40",
+    md: "w-38",
     lg: "w-50",
 };
 const heightSize = {