Slide to Unlock

1"use client"
2 
3import {
4  animate,
5  motion,
6  type MotionValue,
7  useMotionValue,
8  useTransform,
9} from "motion/react"
10import type { ComponentProps, ComponentPropsWithoutRef, JSX } from "react"
11import { createContext, useCallback, useContext, useRef, useState } from "react"
12 
13import { cn } from "@/lib/utils"
14 
15type SlideToUnlockContextValue = {
16  x: MotionValue<number>
17  trackRef: React.RefObject<HTMLDivElement | null>
18  isDragging: boolean
19  handleWidth: number
20  textOpacity: MotionValue<number>
21  onDragStart: () => void
22  onDragEnd: () => void
23}
24 
25const SlideToUnlockContext = createContext<SlideToUnlockContextValue | null>(
26  null
27)
28 
29function useSlideToUnlock() {
30  const context = useContext(SlideToUnlockContext)
31  if (!context) {
32    throw new Error(
33      `SlideToUnlock components must be used within SlideToUnlock`
34    )
35  }
36  return context
37}
38 
39export type SlideToUnlockRootProps = ComponentProps<"div"> & {
40  /**
41   * Width of the drag handle in pixels.
42   * @defaultValue 56
43   * */
44  handleWidth?: number
45  /** Called when the handle is dragged fully to the end. */
46  onUnlock?: () => void
47}
48 
49export function SlideToUnlock({
50  className,
51  handleWidth = 56,
52  children,
53  onUnlock,
54  ...props
55}: SlideToUnlockRootProps) {
56  const trackRef = useRef<HTMLDivElement>(null)
57  const [isDragging, setIsDragging] = useState(false)
58  const x = useMotionValue(0)
59 
60  const fadeDistance = handleWidth
61  const textOpacity = useTransform(x, [0, fadeDistance], [1, 0])
62 
63  const handleDragStart = useCallback(() => {
64    setIsDragging(true)
65  }, [])
66 
67  const handleDragEnd = useCallback(() => {
68    setIsDragging(false)
69 
70    const trackWidth = trackRef.current?.offsetWidth || 0
71    const maxX = trackWidth - handleWidth
72 
73    if (x.get() >= maxX) {
74      onUnlock?.()
75    } else {
76      animate(x, 0, { type: "spring", bounce: 0, duration: 0.25 })
77    }
78  }, [x, onUnlock, handleWidth])
79 
80  return (
81    <SlideToUnlockContext.Provider
82      value={{
83        x,
84        trackRef,
85        isDragging,
86        handleWidth,
87        textOpacity,
88        onDragStart: handleDragStart,
89        onDragEnd: handleDragEnd,
90      }}
91    >
92      <div
93        data-slot="slide-to-unlock"
94        className={cn(
95          "w-54 rounded-xl bg-muted p-1 shadow-inner ring-1 ring-foreground/10 ring-inset",
96          className
97        )}
98        {...props}
99      >
100        {children}
101      </div>
102    </SlideToUnlockContext.Provider>
103  )
104}
105 
106export type SlideToUnlockTrackProps = ComponentProps<"div">
107 
108// … truncated