Improve Input Type Detection

ethanselzer · Nov 20, 2017 · 536cbb1 · 536cbb1
1 parent c49bbb2
commit 536cbb1
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 46 deletions.
diff --git a/example/package.json b/example/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-image-magnify": "2.3.0",
     "react-router": "3.0.5"
   },
   "scripts": {

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -1302,6 +1302,10 @@ circular-json@^0.3.1:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
 
+[email protected]:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+
 clap@^1.0.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.0.tgz#59c90fe3e137104746ff19469a27a634ff68c857"
@@ -1830,23 +1834,48 @@ destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
 
+detect-hover@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/detect-hover/-/detect-hover-1.0.2.tgz#589fb0b469220897a9eee3fa36a917e1eda37a21"
+
 detect-indent@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
   dependencies:
     repeating "^2.0.0"
 
+[email protected]:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/detect-it/-/detect-it-3.0.3.tgz#8e13daa0b62126150cbf76d083a1d34d1b07d071"
+  dependencies:
+    detect-hover "^1.0.2"
+    detect-passive-events "^1.0.4"
+    detect-pointer "^1.0.2"
+    detect-touch-events "^2.0.1"
+
 detect-node@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
 
+detect-passive-events@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/detect-passive-events/-/detect-passive-events-1.0.4.tgz#6ed477e6e5bceb79079735dcd357789d37f9a91a"
+
+detect-pointer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/detect-pointer/-/detect-pointer-1.0.2.tgz#1e0e4e261dab45055c50c74fb5a4ff09ceb18fbd"
+
 [email protected]:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.3.tgz#a4d2f061d757a034ecf37c514260a98750f2b131"
   dependencies:
     address "^1.0.1"
     debug "^2.6.0"
 
+detect-touch-events@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/detect-touch-events/-/detect-touch-events-2.0.1.tgz#365833cf0c5c40c4090a08096b8a688db00fa337"
+
 diff@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.0.tgz#056695150d7aa93237ca7e378ac3b1682b7963b9"
@@ -4882,21 +4911,21 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.6:
-  version "15.5.10"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-
-prop-types@^15.6.0:
+[email protected], prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.5.6:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 proxy-addr@~1.1.4:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.5.tgz#71c0ee3b102de3f202f3b64f608d173fcba1a918"
@@ -4987,7 +5016,7 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-cursor-position@^2.2.2:
+[email protected]:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-cursor-position/-/react-cursor-position-2.2.2.tgz#7e5de475a92feaa235fe01ee31fda3eb9b0e48de"
   dependencies:
@@ -5038,6 +5067,21 @@ react-error-overlay@^1.0.9:
     settle-promise "1.0.0"
     source-map "0.5.6"
 
+[email protected]:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-image-magnify/-/react-image-magnify-2.3.0.tgz#4eea04f8f00ebfb2b014e4af185e3c42414104bf"
+  dependencies:
+    clamp "1.0.1"
+    detect-it "3.0.3"
+    object-assign "4.1.1"
+    prop-types "15.6.0"
+    react-cursor-position "2.2.2"
+    react-required-if "1.0.1"
+
+[email protected]:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-required-if/-/react-required-if-1.0.1.tgz#f41d06bebb75346c206cd1de8dc0ef5b7c8f9abd"
+
 [email protected]:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.0.5.tgz#c3b7873758045a8bbc9562aef4ff4bc8cce7c136"

diff --git a/src/EnlargedImage.js b/src/EnlargedImage.js
@@ -9,6 +9,7 @@ import {
 import ImageShape from './prop-types/ImageShape';
 import { noop } from './utils';
 import Point from './prop-types/Point';
+import { ENLARGED_IMAGE_POSITION } from './constants';
 
 export default class extends React.Component {
     constructor(props) {
@@ -43,7 +44,10 @@ export default class extends React.Component {
         isLazyLoaded: PropTypes.bool,
         largeImage: ImageShape,
         smallImage: ImageShape,
-        imagePosition: PropTypes.oneOf(['beside', 'over'])
+        imagePosition: PropTypes.oneOf([
+            ENLARGED_IMAGE_POSITION.beside,
+            ENLARGED_IMAGE_POSITION.over
+        ])
     };
 
     componentWillReceiveProps(nextProps) {
@@ -103,7 +107,8 @@ export default class extends React.Component {
             top: '0px',
             overflow: 'hidden'
         };
-        const isInPlaceMode = imagePosition === 'over';
+        const { over: OVER } = ENLARGED_IMAGE_POSITION;
+        const isInPlaceMode = imagePosition === OVER;
 
         if (isInPlaceMode) {
             return objectAssign(baseContainerStyle, {
@@ -126,7 +131,8 @@ export default class extends React.Component {
             smallImage,
             position
         } = this.props;
-        const isInPlaceMode = imagePosition === 'over';
+        const { over: OVER } = ENLARGED_IMAGE_POSITION;
+        const isInPlaceMode = imagePosition === OVER;
 
         if (isInPlaceMode) {
             return getInPlaceEnlargedImageCoordinates(

diff --git a/src/ReactImageMagnify.js b/src/ReactImageMagnify.js
@@ -12,25 +12,35 @@ import Hint from './hint/DefaultHint';
 import ShadedLens from './shaded-lens';
 import ImageShape from './prop-types/ImageShape';
 import { noop } from './utils';
+import {
+    INPUT_TYPE,
+    ENLARGED_IMAGE_POSITION
+} from './constants';
 
 class ReactImageMagnify extends React.Component {
 
     constructor(props) {
         super(props);
 
+        const { primaryInput } = detectIt;
+        const {
+            mouse: MOUSE,
+            touch: TOUCH
+        } = INPUT_TYPE;
+
         this.state = {
             smallImageWidth: 0,
             smallImageHeight: 0,
-            detectedEnvironment: {
-                isMouseDeteced: detectIt.hasMouse,
-                isTouchDetected: detectIt.hasTouch
+            detectedInputType: {
+                isMouseDeteced: (primaryInput === MOUSE),
+                isTouchDetected: (primaryInput === TOUCH)
             },
             isActive: false
         }
 
         this.onSmallImageLoad = this.onSmallImageLoad.bind(this);
         this.setSmallImageDimensionState = this.setSmallImageDimensionState.bind(this);
-        this.onDetectedEnvironmentChanged = this.onDetectedEnvironmentChanged.bind(this);
+        this.onDetectedInputTypeChanged = this.onDetectedInputTypeChanged.bind(this);
         this.onActivationChanged = this.onActivationChanged.bind(this);
     }
 
@@ -67,7 +77,10 @@ class ReactImageMagnify extends React.Component {
             onError: PropTypes.func
         }),
         style: PropTypes.object,
-        enlargedImagePosition: PropTypes.oneOf(['beside', 'over'])
+        enlargedImagePosition: PropTypes.oneOf([
+            ENLARGED_IMAGE_POSITION.beside,
+            ENLARGED_IMAGE_POSITION.over
+        ])
     };
 
     static defaultProps = {
@@ -128,9 +141,9 @@ class ReactImageMagnify extends React.Component {
         });
     }
 
-    onDetectedEnvironmentChanged(detectedEnvironment) {
+    onDetectedInputTypeChanged(detectedInputType) {
         this.setState({
-            detectedEnvironment
+            detectedInputType
         });
     }
 
@@ -141,14 +154,19 @@ class ReactImageMagnify extends React.Component {
     }
 
     getEnlargedImagePlacement() {
-        const { enlargedImagePosition } = this.props;
+        const { enlargedImagePosition: userDefinedEnlargedImagePosition } = this.props;
         const {
-            detectedEnvironment: {
+            detectedInputType: {
                 isTouchDetected
             }
         } = this.state;
+        const computedEnlargedImagePosition = (
+            isTouchDetected
+                ? ENLARGED_IMAGE_POSITION.over
+                : ENLARGED_IMAGE_POSITION.beside
+        );
 
-        return enlargedImagePosition || (isTouchDetected ? 'over' : 'beside');
+        return userDefinedEnlargedImagePosition || computedEnlargedImagePosition;
     }
 
     render() {
@@ -183,7 +201,7 @@ class ReactImageMagnify extends React.Component {
         const {
             smallImageWidth,
             smallImageHeight,
-            detectedEnvironment: {
+            detectedInputType: {
                 isTouchDetected
             }
         } = this.state;
@@ -248,7 +266,7 @@ class ReactImageMagnify extends React.Component {
         const enlargedImagePlacement = this.getEnlargedImagePlacement();
 
         const shouldShowLens = (
-            enlargedImagePlacement !== 'over' &&
+            enlargedImagePlacement !== ENLARGED_IMAGE_POSITION.over &&
             !isTouchDetected
         );
 
@@ -261,7 +279,7 @@ class ReactImageMagnify extends React.Component {
                 hoverOffDelayInMs,
                 isActivatedOnTouch,
                 onActivationChanged: this.onActivationChanged,
-                onDetectedEnvironmentChanged: this.onDetectedEnvironmentChanged,
+                onDetectedInputTypeChanged: this.onDetectedInputTypeChanged,
                 pressDuration,
                 pressMoveThreshold,
                 style: compositContainerStyle

diff --git a/src/constants/index.js b/src/constants/index.js
@@ -0,0 +1,9 @@
+export const INPUT_TYPE = {
+    mouse: 'mouse',
+    touch: 'touch'
+};
+
+export const ENLARGED_IMAGE_POSITION = {
+    over: 'over',
+    beside: 'beside'
+}
diff --git a/test/enlarged-image.spec.js b/test/enlarged-image.spec.js
@@ -3,10 +3,15 @@ import { shallow } from 'enzyme';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import EnlargedImage from '../src/EnlargedImage';
+import { ENLARGED_IMAGE_POSITION } from '../src/constants';
 import * as utils from '../src/utils';
 
 describe('Enlarged Image', () => {
     let shallowWrapper;
+    const {
+        beside: BESIDE,
+        over: OVER
+    } = ENLARGED_IMAGE_POSITION;
 
     beforeEach(() => {
         shallowWrapper = getShallowWrapper();
@@ -107,10 +112,10 @@ describe('Enlarged Image', () => {
         });
 
         it('applies CSS to container element based on imagePosition prop', () => {
-            shallowWrapper.setProps({ imagePosition: 'over' });
+            shallowWrapper.setProps({ imagePosition: OVER });
             expect(shallowWrapper.render().css('left')).to.equal('0px');
 
-            shallowWrapper.setProps({ imagePosition: 'beside' });
+            shallowWrapper.setProps({ imagePosition: BESIDE });
             expect(shallowWrapper.render().css('left')).to.equal('100%');
             expect(shallowWrapper.render().css('margin-left')).to.equal('10px');
             expect(shallowWrapper.render().css('border')).to.equal('1px solid #d6d6d6');