createSelectable.jsx

import * as React from 'react';
import { findDOMNode } from 'react-dom';

type Props = {
  selectableKey: any,
  children?: React.ReactNode,
};

/**
 * Wraps an element inside of a SelectableGroup and makes it possible to select
 * @param WrappedComponent The component to wrap
 */
export const createSelectable = (WrappedComponent: React.ComponentClass) => {
  return class SelectableItem extends React.Component<Props> {
    element: HTMLElement;

    static contextTypes = {
      selectable: React.PropTypes.shape({}),
    };

    componentDidMount() {
      const node = findDOMNode(this);
      console.log(node);
      if (node) {
        node.addEventListener('mouseenter', this.onMouseEnter);
        node.addEventListener('mouseleave', this.onMouseLeave);
      }
      this.context.selectable.register(this.props.selectableKey, node);
    }

    componentWillUnmount() {
      const node = findDOMNode(this);
      console.log(node);
      console.log(this.element);
      if (node) {
        node.removeEventListener('mouseenter', this.onMouseEnter);
        node.removeEventListener('mouseleave', this.onMouseLeave);
      }
      this.context.selectable.unregister(this.props.selectableKey);
    }

    onMouseEnter = () => this.context.selectable.disable();
    onMouseLeave = () => this.context.selectable.enable();

    render() {
      return (
        <WrappedComponent {...this.props} ref={(ref) => { console.log(ref); }} />
      );
    }
  };
};

export default createSelectable;