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 (
@@ -43,6 +40,7 @@ class Region extends Component { ); } } + Region.propTypes = { x: PropTypes.number.isRequired, y: PropTypes.number.isRequired, diff --git a/src/RegionSelect.js b/src/RegionSelect.js index c0d31e2..de3221c 100644 --- a/src/RegionSelect.js +++ b/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 (
{regions.map(this.renderRect.bind(this))} - {this.props.debug + {debug ? {regions.map((rect, index) => { @@ -267,22 +270,23 @@ class RegionSelect extends Component {
: null } - {this.props.children} + {children}
); } } 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,