Extract the numeric input as single component

js/components/NumericInput.js

@@ -0,0 +1,48 @@
+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
+};

pages/create.js

@@ -3,16 +3,15 @@ import React from 'react';
 import {notify} from 'react-notify-toast';
 import {connect} from 'react-redux';
 import posed from 'react-pose';
-import {Button, Card, CardBody, Container, CustomInput, Form, FormGroup,
+import {Button, Card, CardBody, Col, Container, CustomInput, Form, FormGroup, Input, Label} from 'reactstrap';
-    Input, InputGroup, InputGroupAddon, Label} from 'reactstrap';
 import {TurniereNavigation} from '../js/components/Navigation';
 import {Footer} from '../js/components/Footer';
 import EditableStringList from '../js/components/EditableStringList';
 import {createTournament} from '../js/api';
 
 import '../static/css/everypage.css';
-import '../static/css/create.css';
 import RequireLogin from '../js/components/RequireLogin';
+import NumericInput from '../js/components/NumericInput';
 
 class CreatePage extends React.Component {
     render() {
@@ -109,34 +108,20 @@ class CreateTournamentForm extends React.Component {
                     className="groupphasefader">
                     <FormGroup>
                         <Label for="teams-per-group">Anzahl Teams pro Gruppe</Label>
-                        <InputGroup>
+                        <Col xs="3" className="pl-0">
-                            <InputGroupAddon addonType="prepend">
+                            <NumericInput value={this.state.groupSize}
-                                <Button onClick={this.decreaseGroupSize} className="btn-width"
+                                incrementText="+1" incrementCallback={this.increaseGroupSize}
-                                    color='primary' outline>-1</Button>
+                                decrementText="-1" decrementCallback={this.decreaseGroupSize}/>
-                            </InputGroupAddon>
+                        </Col>
-                            <Input className='font-weight-bold' value={this.state.groupSize}
-                                disabled type='number' step='1' placeholder='0'/>
-                            <InputGroupAddon addonType="append">
-                                <Button onClick={this.increaseGroupSize} className="btn-width"
-                                    color='primary' outline>+1</Button>
-                            </InputGroupAddon>
-                        </InputGroup>
                     </FormGroup>
                     <FormGroup>
                         <Label for="teams-group-to-playoff">Wie viele Teams sollen nach der Gruppenphase
-                                weiterkommen?</Label>
+                            weiterkommen?</Label>
-                        <InputGroup>
+                        <Col xs="3" className="pl-0">
-                            <InputGroupAddon addonType="prepend">
+                            <NumericInput value={this.state.groupAdvance}
-                                <Button onClick={this.decreaseGroupAdvance} className="btn-width"
+                                incrementText="&#215;2" incrementCallback={this.increaseGroupAdvance}
-                                    color='primary' outline>&#247;2</Button>
+                                decrementText="&#247;2" decrementCallback={this.decreaseGroupAdvance}/>
-                            </InputGroupAddon>
+                        </Col>
-                            <Input className='font-weight-bold' value={this.state.groupAdvance}
-                                disabled type='number' step='1' placeholder='0'/>
-                            <InputGroupAddon addonType="append">
-                                <Button onClick={this.increaseGroupAdvance} className="btn-width"
-                                    color='primary' outline>&#215;2</Button>
-                            </InputGroupAddon>
-                        </InputGroup>
                     </FormGroup>
                 </GroupphaseFader>
             </Form>