73 lines
3 KiB
TypeScript
73 lines
3 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useMemo, useState } from 'react'
|
|
import { MinusIcon, PlusIcon } from 'lucide-react'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
|
|
const clamp = (value: number, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) =>
|
|
Math.min(Math.max(value, min), max)
|
|
|
|
const InputWithEndButtonsDemo = () => {
|
|
const [value, setValue] = useState<number>(1024)
|
|
const minValue = 0
|
|
|
|
const formattedValue = useMemo(() => (Number.isFinite(value) ? value.toString() : ''), [value])
|
|
|
|
const handleManualChange = useCallback(
|
|
(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const digitsOnly = event.target.value.replace(/\D/g, '')
|
|
if (digitsOnly.length === 0) {
|
|
setValue(minValue)
|
|
return
|
|
}
|
|
const next = Number.parseInt(digitsOnly, 10)
|
|
setValue(clamp(next, minValue))
|
|
},
|
|
[minValue],
|
|
)
|
|
|
|
const handleIncrement = useCallback(() => setValue((current) => clamp(current + 1, minValue)), [minValue])
|
|
const handleDecrement = useCallback(() => setValue((current) => clamp(current - 1, minValue)), [minValue])
|
|
|
|
return (
|
|
<div className='w-full max-w-xs space-y-2'>
|
|
<Label className='flex items-center gap-2 text-sm font-medium leading-none text-muted-foreground'>
|
|
Input with end buttons
|
|
</Label>
|
|
<div className='dark:bg-input/30 relative inline-flex h-9 w-full min-w-0 items-center overflow-hidden rounded-md border border-input bg-transparent text-base shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/40 md:text-sm'>
|
|
<Input
|
|
className='selection:bg-primary selection:text-primary-foreground w-full grow px-3 py-2 text-center tabular-nums outline-none'
|
|
inputMode='numeric'
|
|
pattern='[0-9]*'
|
|
value={formattedValue}
|
|
onChange={handleManualChange}
|
|
/>
|
|
<Button
|
|
type='button'
|
|
variant='ghost'
|
|
className='border-input text-muted-foreground hover:bg-accent hover:text-foreground -me-px flex aspect-square h-[inherit] items-center justify-center rounded-none border-l text-sm transition-[color,box-shadow]'
|
|
onClick={handleDecrement}
|
|
disabled={value <= minValue}
|
|
>
|
|
<MinusIcon className='size-4' />
|
|
<span className='sr-only'>Decrement</span>
|
|
</Button>
|
|
<Button
|
|
type='button'
|
|
variant='ghost'
|
|
className='border-input text-muted-foreground hover:bg-accent hover:text-foreground flex aspect-square h-[inherit] items-center justify-center rounded-none border-l text-sm transition-[color,box-shadow]'
|
|
onClick={handleIncrement}
|
|
>
|
|
<PlusIcon className='size-4' />
|
|
<span className='sr-only'>Increment</span>
|
|
</Button>
|
|
</div>
|
|
<p className='text-xs text-muted-foreground'>Demonstração simples de input numérico com botões de incremento.</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default InputWithEndButtonsDemo
|