Add Touch Specific API

ethanselzer · Nov 18, 2016 · e9a3387 · e9a3387
1 parent 77565e2
commit e9a3387
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # react-image-magnify
 
-A React component for desktop and touch environments.
+A React image magnification component for desktop and touch.
 
 Desktop displays a side by side enlarged image view, with tinted control-image mask.
 Supports delaying hover and hover-off, which may help reduce unintentional triggering.
@@ -71,20 +71,32 @@ import ReactImageMagnifyTouch from 'react-image-magnify';
 
 ## Props API
 
+### Desktop and Touch
 | Prop                          | Type   | Required | Default | Description                                                |
 |-------------------------------|--------|----------|---------|------------------------------------------------------------|
 | `smallImage`                  | Object | Yes      |         | Small image information. See `Image Struct` below.         |
 | `largeImage`                  | Object | Yes      |         | Large image information. See `Image Struct` below.         |
 | `className`                   | String | No       |         | CSS class applied to root container element.               |
 | `style`                       | Object | No       |         | Style applied to root container element.                   |
-| `hoverDelayInMs`              | Number | No       | 250     | Milliseconds to delay hover trigger.                       |
-| `hoverOffDelayInMs`           | Number | No       | 150     | Milliseconds to delay hover-off trigger.                   |
 | `fadeDurationInMs`            | Number | No       | 300     | Milliseconds duration of magnified image fade in/fade out. |
 | `imageStyle`                  | Object | No       |         | Style applied to small image element.                      |
-| `lensStyle`                   | Object | No       |         | Style applied to tinted lens element. Desktop only         |
 | `enlargedImageContainerStyle` | Object | No       |         | Style applied to enlarged image container element.         |
 | `enlargedImageStyle`          | Object | No       |         | Style applied to enlarged image element.                   |
 
+### Desktop Only
+| Prop                          | Type   | Required | Default | Description                                                |
+|-------------------------------|--------|----------|---------|------------------------------------------------------------|
+| `hoverDelayInMs`              | Number | No       | 250     | Milliseconds to delay hover trigger.                       |
+| `hoverOffDelayInMs`           | Number | No       | 150     | Milliseconds to delay hover-off trigger.                   |
+| `lensStyle`                   | Object | No       |         | Style applied to tinted lens.                      |
+
+### Touch Only
+| Prop                          | Type   | Required | Default | Description                                                |
+|-------------------------------|--------|----------|---------|------------------------------------------------------------|
+| `isActivatedOnTouch`          | Boolean| No       | false   | Activate magnification immediately on touch.               |
+| `pressDuration`               | Number | No       | 500     | Milliseconds to delay press activation (long touch).       |
+| `pressMoveThreshold`          | Number | No       | 5       | Pixels of movement allowed during press activation         |
+
 ### Image Struct
 ```
 {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-image-magnify",
   "version": "1.2.0",
-  "description": "A React component displaying side by side enlarged image view, with tinted control-image mask.",
+  "description": "A React image magnification component for desktop and touch.",
   "repository": {
     "type": "git",
     "url": "https://github.com/ethanselzer/react-image-magnify.git"

diff --git a/src/ReactImageMagnifyTouch.js b/src/ReactImageMagnifyTouch.js
@@ -12,11 +12,11 @@ const ReactImageMagnify = ({
     enlargedImageContainerStyle,
     enlargedImageStyle,
     fadeDurationInMs,
-    hoverDelayInMs,
-    hoverOffDelayInMs,
+    isActivatedOnTouch,
     imageStyle,
     largeImage,
-    lensStyle,
+    pressDuration,
+    pressMoveThreshold,
     smallImage,
     style
 }) => {
@@ -29,6 +29,9 @@ const ReactImageMagnify = ({
     return (
         <ReactTouchPosition { ...{
             className,
+            isActivatedOnTouch,
+            pressDuration,
+            pressMoveThreshold,
             style: Object.assign({
                 width: `${smallImage.width}px`,
                 height: `${smallImage.height}px`,
@@ -70,20 +73,19 @@ ReactImageMagnify.propTypes = {
     className: PropTypes.string,
     enlargedImageContainerStyle: PropTypes.object,
     enlargedImageStyle: PropTypes.object,
-    fadeDurationInMs: PropTypes.number,
-    hoverDelayInMs: PropTypes.number,
-    hoverOffDelayInMs: PropTypes.number,
+    isActivatedOnTouch: PropTypes.bool,
     imageStyle: PropTypes.object,
     largeImage: ImageShape,
-    lensStyle: PropTypes.object,
+    pressDuration: PropTypes.number,
+    pressMoveThreshold: PropTypes.number,
     smallImage: ImageShape,
     style: PropTypes.object
 };
 
 ReactImageMagnify.defaultProps = {
-    fadeDurationInMs: 300,
-    hoverDelayInMs: 250,
-    hoverOffDelayInMs: 150
+    isActivatedOnTouch: false,
+    pressDuration: 100,
+    pressMoveThreshold: 5
 };
 
 export default ReactImageMagnify;