-
-
Notifications
You must be signed in to change notification settings - Fork 696
/
HeadRow.tsx
41 lines (37 loc) · 1012 Bytes
/
HeadRow.tsx
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
import { useDayPicker } from "../contexts/DayPicker";
import { getWeekdays } from "./utils/getWeekdays";
/**
* Render the HeadRow component - i.e. the table head row with the weekday
* names.
*/
export function HeadRow(): JSX.Element {
const {
classNames,
styles,
showWeekNumber,
locale,
weekStartsOn,
ISOWeek,
formatters: { formatWeekdayName },
labels: { labelWeekday }
} = useDayPicker();
const weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
return (
<tr style={styles.head_row} className={classNames.head_row}>
{showWeekNumber && (
<td style={styles.head_cell} className={classNames.head_cell}></td>
)}
{weekdays.map((weekday, i) => (
<th
key={i}
scope="col"
className={classNames.head_cell}
style={styles.head_cell}
aria-label={labelWeekday(weekday, { locale })}
>
{formatWeekdayName(weekday, { locale })}
</th>
))}
</tr>
);
}