wix-style-react
Version:
wix-style-react
247 lines (244 loc) • 8.29 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.REVERSE_MONTH_YEAR_LANGUAGES = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _YearDropdown = _interopRequireDefault(require("./YearDropdown"));
var _MonthDropdown = _interopRequireDefault(require("./MonthDropdown"));
var _DatePickerHeadSt = require("./DatePickerHead.st.css");
var _Text = _interopRequireDefault(require("../../Text"));
var _IconButton = _interopRequireDefault(require("../../IconButton"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Calendar/DatePickerHead/DatePickerHead.js";
var getMonthName = (months, month) => months[month] || months[0];
// Reverse display order of month/year in certain languages
var REVERSE_MONTH_YEAR_LANGUAGES = exports.REVERSE_MONTH_YEAR_LANGUAGES = ['ja', 'zh', 'ko'];
var getShouldReverseOrder = locale => {
return REVERSE_MONTH_YEAR_LANGUAGES.includes(locale);
};
var ChevronLeft = size => {
if (size === 'small') {
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeftSmall, {
className: _DatePickerHeadSt.classes.arrowIcon,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 12
}
});
}
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeftLarge, {
className: _DatePickerHeadSt.classes.arrowIcon,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 10
}
});
};
var ChevronRight = size => {
if (size === 'small') {
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRightSmall, {
className: _DatePickerHeadSt.classes.arrowIcon,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 12
}
});
}
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRightLarge, {
className: _DatePickerHeadSt.classes.arrowIcon,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 10
}
});
};
var DatePickerHead = _ref => {
var {
className,
date,
locale,
localeUtils,
onChange,
onLeftArrowClick,
onRightArrowClick,
showMonthDropdown,
showYearDropdown,
leftArrowAriaLabel,
leftArrowAriaLabelledBy,
rightArrowAriaLabel,
rightArrowAriaLabelledBy,
monthDropdownAriaLabel,
monthDropdownAriaLabelledBy,
yearDropdownAriaLabel,
yearDropdownAriaLabelledBy,
size
} = _ref;
var renderMonth = () => showMonthDropdown ? /*#__PURE__*/_react.default.createElement(_MonthDropdown.default, {
className: _DatePickerHeadSt.classes.monthDropdown,
tabIndex: 0,
date: date,
onChange: onChange,
months: localeUtils.getMonths(),
ariaLabel: monthDropdownAriaLabel,
ariaLabelledBy: monthDropdownAriaLabelledBy,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 7
}
}) : /*#__PURE__*/_react.default.createElement(_Text.default, {
className: _DatePickerHeadSt.classes.caption,
weight: "normal",
size: size,
dataHook: "datepicker-month-caption",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 7
}
}, getMonthName(localeUtils.getMonths(), date.getMonth()));
var renderYear = () => showYearDropdown ? /*#__PURE__*/_react.default.createElement(_YearDropdown.default, {
tabIndex: 0,
className: _DatePickerHeadSt.classes.yearDropdown,
date: date,
onChange: onChange,
ariaLabel: yearDropdownAriaLabel,
ariaLabelledBy: yearDropdownAriaLabelledBy,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 7
}
}) : /*#__PURE__*/_react.default.createElement(_Text.default, {
className: _DatePickerHeadSt.classes.caption,
weight: "normal",
size: size,
dataHook: "datepicker-year-caption",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 7
}
}, localeUtils.formatYear(date));
var renderYearAndMonth = () => {
var shouldReverseOrder = getShouldReverseOrder(locale);
if (shouldReverseOrder) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderYear(), renderMonth());
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderMonth(), renderYear());
};
var 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 */
var _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 /*#__PURE__*/_react.default.createElement("div", {
"data-hook": "datepicker-head",
className: (0, _DatePickerHeadSt.st)(_DatePickerHeadSt.classes.root, {
size
}, className),
onKeyDown: _handleKeyDown,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
className: _DatePickerHeadSt.classes.arrowLeft,
dataHook: "datepicker-left-arrow",
skin: "light",
size: size,
tabIndex: 0,
ariaLabel: leftArrowAriaLabel,
ariaLabelledBy: leftArrowAriaLabelledBy,
onClick: onLeftArrowClick,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(ChevronLeft, {
size: size,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 9
}
})), /*#__PURE__*/_react.default.createElement("div", {
className: _DatePickerHeadSt.classes.yearAndMonthWrapper,
role: "alert",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 7
}
}, renderYearAndMonth()), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
className: _DatePickerHeadSt.classes.arrowRight,
dataHook: "datepicker-right-arrow",
skin: "light",
size: size,
tabIndex: 0,
ariaLabel: rightArrowAriaLabel,
ariaLabelledBy: rightArrowAriaLabelledBy,
onClick: onRightArrowClick,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(ChevronRight, {
size: size,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 9
}
})));
};
DatePickerHead.propTypes = {
date: _propTypes.default.object.isRequired,
locale: _propTypes.default.string.isRequired,
localeUtils: _propTypes.default.object.isRequired,
onChange: _propTypes.default.func.isRequired,
onLeftArrowClick: _propTypes.default.func.isRequired,
onRightArrowClick: _propTypes.default.func.isRequired,
showMonthDropdown: _propTypes.default.bool,
showYearDropdown: _propTypes.default.bool,
leftArrowAriaLabel: _propTypes.default.string,
leftArrowAriaLabelledBy: _propTypes.default.string,
rightArrowAriaLabel: _propTypes.default.string,
rightArrowAriaLabelledBy: _propTypes.default.string,
monthDropdownAriaLabel: _propTypes.default.string,
monthDropdownAriaLabelledBy: _propTypes.default.string,
yearDropdownAriaLabel: _propTypes.default.string,
yearDropdownAriaLabelledBy: _propTypes.default.string
};
var _default = exports.default = DatePickerHead;
//# sourceMappingURL=DatePickerHead.js.map