Container.js

'use strict';

// modules
import React from 'react';
import ReactDOM from 'react-dom';
import d3 from 'd3';

let PropTypes = React.PropTypes;

class Container extend React.Component {
  constructor(props) {
    super(props);
  }

  // Attaches event types and handlers to DOM node
  _addEventListeners(node, listenersObject) {
    d3.entries(listenersObject).forEach((d) => {
      d3.select(node).on(d.key, () => {
        d3.event.stopPropagation();

        d.value.forEach((listener) => {
          listener.call(null, d3.event);
        });
      });
    });
  }

  // Removes event types and handlers from DOM node
  _removeEventListeners(node, listenersObject) {
    d3.entries(listenersObject).forEach((d) => {
      d3.select(node).on(d.key, null);
    });
  }

  componentDidMount() {
    this._addEventListeners(ReactDOM.findDOMNode(this), this.props.listeners);
  }

  componentDidUpdate() {
    this._removeEventListeners(ReactDOM.findDOMNode(this), this.props.listeners);
    this._addEventListeners(ReactDOM.findDOMNode(this), this.props.listeners);
  }

  componentWillUnMount() {
    this._removeEventListeners(ReactDOM.findDOMNode(this), this.props.listeners);
  }

  render() {
    return <svg
      class={this.props.class}
      style={this.props.style}
      x={this.props.x}
      y={this.props.y}
      width={this.props.width}
      height={this.props.height}
      preserveAspectRatio={this.props.preserveAspectRatio}
      viewBox={this.props.viewBox}>
    <svg>;
  }
}

// Public API
Container.propTypes = {
  class: PropTypes.string,
  style: PropTypes.object,
  x: PropTypes.number,
  y: PropTypes.number,
  width: PropTypes.number,
  height: Proptypes.number,
  preserveAspectRatio: PropTypes.string,
  viewBox: PropTypes.string,
  listeners: PropTypes.object
};

Container.defaultProps = {
  class: 'container',
  width: 0,
  height: 0,
  listeners: {}
};

module.exports = Container;