+
- {type === "date" && (
- <>
-
- {blankDays.map((_, i) => (
+
+ {type === "date" && (
+ <>
+
+ {DAYS.map((day, i) => (
+
+ ))}
+
+
+ {blankDays.map((_, i) => (
+
+ ))}
+ {dayCount.map((d, i) => {
+ const withinConstraints =
+ isDateWithinConstraints(d);
+ let selected;
+ if (value) {
+ const newDate = new Date(
+ datePickerHeaderDate,
+ );
+ newDate.setDate(d);
+ selected =
+ value.toDateString() ===
+ newDate.toDateString();
+ }
+
+ const baseClasses =
+ "flex h-full items-center justify-center rounded text-center text-sm leading-loose transition duration-100 ease-in-out";
+ let conditionalClasses = "";
+
+ if (withinConstraints) {
+ if (selected) {
+ conditionalClasses =
+ "bg-primary-500 font-bold text-white";
+ } else {
+ conditionalClasses =
+ "hover:bg-secondary-300 cursor-pointer";
+ }
+ } else {
+ conditionalClasses =
+ "!cursor-not-allowed !text-secondary-400";
+ }
+ return (
+
+
+
+ );
+ })}
+
+
+ )}
+ {type === "month" && (
+
+ {Array(12)
+ .fill(null)
+ .map((_, i) => (
+
+ {dayjs(
+ new Date(
+ datePickerHeaderDate.getFullYear(),
+ i,
+ 1,
+ ),
+ ).format("MMM")}
+
+ ))}
+
+ )}
+ {type === "year" && (
+
+ {Array(12)
+ .fill(null)
+ .map((_, i) => {
+ const y = year.getFullYear() - 11 + i;
+ return (
+
+ {y}
+
+ );
+ })}
+
+ )}
+
+ {(
+ [
+ {
+ name: "Hours",
+ value: hours,
+ options: Array.from(
+ { length: 12 },
+ (_, i) => i + 1,
+ ),
+ onChange: (val: any) => {
+ handleTimeChange({
+ newHours: val,
+ });
+ },
+ ref: hourScrollerRef,
+ },
+ {
+ name: "Minutes",
+ value: minutes,
+ options: Array.from(
+ { length: 60 },
+ (_, i) => i,
+ ),
+ onChange: (val: any) => {
+ handleTimeChange({
+ newMinutes: val,
+ });
+ },
+ ref: minuteScrollerRef,
+ },
+ {
+ name: "am/pm",
+ value: ampm,
+ options: ["AM", "PM"],
+ onChange: (val: any) => {
+ handleTimeChange({
+ newAmpm: val,
+ });
+ },
+ ref: undefined,
+ },
+ ] as const
+ ).map((input, i) => (
- ))}
- {dayCount.map((d, i) => {
- const withinConstraints =
- isDateWithinConstraints(d);
- const selected = value && isSelectedDate(d);
-
- const baseClasses =
- "flex h-full items-center justify-center rounded text-center text-sm leading-loose transition duration-100 ease-in-out";
- let conditionalClasses = "";
-
- if (withinConstraints) {
- if (selected) {
- conditionalClasses =
- "bg-primary-500 font-bold text-white";
- } else {
- conditionalClasses =
- "hover:bg-secondary-300 cursor-pointer";
- }
- } else {
- conditionalClasses =
- "!cursor-not-allowed !text-secondary-400";
- }
- return (
-
+ className="scrollbar-hide flex h-[237px] shrink-0 flex-col gap-1 overflow-auto"
+ ref={input.ref}
+ onScroll={(e) => {
+ const optionsHeight =
+ e.currentTarget.scrollHeight / 3;
+ const scrollTop = e.currentTarget.scrollTop;
+ const containerHeight =
+ e.currentTarget.clientHeight;
+ if (scrollTop >= optionsHeight * 2) {
+ e.currentTarget.scrollTo({
+ top: optionsHeight,
+ });
+ }
+ if (
+ scrollTop + containerHeight <=
+ optionsHeight
+ ) {
+ e.currentTarget.scrollTo({
+ top: optionsHeight + scrollTop,
+ });
+ }
+ }}
+ >
+ {[
+ ...input.options,
+ ...(input.name === "am/pm"
+ ? []
+ : input.options),
+ ...(input.name === "am/pm"
+ ? []
+ : input.options),
+ ].map((option, j) => (
-
- );
- })}
-
-
- )}
- {type === "month" && (
-
- {Array(12)
- .fill(null)
- .map((_, i) => (
-
- {dayjs(
- new Date(
- datePickerHeaderDate.getFullYear(),
- i,
- 1,
- ),
- ).format("MMM")}
+ ))}
))}
-
- )}
- {type === "year" && (
-