date-wheel-picker

1"use client";
2 
3import {
4  animate,
5  type MotionValue,
6  motion,
7  type PanInfo,
8  useMotionValue,
9  useTransform,
10} from "framer-motion";
11import * as React from "react";
12import { cn } from "@/lib/utils";
13 
14export interface DateWheelPickerProps
15  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
16  value?: Date;
17  onChange: (date: Date) => void;
18  minYear?: number;
19  maxYear?: number;
20  size?: "sm" | "md" | "lg";
21  disabled?: boolean;
22  locale?: string;
23}
24 
25const ITEM_HEIGHT = 40;
26const VISIBLE_ITEMS = 5;
27const PERSPECTIVE_ORIGIN = ITEM_HEIGHT * 2;
28 
29function getMonthNames(locale?: string): string[] {
30  const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
31  return Array.from({ length: 12 }, (_, i) =>
32    formatter.format(new Date(2000, i, 1)),
33  );
34}
35 
36const sizeConfig = {
37  sm: {
38    height: ITEM_HEIGHT * VISIBLE_ITEMS * 0.8,
39    itemHeight: ITEM_HEIGHT * 0.8,
40    fontSize: "text-sm",
41    gap: "gap-2",
42  },
43  md: {
44    height: ITEM_HEIGHT * VISIBLE_ITEMS,
45    itemHeight: ITEM_HEIGHT,
46    fontSize: "text-base",
47    gap: "gap-4",
48  },
49  lg: {
50    height: ITEM_HEIGHT * VISIBLE_ITEMS * 1.2,
51    itemHeight: ITEM_HEIGHT * 1.2,
52    fontSize: "text-lg",
53    gap: "gap-6",
54  },
55};
56 
57interface WheelItemProps {
58  item: string | number;
59  index: number;
60  y: MotionValue<number>;
61  itemHeight: number;
62  visibleItems: number;
63  centerOffset: number;
64  isSelected: boolean;
65  disabled?: boolean;
66  onClick: () => void;
67}
68 
69function WheelItem({
70  item,
71  index,
72  y,
73  itemHeight,
74  visibleItems,
75  centerOffset,
76  isSelected,
77  disabled,
78  onClick,
79}: WheelItemProps) {
80  const itemY = useTransform(y, (latest) => {
81    const offset = index * itemHeight + latest + centerOffset;
82    return offset;
83  });
84 
85  const rotateX = useTransform(
86    itemY,
87    [0, centerOffset, itemHeight * visibleItems],
88    [45, 0, -45],
89  );
90 
91  const scale = useTransform(
92    itemY,
93    [0, centerOffset, itemHeight * visibleItems],
94    [0.8, 1, 0.8],
95  );
96 
97  const opacity = useTransform(
98    itemY,
99    [
100      0,
101      centerOffset * 0.5,
102      centerOffset,
103      centerOffset * 1.5,
104      itemHeight * visibleItems,
105    ],
106    [0.3, 0.6, 1, 0.6, 0.3],
107  );
108 
109  return (
110    <motion.div
111      className="flex select-none items-center justify-center"
112      style={{
113        height: itemHeight,
114        rotateX,
115        scale,
116        opacity,
117        transformStyle: "preserve-3d",
118        transformOrigin: `center center -${PERSPECTIVE_ORIGIN}px`,
119      }}
120// … truncated