fix: set proper last slide when going right from the last slide while…

… looping + loop configuration on demo
intive · Jul 21, 2021 · 1699cf4 · 1699cf4
1 parent e43cd5e
commit 1699cf4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/example/src/App.js b/example/src/App.js
@@ -11,7 +11,8 @@ function App() {
 		rightPane:{}
 	})
 	const [configuration, setConfiguration] = useState({
-		showClickableArea: false
+		showClickableArea: false,
+		loop: false
 	})
 
 	const updateWebConsole = (...args) =>  {
@@ -124,6 +125,22 @@ function App() {
 							Show clickable areas
 						</label>
 					</div>
+					<div>
+						<input
+							id="configuration-loop"
+							type="checkbox" 
+							onChange={() => setConfiguration(prev => {
+								return {
+									...prev,
+									loop: !prev.loop
+								}
+							})}
+							defaultChecked={configuration.loop}
+						/>
+						<label htmlFor="configuration-loop" >
+							Loop through slides
+						</label>
+					</div>
 					<div>
 					<input
 							id="configuration-stories-length"
@@ -180,7 +197,7 @@ function App() {
 
 			<div className="stories-container">
 				<Stories
-					loop
+					loop={configuration.loop}
 					isPaused={!isPlaying}
 					width={'100%'}
 					height={'100%'}

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
@@ -31,7 +31,7 @@ export default function () {
     useEffect(() => {
         if (typeof currentIndex === 'number') {
             if (currentIndex >= 0 && currentIndex < stories.length) {
-                setCurrentIdWrapper(() => currentIndex)
+                setCurrentId(currentIndex)
             } else {
                 console.error('Index out of bounds. Current index was set to value more than the length of stories array.', currentIndex)
             }
@@ -75,39 +75,35 @@ export default function () {
         setBufferAction(!!bufferAction)
     }
 
-    const setCurrentIdWrapper = (callback) => {
+    const setCurrentIdWrapper = (callback: (a: number) => {direction: string, prev: number, nextIdx: number}) => {
         const {direction, prev, nextIdx} = callback(currentId)
         setCurrentId(nextIdx);
         onSlideTransition && onSlideTransition(direction, prev, nextIdx === prev ? undefined : nextIdx)
     }
 
     const previous = () => {
-        setCurrentIdWrapper(prev => {
+        setCurrentIdWrapper((prev: number) => {
             const nextIdx = prev > 0 ? prev - 1 : prev
             return {direction: 'left', prev, nextIdx}
         })
     }
 
     const next = () => {
-        const nextStoryIdForLoop = prev => {
+        const nextStoryIdForLoop = (prev: number) => {
             const nextIdx = (prev + 1) % stories.length
             return {direction: 'right', prev, nextIdx}
         }
-        const nextStoryId = prev => {
+        const nextStoryId = (prev: number) => {
             if (prev < stories.length - 1) {
                 const nextIdx = prev + 1
                 return {direction: 'right', prev, nextIdx}
             }
 
-            return {direction: 'right', prev}
+            return {direction: 'right', prev, nextIdx: prev}
         }
 
         if (isMounted.current) {
-            if (loop) {
-                setCurrentIdWrapper(nextStoryIdForLoop)
-            } else {
-                setCurrentIdWrapper(nextStoryId)
-            }
+            setCurrentIdWrapper(loop? nextStoryIdForLoop : nextStoryId)
         }
     }
 

diff --git a/src/interfaces.tsx b/src/interfaces.tsx
@@ -21,7 +21,7 @@ export interface ReactInstaStoriesProps {
     onStoryEnd?: Function;
     keyboardNavigation?: boolean;
     clickableAreaStyles?: Record<string, any>;
-    onSlideTransition?: Function;
+    onSlideTransition?: (direction: string, prev: number, nextIdx: number) => any;
 }
 
 export interface GlobalCtx {
@@ -44,7 +44,7 @@ export interface GlobalCtx {
     onStoryEnd?: Function;
     keyboardNavigation?: boolean;
     clickableAreaStyles?: Record<string, any>;
-    onSlideTransition?: Function;
+    onSlideTransition?: (direction: string, prev: number, nextIdx: number) => any;
 }
 
 type NumberOrString = number | string;