Decorator

.babelrc

@@ -0,0 +1 @@
+{ "stage": 1 }

decorator.js

@@ -0,0 +1,100 @@
+/**
+ * react-menu-aim is a React Mixin heavily inspired by jQuery-menu-aim. All rights
+ * reserved by the original author.
+ *
+ * https://github.com/jasonslyvia/react-menu-aim
+ * https://github.com/kamens/jQuery-menu-aim
+*/
+
+import React from 'react';
+// import {on, off, handleMouseMoveDocument, activate, getActivateDelay, mousemoveListener, mouseLocs} from './src/core.js';
+import {on, off, handleMouseMoveDocument, activate, getActivateDelay, menuAimModel} from './src/core.js';
+
+
+function possiblyActivate(rowIdentifier, handler, config) {
+  var delay = getActivateDelay.call(this, config);
+
+  if (delay) {
+    var self = this;
+    this.__reactMenuAimTimer = setTimeout(function(){
+      possiblyActivate.call(self, rowIdentifier, handler, config);
+    }, delay);
+  }
+  else {
+    handler(rowIdentifier);
+  }
+}
+
+/**
+ * @export
+ */
+export default function reactMenuAimDecorator(reactMenuAimConfig) {
+  return function (ComposedComponent) {
+    return class MenuAimDecorator extends React.Component {
+
+      __getMouseMoveDocumentHandler() {
+        if (!this.__mouseMoveDocumentHandler) {
+          this.__mouseMoveDocumentHandler = handleMouseMoveDocument.bind(this);
+        }
+
+        return this.__mouseMoveDocumentHandler;
+      }
+
+      componentDidMount() {
+        if (menuAimModel.mousemoveListener === 0) {
+          on(document, 'mousemove', this.__getMouseMoveDocumentHandler());
+        }
+
+        menuAimModel.mousemoveListener += 1;
+      }
+
+      componentWillUnmount() {
+        menuAimModel.mousemoveListener -= 1;
+
+        if (menuAimModel.mousemoveListener === 0) {
+          off(document, 'mousemove', this.__getMouseMoveDocumentHandler());
+          menuAimModel.mouseLocs = [];
+        }
+
+        clearTimeout(this.__reactMenuAimTimer);
+        this.__reactMenuAimTimer = null;
+        this.__mouseMoveDocumentHandler = null;
+      }
+
+      /**
+       * @param  {function} handler The true event handler for your app
+       * @param  {object}   e       React's synthetic event object
+       */
+      handleMouseLeaveMenu(handler, e) {
+        if (this.__reactMenuAimTimer) {
+          clearTimeout(this.__reactMenuAimTimer);
+        }
+
+        if (typeof handler === 'function') {
+          handler.call(this, e);
+        }
+      }
+
+      /**
+       * @param  {number}   rowIdentifier  The identifier of current row, ie. index or name
+       * @param  {function} handler        The true event handler for your app
+       * @param  {object}   e              React's synthetic event object
+       */
+      handleMouseEnterRow(rowIdentifier, handler) {
+        if (this.__reactMenuAimTimer) {
+          clearTimeout(this.__reactMenuAimTimer);
+        }
+
+        // possiblyActivate.call(this, rowIdentifier, handler, reactMenuAimConfig);
+        possiblyActivate.call(this, rowIdentifier, handler, reactMenuAimConfig);
+      }
+
+      render() {
+        return <ComposedComponent {...this.props}
+          handleMouseLeaveMenu={this.handleMouseLeaveMenu.bind(this)}
+          handleMouseEnterRow={this.handleMouseEnterRow.bind(this)}
+          ></ComposedComponent>;
+      }
+    }
+  }
+}

demo/index.html

@@ -9,10 +9,16 @@
     <div class="demo" id="demo1">
       <h4 class="title">Basic Demo</h4>
       <div class="demo-container"></div>
-    </div>    <div class="demo" id="demo3">
+    </div>
+    <div class="demo" id="demo3">
       <h4 class="title">Submenu Appear below</h4>
       <div class="demo-container"></div>
     </div>
+
+    <div class="demo" id="demo4">
+      <h4 class="title">Decorated Basic Demo</h4>
+      <div class="demo-container"></div>
+    </div>
   </div>
 <script type="text/javascript" src="js/app.bundle.js"></script>
 </body>

demo/js/DecoratedMenu.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import reactMenuAimDecorator from '../../decorator';
+
+
+@reactMenuAimDecorator({
+      submenuDirection: 'right',
+      menuSelector: '.menu',
+      delay: 300,
+      tolerance: 75})
+export default class Menu extends React.Component {
+
+  constructor(props) {
+    super();
+
+    this.state = {
+      activeMenuIndex: 0,
+    };
+  }
+
+  handleSwitchMenuIndex(index) {
+    this.setState({
+      activeMenuIndex: index
+    });
+  }
+
+  render() {
+    var containerClassName = 'menu-container ' + this.props.submenuDirection;
+
+    var subMenuStyle = {};
+    if (this.props.submenuDirection === 'below') {
+      subMenuStyle.left = this.state.activeMenuIndex * 140;
+    }
+
+    return (
+      <div className={containerClassName}>
+        <ul className="menu" onMouseLeave={this.props.handleMouseLeaveMenu}>
+          {this.props.menuData.map((menu, index) => {
+            var className = 'menu-item';
+            if (index === this.state.activeMenuIndex) {
+              className += ' active';
+            }
+
+            return (
+              <li className={className} key={index}
+                  onMouseEnter={() =>{
+                    this.props.handleMouseEnterRow(index, this.handleSwitchMenuIndex.bind(this));
+                  }}>
+                {menu.name}
+              </li>
+            );
+          })}
+        </ul>
+        <ul className="sub-menu" style={subMenuStyle}>
+          {this.props.menuData[this.state.activeMenuIndex].subMenu.map(((subMenu, index) => {
+            return (
+              <li className="sub-menu-item" key={index}>{subMenu}</li>
+            );
+          }))}
+        </ul>
+      </div>
+    );
+  }
+}
+
+Menu.defaultProps = {
+  submenuDirection: 'right',
+};
+