diff --git a/demo/bundle.js b/demo/bundle.js index b80f79b..573b28d 100644 --- a/demo/bundle.js +++ b/demo/bundle.js @@ -143,7 +143,8 @@ crop: this.state.crop, src: dataUrl, onImageLoaded: this.onImageLoaded, - onComplete: this.onCropComplete + onComplete: this.onCropComplete, + disabled: true // onChange={this.onCropChange} }), _react2.default.createElement( @@ -20580,6 +20581,10 @@ }, { key: 'onDocMouseTouchMove', value: function onDocMouseTouchMove(e) { + if (this.props.disabled) { + return; + } + if (!this.mouseDownOnCrop) { return; } @@ -20763,6 +20768,10 @@ value: function onCropMouseTouchDown(e) { e.preventDefault(); // Stop drag selection. + if (this.props.disabled) { + return; + } + var crop = this.state.crop; var clientPos = this.getClientPos(e); @@ -20829,6 +20838,10 @@ e.preventDefault(); // Stop drag selection. + if (this.props.disabled) { + return; + } + var crop = this.props.keepSelection === true ? {} : this.state.crop; var clientPos = this.getClientPos(e); @@ -20869,6 +20882,10 @@ }, { key: 'onComponentKeyDown', value: function onComponentKeyDown(e) { + if (this.props.disabled) { + return; + } + var keyCode = e.which; var crop = this.state.crop; var nudged = false; @@ -20911,6 +20928,10 @@ }, { key: 'onDocMouseTouchEnd', value: function onDocMouseTouchEnd(e) { + if (this.props.disabled) { + return; + } + if (this.mouseDownOnCrop) { this.cropInvalid = this.isCropInvalid(this.state.crop); @@ -21122,6 +21143,9 @@ if (this.state.crop.aspect) { componentClasses.push('ReactCrop-fixed-aspect'); } + if (this.props.disabled) { + componentClasses.push('ReactCrop--disabled'); + } return _react2.default.createElement( 'div', @@ -21155,7 +21179,11 @@ keepSelection: _react.PropTypes.bool, onChange: _react.PropTypes.func, onComplete: _react.PropTypes.func, - onImageLoaded: _react.PropTypes.func + onImageLoaded: _react.PropTypes.func, + disabled: _react.PropTypes.bool + }; + ReactCrop.defaultProps = { + disabled: false }; ReactCrop.xOrds = ['e', 'w']; ReactCrop.yOrds = ['n', 's']; diff --git a/demo/demo.js b/demo/demo.js index 9791f47..2633bf5 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -81,6 +81,7 @@ function loadEditView(dataUrl) { src={dataUrl} onImageLoaded={this.onImageLoaded} onComplete={this.onCropComplete} + disabled={true} // onChange={this.onCropChange} /> diff --git a/dist/ReactCrop.css b/dist/ReactCrop.css index 3be913c..7340350 100644 --- a/dist/ReactCrop.css +++ b/dist/ReactCrop.css @@ -4,6 +4,8 @@ cursor: crosshair; overflow: hidden; max-width: 100%; } + .ReactCrop.ReactCrop--disabled { + cursor: inherit; } .ReactCrop:focus { outline: none; } @@ -42,6 +44,8 @@ animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: running; } + .ReactCrop--disabled .ReactCrop--crop-selection { + cursor: inherit; } @keyframes marching-ants { 0% { @@ -114,6 +118,9 @@ margin-left: -4px; cursor: w-resize; } +.ReactCrop--disabled .ReactCrop--drag-handle { + cursor: inherit; } + .ReactCrop--drag-bar { position: absolute; } diff --git a/lib/ReactCrop.scss b/lib/ReactCrop.scss index f5db6c6..44e8b4b 100644 --- a/lib/ReactCrop.scss +++ b/lib/ReactCrop.scss @@ -21,6 +21,10 @@ $drag-bar-mobile-size: $drag-bar-size + 8; cursor: crosshair; overflow: hidden; max-width: 100%; + + &.ReactCrop--disabled { + cursor: inherit; + } } .ReactCrop:focus { @@ -55,6 +59,10 @@ $drag-bar-mobile-size: $drag-bar-size + 8; box-sizing: border-box; cursor: move; + .ReactCrop--disabled & { + cursor: inherit; + } + // Marching ants. background-image: linear-gradient(to right, $marching-ants-colour 50%, $marching-ants-alt-colour 50%), @@ -151,6 +159,12 @@ $drag-bar-mobile-size: $drag-bar-size + 8; cursor: w-resize; } +// Use the same specificity as the ords above but just +// come after. +.ReactCrop--disabled .ReactCrop--drag-handle { + cursor: inherit; +} + .ReactCrop--drag-bar { position: absolute; }