import React , { useState } from 'react' ; import { FaMinusCircle , FaPlusCircle } from 'react-icons/fa' ; import 'ProjectPlanner/Minutes.scss' ; type Props = { minutes : number ; min ? : number ; onChange ( minutes ) : void ; } ; export const Minutes = ( { minutes , min = 0 , onChange } ) => { function subtract ( ) { if ( minutes > min ) { onChange ( minutes - 1 ) ; } } function add ( ) { onChange ( minutes + 1 ) ; } function handleChange ( value ) { const int = parseInt ( value , 10 ) ; if ( ! isNaN ( int ) ) { onChange ( int ) ; } } function handleInputBlur ( event ) { if ( event . target . value . trim ( ) === '' ) { onChange ( 0 ) ; } } function handleInputKeyDown ( event ) { if ( event . key === 'ArrowUp' ) { event . preventDefault ( ) ; add ( ) ; } else if ( event . key === 'ArrowDown' ) { event . preventDefault ( ) ; subtract ( ) ; } } return ( < div className = "minutes" > < div > < button type = "button" onClick = { subtract } > < FaMinusCircle /> < /button> < /div> < input className = "form-field" type = "text" aria - label = "quantity" value = { minutes } onChange = { ( e ) => handleChange ( e . target . value ) } onBlur = { handleInputBlur } onKeyDown = { handleInputKeyDown } / > < div > < button type = "button" onClick = { add } > < FaPlusCircle /> < /button> < /div> < /div>); } ;