wix-style-react
Version:
wix-style-react
85 lines • 5.26 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { ChevronLeftLarge, ChevronRightLarge, ChevronRightSmall, ChevronLeftSmall, } from '@wix/wix-ui-icons-common';
import YearDropdown from './YearDropdown';
import MonthDropdown from './MonthDropdown';
import { st, classes } from './DatePickerHead.st.css';
import Text from '../../Text';
import IconButton from '../../IconButton';
const getMonthName = (months, month) => months[month] || months[0];
// Reverse display order of month/year in certain languages
export const REVERSE_MONTH_YEAR_LANGUAGES = ['ja', 'zh', 'ko'];
const getShouldReverseOrder = locale => {
return REVERSE_MONTH_YEAR_LANGUAGES.includes(locale);
};
const ChevronLeft = size => {
if (size === 'small') {
return React.createElement(ChevronLeftSmall, { className: classes.arrowIcon });
}
return React.createElement(ChevronLeftLarge, { className: classes.arrowIcon });
};
const ChevronRight = size => {
if (size === 'small') {
return React.createElement(ChevronRightSmall, { className: classes.arrowIcon });
}
return React.createElement(ChevronRightLarge, { className: classes.arrowIcon });
};
const DatePickerHead = ({ className, date, locale, localeUtils, onChange, onLeftArrowClick, onRightArrowClick, showMonthDropdown, showYearDropdown, leftArrowAriaLabel, leftArrowAriaLabelledBy, rightArrowAriaLabel, rightArrowAriaLabelledBy, monthDropdownAriaLabel, monthDropdownAriaLabelledBy, yearDropdownAriaLabel, yearDropdownAriaLabelledBy, size, }) => {
const renderMonth = () => showMonthDropdown ? (React.createElement(MonthDropdown, { className: classes.monthDropdown, tabIndex: 0, date: date, onChange: onChange, months: localeUtils.getMonths(), ariaLabel: monthDropdownAriaLabel, ariaLabelledBy: monthDropdownAriaLabelledBy })) : (React.createElement(Text, { className: classes.caption, weight: "normal", size: size, dataHook: "datepicker-month-caption" }, getMonthName(localeUtils.getMonths(), date.getMonth())));
const renderYear = () => showYearDropdown ? (React.createElement(YearDropdown, { tabIndex: 0, className: classes.yearDropdown, date: date, onChange: onChange, ariaLabel: yearDropdownAriaLabel, ariaLabelledBy: yearDropdownAriaLabelledBy })) : (React.createElement(Text, { className: classes.caption, weight: "normal", size: size, dataHook: "datepicker-year-caption" }, localeUtils.formatYear(date)));
const renderYearAndMonth = () => {
const shouldReverseOrder = getShouldReverseOrder(locale);
if (shouldReverseOrder) {
return (React.createElement(React.Fragment, null,
renderYear(),
renderMonth()));
}
return (React.createElement(React.Fragment, null,
renderMonth(),
renderYear()));
};
const KEYS = {
arrowUp: 'ArrowUp',
arrowDown: 'ArrowDown',
arrowLeft: 'ArrowLeft',
arrowRight: 'ArrowRight',
};
/* prevent the handleKeyDown method of the ReactDayPicker component to be executed when the focus is on one of the header elements */
const _handleKeyDown = event => {
// stop arrow up, arrow down, arrow left and arrow right ReactDayPicker handlers from changing the year and month
if (event &&
event.key &&
(event.key === KEYS.arrowUp ||
event.key === KEYS.arrowDown ||
event.key === KEYS.arrowLeft ||
event.key === KEYS.arrowRight)) {
event.stopPropagation();
}
};
return (React.createElement("div", { "data-hook": "datepicker-head", className: st(classes.root, { size }, className), onKeyDown: _handleKeyDown },
React.createElement(IconButton, { className: classes.arrowLeft, dataHook: "datepicker-left-arrow", skin: "light", size: size, tabIndex: 0, ariaLabel: leftArrowAriaLabel, ariaLabelledBy: leftArrowAriaLabelledBy, onClick: onLeftArrowClick },
React.createElement(ChevronLeft, { size: size })),
React.createElement("div", { className: classes.yearAndMonthWrapper, role: "alert" }, renderYearAndMonth()),
React.createElement(IconButton, { className: classes.arrowRight, dataHook: "datepicker-right-arrow", skin: "light", size: size, tabIndex: 0, ariaLabel: rightArrowAriaLabel, ariaLabelledBy: rightArrowAriaLabelledBy, onClick: onRightArrowClick },
React.createElement(ChevronRight, { size: size }))));
};
DatePickerHead.propTypes = {
date: PropTypes.object.isRequired,
locale: PropTypes.string.isRequired,
localeUtils: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
onLeftArrowClick: PropTypes.func.isRequired,
onRightArrowClick: PropTypes.func.isRequired,
showMonthDropdown: PropTypes.bool,
showYearDropdown: PropTypes.bool,
leftArrowAriaLabel: PropTypes.string,
leftArrowAriaLabelledBy: PropTypes.string,
rightArrowAriaLabel: PropTypes.string,
rightArrowAriaLabelledBy: PropTypes.string,
monthDropdownAriaLabel: PropTypes.string,
monthDropdownAriaLabelledBy: PropTypes.string,
yearDropdownAriaLabel: PropTypes.string,
yearDropdownAriaLabelledBy: PropTypes.string,
};
export default DatePickerHead;
//# sourceMappingURL=DatePickerHead.js.map