@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
137 lines (126 loc) • 4.88 kB
JavaScript
/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import YearPicklist from './year-picklist';
import Button from '../../button';
import DateUtil from '../../../utilities/date';
var DatepickerMonthNavigation = createReactClass({
displayName: 'SLDSDatepickerMonthNavigation',
propTypes: {
/**
* Label for button to go to the next month
*/
assistiveTextNextMonth: PropTypes.string.isRequired,
/**
* Label for button to go to the previous month
*/
assistiveTextPreviousMonth: PropTypes.string.isRequired,
/**
* HTML id for component
*/
id: PropTypes.string,
/**
* Date used to create calendar that is displayed. This is typically the initial day focused when using the keyboard navigation. Focus will be set to this date if available.
*/
initialDateForCalendarRender: PropTypes.instanceOf(Date).isRequired,
/**
* Displayed calendar has changed or re-rendered
*/
onChangeMonth: PropTypes.func.isRequired,
/**
* Names of the months
*/
monthLabels: PropTypes.array.isRequired,
/**
* For keyboard navigation. In order to trap focus within the dialog, the first DOM node with a tab index should be listened to.
*/
onPreviousMonthKeyDown: PropTypes.func,
/**
* Callback that passes in the DOM reference of the `<button>` DOM node within this component. Primary use is to allow `focus` to be called. You should still test if the node exists, since rendering is asynchronous.
*/
previousMonthRef: PropTypes.func.isRequired,
/**
* Offset of year from current year that can be selected in the year selection dropdown. (2017 - 5 = 2012).
*/
relativeYearFrom: PropTypes.number,
/**
* Offset of year from current year that can be selected in the year selection dropdown. (2017 + 5 = 2012).
*/
relativeYearTo: PropTypes.number
},
getMonthLabel: function getMonthLabel() {
return this.props.monthLabels[new Date(this.props.initialDateForCalendarRender).getMonth()];
},
getYearLabel: function getYearLabel() {
return new Date(this.props.initialDateForCalendarRender).getFullYear();
},
handleClick: function handleClick(event) {
event.preventDefault();
event.stopPropagation();
},
handleYearSelect: function handleYearSelect(initialDateForCalendarRender) {
this.props.onChangeMonth(undefined, initialDateForCalendarRender);
},
previousMonthClicked: function previousMonthClicked() {
this.props.onChangeMonth(undefined, DateUtil.addMonths(this.props.initialDateForCalendarRender, -1));
},
nextMonthClicked: function nextMonthClicked() {
this.props.onChangeMonth(undefined, DateUtil.addMonths(this.props.initialDateForCalendarRender, 1));
},
render: function render() {
var _this = this;
return React.createElement("div", {
className: "slds-datepicker__filter slds-grid"
}, React.createElement("div", {
className: "slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow",
style: {
flex: 1.75
}
}, React.createElement("div", {
className: "slds-align-middle"
}, React.createElement(Button, {
assistiveText: {
icon: this.props.assistiveTextPreviousMonth
},
iconCategory: "utility",
iconName: "left",
iconVariant: "container",
onKeyDown: this.props.onPreviousMonthKeyDown,
onClick: this.previousMonthClicked,
buttonRef: function buttonRef(component) {
_this.props.previousMonthRef(component);
},
variant: "icon",
type: "button"
})), React.createElement("h2", {
id: "".concat(this.props.id, "-month"),
className: "slds-align-middle",
"aria-live": "assertive",
"aria-atomic": true
}, this.getMonthLabel(), ' ', React.createElement("span", {
className: "slds-assistive-text"
}, this.getYearLabel())), React.createElement("div", {
className: "slds-align-middle"
}, React.createElement(Button, {
assistiveText: {
icon: this.props.assistiveTextNextMonth
},
iconCategory: "utility",
iconName: "right",
iconVariant: "container",
onClick: this.nextMonthClicked,
variant: "icon",
type: "button"
}))), React.createElement(YearPicklist, {
id: this.props.id,
initialDateForCalendarRender: this.props.initialDateForCalendarRender,
onChangeMonth: this.handleYearSelect,
relativeYearFrom: this.props.relativeYearFrom,
relativeYearTo: this.props.relativeYearTo
}));
}
});
export default DatepickerMonthNavigation;
//# sourceMappingURL=navigation.js.map