More refactoring and porting to React

src/app/components/SlotSection.jsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import TranslatedComponent from './TranslatedComponent';
 import InterfaceEvents from '../utils/InterfaceEvents';
+import { wrapCtxMenu } from '../utils/InterfaceEvents';
 import { Equalizer } from '../components/SvgIcons';
 import cn from 'classnames';
 
 export default class SlotSection extends TranslatedComponent {
 
   static propTypes = {
-    ship: React.PropTypes.object.isRequired
+    ship: React.PropTypes.object.isRequired,
+    onChange: React.PropTypes.func.isRequired,
+    code: React.PropTypes.string.isRequired,
+    togglePwr: React.PropTypes.func
   };
 
   constructor(props, context, sectionId, sectionName) {
@@ -18,51 +22,51 @@ export default class SlotSection extends TranslatedComponent {
     this._getSlots = this._getSlots.bind(this);
     this._selectModule = this._selectModule.bind(this);
     this._getSectionMenu = this._getSectionMenu.bind(this);
-
-    this.state = {
-      currentMenu: null
-    }
+    this._contextMenu = this._contextMenu.bind(this);
+    this._close = this._close.bind(this);
   }
 
   // Must be implemented by subclasses:
   //  _getSlots()
   //  _getSectionMenu()
+  //  _contextMenu()
 
-  _openMenu(menu) {
-    this.setState({ currentMenu: menu });
-    InterfaceEvents.closeAll(menu);
-  }
-
-  _closeMenu() {
-    if (this.state.currentMenu) {
-      this.setState({ currentMenu: null });
+  _openMenu(menu, event) {
+    event.stopPropagation();
+    if (this.props.currentMenu === menu) {
+      menu = null;
     }
+
+    InterfaceEvents.openMenu(menu);
   }
 
-  _selectModule(index, slot, m) {
+  _selectModule(slot, m) {
     this.props.ship.use(slot, m);
-    this._closeMenu();
+    this.props.onChange();
+    this._close();
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
-    this.setState({ currentMenu: null });
+  _togglePwr(slot) {
+    this.props.ship.setSlotEnabled(slot, !slot.enabled);
+    this.props.onChange();
+    this._close();
   }
 
-  componentWillMount() {
-    this.closeAllListener = InterfaceEvents.addListener('closeAll', this._closeMenu.bind(this));
-  }
-
-  componentWillUnmount() {
-    this.closeAllListener.remove();
+  _close() {
+    if (this.props.currentMenu) {
+      InterfaceEvents.closeMenu();
+    }
   }
 
   render() {
     let translate = this.context.language.translate;
-    let sectionMenuOpened = this.state.currentMenu === this.sectionName;
+    let sectionMenuOpened = this.props.currentMenu === this.sectionName;
+    let open = this._openMenu.bind(this, this.sectionName);
+    let ctx = wrapCtxMenu(this._contextMenu);
 
     return (
       <div id={this.sectionId} className={'group'}>
-        <div className={cn('section-menu', {selected: sectionMenuOpened})} onClick={this._openMenu.bind(this, this.sectionName)}>
+        <div className={cn('section-menu', {selected: sectionMenuOpened})} onClick={open} onContextMenu={ctx}>
           <h1>{translate(this.sectionName)} <Equalizer/></h1>
           {sectionMenuOpened ? this._getSectionMenu(translate) : null }
         </div>