asi-calculator/components/FormAmount/Inputs/InputAmount.tsx

37 lines
731 B
TypeScript
Raw Normal View History

2024-04-01 02:49:17 +02:00
'use client'
import { Dispatch, SetStateAction, useRef, useState } from 'react'
2024-03-30 20:50:51 +01:00
import styles from './InputAmount.module.css'
export function InputAmount({
amount,
setAmount
}: {
amount: number
setAmount: Dispatch<SetStateAction<number>>
}) {
2024-04-01 02:49:17 +02:00
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
const { value } = e.target
if (value === '') {
setAmount(0)
} else {
setAmount(Number(value))
}
}
2024-03-30 20:50:51 +01:00
return (
<input
className={styles.input}
type="text"
2024-03-30 23:12:29 +01:00
inputMode="numeric"
pattern="[0-9]*"
2024-03-30 20:50:51 +01:00
value={amount}
2024-04-01 02:49:17 +02:00
onChange={handleChange}
style={{
width: Math.min(Math.max(amount.toString().length, 2), 50) + 'ch'
}}
2024-03-30 20:50:51 +01:00
/>
)
}