-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
getCalendarDaySettings.js
61 lines (52 loc) · 1.89 KB
/
getCalendarDaySettings.js
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
import getPhrase from './getPhrase';
import { BLOCKED_MODIFIER } from '../constants';
function isSelected(modifiers) {
return modifiers.has('selected')
|| modifiers.has('selected-span')
|| modifiers.has('selected-start')
|| modifiers.has('selected-end');
}
function shouldUseDefaultCursor(modifiers) {
return modifiers.has('blocked-minimum-nights')
|| modifiers.has('blocked-calendar')
|| modifiers.has('blocked-out-of-range');
}
function isHoveredSpan(modifiers) {
if (isSelected(modifiers)) return false;
return modifiers.has('hovered-span') || modifiers.has('after-hovered-start') || modifiers.has('before-hovered-end');
}
function getAriaLabel(phrases, modifiers, day, ariaLabelFormat) {
const {
chooseAvailableDate,
dateIsUnavailable,
dateIsSelected,
dateIsSelectedAsStartDate,
dateIsSelectedAsEndDate,
} = phrases;
const formattedDate = {
date: day.format(ariaLabelFormat),
};
if (modifiers.has('selected-start') && dateIsSelectedAsStartDate) {
return getPhrase(dateIsSelectedAsStartDate, formattedDate);
} if (modifiers.has('selected-end') && dateIsSelectedAsEndDate) {
return getPhrase(dateIsSelectedAsEndDate, formattedDate);
} if (isSelected(modifiers) && dateIsSelected) {
return getPhrase(dateIsSelected, formattedDate);
} if (modifiers.has(BLOCKED_MODIFIER)) {
return getPhrase(dateIsUnavailable, formattedDate);
}
return getPhrase(chooseAvailableDate, formattedDate);
}
export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases) {
return {
ariaLabel: getAriaLabel(phrases, modifiers, day, ariaLabelFormat),
hoveredSpan: isHoveredSpan(modifiers),
isOutsideRange: modifiers.has('blocked-out-of-range'),
selected: isSelected(modifiers),
useDefaultCursor: shouldUseDefaultCursor(modifiers),
daySizeStyles: {
width: daySize,
height: daySize - 1,
},
};
}