Separate modification slider in to its own component

src/app/components/ModificationsMenu.jsx

@@ -5,7 +5,7 @@ import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
 import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
 import { Modifications } from 'coriolis-data/dist';
-import NumberEditor from 'react-number-editor';
+import Modification from './Modification';
 
 const PRESS_THRESHOLD = 500; // mouse/touch down threshold
 
@@ -39,59 +39,14 @@ export default class ModificationsMenu extends TranslatedComponent {
   _initState(props, context) {
     let translate = context.language.translate;
     let formats = context.language.formats;
-    let { m  } = props;
+    let { m, onChange, ship } = props;
     let list = [];
-    let values = {};
 
     for (let modName of Modifications.validity[m.grp]) {
-      values[modName] = m.getModValue(modName) * 100;
-      list.push(<div className={'cb'} key={modName}>
-		  <div className={'cb'}>{translate(modName)}{' (%)'}</div>
-		  <NumberEditor className={'cb'} style={{ width: '100%', textAlign: 'center' }} step={0.01} stepModifier={1} decimals={2} value={this._getValue(modName, values[modName])} onValueChange={this._updateValue.bind(this, modName)} />
-                </div>);
+      list.push(<Modification key={ modName } ship={ ship } m={ m } name={ modName } onChange={ onChange }/>);
     }
 
-    return { list, values };
-  }
-
-  /**
-   * Update state based on property and context changes
-   * @param  {Object} nextProps   Incoming/Next properties
-   * @param  {Object} nextContext Incoming/Next conext
-   */
-  componentWillReceiveProps(nextProps, nextContext) {
-    this.setState(this._initState(nextProps, nextContext));
-  }
-
-  /**
-   * Get the locally stored value of the modifier
-   * @param {string} name the name of the value to obtain
-   * @param {Number} defaultValue the value to use if none is held locally
-   * @return {Number} the value
-   */
-  _getValue(name, defaultValue) {
-    let values = this.state ? this.state.values : null;
-    return values ? values[name] : defaultValue;
-  }
-
-  /**
-   * Update modification given a value.
-   * @param {Number} name The name of the modification
-   * @param {Number} value The value to set, in the range [0,1]
-   */
-  _updateValue(name, value) {
-    let values = this.state.values;
-    values[name] = value;
-
-    // Only update the modification if this is a valid number
-    if (!isNaN(Number(value)) && !value.endsWith('.')) {
-      let scaledValue = Math.floor(Number(value) * 100) / 10000;
-      let m = this.props.m;
-      let ship = this.props.ship;
-      ship.setModification(m, name, scaledValue);
-    }
-    this.props.onChange();
-    this.setState({ values });
+    return { list };
   }
 
   /**