Refactor ButtonModuleColourInput to extend ButtonModuleTextInput

src/components/ButtonModule.js

@@ -57,10 +57,10 @@ export default class ButtonModule extends KtaneModule {
           {
             this.allColours.map(colour => (
               <ButtonModuleColourInput
-                colour={colour}
                 key={colour}
                 onChange={this.setColour}
-                stateColour={this.state.colour}
+                stateValue={this.state.colour}
+                value={colour}
               />
             ))
           }
@@ -73,8 +73,8 @@ export default class ButtonModule extends KtaneModule {
               <ButtonModuleTextInput
                 key={text}
                 onChange={this.setText}
-                stateText={this.state.text}
-                text={text}
+                stateValue={this.state.text}
+                value={text}
               />
             ))
           }

src/components/ButtonModuleColourInput.js

@@ -1,31 +1,12 @@
-import PropTypes from 'prop-types';
-import React, {Component} from "react";
+import React from "react";
+import ButtonModuleTextInput from "./ButtonModuleTextInput";
 
-export default class ButtonModuleColourInput extends Component {
-  render() {
+export default class ButtonModuleColourInput extends ButtonModuleTextInput {
+  getLabelContent() {
     return (
-      <label>
-        <input
-          checked={this.props.stateColour === this.props.colour}
-          name="buttonColour"
-          onChange={this.props.onChange}
-          type="radio"
-          value={this.props.colour}
-        />
-        <span className={`button ${this.props.colour}`}>
-          {this.props.colour.charAt(0).toUpperCase() + this.props.colour.slice(1)}
-        </span>
-      </label>
+      <span className={`button ${this.props.value}`}>
+        {this.props.value.charAt(0).toUpperCase() + this.props.value.slice(1)}
+      </span>
     )
   }
-
-  shouldComponentUpdate(nextProps) {
-    return this.props.stateColour !== nextProps.stateColour;
-  }
 }
-
-ButtonModuleColourInput.propTypes = {
-  colour: PropTypes.string,
-  onChange: PropTypes.func,
-  stateColour: PropTypes.string
-};

src/components/ButtonModuleTextInput.js

@@ -2,27 +2,31 @@ import PropTypes from 'prop-types';
 import React, {Component} from "react";
 
 export default class ButtonModuleTextInput extends Component {
+  getLabelContent() {
+    return this.props.value;
+  }
+
   render() {
     return (
       <label>
         <input
-          checked={this.props.stateText === this.props.text}
+          checked={this.props.stateValue === this.props.value}
           onChange={this.props.onChange}
           type="radio"
-          value={this.props.text}
+          value={this.props.value}
         />
-        {this.props.text}
+        {this.getLabelContent()}
       </label>
     )
   }
 
   shouldComponentUpdate(nextProps) {
-    return this.props.stateText !== nextProps.stateText;
+    return this.props.stateValue !== nextProps.stateValue;
   }
 }
 
 ButtonModuleTextInput.propTypes = {
   onChange: PropTypes.func,
-  stateText: PropTypes.string,
-  text: PropTypes.string
+  stateValue: PropTypes.string,
+  value: PropTypes.string
 };