You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 lines
1.1 KiB
JavaScript
25 lines
1.1 KiB
JavaScript
5 years ago
|
import React from 'react'
|
||
|
|
|
||
|
|
import styles from './styles.module.css'
|
||
|
|
|
||
|
|
export default function Input({label, minimum = 0, maximum, error, hint, name, value, onChange, onBlur, isValid}){
|
||
|
|
const current = parseInt(value, 10) || 0
|
||
|
|
const nextUp = maximum !== undefined ? Math.min(current + 1, maximum) : current + 1
|
||
|
|
const nextDown = minimum !== undefined ? Math.max(current - 1, minimum) : current - 1
|
||
|
|
|
||
|
|
const valueUp = ()=>onChange({target: {value: nextUp + ""}})
|
||
|
|
const valueDown = ()=>onChange({target: {value: nextDown + ""}})
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.formElementContainer}>
|
||
|
|
<label htmlFor={name}>{label}:</label>
|
||
|
|
<div className={styles.complexInput + ((isValid && !error)?'':' ' + styles.invalid)}>
|
||
|
|
<button type="button" disabled={value===minimum} onClick={valueDown}>-</button>
|
||
|
|
<input type="number" name={name} value={value} onChange={onChange} onBlur={onBlur} />
|
||
|
|
<button type="button" disabled={value===maximum} onClick={valueUp}>+</button>
|
||
|
|
</div>
|
||
|
|
<span className={styles.hint}>{error || (isValid ? '' : hint)}</span>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|