bc518174
 王天杨
提交两个项目文件
|
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
|
import { Caption } from 'components/Caption';
import { Table } from 'components/Table';
import { useDayPicker } from 'contexts/DayPicker';
import { useNavigation } from 'contexts/Navigation';
import { useId } from 'hooks/useId';
/** The props for the {@link Month} component. */
export interface MonthProps {
displayIndex: number;
displayMonth: Date;
}
/** Render a month. */
export function Month(props: MonthProps) {
const dayPicker = useDayPicker();
const { dir, classNames, styles, components } = dayPicker;
const { displayMonths } = useNavigation();
const captionId = useId(
dayPicker.id ? `${dayPicker.id}-${props.displayIndex}` : undefined
);
const tableId = dayPicker.id
? `${dayPicker.id}-grid-${props.displayIndex}`
: undefined;
const className = [classNames.month];
let style = styles.month;
let isStart = props.displayIndex === 0;
let isEnd = props.displayIndex === displayMonths.length - 1;
const isCenter = !isStart && !isEnd;
if (dir === 'rtl') {
[isEnd, isStart] = [isStart, isEnd];
}
if (isStart) {
className.push(classNames.caption_start);
style = { ...style, ...styles.caption_start };
}
if (isEnd) {
className.push(classNames.caption_end);
style = { ...style, ...styles.caption_end };
}
if (isCenter) {
className.push(classNames.caption_between);
style = { ...style, ...styles.caption_between };
}
const CaptionComponent = components?.Caption ?? Caption;
return (
<div key={props.displayIndex} className={className.join(' ')} style={style}>
<CaptionComponent
id={captionId}
displayMonth={props.displayMonth}
displayIndex={props.displayIndex}
/>
<Table
id={tableId}
aria-labelledby={captionId}
displayMonth={props.displayMonth}
/>
</div>
);
}
|
