this repo has no description
feat: selectbox action component
+47
-10
+1
-1
mast-react-vite/src/App.tsx
+1
-1
mast-react-vite/src/App.tsx
+46
-9
mast-react-vite/src/components/ui/input.tsx
+46
-9
mast-react-vite/src/components/ui/input.tsx
···
7
7
8
8
const Input = React.forwardRef<HTMLInputElement, InputProps>(
9
9
({ className, type, ...props }, ref) => {
10
+
const [selectedIndex, setSelectedIndex] = React.useState(0)
11
+
const options = ["add", "done", "delete"]
12
+
13
+
const handleWheel = (event: React.WheelEvent) => {
14
+
event.preventDefault()
15
+
if (event.deltaY > 0) {
16
+
// Scroll down
17
+
setSelectedIndex((prev) => (prev + 1) % options.length)
18
+
} else {
19
+
// Scroll up
20
+
setSelectedIndex((prev) => (prev - 1 + options.length) % options.length)
21
+
}
22
+
}
23
+
10
24
return (
11
-
<input
12
-
type={type}
13
-
className={cn(
14
-
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
15
-
className
16
-
)}
17
-
ref={ref}
18
-
{...props}
19
-
/>
25
+
<div className="relative"
26
+
onWheel={handleWheel}
27
+
>
28
+
<select
29
+
className={cn(
30
+
"absolute top-0 left-0 h-9 rounded-l-md border-r border-input bg-transparent px-2 text-sm cursor-default",
31
+
"shadow-sm transition-all duration-200 text-center appearance-none",
32
+
)}
33
+
value={options[selectedIndex]}
34
+
onChange={(e) => {
35
+
setSelectedIndex(options.indexOf(e.target.value))
36
+
}}
37
+
>
38
+
<option value="" disabled selected>
39
+
Actions
40
+
</option>
41
+
{options.map((option) => (
42
+
<option key={option} value={option}>
43
+
{option}
44
+
</option>
45
+
))}
46
+
</select>
47
+
<input
48
+
type={type}
49
+
className={cn(
50
+
"flex h-9 w-full rounded-md border border-input bg-background px-[90px] text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
51
+
className
52
+
)}
53
+
ref={ref}
54
+
{...props}
55
+
/>
56
+
</div>
20
57
)
21
58
}
22
59
)