diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..ddc68f7
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1 @@
+{ "stage": 1 }
\ No newline at end of file
diff --git a/decorator.js b/decorator.js
new file mode 100644
index 0000000..a4f6f97
--- /dev/null
+++ b/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 ;
+ }
+ }
+ }
+}
diff --git a/demo/index.html b/demo/index.html
index ba4120e..8c0f4d5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -9,10 +9,16 @@
+
+
+
+
+
Decorated Basic Demo
+
+
diff --git a/demo/js/DecoratedMenu.js b/demo/js/DecoratedMenu.js
new file mode 100644
index 0000000..ce6e3c1
--- /dev/null
+++ b/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 (
+