Remove InternalSlot component

2025-12-08 22:33:24 +00:00 · 2019-10-10 16:42:14 +02:00
parent 90ab5b4b0a
commit 037df6b166
6 changed files with 140 additions and 173 deletions
--- a/src/app/components/HardpointSlotSection.jsx
+++ b/src/app/components/HardpointSlotSection.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import SlotSection from './SlotSection';
-import InternalSlot from './InternalSlot';
+import Slot from './Slot';
 import { MountFixed, MountGimballed, MountTurret } from '../components/SvgIcons';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';

@@ -70,7 +70,7 @@ export default class HardpointSlotSection extends SlotSection {
    let slots = [];

    for (let h of ship.getHardpoints(undefined, true)) {
-      slots.push(<InternalSlot
+      slots.push(<Slot
        key={h.object.Slot}
        maxClass={h.getSize()}
        onOpen={this._openMenu.bind(this, h)}
@@ -158,5 +158,4 @@ export default class HardpointSlotSection extends SlotSection {
      </ul>
    </div>;
  }
-
 }
--- a/src/app/components/InternalSlot.jsx
+++ b/src/app/components/InternalSlot.jsx
@@ -1,133 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import Slot from './Slot';
-import Persist from '../stores/Persist';
-import { ListModifications, Modified } from './SvgIcons';
-import { Modifications } from 'coriolis-data/dist';
-import { stopCtxPropagation } from '../utils/UtilityFunctions';
-import { blueprintTooltip } from '../utils/BlueprintFunctions';
-
-/**
- * Internal Slot
- */
-export default class InternalSlot extends Slot {
-  /**
-   * Generate the slot contents
-   * @param  {Object} m             Mounted Module
-   * @param  {Function} translate   Translate function
-   * @param  {Object} formats       Localized Formats map
-   * @param  {Object} u             Localized Units Map
-   * @return {React.Component}      Slot contents
-   */
-  _getSlotDetails(m, translate, formats, u) {
-    if (m) {
-      let classRating = String(m.getSize()) + m.getRating();
-      let { drag, drop, ship } = this.props;
-      let { termtip, tooltip } = this.context;
-      let showModuleResistances = Persist.showModuleResistances();
-
-      // Modifications tooltip shows blueprint and grade, if available
-      // let modTT = translate('modified');
-      // const blueprint = m.getBlueprint();
-      // const experimental = m.getExperimental();
-      // const grade = m.getGrade();
-      // if (blueprint) {
-      //   modTT = translate(blueprint) + ' ' + translate('grade') + ' ' + grade;
-      //   if (experimental) {
-      //     modTT += ', ' + translate(experimental);
-      //   }
-      //   modTT = (
-      //     <div>
-      //       <div>{modTT}</div>
-      //       {blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], m)}
-      //     </div>
-      //   );
-      // }
-
-      let mass = m.get('mass') || m.get('cargo') || m.get('fuel') || 0;
-      const enabled = m.isEnabled();
-
-      const className = cn('details', enabled ? '' : 'disabled');
-      return (
-        <div
-          className={className}
-          draggable="true"
-          onDragStart={drag}
-          onDragEnd={drop}
-        >
-          <div className={'cb'}>
-            <div className={'l'}>
-              {classRating} {translate(m.readMeta('type'))}
-              {m.mods && Object.keys(m.mods).length > 0 ? (
-                <span
-                  onMouseOver={termtip.bind(null, modTT)}
-                  onMouseOut={tooltip.bind(null, null)}
-                >
-                  <Modified />
-                </span>
-              ) : (
-                ''
-              )}
-            </div>
-            <div className={'r'}>
-              {formats.round(mass)}
-              {u.T}
-            </div>
-          </div>
-          <div className={'cb'}>
-            {/* { m.getOptMass() ? <div className={'l'}>{translate('optmass', 'sg')}: {formats.int(m.getOptMass())}{u.T}</div> : null }
-          { m.getMaxMass() ? <div className={'l'}>{translate('maxmass', 'sg')}: {formats.int(m.getMaxMass())}{u.T}</div> : null }
-          { m.bins ? <div className={'l'}>{m.bins} <u>{translate('bins')}</u></div> : null }
-          { m.bays ? <div className={'l'}>{translate('bays')}: {m.bays}</div> : null }
-          { m.rebuildsperbay ? <div className={'l'}>{translate('rebuildsperbay')}: {m.rebuildsperbay}</div> : null }
-          { m.rate ? <div className={'l'}>{translate('rate')}: {m.rate}{u.kgs}&nbsp;&nbsp;&nbsp;{translate('refuel time')}: {formats.time(this.props.fuel * 1000 / m.rate)}</div> : null }
-          { m.getAmmo() && m.grp !== 'scb' ? <div className={'l'}>{translate('ammunition')}: {formats.gen(m.getAmmo())}</div> : null }
-          { m.getSpinup() ? <div className={'l'}>{translate('spinup')}: {formats.f1(m.getSpinup())}{u.s}</div> : null }
-          { m.getDuration() ? <div className={'l'}>{translate('duration')}: {formats.f1(m.getDuration())}{u.s}</div> : null }
-          { m.grp === 'scb' ? <div className={'l'}>{translate('cells')}: {formats.int(m.getAmmo() + 1)}</div> : null }
-          { m.grp === 'gsrp' ? <div className={'l'}>{translate('shield addition')}: {formats.f1(m.getShieldAddition())}{u.MJ}</div> : null }
-          { m.grp === 'gfsb' ? <div className={'l'}>{translate('jump addition')}: {formats.f1(m.getJumpBoost())}{u.LY}</div> : null }
-          { m.grp === 'gs' ? <div className={'l'}>{translate('shield addition')}: {formats.f1(m.getShieldAddition())}{u.MJ}</div> : null }
-          { m.getShieldReinforcement() ? <div className={'l'}>{translate('shieldreinforcement')}: {formats.f1(m.getDuration() * m.getShieldReinforcement())}{u.MJ}</div> : null }
-          { m.getShieldReinforcement() ? <div className={'l'}>{translate('total')}: {formats.int((m.getAmmo() + 1) * (m.getDuration() * m.getShieldReinforcement()))}{u.MJ}</div> : null }
-          { m.repair ? <div className={'l'}>{translate('repair')}: {m.repair}</div> : null }
-          { m.getFacingLimit() ? <div className={'l'}>{translate('facinglimit')} {formats.f1(m.getFacingLimit())}°</div> : null }
-          { m.getRange() ? <div className={'l'}>{translate('range')} {formats.f2(m.getRange())}{u.km}</div> : null }
-          { m.getRangeT() ? <div className={'l'}>{translate('ranget')} {formats.f1(m.getRangeT())}{u.s}</div> : null }
-          { m.getTime() ? <div className={'l'}>{translate('time')}: {formats.time(m.getTime())}</div> : null }
-          { m.getHackTime() ? <div className={'l'}>{translate('hacktime')}: {formats.time(m.getHackTime())}</div> : null }
-          { m.maximum ? <div className={'l'}>{translate('max')}: {(m.maximum)}</div> : null }
-          { m.rangeLS ? <div className={'l'}>{translate('range')}: {m.rangeLS}{u.Ls}</div> : null }
-          { m.rangeLS === null ? <div className={'l'}>∞{u.Ls}</div> : null }
-          { m.rangeRating ? <div className={'l'}>{translate('range')}: {m.rangeRating}</div> : null }
-          { m.passengers ? <div className={'l'}>{translate('passengers')}: {m.passengers}</div> : null }
-          { m.getRegenerationRate() ? <div className='l'>{translate('regen')}: {formats.round1(m.getRegenerationRate())}{u.ps}</div> : null }
-          { m.getBrokenRegenerationRate() ? <div className='l'>{translate('brokenregen')}: {formats.round1(m.getBrokenRegenerationRate())}{u.ps}</div> : null }
-          { showModuleResistances && m.getExplosiveResistance() ? <div className='l'>{translate('explres')}: {formats.pct(m.getExplosiveResistance())}</div> : null }
-          { showModuleResistances && m.getKineticResistance() ? <div className='l'>{translate('kinres')}: {formats.pct(m.getKineticResistance())}</div> : null }
-          { showModuleResistances && m.getThermalResistance() ? <div className='l'>{translate('thermres')}: {formats.pct(m.getThermalResistance())}</div> : null }
-          { showModuleResistances && m.getCausticResistance() ? <div className='l'>{translate('causres')}: {formats.pct(m.getCausticResistance())}</div> : null }
-          { m.getHullReinforcement() ? <div className='l'>{translate('armour')}: {formats.int(m.getHullReinforcement() + ship.baseArmour * m.getModValue('hullboost') / 10000)}</div> : null }
-          { m.getProtection() ? <div className='l'>{translate('protection')}: {formats.rPct(m.getProtection())}</div> : null }
-          { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null } */}
-            {(m.getApplicableBlueprints() || []).length > 0 ? (
-              <div className="r"
-                ref={(modButton) => (this.modButton = modButton)}
-              >
-                <button onClick={this._toggleModifications.bind(this)}
-                  onContextMenu={stopCtxPropagation}
-                  onMouseOver={termtip.bind(null, 'modifications')}
-                  onMouseOut={tooltip.bind(null, null)}
-                >
-                  <ListModifications />
-                </button>
-              </div>
-            ) : null}
-          </div>
-        </div>
-      );
-    } else {
-      return <div className={'empty'}>{translate('empty')}</div>;
-    }
-  }
-}
--- a/src/app/components/InternalSlotSection.jsx
+++ b/src/app/components/InternalSlotSection.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import SlotSection from './SlotSection';
-import InternalSlot from './InternalSlot';
+import Slot from './Slot';
 import * as ModuleUtils from '../shipyard/ModuleUtils';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import { canMount } from '../utils/SlotFunctions';
@@ -223,7 +223,7 @@ export default class InternalSlotSection extends SlotSection {
    let { fuelCapacity } = ship;

    for (const slot of ship.getInternals(undefined, true)) {
-      slots.push(<InternalSlot
+      slots.push(<Slot
        key={slot.object.Slot}
        maxClass={slot.getSize()}
        onOpen={this._openMenu.bind(this, slot)}
--- a/src/app/components/Slot.jsx
+++ b/src/app/components/Slot.jsx
@@ -1,11 +1,14 @@
 import React from 'react';
+import Persist from '../stores/Persist';
 import PropTypes from 'prop-types';
 import TranslatedComponent from './TranslatedComponent';
 import cn from 'classnames';
+import { ListModifications, Modified } from './SvgIcons';
 import AvailableModulesMenu from './AvailableModulesMenu';
 import ModificationsMenu from './ModificationsMenu';
 import { diffDetails } from '../utils/SlotFunctions';
-import { wrapCtxMenu } from '../utils/UtilityFunctions';
+import { stopCtxPropagation, wrapCtxMenu } from '../utils/UtilityFunctions';
+import { blueprintTooltip } from '../utils/BlueprintFunctions';
 import { Ship, Module } from 'ed-forge';
 import { REG_MILITARY_SLOT, REG_HARDPOINT_SLOT } from 'ed-forge/lib/data/slots';

@@ -43,12 +46,127 @@ export default class Slot extends TranslatedComponent {

    this._contextMenu = wrapCtxMenu(this._contextMenu.bind(this));
    this._getMaxClassLabel = this._getMaxClassLabel.bind(this);
-    this._keyDown = this._keyDown.bind(this);
-    this.slotDiv = null;
  }

-  // Must be implemented by subclasses:
-  // _getSlotDetails()
+  /**
+   * Generate the slot contents
+   * @param  {Object} m             Mounted Module
+   * @param  {Function} translate   Translate function
+   * @param  {Object} formats       Localized Formats map
+   * @param  {Object} u             Localized Units Map
+   * @return {React.Component}      Slot contents
+   */
+  _getSlotDetails(m, translate, formats, u) {
+    if (m) {
+      let classRating = String(m.getSize()) + m.getRating();
+      let { drag, drop, ship } = this.props;
+      let { termtip, tooltip } = this.context;
+      let showModuleResistances = Persist.showModuleResistances();
+
+      // Modifications tooltip shows blueprint and grade, if available
+      // let modTT = translate('modified');
+      // const blueprint = m.getBlueprint();
+      // const experimental = m.getExperimental();
+      // const grade = m.getGrade();
+      // if (blueprint) {
+      //   modTT = translate(blueprint) + ' ' + translate('grade') + ' ' + grade;
+      //   if (experimental) {
+      //     modTT += ', ' + translate(experimental);
+      //   }
+      //   modTT = (
+      //     <div>
+      //       <div>{modTT}</div>
+      //       {blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], m)}
+      //     </div>
+      //   );
+      // }
+
+      let mass = m.get('mass') || m.get('cargo') || m.get('fuel') || 0;
+      const enabled = m.isEnabled();
+
+      const className = cn('details', enabled ? '' : 'disabled');
+      return (
+        <div
+          className={className}
+          draggable="true"
+          onDragStart={drag}
+          onDragEnd={drop}
+        >
+          <div className={'cb'}>
+            <div className={'l'}>
+              {classRating} {translate(m.readMeta('type'))}
+              {m.mods && Object.keys(m.mods).length > 0 ? (
+                <span
+                  onMouseOver={termtip.bind(null, modTT)}
+                  onMouseOut={tooltip.bind(null, null)}
+                >
+                  <Modified />
+                </span>
+              ) : (
+                ''
+              )}
+            </div>
+            <div className={'r'}>
+              {formats.round(mass)}
+              {u.T}
+            </div>
+          </div>
+          <div className={'cb'}>
+            {/* { m.getOptMass() ? <div className={'l'}>{translate('optmass', 'sg')}: {formats.int(m.getOptMass())}{u.T}</div> : null }
+          { m.getMaxMass() ? <div className={'l'}>{translate('maxmass', 'sg')}: {formats.int(m.getMaxMass())}{u.T}</div> : null }
+          { m.bins ? <div className={'l'}>{m.bins} <u>{translate('bins')}</u></div> : null }
+          { m.bays ? <div className={'l'}>{translate('bays')}: {m.bays}</div> : null }
+          { m.rebuildsperbay ? <div className={'l'}>{translate('rebuildsperbay')}: {m.rebuildsperbay}</div> : null }
+          { m.rate ? <div className={'l'}>{translate('rate')}: {m.rate}{u.kgs}&nbsp;&nbsp;&nbsp;{translate('refuel time')}: {formats.time(this.props.fuel * 1000 / m.rate)}</div> : null }
+          { m.getAmmo() && m.grp !== 'scb' ? <div className={'l'}>{translate('ammunition')}: {formats.gen(m.getAmmo())}</div> : null }
+          { m.getSpinup() ? <div className={'l'}>{translate('spinup')}: {formats.f1(m.getSpinup())}{u.s}</div> : null }
+          { m.getDuration() ? <div className={'l'}>{translate('duration')}: {formats.f1(m.getDuration())}{u.s}</div> : null }
+          { m.grp === 'scb' ? <div className={'l'}>{translate('cells')}: {formats.int(m.getAmmo() + 1)}</div> : null }
+          { m.grp === 'gsrp' ? <div className={'l'}>{translate('shield addition')}: {formats.f1(m.getShieldAddition())}{u.MJ}</div> : null }
+          { m.grp === 'gfsb' ? <div className={'l'}>{translate('jump addition')}: {formats.f1(m.getJumpBoost())}{u.LY}</div> : null }
+          { m.grp === 'gs' ? <div className={'l'}>{translate('shield addition')}: {formats.f1(m.getShieldAddition())}{u.MJ}</div> : null }
+          { m.getShieldReinforcement() ? <div className={'l'}>{translate('shieldreinforcement')}: {formats.f1(m.getDuration() * m.getShieldReinforcement())}{u.MJ}</div> : null }
+          { m.getShieldReinforcement() ? <div className={'l'}>{translate('total')}: {formats.int((m.getAmmo() + 1) * (m.getDuration() * m.getShieldReinforcement()))}{u.MJ}</div> : null }
+          { m.repair ? <div className={'l'}>{translate('repair')}: {m.repair}</div> : null }
+          { m.getFacingLimit() ? <div className={'l'}>{translate('facinglimit')} {formats.f1(m.getFacingLimit())}°</div> : null }
+          { m.getRange() ? <div className={'l'}>{translate('range')} {formats.f2(m.getRange())}{u.km}</div> : null }
+          { m.getRangeT() ? <div className={'l'}>{translate('ranget')} {formats.f1(m.getRangeT())}{u.s}</div> : null }
+          { m.getTime() ? <div className={'l'}>{translate('time')}: {formats.time(m.getTime())}</div> : null }
+          { m.getHackTime() ? <div className={'l'}>{translate('hacktime')}: {formats.time(m.getHackTime())}</div> : null }
+          { m.maximum ? <div className={'l'}>{translate('max')}: {(m.maximum)}</div> : null }
+          { m.rangeLS ? <div className={'l'}>{translate('range')}: {m.rangeLS}{u.Ls}</div> : null }
+          { m.rangeLS === null ? <div className={'l'}>∞{u.Ls}</div> : null }
+          { m.rangeRating ? <div className={'l'}>{translate('range')}: {m.rangeRating}</div> : null }
+          { m.passengers ? <div className={'l'}>{translate('passengers')}: {m.passengers}</div> : null }
+          { m.getRegenerationRate() ? <div className='l'>{translate('regen')}: {formats.round1(m.getRegenerationRate())}{u.ps}</div> : null }
+          { m.getBrokenRegenerationRate() ? <div className='l'>{translate('brokenregen')}: {formats.round1(m.getBrokenRegenerationRate())}{u.ps}</div> : null }
+          { showModuleResistances && m.getExplosiveResistance() ? <div className='l'>{translate('explres')}: {formats.pct(m.getExplosiveResistance())}</div> : null }
+          { showModuleResistances && m.getKineticResistance() ? <div className='l'>{translate('kinres')}: {formats.pct(m.getKineticResistance())}</div> : null }
+          { showModuleResistances && m.getThermalResistance() ? <div className='l'>{translate('thermres')}: {formats.pct(m.getThermalResistance())}</div> : null }
+          { showModuleResistances && m.getCausticResistance() ? <div className='l'>{translate('causres')}: {formats.pct(m.getCausticResistance())}</div> : null }
+          { m.getHullReinforcement() ? <div className='l'>{translate('armour')}: {formats.int(m.getHullReinforcement() + ship.baseArmour * m.getModValue('hullboost') / 10000)}</div> : null }
+          { m.getProtection() ? <div className='l'>{translate('protection')}: {formats.rPct(m.getProtection())}</div> : null }
+          { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null } */}
+            {(m.getApplicableBlueprints() || []).length > 0 ? (
+              <div className="r"
+                ref={(modButton) => (this.modButton = modButton)}
+              >
+                <button onClick={this._toggleModifications.bind(this)}
+                  onContextMenu={stopCtxPropagation}
+                  onMouseOver={termtip.bind(null, 'modifications')}
+                  onMouseOut={tooltip.bind(null, null)}
+                >
+                  <ListModifications />
+                </button>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      );
+    } else {
+      return <div className={'empty'}>{translate('empty')}</div>;
+    }
+  }

  /**
   * Get the CSS class name for the slot. Can/should be overriden
@@ -90,22 +208,6 @@ export default class Slot extends TranslatedComponent {
    this.props.onSelect(null,null);
  }

-  /** Key Down handler
-   *  @param {SyntheticEvent} event Event
-   *  ToDo: see if this can be moved up
-   *  we do more or less the same thing
-   *  in every section when Enter key is pressed
-   *  on a focusable item
-   *
-   */
-  _keyDown(event) {
-    if (event.key == 'Enter') {
-      if(event.target.className == 'r') {
-        this._toggleModifications();
-      }
-      this.props.onOpen(event);
-    }
-  }
  /**
   * Render the slot
   * @return {React.Component} The slot
@@ -148,7 +250,6 @@ export default class Slot extends TranslatedComponent {
          onSelect={onSelect}
          warning={warning}
          diffDetails={diffDetails.bind(ship, this.context.language)}
-          slotDiv = {this.slotDiv}
        />;
      }
    }
@@ -157,9 +258,9 @@ export default class Slot extends TranslatedComponent {

    return (
      <div className={cn('slot', dropClass, { selected })} onClick={onOpen}
-        onKeyDown={this._keyDown} onContextMenu={this._contextMenu}
+        onContextMenu={this._contextMenu}
        onDragOver={dragOver} tabIndex="0"
-        ref={slotDiv => this.slotDiv = slotDiv}>
+      >
        <div className='details-container'>
          <div className='sz'>{this._getMaxClassLabel(translate)}</div>
          {slotDetails}
--- a/src/app/components/StandardSlotSection.jsx
+++ b/src/app/components/StandardSlotSection.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import SlotSection from './SlotSection';
-import InternalSlot from './InternalSlot';
+import Slot from './Slot';
 import Module from '../shipyard/Module';
 import * as ShipRoles from '../shipyard/ShipRoles';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
@@ -131,7 +131,7 @@ export default class StandardSlotSection extends SlotSection {
    // let bh = ship.bulkheads;

    let armour = ship.getAlloys();
-    slots[0] = <InternalSlot
+    slots[0] = <Slot
      key='bh'
      slot={armour}
      modules={armour.getApplicableItems()}
@@ -143,7 +143,7 @@ export default class StandardSlotSection extends SlotSection {
    />;

    const powerPlant = ship.getPowerPlant();
-    slots[1] = <InternalSlot
+    slots[1] = <Slot
      key='pp'
      slot={powerPlant}
      modules={powerPlant.getApplicableItems()}
@@ -156,7 +156,7 @@ export default class StandardSlotSection extends SlotSection {
    />;

    const thrusters = ship.getThrusters();
-    slots[2] = <InternalSlot
+    slots[2] = <Slot
      key='th'
      slot={thrusters}
      modules={thrusters.getApplicableItems()}
@@ -170,7 +170,7 @@ export default class StandardSlotSection extends SlotSection {


    const fsd = ship.getFSD();
-    slots[3] = <InternalSlot
+    slots[3] = <Slot
      key='fsd'
      slot={fsd}
      modules={fsd.getApplicableItems()}
@@ -182,7 +182,7 @@ export default class StandardSlotSection extends SlotSection {
    />;

    const lifeSupport = ship.getLifeSupport();
-    slots[4] = <InternalSlot
+    slots[4] = <Slot
      key='ls'
      slot={lifeSupport}
      modules={lifeSupport.getApplicableItems()}
@@ -194,7 +194,7 @@ export default class StandardSlotSection extends SlotSection {
    />;

    const powerDistributor = ship.getPowerDistributor();
-    slots[5] = <InternalSlot
+    slots[5] = <Slot
      key='pd'
      slot={powerDistributor}
      modules={powerDistributor.getApplicableItems()}
@@ -207,7 +207,7 @@ export default class StandardSlotSection extends SlotSection {
    />;

    const sensors = ship.getSensors();
-    slots[6] = <InternalSlot
+    slots[6] = <Slot
      key='ss'
      slot={sensors}
      modules={sensors.getApplicableItems()}
@@ -219,7 +219,7 @@ export default class StandardSlotSection extends SlotSection {
    />;

    const fuelTank = ship.getCoreFuelTank();
-    slots[7] = <InternalSlot
+    slots[7] = <Slot
      key='ft'
      slot={fuelTank}
      modules={fuelTank.getApplicableItems()}
--- a/src/app/components/UtilitySlotSection.jsx
+++ b/src/app/components/UtilitySlotSection.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import SlotSection from './SlotSection';
-import InternalSlot from './InternalSlot';
+import Slot from './Slot';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';

 /**
@@ -70,7 +70,7 @@ export default class UtilitySlotSection extends SlotSection {
    let { originSlot, targetSlot } = this.state;

    for (let h of ship.getUtilities(undefined, true)) {
-      slots.push(<InternalSlot
+      slots.push(<Slot
        key={h.object.Slot}
        maxClass={h.getSize()}
        onOpen={this._openMenu.bind(this,h)}