feat: pan gesture timeout configurable by prop (#43)

* feat: pan gesture timeout configurable by prop

* rename panGestureTimout to panGestureDelay

Co-authored-by: Christoph Pader <christoph@margelo.io>

Author: Nodonisko

README.md

@@ -82,6 +82,10 @@ There are three events fired when the user interacts with the graph:
 2. `onPointSelected`: Fired for each point the user pans through. You can use this event to update labels or highlight selection in the graph.
 3. `onGestureEnd`: Fired once the user releases his finger and the pan gesture _deactivates_.
 
+Pan gesture can be configures using these props:
+
+1. `panGestureTimeout`: Set timeout for the pan gesture to activate. Set to `0` to start immediately after touch. Defaults to `300`.
+
 Example:
 
 ```jsx

package.json

@@ -126,7 +126,8 @@
     "singleQuote": true,
     "tabWidth": 2,
     "trailingComma": "es5",
-    "useTabs": false
+    "useTabs": false,
+    "semi": false
   },
   "react-native-builder-bob": {
     "source": "src",

src/AnimatedLineGraph.tsx

@@ -61,6 +61,7 @@ export function AnimatedLineGraph({
   onPointSelected,
   onGestureStart,
   onGestureEnd,
+  panGestureDelay = 300,
   SelectionDot = DefaultSelectionDot,
   enableIndicator = false,
   indicatorPulsating = false,
@@ -78,7 +79,7 @@ export function AnimatedLineGraph({
 
   const { gesture, isActive, x } = usePanGesture({
     enabled: enablePanGesture,
-    holdDuration: 300,
+    holdDuration: panGestureDelay,
   })
   const circleX = useValue(0)
   const circleY = useValue(0)

src/LineGraphProps.ts

@@ -77,6 +77,10 @@ export type AnimatedLineGraphProps = BaseLineGraphProps & {
    * Let's the indicator pulsate
    */
   indicatorPulsating?: boolean
+  /**
+   * Delay after which the pan gesture starts
+   */
+  panGestureDelay?: number
 
   /**
    * Called for each point while the user is scrubbing/panning through the graph