Spaces:
Running
Running
File size: 1,855 Bytes
9175508 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | import { format } from "date-fns";
import {
buildProjectBarSegment,
projectBarStyle,
type ProjectBarSegment,
} from "../../planner/projectTimeline";
interface ProjectTimelineRowProps {
dayDates: Date[];
startDate: string;
endDate: string;
name: string;
color: string;
tentative: boolean;
showTentative: boolean;
onClick?: () => void;
}
export function ProjectTimelineRow({
dayDates,
startDate,
endDate,
name,
color,
tentative,
showTentative,
onClick,
}: ProjectTimelineRowProps) {
const totalDays = dayDates.length;
const segment = buildProjectBarSegment(
dayDates,
startDate,
endDate,
name,
tentative,
showTentative,
);
return (
<div className="planner-timeline">
<div className="planner-day-grid" />
{segment ? (
<ProjectBar segment={segment} color={color} dayDates={dayDates} onClick={onClick} totalDays={totalDays} />
) : null}
</div>
);
}
function ProjectBar({
segment,
totalDays,
dayDates,
color,
onClick,
}: {
segment: ProjectBarSegment;
totalDays: number;
dayDates: Date[];
color: string;
onClick?: () => void;
}) {
const startDay = dayDates[segment.startIndex];
const endDay = dayDates[segment.endIndex];
const rangeLabel =
segment.startIndex === segment.endIndex
? format(startDay, "MMM d")
: `${format(startDay, "MMM d")} – ${format(endDay, "MMM d")}`;
return (
<div
className={segment.className}
onClick={onClick}
role={onClick ? "button" : undefined}
style={{
...projectBarStyle(segment, totalDays),
background: color,
borderTopColor: color,
}}
tabIndex={onClick ? 0 : undefined}
title={`${segment.label} • ${rangeLabel}`}
>
<span className="planner-bar-label">{segment.label}</span>
</div>
);
}
|