Slide to Unlock

1
import {
2
  animate,
3
  type MotionValue,
4
  motion,
5
  useMotionValue,
6
  useTransform,
7
} from "motion/react";
8
import type { ComponentProps, ComponentPropsWithoutRef, JSX } from "react";
9
import {
10
  createContext,
11
  useCallback,
12
  useContext,
13
  useRef,
14
  useState,
15
} from "react";
16

17
import { cn } from "@/lib/utils";
18

19
const SlideToUnlockContext = createContext<{
20
  x: MotionValue<number>;
21
  trackRef: React.RefObject<HTMLDivElement | null>;
22
  isDragging: boolean;
23
  handleWidth: number;
24
  textOpacity: MotionValue<number>;
25
  onDragStart: () => void;
26
  onDragEnd: () => void;
27
} | null>(null);
28

29
function 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

39
function SlideToUnlock({
40
  className,
41
  handleWidth = 56,
42
  children,
43
  onUnlock,
44
  ...props
45
}: ComponentProps<"div"> & {
46
  /**
47
   * Width of the drag handle in pixels.
48
   * @defaultValue 56
49
   * */
50
  handleWidth?: number;
51
  /** Called when the handle is dragged fully to the end. */
52
  onUnlock?: () => void;
53
}) {
54
  const trackRef = useRef<HTMLDivElement>(null);
55
  const [isDragging, setIsDragging] = useState(false);
56
  const x = useMotionValue(0);
57

58
  const fadeDistance = handleWidth;
59
  const textOpacity = useTransform(x, [0, fadeDistance], [1, 0]);
60

61
  const handleDragStart = useCallback(() => {
62
    setIsDragging(true);
63
  }, []);
64

65
  const handleDragEnd = useCallback(() => {
66
    setIsDragging(false);
67

68
    const trackWidth = trackRef.current?.offsetWidth || 0;
69
    const maxX = trackWidth - handleWidth;
70

71
    if (x.get() >= maxX) {
72
      onUnlock?.();
73
    } else {
74
      animate(x, 0, { type: "spring", bounce: 0, duration: 0.25 });
75
    }
76
  }, [x, onUnlock, handleWidth]);
77

78
  return (
79
    <SlideToUnlockContext.Provider
80
      value={{
81
        x,
82
        trackRef,
83
        isDragging,
84
        handleWidth,
85
        textOpacity,
86
        onDragStart: handleDragStart,
87
        onDragEnd: handleDragEnd,
88
      }}
89
    >
90
      <div
91
        data-slot="slide-to-unlock"
92
        className={cn(
93
          "w-54 pixel-border pixel-size-lg pixel-color-border p-(--pixel-size)  bg-muted",
94
          className,
95
        )}
96
        {...props}
97
      >
98
        {children}
99
      </div>
100
    </SlideToUnlockContext.Provider>
101
  );
102
}
103

104
function SlideToUnlockTrack({
105
  className,
106
  children,
107
  ...props
108
}: ComponentProps<"div">) {
109
  const { trackRef } = useSlideToUnlock();
110

111
  return (
112
    <div
113
      ref={trackRef}
114
      data-slot="track"
115
      className={cn(
116
        "relative flex h-10 items-center justify-center",
117
        className,
118
      )}
119
      {...props}
120
    >
121
      {children}
122
    </div>
123
  );
124
}
125

126
function SlideToUnlockText({
127
  className,
128
  children,
129
  style,
130
  ...props
131
}: Omit<ComponentPropsWithoutRef<typeof motion.div>, "children"> & {
132
  /**
133
   * Accepts a render function as `children` to react to the dragging state.
134
   *
135
   * @example
136
   * ```tsx
137
   * <SlideToUnlockText>
138
   *   {({ isDragging }) => <span>{isDragging ? "Release..." : "Slide to unlock"}</span>}
139
   * </SlideToUnlockText>
140
   * ```
141
   */
142
  children: JSX.Element | ((props: { isDragging: boolean }) => JSX.Element) | string;
143
}) {
144
  const { handleWidth, textOpacity, isDragging } = useSlideToUnlock();
145

146
  return (
147
    <motion.div
148
      data-slot="text"
149
      data-dragging={isDragging}
150
      className={cn("pl-1 text-muted-foreground text-sm font-medium inline-flex shimmer", className)}
151
      style={{ marginLeft: handleWidth, opacity: textOpacity, ...style }}
152
      {...props}
153
    >
154
      {typeof children === "function" ? children({ isDragging }) : children}
155
    </motion.div>
156
  );
157
}
158

159
function SlideToUnlockHandle({
160
  className,
161
  children,
162
  style,
163
  ...props
164
}: ComponentPropsWithoutRef<typeof motion.div>) {
165
  const {
166
    x,
167
    trackRef,
168
    onDragStart,
169
    onDragEnd,
170
    handleWidth: width,
171
  } = useSlideToUnlock();
172

173
  return (
174
    <motion.div
175
      data-slot="handle"
176
      className={cn(
177
        "absolute top-0 left-0 flex h-10 cursor-grab items-center justify-center rounded-lg bg-white text-ring pixel-rounded pixel-size-lg active:cursor-grabbing",
178
        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6",
179
        className,
180
      )}
181
      style={{ width, x, ...style }}
182
      drag="x"
183
      dragConstraints={trackRef}
184
      dragElastic={0}
185
      dragMomentum={false}
186
      onDragStart={onDragStart}
187
      onDragEnd={onDragEnd}
188
      {...props}
189
    >
190
      {children ?? (
191
        <svg
192
          xmlns="http://www.w3.org/2000/svg"
193
          fill="currentColor"
194
          viewBox="0 0 24 24"
195
          className="rotate-90">
196
          <path d="M13 3h2v2h2v2h2v2h2v4h-5v14H8v-14H3V9h2V7h2V5h2V3h2V1h2v2Z"></path>
197
        </svg>
198
      )}
199
    </motion.div>
200
  );
201
}
202

203
export {
204
  SlideToUnlock,
205
  SlideToUnlockHandle,
206
  SlideToUnlockText,
207
  SlideToUnlockTrack,
208
};