/
DayPickerNavigation.jsx
105 lines (89 loc) · 2.78 KB
/
DayPickerNavigation.jsx
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React, { PropTypes } from 'react';
import { forbidExtraProps } from 'airbnb-prop-types';
import cx from 'classnames';
import { DayPickerNavigationPhrases } from '../defaultPhrases';
import getPhrasePropTypes from '../utils/getPhrasePropTypes';
import LeftArrow from '../svg/arrow-left.svg';
import RightArrow from '../svg/arrow-right.svg';
import ChevronUp from '../svg/chevron-up.svg';
import ChevronDown from '../svg/chevron-down.svg';
import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
import {
HORIZONTAL_ORIENTATION,
VERTICAL_SCROLLABLE,
} from '../../constants';
const propTypes = forbidExtraProps({
navPrev: PropTypes.node,
navNext: PropTypes.node,
orientation: ScrollableOrientationShape,
onPrevMonthClick: PropTypes.func,
onNextMonthClick: PropTypes.func,
// internationalization
phrases: PropTypes.shape(getPhrasePropTypes(DayPickerNavigationPhrases)),
});
const defaultProps = {
navPrev: null,
navNext: null,
orientation: HORIZONTAL_ORIENTATION,
onPrevMonthClick() {},
onNextMonthClick() {},
// internationalization
phrases: DayPickerNavigationPhrases,
};
export default function DayPickerNavigation(props) {
const {
navPrev,
navNext,
onPrevMonthClick,
onNextMonthClick,
orientation,
phrases,
} = props;
const isVertical = orientation !== HORIZONTAL_ORIENTATION;
const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;
let navPrevIcon = navPrev;
let navNextIcon = navNext;
let isDefaultNavPrev = false;
let isDefaultNavNext = false;
if (!navPrevIcon) {
isDefaultNavPrev = true;
navPrevIcon = isVertical ? <ChevronUp /> : <LeftArrow />;
}
if (!navNextIcon) {
isDefaultNavNext = true;
navNextIcon = isVertical ? <ChevronDown /> : <RightArrow />;
}
const navClassNames = cx('DayPickerNavigation', {
'DayPickerNavigation--horizontal': !isVertical,
'DayPickerNavigation--vertical': isVertical,
'DayPickerNavigation--vertical-scrollable': isVerticalScrollable,
});
const prevClassNames = cx('DayPickerNavigation__prev', {
'DayPickerNavigation__prev--default': isDefaultNavPrev,
});
const nextClassNames = cx('DayPickerNavigation__next', {
'DayPickerNavigation__next--default': isDefaultNavNext,
});
return (
<div className={navClassNames}>
{!isVerticalScrollable && (
<span
aria-label={phrases.jumpToPrevMonth}
className={prevClassNames}
onClick={onPrevMonthClick}
>
{navPrevIcon}
</span>
)}
<span
aria-label={phrases.jumpToNextMonth}
className={nextClassNames}
onClick={onNextMonthClick}
>
{navNextIcon}
</span>
</div>
);
}
DayPickerNavigation.propTypes = propTypes;
DayPickerNavigation.defaultProps = defaultProps;