Update lib

lib/Region.js

@@ -59,10 +59,11 @@ var Region = function (_Component) {
 				isChanging: this.props.changing,
 				index: this.props.index
 			};
+
 			return _react2.default.createElement(
 				'div',
 				{
-					style: (0, _objectAssign2.default)({}, _style2.default.Region, localStyle),
+					style: (0, _objectAssign2.default)({}, _style2.default.Region, localStyle, this.props.customStyle, this.props.data.regionStyle),
 					onMouseDown: this.props.onCropStart,
 					onTouchStart: this.props.onCropStart,
 					'data-wrapper': 'wrapper'
@@ -86,7 +87,8 @@ Region.propTypes = {
 	handles: _propTypes.PropTypes.bool,
 	changing: _propTypes.PropTypes.bool,
 	dataRenderer: _propTypes.PropTypes.func,
-	data: _propTypes.PropTypes.object
+	data: _propTypes.PropTypes.object,
+	customStyle: _propTypes.PropTypes.object
 };
 
 module.exports = Region;

lib/RegionSelect.js

@@ -288,6 +288,7 @@ var RegionSelect = function (_Component) {
 				data: rect.data,
 				key: index,
 				index: index,
+				customStyle: this.props.regionStyle,
 				dataRenderer: this.props.regionRenderer,
 				onCropStart: function onCropStart(event) {
 					return _this2.onRegionMoveStart(event, index);
@@ -296,25 +297,16 @@ var RegionSelect = function (_Component) {
 			});
 		}
 	}, {
-		key: 'render',
-		value: function render() {
-			var regions = this.props.regions;
-			return _react2.default.createElement(
-				'div',
-				{
-					ref: 'image',
-					style: (0, _objectAssign2.default)({}, _style2.default.RegionSelect, this.props.style),
-					className: this.props.className,
-					onTouchStart: this.onComponentMouseTouchDown,
-					onMouseDown: this.onComponentMouseTouchDown },
-				regions.map(this.renderRect.bind(this)),
-				this.props.debug ? _react2.default.createElement(
+		key: 'renderDebug',
+		value: function renderDebug() {
+			if (this.props.debug) {
+				return _react2.default.createElement(
 					'table',
 					{ style: { position: 'absolute', right: 0, top: 0 } },
 					_react2.default.createElement(
 						'tbody',
 						null,
-						regions.map(function (rect, index) {
+						this.props.regions.map(function (rect, index) {
 							return _react2.default.createElement(
 								'tr',
 								{ key: index },
@@ -345,7 +337,25 @@ var RegionSelect = function (_Component) {
 							);
 						})
 					)
-				) : null,
+				);
+			}
+
+			return null;
+		}
+	}, {
+		key: 'render',
+		value: function render() {
+			var regions = this.props.regions;
+			return _react2.default.createElement(
+				'div',
+				{
+					ref: 'image',
+					style: (0, _objectAssign2.default)({}, _style2.default.RegionSelect, this.props.style),
+					className: this.props.className,
+					onTouchStart: this.onComponentMouseTouchDown,
+					onMouseDown: this.onComponentMouseTouchDown },
+				regions.map(this.renderRect.bind(this)),
+				this.renderDebug(),
 				this.props.children
 			);
 		}
@@ -363,7 +373,8 @@ RegionSelect.propTypes = {
 	maxRegions: _propTypes.PropTypes.number,
 	debug: _propTypes.PropTypes.bool,
 	className: _propTypes.PropTypes.string,
-	style: _propTypes.PropTypes.object
+	style: _propTypes.PropTypes.object,
+	regionStyle: _propTypes.PropTypes.object
 };
 RegionSelect.defaultProps = {
 	maxRegions: Infinity,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-region-select",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Multi region selection (i.e. on images)",
   "main": "./lib/RegionSelect.js",
   "scripts": {
@@ -27,31 +27,31 @@
   },
   "homepage": "https://github.com/casavi/react-region-select",
   "devDependencies": {
-    "babel-cli": "^6.10.1",
-    "babel-core": "^6.0.20",
-    "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.0.1",
-    "babel-preset-es2015": "^6.0.15",
-    "babel-preset-react": "^6.0.15",
-    "babel-preset-stage-0": "^6.0.15",
-    "css-loader": "^0.23.1",
-    "eslint": "^3.0.0",
-    "eslint-plugin-react": "^5.2.2",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "node-sass": "^3.8.0",
-    "react-hot-loader": "^1.3.0",
-    "sass-loader": "^4.0.0",
-    "style-loader": "^0.13.0",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.12.1",
-    "react": "^15.x",
-    "react-dom": "^15.x"
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.1",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.10.0",
+    "eslint-plugin-react": "^7.4.0",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "node-sass": "^4.5.3",
+    "react-hot-loader": "^3.1.1",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.19.0",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.3",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "peerDependencies": {
-    "react": "^0.14.6 || 15.x"
+    "react": "^0.16.0"
   },
   "dependencies": {
-    "object-assign": "*",
+    "object-assign": "^4.1.1",
     "prop-types": "^15.6.0"
   }
 }

src/Region.js

@@ -29,13 +29,14 @@ class Region extends Component {
 			isChanging: this.props.changing,
 			index: this.props.index
 		};
+
 		return (
 			<div
-				style={objectAssign({}, style.Region, localStyle)}
+				style={objectAssign({}, style.Region, localStyle, this.props.customStyle, this.props.data.regionStyle)}
 				onMouseDown={this.props.onCropStart}
 				onTouchStart={this.props.onCropStart}
 				data-wrapper="wrapper"
-				>
+			>
 				{this.props.handles ? this.renderHandles() : null}
 				{this.props.dataRenderer ? this.props.dataRenderer(dataRenderArgs) : null}
 			</div>
@@ -53,6 +54,7 @@ Region.propTypes = {
 	changing: PropTypes.bool,
 	dataRenderer: PropTypes.func,
 	data: PropTypes.object,
+	customStyle: PropTypes.object
 };
 
 module.exports = Region;

src/RegionSelect.js

@@ -71,10 +71,10 @@ class RegionSelect extends Component {
 			width = updatingRegion.width;
 			height = updatingRegion.height;
 			if(this.props.constraint){
-				if (x + width >= 100) { x = Math.round(100 - width) }
-				if (y + height >= 100) { y = Math.round(100 - height)}
-				if (x <= 0) { x = 0 }
-				if (y <= 0) { y = 0 }
+				if (x + width >= 100) { x = Math.round(100 - width); }
+				if (y + height >= 100) { y = Math.round(100 - height); }
+				if (x <= 0) { x = 0; }
+				if (y <= 0) { y = 0; }
 			}
 		}
 
@@ -229,11 +229,34 @@ class RegionSelect extends Component {
 			data={rect.data}
 			key={index}
 			index={index}
+			customStyle={this.props.regionStyle}
 			dataRenderer={this.props.regionRenderer}
 			onCropStart={(event) => this.onRegionMoveStart(event, index)}
 			changing={index === this.regionChangeIndex}
 		/>;
 	}
+	renderDebug () {
+		if (this.props.debug) {
+			return (
+				<table style={{position:'absolute', right: 0, top: 0}}>
+					<tbody>
+						{this.props.regions.map((rect, index) => {
+							return (
+								<tr key={index}>
+									<td>x: {Math.round(rect.x, 1)}</td>
+									<td>y: {Math.round(rect.y, 1)}</td>
+									<td>width: {Math.round(rect.width, 1)}</td>
+									<td>height: {Math.round(rect.height, 1)}</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</table>
+			);
+		}
+
+		return null;
+	}
 	render () {
 		const regions = this.props.regions;
 		return (
@@ -244,22 +267,7 @@ class RegionSelect extends Component {
 				onTouchStart={this.onComponentMouseTouchDown}
 				onMouseDown={this.onComponentMouseTouchDown}>
 				{regions.map(this.renderRect.bind(this))}
-				{this.props.debug
-					? <table style={{position:'absolute', right: 0, top: 0}}>
-							<tbody>
-								{regions.map((rect, index) => {
-									return (
-										<tr key={index}>
-											<td>x: {Math.round(rect.x, 1)}</td>
-											<td>y: {Math.round(rect.y, 1)}</td>
-											<td>width: {Math.round(rect.width, 1)}</td>
-											<td>height: {Math.round(rect.height, 1)}</td>
-										</tr>
-									);
-								})}
-							</tbody>
-						</table>
-					: null }
+				{this.renderDebug()}
 				{this.props.children}
 			</div>
 		);
@@ -274,7 +282,8 @@ RegionSelect.propTypes = {
 	maxRegions: PropTypes.number,
 	debug: PropTypes.bool,
 	className: PropTypes.string,
-	style: PropTypes.object
+	style: PropTypes.object,
+	regionStyle: PropTypes.object
 };
 RegionSelect.defaultProps = {
 	maxRegions: Infinity,

src/example/App.js

@@ -20,6 +20,24 @@ class App extends Component {
 	}
 	changeRegionData (index, event) {
 		const region = this.state.regions[index];
+		let color;
+		switch (event.target.value) {
+		case '1':
+			color = 'rgba(0, 255, 0, 0.5)';
+			break;
+		case '2':
+			color = 'rgba(0, 0, 255, 0.5)';
+			break;
+		case '3':
+			color = 'rgba(255, 0, 0, 0.5)';
+			break;
+		default:
+			color = 'rgba(0, 0, 0, 0.5)';
+		}
+
+		region.data.regionStyle = {
+			background: color
+		};
 		this.onChange([
 			...this.state.regions.slice(0, index),
 			objectAssign({}, region, {
@@ -33,18 +51,22 @@ class App extends Component {
 			return (
 				<div style={{ position: 'absolute', right: 0, bottom: '-1.5em' }}>
 					<select onChange={(event) => this.changeRegionData(regionProps.index, event)} value={regionProps.data.dataType}>
-						<option value='1'>Contact ID</option>
-						<option value='2'>Contract number</option>
-						<option value='3'>Name</option>
+						<option value='1'>Green</option>
+						<option value='2'>Blue</option>
+						<option value='3'>Red</option>
 					</select>
 				</div>
 			);
 		}
 	}
 	render() {
+		const regionStyle = {
+			background: 'rgba(255, 0, 0, 0.5)'
+		};
+
 		return (
 			<div>
-				<RegionSelect maxRegions={1} regions={this.state.regions} onChange={this.onChange} regionRenderer={this.regionRenderer}>
+				<RegionSelect maxRegions={3} regionStyle={regionStyle} regions={this.state.regions} onChange={this.onChange} regionRenderer={this.regionRenderer}>
 					<img src='/static/example-doc.jpg' width='700px'/>
 				</RegionSelect>
 			</div>

webpack.config.js

@@ -21,14 +21,34 @@ module.exports = {
     })
   ],
   module: {
-    loaders: [{
-      test: /\.js$/,
-      loaders: ['react-hot', 'babel'],
-      include: path.join(__dirname, 'src')
-    },
+    rules: [
+      {
+        test: /\.jsx?$/,
+        use: [{
+          loader: 'babel-loader'
+          }, {
+            loader: 'react-hot-loader/webpack'
+          }
+        ],
+        include: path.join(__dirname, 'src')
+      },
       {
         test: /\.scss/,
-        loaders: ['style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'sass']
+        use: [{
+          loader: "style-loader"
+        }, {
+          loader: "css-loader", options: {
+            sourceMap: true
+          }
+        }, {
+          loader: "sass-loader", options: {
+            sourceMap: true,
+            includePaths: [
+              path.join(__dirname, 'src')
+            ]
+          }
+        }],
+        include: path.join(__dirname, 'src')
       }
     ]
   }