Add disabled prop

README.md

@@ -71,6 +71,10 @@ You can use isChanging to hide complex UI while the user is changing the region.
 
 Display a table with information about each region. Useful for debugging.
 
+#### disabled (bool)
+
+Use if you need to temporary disable region selection. You need to clear already selected regions manually.
+
 #### constraint (bool)
 
 Constrain selection to underlying children. Default: false.

lib/Region.js

@@ -27,10 +27,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var Region = function (_Component) {
 	_inherits(Region, _Component);
 
-	function Region(props) {
+	function Region() {
 		_classCallCheck(this, Region);
 
-		return _possibleConstructorReturn(this, (Region.__proto__ || Object.getPrototypeOf(Region)).call(this, props));
+		return _possibleConstructorReturn(this, (Region.__proto__ || Object.getPrototypeOf(Region)).apply(this, arguments));
 	}
 
 	_createClass(Region, [{

lib/RegionSelect.js

@@ -176,6 +176,9 @@ var RegionSelect = function (_Component) {
 	}, {
 		key: 'onComponentMouseTouchDown',
 		value: function onComponentMouseTouchDown(event) {
+			if (this.props.disabled) {
+				return;
+			}
 			if (event.target.dataset.wrapper || event.target.dataset.dir || isSubElement(event.target, function (el) {
 				return el.dataset && el.dataset.wrapper;
 			})) {
@@ -313,17 +316,22 @@ var RegionSelect = function (_Component) {
 	}, {
 		key: 'render',
 		value: function render() {
-			var regions = this.props.regions;
+			var _props = this.props,
+			    regions = _props.regions,
+			    className = _props.className,
+			    children = _props.children,
+			    debug = _props.debug;
+
 			return _react2.default.createElement(
 				'div',
 				{
 					ref: 'image',
 					style: (0, _objectAssign2.default)({}, _style2.default.RegionSelect, this.props.style),
-					className: this.props.className,
+					className: className,
 					onTouchStart: this.onComponentMouseTouchDown,
 					onMouseDown: this.onComponentMouseTouchDown },
 				regions.map(this.renderRect.bind(this)),
-				this.props.debug ? _react2.default.createElement(
+				debug ? _react2.default.createElement(
 					'table',
 					{ style: { position: 'absolute', right: 0, top: 0 } },
 					_react2.default.createElement(
@@ -361,7 +369,7 @@ var RegionSelect = function (_Component) {
 						})
 					)
 				) : null,
-				this.props.children
+				children
 			);
 		}
 	}]);
@@ -370,16 +378,17 @@ var RegionSelect = function (_Component) {
 }(_react.Component);
 
 RegionSelect.propTypes = {
-	constraint: _propTypes.PropTypes.bool,
-	regions: _propTypes.PropTypes.array,
 	children: _propTypes.PropTypes.any,
+	className: _propTypes.PropTypes.string,
+	constraint: _propTypes.PropTypes.bool,
+	debug: _propTypes.PropTypes.bool,
+	disabled: _propTypes.PropTypes.bool,
+	maxRegions: _propTypes.PropTypes.number,
 	onChange: _propTypes.PropTypes.func.isRequired,
 	regionRenderer: _propTypes.PropTypes.func,
-	maxRegions: _propTypes.PropTypes.number,
-	debug: _propTypes.PropTypes.bool,
-	className: _propTypes.PropTypes.string,
-	style: _propTypes.PropTypes.object,
-	regionStyle: _propTypes.PropTypes.object
+	regions: _propTypes.PropTypes.array,
+	regionStyle: _propTypes.PropTypes.object,
+	style: _propTypes.PropTypes.object
 };
 RegionSelect.defaultProps = {
 	maxRegions: Infinity,

src/Region.js

@@ -4,9 +4,6 @@ import objectAssign from 'object-assign';
 import style from './style';
 
 class Region extends Component {
-	constructor (props) {
-		super(props);
-	}
 	renderHandles () {
 		return (
 			<div>
@@ -43,6 +40,7 @@ class Region extends Component {
 		);
 	}
 }
+
 Region.propTypes = {
 	x: PropTypes.number.isRequired,
 	y: PropTypes.number.isRequired,

src/RegionSelect.js

@@ -116,6 +116,9 @@ class RegionSelect extends Component {
 		}
 	}
 	onComponentMouseTouchDown (event) {
+		if (this.props.disabled) {
+			return;
+		}
 		if (event.target.dataset.wrapper || event.target.dataset.dir || isSubElement(event.target, (el) => el.dataset && el.dataset.wrapper)) {
 			return;
 		}
@@ -142,7 +145,7 @@ class RegionSelect extends Component {
 			clientPosYStart: clientPos.y,
 			imageWidth: this.refs.image.offsetWidth,
 			imageHeight: this.refs.image.offsetHeight,
-			isMove: false
+			isMove: false,
 		};
 
 		if (this.props.regions.length < this.props.maxRegions) {
@@ -220,7 +223,7 @@ class RegionSelect extends Component {
 			imageWidth: this.refs.image.offsetWidth,
 			imageHeight: this.refs.image.offsetHeight,
 			isMove: resizeDir ? false : true,
-			resizeDir: resizeDir
+			resizeDir: resizeDir,
 		};
 
 		this.regionChangeIndex = index;
@@ -242,16 +245,16 @@ class RegionSelect extends Component {
 		/>;
 	}
 	render () {
-		const regions = this.props.regions;
+		const { regions, className, children, debug } = this.props;
 		return (
 			<div
 				ref='image'
 				style={objectAssign({}, style.RegionSelect, this.props.style)}
-				className={this.props.className}
+				className={className}
 				onTouchStart={this.onComponentMouseTouchDown}
 				onMouseDown={this.onComponentMouseTouchDown}>
 				{regions.map(this.renderRect.bind(this))}
-				{this.props.debug
+				{debug
 					? <table style={{position:'absolute', right: 0, top: 0}}>
 							<tbody>
 								{regions.map((rect, index) => {
@@ -267,22 +270,23 @@ class RegionSelect extends Component {
 							</tbody>
 						</table>
 					: null }
-				{this.props.children}
+				{children}
 			</div>
 		);
 	}
 }
 RegionSelect.propTypes = {
-	constraint: PropTypes.bool,
-	regions: PropTypes.array,
 	children: PropTypes.any,
+	className: PropTypes.string,
+	constraint: PropTypes.bool,
+	debug: PropTypes.bool,
+	disabled: PropTypes.bool,
+	maxRegions: PropTypes.number,
 	onChange: PropTypes.func.isRequired,
 	regionRenderer: PropTypes.func,
-	maxRegions: PropTypes.number,
-	debug: PropTypes.bool,
-	className: PropTypes.string,
+	regions: PropTypes.array,
+	regionStyle: PropTypes.object,
 	style: PropTypes.object,
-	regionStyle: PropTypes.object
 };
 RegionSelect.defaultProps = {
 	maxRegions: Infinity,