-
-
Notifications
You must be signed in to change notification settings - Fork 54
/
cell.tsx
71 lines (65 loc) · 1.29 KB
/
cell.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
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
import cn from 'classnames';
import type { PropsWithChildren } from 'react';
import './cell.css';
type CalendarCellProps = {
end?: boolean;
hovered?: boolean;
inRange?: boolean;
inverted?: boolean;
nextMonth?: boolean;
prevMonth?: boolean;
selectable?: boolean;
selected?: boolean;
start?: boolean;
today?: boolean;
title?: string;
};
const CalendarCell = ({
children,
end,
hovered,
inRange,
inverted,
nextMonth,
prevMonth,
selectable,
selected,
start,
today,
...otherProps
}: PropsWithChildren<CalendarCellProps>) => {
const className = cn('clndr-cell', {
inverted,
'clndr-cell-today': today,
'clndr-cell-disabled': !selectable,
'clndr-cell-other-month': nextMonth || prevMonth,
'clndr-cell-inrange': inRange,
'clndr-cell-selected': selected,
});
if (!children) {
return (
<span className={className} tabIndex={children ? 0 : -1} {...otherProps}>
{children}
</span>
);
}
return (
<button
className={className}
disabled={!selectable}
type="button"
{...otherProps}
>
{children}
</button>
);
};
CalendarCell.defaultProps = {
end: false,
hovered: false,
inRange: false,
nextMonth: false,
prevMonth: false,
start: false,
};
export default CalendarCell;