Default cursor if disabled is true

dominictobias · Jun 30, 2016 · 323b7f1 · 323b7f1
1 parent 7f8e83b
commit 323b7f1
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git 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
@@ -81,6 +81,7 @@ function loadEditView(dataUrl) {
 						src={dataUrl}
 						onImageLoaded={this.onImageLoaded}
 						onComplete={this.onCropComplete}
+						disabled={true}
 						// onChange={this.onCropChange}
 					/>
 					<button onClick={this.onButtonClick}>Programatically set crop</button>

diff --git 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
@@ -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;
 }