diff --git a/README.md b/README.md index 4e777f4..6b69014 100644 --- a/README.md +++ b/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. diff --git a/lib/Region.js b/lib/Region.js index fb03ae1..6485d37 100644 --- a/lib/Region.js +++ b/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, [{ diff --git a/lib/RegionSelect.js b/lib/RegionSelect.js index c5ceb6b..12ff57c 100644 --- a/lib/RegionSelect.js +++ b/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, diff --git a/src/Region.js b/src/Region.js index 18af867..93895fe 100644 --- a/src/Region.js +++ b/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 (