docs(clickToZoom): add image preview for clickToZoom

pitipatdop · Feb 22, 2017 · 339d7b7 · 339d7b7
1 parent 06d7226
commit 339d7b7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ all normal `<img />` props can be used
   - scale = 1, the image will cover the whole area precisely.
 - `clickToZoom` (Boolean: default = false) if true then user can click to zoomIn
 - `zoomInScale` determine value of zoomed-in scale when clickToZoom
+![img](http://i.giphy.com/3o84TYe7Y9yOFHFnIQ.gif)
 
 Note: If you do not provide resizeMode, `<BetterImg />` will just render normal `<img />`
 

diff --git a/dev/containers/App.js b/dev/containers/App.js
@@ -18,7 +18,7 @@ export default class App extends Component {
           &lt;BetterImg scale={1} focalPoint="50% 50%"/&gt;
         </pre>
         <BetterImg
-          src="/img/puppy-line.jpg"
+          src="/img/puppy.jpg"
           height={600}
           resizeMode="cover"
           scale={1}

diff --git a/src/index.js b/src/index.js
@@ -105,6 +105,8 @@ class BetterImg extends Component {
   state = {
     imgWidth: 0,
     imgHeight: 0,
+    imgLoaded: false,
+    imgClicked: false,
     currentZoomScale: this.props.scale,
     focalPoint: this.props.focalPoint,
     containerWidth: undefined,
@@ -119,6 +121,7 @@ class BetterImg extends Component {
     this.setState({
       imgWidth,
       imgHeight,
+      imgLoaded: true,
       containerHeight: this.props.height || imgHeight,
     });
 
@@ -160,12 +163,14 @@ class BetterImg extends Component {
       if (!this.state.isZoomedIn) {
         this.setState({
           isZoomedIn: true,
+          imgClicked: true,
           currentZoomScale: this.props.zoomInScale,
           focalPoint: `${pointX/containerWidth} ${pointY/containerHeight}`
         });
       } else {
         this.setState({
           isZoomedIn: false,
+          imgClicked: true,
           currentZoomScale: this.props.scale,
           focalPoint: 'center',
         });
@@ -221,8 +226,8 @@ class BetterImg extends Component {
       transform: `translate3d(${x}px, ${y}px, 0) scale(${scaleX}, ${scaleY})`,
       transformOrigin: '0% 0%',
     }
+    if (this.props.clickToZoom && this.state.imgClicked) imgStyle.transition = 'all .3s ease-out';
 
-    if (this.props.clickToZoom) imgStyle.transition = 'all .3s ease-out';
     const containerProps = {};
     if (this.props.clickToZoom) {
       containerProps.onClick = this.handleClick;