feat: selectbox action component
This commit is contained in:
parent
d5791bf5ed
commit
1a8ebaf88d
|
@ -214,7 +214,7 @@ function App({ ctx }) {
|
||||||
<>
|
<>
|
||||||
<section className="pt-8 container">
|
<section className="pt-8 container">
|
||||||
<Input type="text"
|
<Input type="text"
|
||||||
className="bg-background p-4"
|
className="bg-background"
|
||||||
placeholder="..."
|
placeholder="..."
|
||||||
value={newText}
|
value={newText}
|
||||||
onKeyUp={parseTodos}
|
onKeyUp={parseTodos}
|
||||||
|
|
|
@ -7,16 +7,53 @@ export interface InputProps
|
||||||
|
|
||||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
({ className, type, ...props }, ref) => {
|
({ className, type, ...props }, ref) => {
|
||||||
|
const [selectedIndex, setSelectedIndex] = React.useState(0)
|
||||||
|
const options = ["add", "done", "delete"]
|
||||||
|
|
||||||
|
const handleWheel = (event: React.WheelEvent) => {
|
||||||
|
event.preventDefault()
|
||||||
|
if (event.deltaY > 0) {
|
||||||
|
// Scroll down
|
||||||
|
setSelectedIndex((prev) => (prev + 1) % options.length)
|
||||||
|
} else {
|
||||||
|
// Scroll up
|
||||||
|
setSelectedIndex((prev) => (prev - 1 + options.length) % options.length)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<input
|
<div className="relative"
|
||||||
type={type}
|
onWheel={handleWheel}
|
||||||
className={cn(
|
>
|
||||||
"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",
|
<select
|
||||||
className
|
className={cn(
|
||||||
)}
|
"absolute top-0 left-0 h-9 rounded-l-md border-r border-input bg-transparent px-2 text-sm cursor-default",
|
||||||
ref={ref}
|
"shadow-sm transition-all duration-200 text-center appearance-none",
|
||||||
{...props}
|
)}
|
||||||
/>
|
value={options[selectedIndex]}
|
||||||
|
onChange={(e) => {
|
||||||
|
setSelectedIndex(options.indexOf(e.target.value))
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="" disabled selected>
|
||||||
|
Actions
|
||||||
|
</option>
|
||||||
|
{options.map((option) => (
|
||||||
|
<option key={option} value={option}>
|
||||||
|
{option}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
"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",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in a new issue