v3.0.0. Introduce Activate by Tap and Click

New Props: * activationInteractionMouse * activationInteractionTouch * tapDurationInMs * tapMoveThreshold
ethanselzer · Sep 2, 2018 · 4ed6fe6 · 4ed6fe6
1 parent 0209657
commit 4ed6fe6
Show file tree

Hide file tree

Showing 45 changed files with 12,037 additions and 5,831 deletions.
diff --git a/.babelrc b/.babelrc
@@ -17,8 +17,7 @@
         },
         "test": {
             "plugins": [
-                "transform-es2015-modules-commonjs",
-                "istanbul"
+                "transform-es2015-modules-commonjs"
             ]
         }
     }

diff --git a/.eslintrc b/.eslintrc
@@ -1,13 +1,8 @@
 {
     // https://github.com/facebookincubator/create-react-app/blob/master/packages/eslint-config-react-app/index.js
     "extends": "react-app",
-    "plugins": [
-        "chai-friendly"
-    ],
     // http://eslint.org/docs/rules/
     "rules": {
-        "no-unused-expressions": 0,
-        "chai-friendly/no-unused-expressions": 2,
         "import/default": "error",
         "import/export": "error",
         "import/named": "error",
@@ -18,6 +13,7 @@
         "import/no-named-as-default": "error",
         "import/no-named-as-default-member": "error",
         "import/no-unresolved": ["error", { "commonjs": true }],
-        "indent": ["error", 4]
+        "indent": ["error", 4, { "SwitchCase": 1 }],
+        "jsx-a11y/href-no-hash": "off"
     }
 }
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,29 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "Jest All",
+        "program": "${workspaceFolder}/node_modules/.bin/jest",
+        "args": ["--runInBand"],
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "neverOpen",
+        "windows": {
+          "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        }
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "Jest Current File",
+        "program": "${workspaceFolder}/node_modules/.bin/jest",
+        "args": ["${relativeFile}"],
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "neverOpen",
+        "windows": {
+          "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        }
+      }
+    ]
+  }
diff --git a/README.md b/README.md
@@ -69,15 +69,16 @@ The information in `detectedEnvironment` is acquired from interaction with this
 
 All props are optional.
 
+**activationInteractionMouse** : String - One of INTERACTIONS.HOVER (default), INTERACTIONS.CLICK. Import Interactions like this `import ReactCursorPosition, { Interactions } from 'react-cursor-position'`. See [examples](https://ethanselzer.github.io/react-cursor-position/#/activate-by-hover). for more.
+
+**activationInteractionTouch** : String - One of INTERACTIONS.PRESS (default), INTERACTIONS.TAP, or INTERACTIONS.TOUCH. Import Interactions like this `import ReactCursorPosition, { Interactions } from 'react-cursor-position'`. See [examples](https://ethanselzer.github.io/react-cursor-position/#/activate-by-press).
+
 **className** : String - CSS class name(s) to be applied to the div rendered by react-cursor-position.
 
 **hoverDelayInMs** : Number - Amount of time, in milliseconds, to delay hover interaction from activating. Defaults to 0.
 
 **hoverOffDelayInMs** : Number - Amount of time, in milliseconds, to delay hover off interaciton from deactivating. Defaults to 0.
 
-**isActivatedOnTouch** : Boolean - Activate immediately on touch. Scrolling may not be possible when scroll
-gesture begins on target area. Recommended only when scrolling is not an expected use case. Defaults to false.
-
 **isEnabled** : Boolean - Enable or disable cursor position monitoring without remounting. Defaults to true.
 
 **mapChildProps** : Function - Model child component props to your custom shape.
@@ -95,7 +96,7 @@ Function receives one parameter with the signature `{ elementDimensions: { width
 **onDetectedEnvironmentChanged** : Function - Called when detected environment (mouse or touch) changes.
 Function receives one parameter with the signature `{ isMouseDetected: Boolean, isTouchDetected: Boolean }`.
 
-**pressDuration** : Number - Milliseconds delay before press gesture is activated. Defaults to 500.
+**pressDurationInMs** : Number - Milliseconds delay before press gesture is activated. Defaults to 500.
 
 **pressMoveThreshold** : Number - Amount of movement, in pixels, allowed during press gesture detection. Defaults to 5.
 
@@ -106,6 +107,10 @@ setting this prop false. Defaults to true.
 
 **style** : Object - Style to be applied to the div rendered by react-cursor-position.
 
+**tapDurationInMs** : Number - Max milliseconds allowed for a screen touch to be considered a tap gesture. Defaults to 180.
+
+**tapMoveThreshold** : Number - Amount of movement, in pixels, allowed during tap gesture detection. Defaults to 5.
+
 ## Imperative API
 **reset**: Invoking the reset method instructs react-cursor-position to recalculate its position relative to the page.
 
@@ -120,8 +125,8 @@ Please [open an issue](https://github.com/ethanselzer/react-cursor-position/issu
 ```ssh
 git clone https://github.com/ethanselzer/react-cursor-position.git
 cd react-cursor-position
-yarn
-yarn run build
+npm install
+npm run build
 cd example
 yarn
 yarn start
@@ -134,12 +139,12 @@ If your default browser does not start automatically, open a new browser window
 ```ssh
 git clone https://github.com/ethanselzer/react-cursor-position.git
 cd react-cursor-position
-yarn
+npm install
 npm run #print available commands
 ```
 The Example Project may be used in development of react-cursor-position. 
 
-To rebuild the source automatically when changes are made, run `yarn run build-watch`.
+To rebuild the source automatically when changes are made, run `npm run build-watch`.
 
 ## Contributing
 

diff --git a/example/public/is-activated-on-touch.html → example/public/activation-click.html b/example/public/is-activated-on-touch.html → example/public/activation-click.html
@@ -12,15 +12,14 @@
 <pre>
 <code>
 import React from 'react';
-import ReactCursorPosition from 'react-cursor-position';
+import ReactCursorPosition, { INTERACTIONS } from 'react-cursor-position';
 
 import PositionLabel from './PositionLabel';
 import InstructionsLabel from './InstructionsLabel';
 
 export default () => (
     &lt;ReactCursorPosition
-        className="example__target"
-        isActivatedOnTouch
+        activationInteractionMouse={INTERACTIONS.CLICK}
     &gt;
         &lt;PositionLabel /&gt;
         &lt;InstructionsLabel /&gt;

diff --git a/example/public/activation-hover.html b/example/public/activation-hover.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.9.0/styles/solarized-light.min.css">
+    <script src="//cdn.jsdelivr.net/highlight.js/9.9.0/highlight.min.js"></script>
+    <link rel="stylesheet" href="styles.css">
+    <title>Class Name | Code Example | React Cursor Position</title>
+  </head>
+  <body>
+<pre>
+<code>
+import React from 'react';
+import ReactCursorPosition, { INTERACTIONS } from 'react-cursor-position';
+
+import PositionLabel from './PositionLabel';
+import InstructionsLabel from './InstructionsLabel';
+
+export default () => (
+    &lt;ReactCursorPosition
+        activationInteractionMouse={INTERACTIONS.HOVER} //default
+        hoverDelayInMs={250} //default: 0
+        hoverOffDelayInMs={150} //default: 0
+    &gt;
+        &lt;PositionLabel /&gt;
+        &lt;InstructionsLabel /&gt;
+    &lt;/ReactCursorPosition&gt;
+);
+</code>
+</pre>
+
+    <script>
+        hljs.initHighlightingOnLoad();
+    </script>
+
+  </body>
+</html>
diff --git a/example/public/hover-delay.html → example/public/activation-press.html b/example/public/hover-delay.html → example/public/activation-press.html
@@ -12,16 +12,16 @@
 <pre>
 <code>
 import React from 'react';
-import ReactCursorPosition from 'react-cursor-position';
+import ReactCursorPosition, { INTERACTIONS } from 'react-cursor-position';
 
 import PositionLabel from './PositionLabel';
 import InstructionsLabel from './InstructionsLabel';
 
 export default () => (
     &lt;ReactCursorPosition
-        className="example__target"
-        hoverDelayInMs={1000}
-        hoverOffDelayInMs={500}
+        activationInteractionPress={INTERACTIONS.PRESS} //default
+        pressDurationInMs={500} //default
+        pressMoveThreshold={5} //default
     &gt;
         &lt;PositionLabel /&gt;
         &lt;InstructionsLabel /&gt;

diff --git a/example/public/press-move-threshold.html → example/public/activation-tap.html b/example/public/press-move-threshold.html → example/public/activation-tap.html
@@ -12,15 +12,14 @@
 <pre>
 <code>
 import React from 'react';
-import ReactCursorPosition from 'react-cursor-position';
+import ReactCursorPosition, { INTERACTIONS } from 'react-cursor-position';
 
 import PositionLabel from './PositionLabel';
 import InstructionsLabel from './InstructionsLabel';
 
 export default () => (
     &lt;ReactCursorPosition
-        className="example__target"
-        pressMoveThreshold={20}
+        activationInteractionTouch={INTERACTIONS.TAP}
     &gt;
         &lt;PositionLabel /&gt;
         &lt;InstructionsLabel /&gt;

diff --git a/example/public/press-duration.html → example/public/activation-touch.html b/example/public/press-duration.html → example/public/activation-touch.html
@@ -12,15 +12,14 @@
 <pre>
 <code>
 import React from 'react';
-import ReactCursorPosition from 'react-cursor-position';
+import ReactCursorPosition, { INTERACTIONS } from 'react-cursor-position';
 
 import PositionLabel from './PositionLabel';
 import InstructionsLabel from './InstructionsLabel';
 
 export default () => (
     &lt;ReactCursorPosition
-        className="example__target"
-        pressDuration={1000}
+        activationInteractionTouch={INTERACTIONS.TOUCH}
     &gt;
         &lt;PositionLabel /&gt;
         &lt;InstructionsLabel /&gt;

diff --git a/example/public/circle.yml b/example/public/circle.yml
diff --git a/example/src/components/PressMoveThreshold.js → example/src/components/ActivationByClick.js b/example/src/components/PressMoveThreshold.js → example/src/components/ActivationByClick.js
@@ -1,16 +1,15 @@
 import React from 'react';
-import ReactCursorPosition from '../pkg-lnk/ReactCursorPosition';
+import ReactCursorPosition, { INTERACTIONS } from '../pkg-lnk/ReactCursorPosition';
 import PositionLabel from './PositionLabel';
-import InstructionsLabel from './InstructionsLabel';
 
 export default () => (
     <ReactCursorPosition
         className="example__target"
-        pressMoveThreshold={20}
+        activationInteractionMouse={INTERACTIONS.CLICK}
     >
         <PositionLabel />
         <div className="example__instructions">
-            <InstructionsLabel />
+            Click to activate. Hover. Then click again to deactivate.
         </div>
     </ReactCursorPosition>
 );

diff --git a/example/src/components/HoverDelay.js → example/src/components/ActivationByHover.js b/example/src/components/HoverDelay.js → example/src/components/ActivationByHover.js
@@ -1,13 +1,14 @@
 import React from 'react';
-import ReactCursorPosition from '../pkg-lnk/ReactCursorPosition';
+import ReactCursorPosition, { INTERACTIONS } from '../pkg-lnk/ReactCursorPosition';
 import PositionLabel from './PositionLabel';
 import InstructionsLabel from './InstructionsLabel';
 
 export default () => (
     <ReactCursorPosition
         className="example__target"
-        hoverDelayInMs={1000}
-        hoverOffDelayInMs={500}
+        activationInteractionMouse={INTERACTIONS.HOVER} //default
+        hoverDelayInMs={250} //default 0
+        hoverOffDelayInMs={150} //default 0
     >
         <PositionLabel />
         <div className="example__instructions">

diff --git a/example/src/components/ActivationByPress.js b/example/src/components/ActivationByPress.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactCursorPosition, { INTERACTIONS } from '../pkg-lnk/ReactCursorPosition';
+import PositionLabel from './PositionLabel';
+
+export default () => (
+    <ReactCursorPosition
+        className="example__target"
+        activationInteractionTouch={INTERACTIONS.PRESS} // default
+        pressDurationInMs={500} //default
+        pressMoveThreshold={5} //default
+    >
+        <PositionLabel />
+        <div className="example__instructions">
+            Press and hold to activate, then drag
+        </div>
+    </ReactCursorPosition>
+);
+
diff --git a/example/src/components/PressDuration.js → example/src/components/ActivationByTap.js b/example/src/components/PressDuration.js → example/src/components/ActivationByTap.js
@@ -1,16 +1,15 @@
 import React from 'react';
-import ReactCursorPosition from '../pkg-lnk/ReactCursorPosition';
+import ReactCursorPosition, { INTERACTIONS } from '../pkg-lnk/ReactCursorPosition';
 import PositionLabel from './PositionLabel';
-import InstructionsLabel from './InstructionsLabel';
 
 export default () => (
     <ReactCursorPosition
         className="example__target"
-        pressDuration={1000}
+        activationInteractionTouch={INTERACTIONS.TAP}
     >
         <PositionLabel />
         <div className="example__instructions">
-            <InstructionsLabel />
+            Tap to activate. Drag. Tap again to deactivate.
         </div>
     </ReactCursorPosition>
 );

diff --git a/example/src/components/IsActivatedOnTouch.js → example/src/components/ActivationByTouch.js b/example/src/components/IsActivatedOnTouch.js → example/src/components/ActivationByTouch.js
@@ -1,15 +1,15 @@
 import React from 'react';
-import ReactCursorPosition from '../pkg-lnk/ReactCursorPosition';
+import ReactCursorPosition, { INTERACTIONS } from '../pkg-lnk/ReactCursorPosition';
 import PositionLabel from './PositionLabel';
 
 export default () => (
     <ReactCursorPosition
         className="example__target"
-        isActivatedOnTouch
+        activationInteractionTouch={INTERACTIONS.TOUCH}
     >
         <PositionLabel />
         <div className="example__instructions">
-            Touch and Drag In This Area
+            Touch and Drag
         </div>
     </ReactCursorPosition>
 );

diff --git a/example/src/components/Header.js b/example/src/components/Header.js
@@ -37,20 +37,22 @@ class Navigation extends React.Component {
                 return 2.4;
             case '/style' :
                 return 2.5;
-            case '/is-activated-on-touch' :
+            case '/activate-by-hover' :
+                return 2.11;
+            case '/activate-by-touch' :
                 return 2.6;
-            case '/press-duration' :
+            case '/activate-by-tap' :
                 return 2.7;
-            case '/press-move-threshold' :
+            case '/activate-by-press' :
                 return 2.8;
             case '/on-activation-changed' :
                 return 2.9;
-            case '/hover-delay' :
-                return 2.11;
             case '/detected-environment-changed' :
                 return 2.12;
             case '/reset' :
                 return 2.13;
+            case '/activate-by-click' :
+                return 2.14;
             case '/image-magnify' :
                 return 3.1;
             case '/support' :
@@ -75,15 +77,16 @@ class Navigation extends React.Component {
                     <Nav {...{activeKey: this.state.selectedNavKey}}>
                         <NavItem eventKey={1} href="#/">Home</NavItem>
                         <NavDropdown eventKey={2} title="API Examples" id="nav-dropdown">
+                            <MenuItem eventKey={2.14} href="#/activate-by-click">Activate by Click</MenuItem>
+                            <MenuItem eventKey={2.11} href="#/activate-by-hover">Activate by Hover</MenuItem>
+                            <MenuItem eventKey={2.8} href="#/activate-by-press">Activate by Press</MenuItem>
+                            <MenuItem eventKey={2.7} href="#/activate-by-tap">Activate by Tap</MenuItem>
+                            <MenuItem eventKey={2.6} href="#/activate-by-touch">Activate by Touch</MenuItem>
                             <MenuItem eventKey={2.4} href="#/class-name">Class Name</MenuItem>
-                            <MenuItem eventKey={2.11} href="#/hover-delay">Hover Delay</MenuItem>
-                            <MenuItem eventKey={2.6} href="#/is-activated-on-touch">Is Activated On Touch</MenuItem>
                             <MenuItem eventKey={2.1} href="#/map-child-props">Map Child Props</MenuItem>
                             <MenuItem eventKey={2.12} href="#/detected-environment-changed">On Environment Changed</MenuItem>
                             <MenuItem eventKey={2.2} href="#/on-position-changed">On Position Changed</MenuItem>
                             <MenuItem eventKey={2.9} href="#/on-activation-changed">On Activation Changed</MenuItem>
-                            <MenuItem eventKey={2.7} href="#/press-duration">Press Duration</MenuItem>
-                            <MenuItem eventKey={2.8} href="#/press-move-threshold">Press Move Threshold</MenuItem>
                             <MenuItem eventKey={2.3} href="#/should-decorate-children">Should Decorate Children</MenuItem>
                             <MenuItem eventKey={2.5} href="#/style">Style</MenuItem>
                             <MenuItem eventKey={2.13} href="#/reset">Reset</MenuItem>