playbooks useScrollIntoView.ts

0% Statements 0/20

0% Branches 0/6

0% Functions 0/4

0% Lines 0/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useEffect, useRef } from "react";
import usePlaybookKey from "./usePlaybookKey.ts";
 
const useScrollIntoView = (index: number) => {
  const ref = useRef<HTMLDivElement>(null);
  const [shouldScroll, setShouldScroll] = usePlaybookKey("shouldScroll");
  const [currentVisibleStep] = usePlaybookKey("currentVisibleStep");
 
  const handleShouldScrollIndex = () => {
    switch (shouldScroll) {
      case "next":
        return currentVisibleStep + 1;
 
      case "previous":
        return currentVisibleStep - 1;
 
      default:
        return currentVisibleStep;
    }
  };
 
  const showStep = () => {
    const scrollIndex = handleShouldScrollIndex();
    Iif (shouldScroll && index === scrollIndex) {
      ref.current?.scrollIntoView({
        behavior: "smooth",
        block: "center",
      });
      setShouldScroll(undefined);
    }
  };
 
  useEffect(() => {
    showStep();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentVisibleStep, index, setShouldScroll, shouldScroll]);
 
  return ref;
};
 
export default useScrollIntoView;