From 2b0339c307e584f2091759414944e2618bea52f9 Mon Sep 17 00:00:00 2001
From: mnogueron <matthieu.nogueron@live.fr>
Date: Sun, 13 Oct 2019 22:23:05 +0200
Subject: [PATCH] Add story for Instagram like pinch to zoom and release

---
 stories/Demo.stories.js    | 40 ++++++++++++++++++++++++++++++++++++++
 stories/PanZoom.stories.js | 22 ++++++++++-----------
 2 files changed, 50 insertions(+), 12 deletions(-)
 create mode 100644 stories/Demo.stories.js

diff --git a/stories/Demo.stories.js b/stories/Demo.stories.js
new file mode 100644
index 0000000..ec721d7
--- /dev/null
+++ b/stories/Demo.stories.js
@@ -0,0 +1,40 @@
+import React, { useRef } from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { withKnobs } from '@storybook/addon-knobs';
+import PanZoom from '../src/PanZoom'
+import Picture from './john-westrock-638048-unsplash.jpg'
+
+const InstagramDemo = () => {
+  const ref = useRef(null)
+
+  function onPanEnd() {
+    ref.current.reset()
+  }
+
+  return (
+    <PanZoom
+      ref={ref}
+      style={{ border: 'solid 1px green', height: 300, width: 300 }}
+      minZoom={1}
+      maxZoom={2}
+      autoCenterZoomLevel={1}
+      realPinch
+      onPanEnd={onPanEnd}
+    >
+      <div
+        style={{
+          width: 300,
+          height: 300,
+          backgroundImage: `url('${Picture}')`,
+          backgroundPosition: 'center',
+          backgroundSize: 'cover',
+        }}
+      />
+    </PanZoom>
+  )
+}
+
+storiesOf('Demo', module)
+  .addDecorator(withKnobs)
+  .add('Instagram pinch to zoom', () => <InstagramDemo />)
diff --git a/stories/PanZoom.stories.js b/stories/PanZoom.stories.js
index 6a8f581..0477035 100644
--- a/stories/PanZoom.stories.js
+++ b/stories/PanZoom.stories.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef } from 'react'
 
 import { storiesOf } from '@storybook/react'
 import { withKnobs, boolean, number } from '@storybook/addon-knobs';
@@ -226,17 +226,15 @@ storiesOf('react-easy-panzoom', module)
   ))
   .add('onStateChange handler', () => {
     return (
-      <>
-        <DefaultPanZoom
-          onStateChange={(data) => {
-           console.log(data)
-          }}     
-        >
-          <Box>
-            Open the console then move me
-          </Box>
-        </DefaultPanZoom>
-      </>
+      <DefaultPanZoom
+        onStateChange={(data) => {
+         console.log(data)
+        }}
+      >
+        <Box>
+          Open the console then move me
+        </Box>
+      </DefaultPanZoom>
     )
   })
   .add('autoCenter animate option', () => <AutoCenterDemo animate={boolean('Animate auto center', true)} />)