tour tourOverlayMask.tsx

100% Statements 8/8

50% Branches 1/2

100% Functions 2/2

100% Lines 8/8

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  
 
 
 
 
 
 
 
 
2x
21x
 
 
 
 
 
 
 
21x
 
 
 
 
 
 
 
21x
 
21x
21x
21x
 
 
 
 
 
21x
 
  import { ReactNode } from "react";
 
type Props = {
  top: number;
  bottom: number;
  left: number;
  right: number;
};
 
const getClipPathFromMask = ({ top, bottom, left, right }: Props): string => {
  const mask = [
    `${left}px ${top}px`,
    `${left}px ${bottom}px`,
    `${right}px ${bottom}px`,
    `${right}px ${top}px`,
    `${left}px ${top}px`,
  ].join(",");
 
  return `polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${mask})`;
};
 
export default function TourOverlayMask({
  mask,
}: {
  mask: Props | null;
}): ReactNode {
  let maskStyle = {};
 
  Eif (mask) {
    const clipPath = getClipPathFromMask(mask);
    maskStyle = {
      clipPath,
      WebkitClipPath: clipPath,
    };
  }
 
  return <div className="p-tour-overlay__mask" style={maskStyle} />;
}