From bfaff6a71e22753bae1a3144a1bba1e2642d2887 Mon Sep 17 00:00:00 2001
From: RichardRNStudio <riiichj@gmail.com>
Date: Tue, 30 Apr 2024 22:55:30 +0200
Subject: [PATCH] feat(#26): add limitToSlide new property

---
 README.md                                | 1 +
 src/components/SliderProvider.tsx        | 2 +-
 src/defaultProps.tsx                     | 5 ++++-
 src/interfaces/ISliderIntro.interface.ts | 1 +
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6094b78..05cc103 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,7 @@ The package includes two render options. Besides the `default render` when you c
 | `showStatusBar`              | boolean  | false                                 | Show status bar on top of screen. You can make your own status bar outside of this component |
 | `statusBarColor`             | <a href="https://reactnative.dev/docs/colors">color</a>| #febe29 | Background color of status bar                                               |
 | `renderStatusBar`            | function | Default status bar renderer           | Use to supply your own status bar component                                                  |
+| `limitToSlide`               | number | (Device max width) * 0.35               | Use to change the limit of the slide animation. It is calculated based on the <a href="https://reactnative.dev/docs/panresponder">PanResponder's `gestureState.dx`</a> property. For example, your device's width: 400px, the limit is 400 * 0.35 = 140px, so you need to swipe at least 140px to left or right to reach the next slide in the row.  
 
 <h2>Examples</h2>
 <ul>
diff --git a/src/components/SliderProvider.tsx b/src/components/SliderProvider.tsx
index 6595749..afd0d05 100644
--- a/src/components/SliderProvider.tsx
+++ b/src/components/SliderProvider.tsx
@@ -66,6 +66,7 @@ const SliderProvider = (props: ISliderProviderProps) => {
     useCustomBackHandlerEffect,
     isCustomRender,
     data,
+    limitToSlide,
   } = props;
   const numberOfSlides = isCustomRender
     ? props?.numberOfSlides
@@ -233,7 +234,6 @@ const SliderProvider = (props: ISliderProviderProps) => {
     return true;
   };
 
-  const limitToSlide = deviceMaxWidth * 0.5;
   const slidesMaxWidth = (numberOfSlides - 1) * deviceMaxWidth;
   const navContainerMaxSize = deviceMaxWidth * navContainerMaxSizePercent;
   const buttonsMaxSize = (deviceMaxWidth - navContainerMaxSize) / 2 - 1;
diff --git a/src/defaultProps.tsx b/src/defaultProps.tsx
index 484753d..d3e4431 100644
--- a/src/defaultProps.tsx
+++ b/src/defaultProps.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
-import type { ColorValue } from 'react-native';
+import { Dimensions, type ColorValue } from 'react-native';
 import Button from './components/Button';
 import StatusBarContainer from './components/StatusBarContainer';
 import type { ISliderIntro } from './interfaces/ISliderIntro.interface';
 
+const deviceMaxWidth = Dimensions.get('window').width;
+
 const defaultProps: ISliderIntro = {
   data: [],
   children: null,
@@ -43,6 +45,7 @@ const defaultProps: ISliderIntro = {
   renderStatusBar: (backgroundColor: ColorValue) => (
     <StatusBarContainer backgroundColor={backgroundColor} />
   ),
+  limitToSlide: deviceMaxWidth * 0.35,
 };
 
 export default defaultProps;
diff --git a/src/interfaces/ISliderIntro.interface.ts b/src/interfaces/ISliderIntro.interface.ts
index 2121722..2cd739f 100644
--- a/src/interfaces/ISliderIntro.interface.ts
+++ b/src/interfaces/ISliderIntro.interface.ts
@@ -67,4 +67,5 @@ export interface ISliderIntro {
   showStatusBar: boolean;
   statusBarColor: ColorValue;
   renderStatusBar: (backgroundColor: ColorValue) => React.ReactNode;
+  limitToSlide: number;
 }