
var React = require('react');
var d3 = require('d3');


var RefugeeMapBordersLayer = React.createClass({


	getDefaultProps: function() {
		return {subunitClass: 'subunit'}
	},

	componentDidMount: function() {
		this.drawBorders();
	},

	drawBorders: function() {
		var path = d3.geo.path().projection(this.props.projection);
		
		var sel = d3.select(this.getDOMNode()).selectAll('.' + this.props.subunitClass)
		  .data(this.props.mapModel.featureData.features)
		  .enter()
		    .append('path')
		    .classed(this.props.subunitClass, true)
		    .attr("d", path);

		if (this.props.onMouseOver) {
			sel.on("mouseover", function(feature) {
				this.props.onMouseOver(feature.properties.ADM0_A3);
			}.bind(this));
		}

		if (this.props.onMouseOut) {
			sel.on("mouseout", function(feature) {
				this.props.onMouseOut(feature.properties.ADM0_A3);
			}.bind(this));
		} 
		return sel;
	},


	render: function() {
		return <svg style={{width: this.props.width, height: this.props.height}}/>
	}

});


module.exports = RefugeeMapBordersLayer;


var React = require('react');
var d3 = require('d3');


var RefugeeMapBordersLayer = React.createClass({


   getDefaultProps: function() {
      return {subunitClass: 'subunit'}
   },


   componentDidMount: function() {
  
   },


   onMouseOver: function(country) {
      //console.log("over country" + country);
      if (this.onMouseOver) {
         this.props.onMouseOver(country);
      }
   },

   onMouseOut: function(country) {
      //console.log("out of country" + country);
      if (this.onMouseOut) {
         this.props.onMouseOut(country);
      }
   },


   shouldComponentUpdate: function(nextProps, nextState) {
      return false;
      //return nextProps.highlightedCountry !== this.props.highlightedCountry;
   },


   getPaths: function() {
      var path = d3.geo.path().projection(this.props.projection);

      return this.props.mapModel.featureData.features.map(function(feature) {
         return <path 
            className={this.props.subunitClass}
            onMouseOver={this.onMouseOver.bind(this, feature.properties.ADM0_A3)}
            onMouseOut={this.onMouseOut.bind(this, feature.properties.ADM0_A3)} 
            d={path(feature)} />
      }.bind(this));
   },

   render: function() {
      return (
         <svg style={{width: this.props.width, height: this.props.height}}>
            {this.getPaths()}
         </svg>
      )
   }

});


module.exports = RefugeeMapBordersLayer;

Move DOM management in borders layer to React from D3
Move DOM management in borders layer to React from D3
