@wix/design-system
Version:
@wix/design-system
80 lines • 5.12 kB
JavaScript
import React from 'react';
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.js';
import Text from '../../Text';
import IconButton from '../../IconButton';
import { ICON_CHILD_SIZE } from '../../IconButton/IconButton.constants';
import semanticClassNames from './DatePickerHead.semanticClassNames';
import { useIcons } from '../../WixDesignSystemIconThemeProvider';
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 getIconChildSize = (size) => Object.keys(ICON_CHILD_SIZE).filter(key => ICON_CHILD_SIZE[key] === size);
const DatePickerHead = ({ className, date, locale, localeUtils, onChange, onLeftArrowClick, onRightArrowClick, showMonthDropdown, showYearDropdown, leftArrowAriaLabel, leftArrowAriaLabelledBy, rightArrowAriaLabel, rightArrowAriaLabelledBy, monthDropdownAriaLabel, monthDropdownAriaLabelledBy, yearDropdownAriaLabel, yearDropdownAriaLabelledBy, size, }) => {
const icons = useIcons('DatePickerHead', {
ChevronLeftLarge,
ChevronRightLarge,
ChevronLeftSmall,
ChevronRightSmall,
});
const ChevronLeft = ({ size }) => {
if (getIconChildSize(size).includes('small')) {
return React.createElement(icons.ChevronLeftSmall, { className: classes.arrowIcon });
}
return React.createElement(icons.ChevronLeftLarge, { className: classes.arrowIcon });
};
const ChevronRight = ({ size }) => {
if (getIconChildSize(size).includes('small')) {
return React.createElement(icons.ChevronRightSmall, { className: classes.arrowIcon });
}
return React.createElement(icons.ChevronRightLarge, { className: classes.arrowIcon });
};
const renderMonth = () => showMonthDropdown ? (React.createElement(MonthDropdown, { className: classes.monthDropdown, date: date, onChange: onChange, months: localeUtils.getMonths(), ariaLabel: monthDropdownAriaLabel, ariaLabelledBy: monthDropdownAriaLabelledBy })) : (React.createElement(Text, { weight: "normal", size: size, dataHook: "datepicker-month-caption" }, getMonthName(localeUtils.getMonths(), date.getMonth())));
const renderYear = () => showYearDropdown ? (React.createElement(YearDropdown, { className: classes.yearDropdown, date: date, onChange: onChange, ariaLabel: yearDropdownAriaLabel, ariaLabelledBy: yearDropdownAriaLabelledBy })) : (React.createElement(Text, { 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: st(classes.arrowLeft, semanticClassNames.leftArrow), dataHook: "datepicker-left-arrow", skin: "standard", priority: "secondary", size: size, tabIndex: 0, ariaLabel: leftArrowAriaLabel, ariaLabelledBy: leftArrowAriaLabelledBy, onClick: onLeftArrowClick },
React.createElement(ChevronLeft, null)),
React.createElement("div", { className: classes.yearAndMonthWrapper }, renderYearAndMonth()),
React.createElement(IconButton, { className: st(classes.arrowRight, semanticClassNames.rightArrow), dataHook: "datepicker-right-arrow", skin: "standard", priority: "secondary", size: size, tabIndex: 0, ariaLabel: rightArrowAriaLabel, ariaLabelledBy: rightArrowAriaLabelledBy, onClick: onRightArrowClick },
React.createElement(ChevronRight, null))));
};
export default DatePickerHead;
//# sourceMappingURL=DatePickerHead.js.map