Merge branch 'add-long-press'

Author: rafgraph

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: ['airbnb', 'prettier', 'prettier/react'],
+  plugins: ['react', 'prettier'],
+  rules: {
+    'no-unused-expressions': [
+      'error',
+      { allowShortCircuit: true, allowTernary: true },
+    ],
+    'no-plusplus': 'off',
+    'no-param-reassign': ['error', { props: false }],
+    'import/no-unresolved': ['error', { ignore: ['^react$'] }],
+    'import/extensions': ['error', 'never'],
+    'react/jsx-filename-extension': 'off',
+    'prettier/prettier': ['warn', { trailingComma: 'all', singleQuote: true }],
+  },
+};

.eslintrc.json

@@ -147,6 +147,8 @@ import { Link } from 'react-router-dom';
 
 #### Installing `react-interactive`
 ```shell
+$ yarn add react-interactive
+# OR
 $ npm install --save react-interactive
 ```
 ```javascript
@@ -184,6 +186,8 @@ For the definition of when each state is entered, see the [state machine definit
 | `setStateCallback` | function | `function({ prevState, nextState }) {...}` | Function passed in as a callback when RI calls `setState`. Receives the same object as `onStateChange` as its sole argument, except without the `event` key (`setState` is asynchronous and React events don't persist asynchronously). Use this hook if you need  to wait until the DOM is updated before executing the callback. |
 | `onClick` | function | `function(event, clickType) {...}` <br><br> Where `clickType` is one of: <br> `'mouseClick'` <br> `'tapClick'` <br> `'keyClick'` | Function called for mouse clicks, touch taps with 1 touch point/finger (called without delay), enter keydown events (if the element has focus), and synthetic click events. The `event` argument will always be a `click` event (`node.click()` is called to generate a click event if needed). The `clickType` argument will always be one of `mouseClick`, `tapClick`, or `keyClick`. It will be `mouseClick` for mouse clicks and for synthetic click events on mouse only and hybrid devices. It will be `tapClick` for touch taps with 1 touch point and for synthetic click events on touch only devices. It will be `keyClick` if the click event was generated from a enter keydown event (or, for some elements, a space keyup event). Note that RI will call `node.click()` for enter keydown events only if there is an `onClick` prop. |
 | `onTapTwo` | function | `function(event) {...}` | Function called for taps with 2 touch points, e.g. a 2 finger tap. Event passed in is the `touchend` event from last touch point to leave the surface. |
+| `tapTimeCutoff` | whole number | `500` | Number of ms to allow for a tap. This is the cutoff time that separates a tap from a long press. This prop is not required and the default is `500`. |
+| `onLongPress` | function | `function(event) {...}` | Function called on long press if touch is present after the `tapTimeCutoff` and if the touch has not moved more than is allowed for a `tap`. Event passed in is the touch start event that started the long press. |
 | `touchActiveTapOnly` | boolean | `touchActiveTapOnly` | Add this prop to only remain in the `touchActive` state while a tap is possible. If the touch is moved more than the tolerance for a tap, or held on the screen longer than the time allowed for a tap, then the `touchActive` state is exited. This is useful when the intention of the `touchActive` state is to indicate to the user that they are tapping something. Note that without this prop React Interactive will remain in the `touchActive` state as long as the touch point is on the screen.
 | `extraTouchNoTap` | boolean | `extraTouchNoTap` | Add this prop to cancel taps while touching someplace else on the screen. By default RI will ignore extra touches on the screen and allow taps on the RI element regardless of other touches. |
 | `nonContainedChild` | boolean |   `nonContainedChild` | Add this prop if the DOM node's children are not contained inside of it on the page. For example, a child that is absolutely positioned outside of its parent. React Interactive does some quality control checks using `node.getBoundingClientRect()`, and by default the children are assumed to be within the parent's rectangle, but if this is not the case, then add this prop and the children will be checked. |

README.md

@@ -4,11 +4,11 @@
   "description": "React Interactive",
   "main": "lib/index.js",
   "scripts": {
-    "build": "npm run build-lib && npm run build-dist",
+    "build": "yarn build-lib && yarn build-dist",
     "build-lib": "rm -rf lib && babel src -d lib",
     "build-dist": "rm -rf dist && webpack src/index.js dist/ReactInteractive.js && webpack -p src/index.js dist/ReactInteractive.min.js",
-    "prepublish": "npm run build",
-    "dev": "npm link && babel src -d lib --watch"
+    "prepublish": "yarn build",
+    "dev": "yarn link && babel src -d lib --watch"
   },
   "files": [
     "src",
@@ -37,22 +37,25 @@
     "react": "^15.5.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
+    "babel-cli": "^6.26.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.0.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-preset-env": "^1.4.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^14.1.0",
+    "eslint": "^4.4.1",
+    "eslint-config-airbnb": "^15.1.0",
+    "eslint-config-prettier": "^2.3.0",
     "eslint-plugin-import": "^2.1.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.10.3",
-    "webpack": "^2.4.1"
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-prettier": "^2.2.0",
+    "eslint-plugin-react": "^7.2.1",
+    "prettier": "^1.5.3",
+    "webpack": "^3.5.5"
   },
   "dependencies": {
-    "detect-it": "^3.0.0",
+    "detect-it": "^3.0.1",
     "object-assign": "^4.1.1",
     "prop-types": "^15.5.8"
   }

package.json

@@ -19,14 +19,17 @@ export default function compareProps(propsA, propsB) {
   // forceState is handled in componentWillReceiveProps
   const nextPOffset = propsB.forceState ? -1 : 0;
   const pOffset = propsA.forceState ? -1 : 0;
-  if ((keysB.length + nextPOffset) !== (Object.keys(propsA).length + pOffset)) return false;
+  if (keysB.length + nextPOffset !== Object.keys(propsA).length + pOffset)
+    return false;
 
   // if it's an state prop options object, then shallow compare the options for equality
-  const sameStateProp = (stateProp) => {
+  const sameStateProp = stateProp => {
     // if propsB doesn't have any of the options object keys, then return false b/c not options obj
     if (!statePropOptionKeys.some(key => propsB[stateProp][key])) return false;
     // shallow compare the options for equality
-    return statePropOptionKeys.every(key => propsB[stateProp][key] === propsA[stateProp][key]);
+    return statePropOptionKeys.every(
+      key => propsB[stateProp][key] === propsA[stateProp][key],
+    );
   };
 
   // loop through props
@@ -38,7 +41,10 @@ export default function compareProps(propsA, propsB) {
       // if the two props aren't equal, do some additional checks before returning false
       if (propsB[keysB[i]] !== propsA[keysB[i]]) {
         if (keysB[i] === 'as') {
-          if (React.isValidElement(propsA.as) && React.isValidElement(propsB.as)) {
+          if (
+            React.isValidElement(propsA.as) &&
+            React.isValidElement(propsB.as)
+          ) {
             // If `as` is JSX/ReactElement, first check to see if `as.type` is the same,
             // e.g. 'div', 'span', ReactClass, ReactFunctionalComponent, and then shallowly
             // compare it's props with a recursive call to sameProps - this should only recurse

src/compareProps.js

@@ -64,13 +64,20 @@ export const knownRoleTags = {
 
 // elements triggered by the enter key
 export function enterKeyTrigger(tag, type) {
-  return (tag !== 'select') && (tag !== 'input' || (type !== 'checkbox' && type !== 'radio'));
+  return (
+    tag !== 'select' &&
+    (tag !== 'input' || (type !== 'checkbox' && type !== 'radio'))
+  );
 }
 
 // elements triggered by the space bar
 export function spaceKeyTrigger(tag, type) {
-  return (tag === 'button') || (tag === 'select') ||
-  (tag === 'input' && (type === 'checkbox' || type === 'radio' || type === 'submit'));
+  return (
+    tag === 'button' ||
+    tag === 'select' ||
+    (tag === 'input' &&
+      (type === 'checkbox' || type === 'radio' || type === 'submit'))
+  );
 }
 
 // known props to not pass through, every prop not on this list is passed through
@@ -86,6 +93,7 @@ export const knownProps = {
   onTapTwo: true,
   onTapThree: true,
   onTapFour: true,
+  onLongPress: true,
   onMouseEnter: true,
   onMouseLeave: true,
   onMouseMove: true,
@@ -116,6 +124,8 @@ export const knownProps = {
 // ms to allow for the browser to add subsequent event to the queue in setTimeouts
 export const queueTime = 600;
 
+export const defaultTapTimeCutoff = 500;
+
 export function dummyEvent(type) {
   return {
     type,

src/constants.js

@@ -3,7 +3,8 @@ import { statePropOptionKeys } from './constants';
 // extract and return the style object and className string for the state given
 export function extractStyle(props, state) {
   // if no hoverActive prop, then use hover prop for style and classes
-  let stateProp = (state === 'hoverActive' && !props.hoverActive) ? 'hover' : state;
+  let stateProp =
+    state === 'hoverActive' && !props.hoverActive ? 'hover' : state;
   // loop until the state prop to use is found (i.e. it's not a string)
   let times = 0;
   while (typeof stateProp === 'string' && times < 10) {
@@ -45,7 +46,7 @@ export function setActiveAndFocusProps(props) {
 
 export function joinClasses(className, iStateClass, focusClass) {
   let joined = className;
-  joined += (joined && iStateClass) ? ` ${iStateClass}` : `${iStateClass}`;
-  joined += (joined && focusClass) ? ` ${focusClass}` : `${focusClass}`;
+  joined += joined && iStateClass ? ` ${iStateClass}` : `${iStateClass}`;
+  joined += joined && focusClass ? ` ${focusClass}` : `${focusClass}`;
   return joined;
 }