Jesse_ChenandClaude Opus 5.5
12aac87bde
Drop the unlayered button { color: inherit } that beat every layered Tailwind
text utility; scope the raw-button disabled fade away from <Button>. Add the
--color-action-fill token pair (light #fbfaf7 on #a9583e 4.85:1, dark #f2f0ea
on #8f4a33 5.77:1) for <Button> default, .button-primary, composer send/stop
and the calendar's selected day. Remove the BUG-1078 report-only override.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017eEAG8HD3mm8gsKXgk8uU8
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { format } from "date-fns";
|
|
import { zhCN } from "date-fns/locale";
|
|
import { CalendarIcon } from "lucide-react";
|
|
import { useId, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Calendar } from "@/components/ui/calendar";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { formatBirthDate, parseBirthDate } from "@/lib/birth-time-intake-model";
|
|
|
|
type BirthDatePickerProps = {
|
|
readonly value: string;
|
|
readonly disabled: boolean;
|
|
readonly onChange: (value: string) => void;
|
|
};
|
|
|
|
export function BirthDatePicker({ value, disabled, onChange }: BirthDatePickerProps) {
|
|
const labelId = useId();
|
|
const valueId = useId();
|
|
const [open, setOpen] = useState(false);
|
|
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">
|
|
<span id={labelId}>出生日期</span>
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger
|
|
render={<Button
|
|
type="button"
|
|
variant="outline"
|
|
disabled={disabled}
|
|
aria-labelledby={`${labelId} ${valueId}`}
|
|
data-empty={selected === undefined}
|
|
className="w-full justify-start px-3 text-left font-normal data-[empty=true]:text-muted-foreground"
|
|
/>}
|
|
>
|
|
<CalendarIcon aria-hidden="true" />
|
|
<span id={valueId}>
|
|
{selected === undefined
|
|
? "选择出生日期"
|
|
: format(selected, "PPP", { locale: zhCN })}
|
|
</span>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="start" className="w-auto p-0">
|
|
<Calendar
|
|
key={value || "empty"}
|
|
mode="single"
|
|
className="[--cell-size:2.75rem]"
|
|
locale={zhCN}
|
|
selected={selected}
|
|
defaultMonth={selected ?? defaultMonth}
|
|
captionLayout="dropdown"
|
|
navLayout="after"
|
|
startMonth={new Date(1900, 0)}
|
|
endMonth={today}
|
|
reverseYears
|
|
disabled={{ before: new Date(1900, 0, 1), after: today }}
|
|
onSelect={(nextDate) => {
|
|
if (nextDate === undefined) return;
|
|
onChange(formatBirthDate(nextDate));
|
|
setOpen(false);
|
|
}}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
);
|
|
}
|