Slideshow refactor

Author: pomber

packages/mdx/dev/content/slideshow-auto.mdx packages/mdx/dev/content/slideshow-autoplay.mdx

@@ -2,7 +2,7 @@
 
 This is how to use the `<CH.Sildeshow>` component. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quia! Quidem, quisquam.
 
-<CH.Slideshow preset="https://codesandbox.io/s/rfdho" code={{minZoom: 0.5}} autoPlay={1000} loop>
+<CH.Slideshow preset="https://codesandbox.io/s/rfdho" code={{minZoom: 0.5}} autoPlay={3000} loop>
 
 <CH.Code>
 

packages/mdx/package.json

@@ -86,8 +86,7 @@
     "vitest": "^0.5.9"
   },
   "peerDependencies": {
-    "react": "^16.8.3 || ^17 || ^18",
-    "framer-motion": "^6.5.1"
+    "react": "^16.8.3 || ^17 || ^18"
   },
   "repository": "code-hike/codehike",
   "license": "MIT",

packages/mdx/src/mdx-client/slideshow.tsx

@@ -1,9 +1,14 @@
 import React from "react"
+import { clamp, useInterval } from "utils"
 import { EditorProps, EditorStep } from "../mini-editor"
 import { InnerCode, updateEditorStep } from "./code"
 import { Preview, PresetConfig } from "./preview"
 import { extractPreviewSteps } from "./steps"
 
+type ChangeEvent = {
+  index: number
+}
+
 export function Slideshow({
   children,
   className,
@@ -30,19 +35,12 @@ export function Slideshow({
   hasPreviewSteps?: boolean
   autoFocus?: boolean
   start?: number
-  onChange?: Function
+  onChange?: (e: ChangeEvent) => void
   presetConfig?: PresetConfig
   style?: React.CSSProperties
   autoPlay?: number
   loop?: boolean
 }) {
-  const controlsRef = React.useRef(null)
-
-  React.useEffect(() => {
-    // Only set focus on controls input if we have configured to do so
-    autoFocus && controlsRef.current.focus()
-  }, [])
-
   const { stepsChildren, previewChildren } =
     extractPreviewSteps(children, hasPreviewSteps)
   const withPreview = presetConfig || hasPreviewSteps
@@ -51,103 +49,47 @@ export function Slideshow({
     (child: any) => child.props?.children
   )
 
-  const maxSteps = editorSteps.length - 1;
+  const maxSteps = editorSteps.length - 1
 
-  // Make sure the initial slide is not configured out of bounds
-  const initialSlide = start > maxSteps ? maxSteps : start
-
-  // As this gets more complex, probably would make more sense to abstract this into a custom hook with methods to modify state versus exposing directly
-  const [state, setState] = React.useState({
-    stepIndex: initialSlide,
-    step: editorSteps[initialSlide],
+  const [state, setState] = React.useState(() => {
+    const startIndex = clamp(start, 0, maxSteps)
+    return {
+      stepIndex: startIndex,
+      step: editorSteps[startIndex],
+    }
   })
 
-  // Destructure these values and give them more semantic names for use below
-  const {
-    stepIndex: currentSlideIndex,
-    step: tab,
-  } = state;
+  const { stepIndex: currentIndex, step: tab } = state
 
-  const atSlideshowStart = currentSlideIndex === 0;
-  const atSlideshowEnd = currentSlideIndex === maxSteps;
+  const atSlideshowEnd = currentIndex === maxSteps
 
-  // Run any time our Slideshow state changes
   React.useEffect(() => {
-    // Return our state object to the Slideshow onChange function
-    onSlideshowChange({
-      index: currentSlideIndex
-    });
-    // We are only calling this effect if the current slide changes.
-  }, [currentSlideIndex]);
+    onSlideshowChange({ index: currentIndex })
+  }, [currentIndex])
 
   function onTabClick(filename: string) {
-    const newStep = updateEditorStep(
-      state.step,
-      filename,
-      null
-    )
+    const newStep = updateEditorStep(tab, filename, null)
     setState({ ...state, step: newStep })
   }
 
-  function slideNext() {
-    setState(s => {
-      const stepIndex = Math.min(
-        maxSteps,
-        s.stepIndex + 1
-      )
-      return {
-        stepIndex,
-        step: editorSteps[stepIndex],
-      }
-    })
+  function setIndex(newIndex: number) {
+    const stepIndex = clamp(newIndex, 0, maxSteps)
+    setState({ stepIndex, step: editorSteps[stepIndex] })
   }
 
-  function slidePrevious() {
+  function nextSlide() {
     setState(s => {
-      const stepIndex = Math.max(
-        0,
-        s.stepIndex - 1
-      )
+      const stepIndex = loop
+        ? (s.stepIndex + 1) % (maxSteps + 1)
+        : clamp(s.stepIndex + 1, 0, maxSteps)
       return {
         stepIndex,
         step: editorSteps[stepIndex],
       }
     })
   }
 
-  React.useEffect(() => {
-    // If autoplay is enabled, and we are not at the end of the slides, move to the next slide
-    if (autoPlay && !atSlideshowEnd) {
-      const autoSlide = setTimeout(
-        () => slideNext(),
-        autoPlay
-      );
-      
-      // Cleanup our timeout if our component unmounts
-      return () => {
-        clearTimeout(autoSlide);
-      };
-    // If we are at the end of the slideshow, and we have configured to loop, start over
-    } else if (autoPlay && atSlideshowEnd && loop) {
-      // We still have to use the same timeout function with autoPlay delay or else the last slide will never show because it will instantly change
-      const autoRestart = setTimeout(
-        () => {
-          setState({
-            stepIndex: 0,
-            step: editorSteps[0],
-          })
-        },
-        autoPlay
-      );
-      
-      // Cleanup our timeout if our component unmounts
-      return () => {
-        clearTimeout(autoRestart);
-      };      
-    } else {
-      return null;
-    }
-  }, [currentSlideIndex, autoPlay]);
+  useInterval(nextSlide, autoPlay)
 
   return (
     <div
@@ -176,48 +118,50 @@ export function Slideshow({
         ) : hasPreviewSteps ? (
           <Preview
             className="ch-slideshow-preview"
-            {...previewChildren[currentSlideIndex]["props"]}
+            {...previewChildren[currentIndex]["props"]}
           />
         ) : null}
       </div>
 
       <div className="ch-slideshow-notes">
         <div className="ch-slideshow-range">
-          <button 
-            onClick={() => slidePrevious()}
-            disabled={atSlideshowStart}
+          <button
+            onClick={() => setIndex(currentIndex - 1)}
+            disabled={currentIndex === 0}
           >
             Prev
           </button>
           <input
             max={maxSteps}
             min={0}
-            ref={controlsRef}
             step={1}
             type="range"
-            value={currentSlideIndex}
-            onChange={e =>
-              setState({
-                stepIndex: +e.target.value,
-                step: editorSteps[+e.target.value],
-              })
-            }
+            value={currentIndex}
+            onChange={e => setIndex(+e.target.value)}
+            ref={useAutoFocusRef(autoFocus)}
             autoFocus={autoFocus}
           />
-          <button 
-            onClick={() => slideNext()}
+          <button
+            onClick={nextSlide}
             disabled={atSlideshowEnd}
           >
             Next
           </button>
         </div>
-
         {hasNotes && (
           <div className="ch-slideshow-note">
-            {stepsChildren[currentSlideIndex]}
+            {stepsChildren[currentIndex]}
           </div>
         )}
       </div>
     </div>
   )
 }
+
+function useAutoFocusRef(autoFocus: boolean) {
+  const ref = React.useRef(null)
+  React.useEffect(() => {
+    autoFocus && ref.current.focus()
+  }, [])
+  return ref
+}

packages/mdx/src/utils/hooks.ts

@@ -10,3 +10,28 @@ export const useLayoutEffect =
 //   effect: any,
 //   deps?: any
 // ) => {}
+
+// from https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+export function useInterval(
+  callback: () => void,
+  delay: number | null
+) {
+  const savedCallback = React.useRef(callback)
+
+  React.useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  React.useEffect(() => {
+    if (!delay && delay !== 0) {
+      return undefined
+    }
+
+    const id = setInterval(
+      () => savedCallback.current(),
+      delay
+    )
+
+    return () => clearInterval(id)
+  }, [delay])
+}

packages/mdx/src/utils/index.tsx

@@ -4,3 +4,7 @@ export * from "./code"
 export * from "./focus"
 export * from "./theme"
 export * from "./hooks"
+
+export function clamp(x: number, min: number, max: number) {
+  return Math.min(Math.max(x, min), max)
+}