turniere-frontend/js/components/NumericInput.js

49 lines
1.7 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import {Button, InputGroup, InputGroupAddon, Input} from 'reactstrap';
import '../../static/css/numericinput.css';
export default class NumericInput extends React.Component {
render() {
return (<InputGroup>
<InputGroupAddon addonType="prepend">
<Button onClick={this.props.decrementCallback} className="btn-width" color={this.props.decrementColor}
outline={this.props.decrementOutline}>{this.props.decrementText}</Button>
</InputGroupAddon>
<Input className='font-weight-bold' value={this.props.value}
disabled type='number'/>
<InputGroupAddon addonType="append">
<Button onClick={this.props.incrementCallback} className="btn-width" color={this.props.incrementColor}
outline={this.props.incrementOutline}>{this.props.incrementText}</Button>
</InputGroupAddon>
</InputGroup>);
}
}
NumericInput.propTypes = {
decrementText: PropTypes.string.isRequired,
decrementCallback: PropTypes.func.isRequired,
decrementColor: PropTypes.oneOf([
'primary', 'secondary', 'success', 'info', 'warning', 'danger'
]),
decrementOutline: PropTypes.bool,
incrementText: PropTypes.string.isRequired,
incrementCallback: PropTypes.func.isRequired,
incrementColor: PropTypes.oneOf([
'primary', 'secondary', 'success', 'info', 'warning', 'danger'
]),
incrementOutline: PropTypes.bool,
value: PropTypes.number.isRequired
};
NumericInput.defaultProps = {
decrementColor: 'primary',
decrementOutline: true,
incrementColor: 'primary',
incrementOutline: true
};