Resolve merge conflicts with upstream - keep GitHub versions
This commit is contained in:
@@ -1,10 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { format } from "date-fns";
|
||||
import { zhCN as dateFnsZhCN } from "date-fns/locale";
|
||||
import { zhCN } from "date-fns/locale";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import { useId, useState } from "react";
|
||||
import { zhCN } from "react-day-picker/locale";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
@@ -17,8 +16,6 @@ type BirthDatePickerProps = {
|
||||
readonly onChange: (value: string) => void;
|
||||
};
|
||||
|
||||
const emptyDefaultMonth = new Date(1997, 0, 1);
|
||||
|
||||
export function BirthDatePicker({ value, disabled, onChange }: BirthDatePickerProps) {
|
||||
const labelId = useId();
|
||||
const valueId = useId();
|
||||
@@ -26,6 +23,7 @@ export function BirthDatePicker({ value, disabled, onChange }: BirthDatePickerPr
|
||||
const selected = parseBirthDate(value);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const defaultMonth = new Date(1997, today.getMonth(), 1);
|
||||
|
||||
return (
|
||||
<div className="grid gap-2">
|
||||
@@ -45,18 +43,19 @@ export function BirthDatePicker({ value, disabled, onChange }: BirthDatePickerPr
|
||||
<span id={valueId}>
|
||||
{selected === undefined
|
||||
? "选择出生日期"
|
||||
: format(selected, "PPP", { locale: dateFnsZhCN })}
|
||||
: format(selected, "PPP", { locale: zhCN })}
|
||||
</span>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="start" className="w-auto p-0" aria-label="选择出生日期">
|
||||
<PopoverContent align="start" className="w-auto p-0">
|
||||
<Calendar
|
||||
key={value || "empty"}
|
||||
mode="single"
|
||||
className="[--cell-size:2.75rem] [&_button[data-selected-single=true]]:text-primary-foreground!"
|
||||
locale={zhCN}
|
||||
selected={selected}
|
||||
defaultMonth={selected ?? emptyDefaultMonth}
|
||||
defaultMonth={selected ?? defaultMonth}
|
||||
captionLayout="dropdown"
|
||||
navLayout="after"
|
||||
startMonth={new Date(1900, 0)}
|
||||
endMonth={today}
|
||||
reverseYears
|
||||
|
||||
@@ -51,17 +51,17 @@ function Calendar({
|
||||
),
|
||||
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
||||
nav: cn(
|
||||
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
||||
"pointer-events-none absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
||||
defaultClassNames.nav
|
||||
),
|
||||
button_previous: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
|
||||
"pointer-events-auto size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
|
||||
defaultClassNames.button_previous
|
||||
),
|
||||
button_next: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
|
||||
"pointer-events-auto size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
|
||||
defaultClassNames.button_next
|
||||
),
|
||||
month_caption: cn(
|
||||
|
||||
@@ -5,6 +5,7 @@ import test from "node:test"
|
||||
const packageJson = readFileSync(new URL("../package.json", import.meta.url), "utf8")
|
||||
const intake = readFileSync(new URL("../src/components/birth-time-intake.tsx", import.meta.url), "utf8")
|
||||
const pickerUrl = new URL("../src/components/birth-date-picker.tsx", import.meta.url)
|
||||
const calendarUrl = new URL("../src/components/ui/calendar.tsx", import.meta.url)
|
||||
|
||||
test("provides the shadcn calendar and popover primitives", () => {
|
||||
assert.equal(existsSync(new URL("../src/components/ui/calendar.tsx", import.meta.url)), true)
|
||||
@@ -21,25 +22,15 @@ test("replaces the native birth date input with the shadcn date picker", () => {
|
||||
assert.match(picker, /render=\{<Button/)
|
||||
assert.match(picker, /<Calendar/)
|
||||
assert.match(picker, /captionLayout="dropdown"/)
|
||||
assert.match(picker, /const defaultMonth = new Date\(1997, today\.getMonth\(\), 1\)/)
|
||||
assert.match(picker, /defaultMonth=\{selected \?\? defaultMonth\}/)
|
||||
assert.match(picker, /startMonth=\{new Date\(1900, 0\)\}/)
|
||||
assert.match(picker, /reverseYears/)
|
||||
})
|
||||
|
||||
test("keeps the shadcn date-of-birth dropdown navigation order", () => {
|
||||
// Given the shadcn Date of Birth composition
|
||||
const picker = readFileSync(pickerUrl, "utf8")
|
||||
test("keeps the month and year dropdowns clickable above calendar navigation", () => {
|
||||
const calendar = readFileSync(calendarUrl, "utf8")
|
||||
|
||||
// When dropdown captions are enabled
|
||||
// Then the picker must not move the full-width nav after the caption selects
|
||||
assert.doesNotMatch(picker, /navLayout="after"/)
|
||||
})
|
||||
|
||||
test("opens an empty birth date picker at 1997 instead of the current year", () => {
|
||||
// Given: a new user has not selected a birth date yet.
|
||||
const picker = readFileSync(pickerUrl, "utf8")
|
||||
|
||||
// When: the popover chooses its initial visible month.
|
||||
// Then: it starts in 1997 so common birth years are nearby.
|
||||
assert.match(picker, /const emptyDefaultMonth = new Date\(1997, 0, 1\)/)
|
||||
assert.match(picker, /defaultMonth=\{selected \?\? emptyDefaultMonth\}/)
|
||||
assert.match(calendar, /pointer-events-none absolute inset-x-0 top-0/)
|
||||
assert.match(calendar, /pointer-events-auto size-\(--cell-size\)/)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user