@wix/design-system
Version:
@wix/design-system
239 lines (236 loc) • 8.25 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 _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _YearDropdown = _interopRequireDefault(require("./YearDropdown"));
var _MonthDropdown = _interopRequireDefault(require("./MonthDropdown"));
var _DatePickerHeadSt = require("./DatePickerHead.st.css.js");
var _Text = _interopRequireDefault(require("../../Text"));
var _IconButton = _interopRequireDefault(require("../../IconButton"));
var _IconButton2 = require("../../IconButton/IconButton.constants");
var _DatePickerHead = _interopRequireDefault(require("./DatePickerHead.semanticClassNames"));
var _WixDesignSystemIconThemeProvider = require("../../WixDesignSystemIconThemeProvider");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Calendar/DatePickerHead/DatePickerHead.tsx";
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 getIconChildSize = size => Object.keys(_IconButton2.ICON_CHILD_SIZE).filter(key => _IconButton2.ICON_CHILD_SIZE[key] === size);
var DatePickerHead = _ref => {
var {
className,
date,
locale,
localeUtils,
onChange,
onLeftArrowClick,
onRightArrowClick,
showMonthDropdown,
showYearDropdown,
leftArrowAriaLabel,
leftArrowAriaLabelledBy,
rightArrowAriaLabel,
rightArrowAriaLabelledBy,
monthDropdownAriaLabel,
monthDropdownAriaLabelledBy,
yearDropdownAriaLabel,
yearDropdownAriaLabelledBy,
size
} = _ref;
var icons = (0, _WixDesignSystemIconThemeProvider.useIcons)('DatePickerHead', {
ChevronLeftLarge: _wixUiIconsCommon.ChevronLeftLarge,
ChevronRightLarge: _wixUiIconsCommon.ChevronRightLarge,
ChevronLeftSmall: _wixUiIconsCommon.ChevronLeftSmall,
ChevronRightSmall: _wixUiIconsCommon.ChevronRightSmall
});
var ChevronLeft = _ref2 => {
var {
size
} = _ref2;
if (getIconChildSize(size).includes('small')) {
return /*#__PURE__*/_react.default.createElement(icons.ChevronLeftSmall, {
className: _DatePickerHeadSt.classes.arrowIcon,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 14
}
});
}
return /*#__PURE__*/_react.default.createElement(icons.ChevronLeftLarge, {
className: _DatePickerHeadSt.classes.arrowIcon,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 12
}
});
};
var ChevronRight = _ref3 => {
var {
size
} = _ref3;
if (getIconChildSize(size).includes('small')) {
return /*#__PURE__*/_react.default.createElement(icons.ChevronRightSmall, {
className: _DatePickerHeadSt.classes.arrowIcon,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 14
}
});
}
return /*#__PURE__*/_react.default.createElement(icons.ChevronRightLarge, {
className: _DatePickerHeadSt.classes.arrowIcon,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 12
}
});
};
var renderMonth = () => showMonthDropdown ? /*#__PURE__*/_react.default.createElement(_MonthDropdown.default, {
className: _DatePickerHeadSt.classes.monthDropdown,
date: date,
onChange: onChange,
months: localeUtils.getMonths(),
ariaLabel: monthDropdownAriaLabel,
ariaLabelledBy: monthDropdownAriaLabelledBy,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 7
}
}) : /*#__PURE__*/_react.default.createElement(_Text.default, {
weight: "normal",
size: size,
dataHook: "datepicker-month-caption",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 7
}
}, getMonthName(localeUtils.getMonths(), date.getMonth()));
var renderYear = () => showYearDropdown ? /*#__PURE__*/_react.default.createElement(_YearDropdown.default, {
className: _DatePickerHeadSt.classes.yearDropdown,
date: date,
onChange: onChange,
ariaLabel: yearDropdownAriaLabel,
ariaLabelledBy: yearDropdownAriaLabelledBy,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 7
}
}) : /*#__PURE__*/_react.default.createElement(_Text.default, {
weight: "normal",
size: size,
dataHook: "datepicker-year-caption",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
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: 155,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
className: (0, _DatePickerHeadSt.st)(_DatePickerHeadSt.classes.arrowLeft, _DatePickerHead.default.leftArrow),
dataHook: "datepicker-left-arrow",
skin: "standard",
priority: "secondary",
size: size,
tabIndex: 0,
ariaLabel: leftArrowAriaLabel,
ariaLabelledBy: leftArrowAriaLabelledBy,
onClick: onLeftArrowClick,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(ChevronLeft, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 9
}
})), /*#__PURE__*/_react.default.createElement("div", {
className: _DatePickerHeadSt.classes.yearAndMonthWrapper,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 7
}
}, renderYearAndMonth()), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
className: (0, _DatePickerHeadSt.st)(_DatePickerHeadSt.classes.arrowRight, _DatePickerHead.default.rightArrow),
dataHook: "datepicker-right-arrow",
skin: "standard",
priority: "secondary",
size: size,
tabIndex: 0,
ariaLabel: rightArrowAriaLabel,
ariaLabelledBy: rightArrowAriaLabelledBy,
onClick: onRightArrowClick,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(ChevronRight, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 9
}
})));
};
var _default = exports.default = DatePickerHead;
//# sourceMappingURL=DatePickerHead.js.map