import * as React from 'react' ; import { FaMinusCircle , FaPlusCircle } from 'react-icons/fa' ; import 'YesterTech/Quantity.scss' ; import { ReactFCNoChildren } from 'YesterTech/types' ; interface QuantityProps { onChange ( value ) : any ; quantity ? : number ; } const Quantity = ( { onChange , quantity = 1 , } ) : React . ReactElement => { function subtract ( ) { if ( quantity > 0 ) { onChange ( quantity - 1 ) ; } } function add ( ) { onChange ( quantity + 1 ) ; } function handleInputChange ( event ) { const int = parseInt ( event . target . 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 = "quantity-picker" > < div > < div > < button type = "button" className = "icon-button" onClick = { subtract } aria - label = "Remove an item" > < FaMinusCircle /> < /button> < /div> < div className = "input-container" > < input type = "text" aria - label = "quantity" value = { quantity } onChange = { handleInputChange } onBlur = { handleInputBlur } onKeyDown = { handleInputKeyDown } / > < /div> < div > < button type = "button" className = "icon-button" onClick = { add } aria - label = "Add an item" > < FaPlusCircle /> < /button> < /div> < /div> < /div>); } ; export default Quantity ;