Continued porting to react, approaching beta

src/app/components/UtilitySlotSection.jsx

@@ -3,35 +3,60 @@ import SlotSection from './SlotSection';
 import HardpointSlot from './HardpointSlot';
 import cn from 'classnames';
 
+/**
+ * Utility Slot Section
+ */
 export default class UtilitySlotSection extends SlotSection {
 
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
+   */
   constructor(props, context) {
     super(props, context, 'utility', 'utility mounts');
-
     this._empty = this._empty.bind(this);
   }
 
+  /**
+   * Empty all utility slots and close the menu
+   */
   _empty() {
     this.props.ship.emptyUtility();
     this.props.onChange();
     this._close();
   }
 
+  /**
+   * Mount module in utility slot, replace all if Alt is held
+   * @param  {string} group  Module Group name
+   * @param  {string} rating Module Rating
+   * @param  {string} name   Module name
+   * @param  {Synthetic} event  Event
+   */
   _use(group, rating, name, event) {
     this.props.ship.useUtility(group, rating, name, event.getModifierState('Alt'));
     this.props.onChange();
     this._close();
   }
 
+  /**
+   * Empty all utility slots on right-click
+   */
   _contextMenu() {
     this._empty();
   }
 
+  /**
+   * Create all HardpointSlots (React component) for the slots
+   * @return {Array} Array of HardpointSlots
+   */
   _getSlots() {
     let slots = [];
-    let hardpoints = this.props.ship.hardpoints;
-    let availableModules = this.props.ship.getAvailableModules();
-    let currentMenu = this.props.currentMenu;
+    let { ship, currentMenu } = this.props;
+    let hardpoints = ship.hardpoints;
+    let { originSlot, targetSlot } = this.state;
+    let availableModules = ship.getAvailableModules();
 
     for (let i = 0, l = hardpoints.length; i < l; i++) {
       let h = hardpoints[i];
@@ -43,7 +68,12 @@ export default class UtilitySlotSection extends SlotSection {
           onOpen={this._openMenu.bind(this,h)}
           onSelect={this._selectModule.bind(this, h)}
           selected={currentMenu == h}
+          drag={this._drag.bind(this, h)}
+          dragOver={this._dragOverSlot.bind(this, h)}
+          drop={this._drop}
+          dropClass={this._dropClass(h, originSlot, targetSlot)}
           enabled={h.enabled}
+          ship={ship}
           m={h.m}
         />);
       }
@@ -52,6 +82,11 @@ export default class UtilitySlotSection extends SlotSection {
     return slots;
   }
 
+  /**
+   * Generate the section menu
+   * @param  {Function} translate Translate function
+   * @return {React.Component}   Section menu
+   */
   _getSectionMenu(translate) {
     let _use = this._use;