@edu-tosel/design 1.0.51 → 1.0.53

package/version.txt

@@ -1 +1 @@
-1.0.51
+1.0.53

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

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

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { useActionStore } from "../../../store";
+import { useFlag } from "../../../hook";
+0;
+const widthSize = {
+    xs: "w-10",
+    sm: "w-22.5",
+    md: "w-40",
+    lg: "w-50",
+};
+const heightSize = {
+    xs: "h-6.5",
+};
+export default function SelectLG({ state,
+// selectOptions,
+// placeholder,
+// options,
+ }) {
+    const id = useId();
+    const { setIsOwn, setIsOwnId } = useActionStore();
+    const [value, setValue] = state;
+    const [text, setText] = useState("");
+    const [search, setSearch] = useState("");
+    const [isOpen, setIsOpen] = useState(false);
+    const [isHover, setIsHover] = useState(false);
+    const [filteredOptions, setFilterdOptions] = useState([]);
+    const [index, setIndex] = useState();
+    useFlag({ state: [false, setIsOpen], safe: "overlay" });
+    const onKeyDown = (e) => {
+        if (!filteredOptions)
+            return;
+        if (typeof index === "undefined")
+            return setIndex(0);
+        if (e.key === "Enter") {
+            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);
+    };
+    return _jsx("select", { className: "w-64 h-32 border-2" });
+}

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

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

package/widget/{design/Select.design.js → template/Select/Select.js}

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useState } from "react";
-import { cn } from "../../util";
+import { useEffect, useId, useRef, useState } from "react";
+import { cn } from "../../../util";
 import { useTransition, animated } from "react-spring";
-import { useActionStore } from "../../store";
-import { useFlag } from "../../hook";
+import { useActionStore } from "../../../store";
+import { useFlag } from "../../../hook";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
@@ -13,7 +13,7 @@ const widthSize = {
 const heightSize = {
     xs: "h-6.5",
 };
-export default function SelectDesign({ state, selectOptions, placeholder, options, }) {
+export default function Select({ state, selectOptions, placeholder, options, }) {
     const id = useId();
     const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;
@@ -41,6 +41,14 @@ export default function SelectDesign({ state, selectOptions, placeholder, option
     useEffect(() => {
         setFilterdOptions(selectOptions?.filter(([_, text]) => text.includes(search)));
     }, [search, selectOptions]);
+    // scrollIntoView
+    const listRef = useRef(null);
+    const itemRefs = useRef([]);
+    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 ",
@@ -101,7 +109,7 @@ export default function SelectDesign({ state, selectOptions, placeholder, option
     });
     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), children: filteredOptions?.map(([value, text], order) => (_jsx("section", { children: _jsx("button", { onClick: () => {
+                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);

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

@@ -0,0 +1,6 @@
+import _Select from "./Select";
+import LG from "./Select.LG";
+declare const Select: typeof _Select & {
+    LG: typeof LG;
+};
+export default Select;

package/widget/template/Select/index.js

@@ -0,0 +1,4 @@
+import _Select from "./Select";
+import LG from "./Select.LG";
+const Select = Object.assign(_Select, { LG });
+export default Select;

package/modal/template/ConfirmModal/Tag.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ConfirmModal from "../../design/ConfirmModal.design";
-import { cn } from "../../../util";
-import { selectOne, selectPlural } from "../../../util/select";
-export default function Tag(props) {
-    const { state, tags, options } = props.tag;
-    const { selectHow } = options || { selectHow: "plural" };
-    const button = (key) => ({
-        sizes: "h-10",
-        styles: "rounded-full",
-        animations: "duration-300",
-        boundaries: state[0].includes(key)
-            ? "bg-green-dark text-white"
-            : "border border-gray-medium",
-    });
-    return (_jsx(ConfirmModal, { ...props, children: _jsx("div", { className: "grid grid-cols-4 gap-2.5 mt-4.75", children: tags.map(([key, value]) => (_jsx("button", { onClick: () => selectHow === "one"
-                    ? selectOne({ state, key })
-                    : selectPlural({ state, key }), className: cn(button(key)), children: value }, key))) }) }));
-}

package/widget/design/Select.design.d.ts

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

package/widget/template/Select.d.ts

@@ -1,3 +0,0 @@
-import { HTMLSelectElement } from "../../interface";
-declare function Select<T>(props: HTMLSelectElement<T>): import("react/jsx-runtime").JSX.Element;
-export default Select;

package/widget/template/Select.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import SelectDesign from "../design/Select.design";
-function Select(props) {
-    return _jsx(SelectDesign, { ...props });
-}
-export default Select;