wix-style-react/dist/src/Calendar/DatePickerHead/DatePickerHead.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.REVERSE_MONTH_YEAR_LANGUAGES = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ChevronLeftLarge = _interopRequireDefault(require("wix-ui-icons-common/ChevronLeftLarge"));

var _ChevronRightLarge = _interopRequireDefault(require("wix-ui-icons-common/ChevronRightLarge"));

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 getMonthName = function getMonthName(months, month) {
  return months[month] || months[0];
}; // Reverse display order of month/year in certain languages


var REVERSE_MONTH_YEAR_LANGUAGES = ['ja', 'zh', 'ko'];
exports.REVERSE_MONTH_YEAR_LANGUAGES = REVERSE_MONTH_YEAR_LANGUAGES;

var getShouldReverseOrder = function getShouldReverseOrder(locale) {
  return REVERSE_MONTH_YEAR_LANGUAGES.includes(locale);
};

var DatePickerHead = function DatePickerHead(_ref) {
  var className = _ref.className,
      date = _ref.date,
      locale = _ref.locale,
      localeUtils = _ref.localeUtils,
      onChange = _ref.onChange,
      onLeftArrowClick = _ref.onLeftArrowClick,
      onRightArrowClick = _ref.onRightArrowClick,
      showMonthDropdown = _ref.showMonthDropdown,
      showYearDropdown = _ref.showYearDropdown,
      leftArrowAriaLabel = _ref.leftArrowAriaLabel,
      leftArrowAriaLabelledBy = _ref.leftArrowAriaLabelledBy,
      rightArrowAriaLabel = _ref.rightArrowAriaLabel,
      rightArrowAriaLabelledBy = _ref.rightArrowAriaLabelledBy,
      monthDropdownAriaLabel = _ref.monthDropdownAriaLabel,
      monthDropdownAriaLabelledBy = _ref.monthDropdownAriaLabelledBy,
      yearDropdownAriaLabel = _ref.yearDropdownAriaLabel,
      yearDropdownAriaLabelledBy = _ref.yearDropdownAriaLabelledBy;

  var renderMonth = function renderMonth() {
    return showMonthDropdown ? /*#__PURE__*/_react["default"].createElement(_MonthDropdown["default"], {
      className: _DatePickerHeadSt.classes.monthDropdown,
      date: date,
      onChange: onChange,
      months: localeUtils.getMonths(),
      ariaLabel: monthDropdownAriaLabel,
      ariaLabelledBy: monthDropdownAriaLabelledBy
    }) : /*#__PURE__*/_react["default"].createElement(_Text["default"], {
      className: _DatePickerHeadSt.classes.caption,
      weight: "normal",
      dataHook: 'datepicker-month-caption'
    }, getMonthName(localeUtils.getMonths(), date.getMonth()));
  };

  var renderYear = function renderYear() {
    return showYearDropdown ? /*#__PURE__*/_react["default"].createElement(_YearDropdown["default"], {
      className: _DatePickerHeadSt.classes.yearDropdown,
      date: date,
      onChange: onChange,
      ariaLabel: yearDropdownAriaLabel,
      ariaLabelledBy: yearDropdownAriaLabelledBy
    }) : /*#__PURE__*/_react["default"].createElement(_Text["default"], {
      className: _DatePickerHeadSt.classes.caption,
      weight: "normal",
      dataHook: 'datepicker-year-caption'
    }, date.getFullYear());
  };

  var renderYearAndMonth = function 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 = function _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, className),
    onKeyDown: _handleKeyDown
  }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
    className: _DatePickerHeadSt.classes.arrowLeft,
    dataHook: "datepicker-left-arrow",
    skin: "light",
    ariaLabel: leftArrowAriaLabel,
    ariaLabelledBy: leftArrowAriaLabelledBy,
    onClick: onLeftArrowClick
  }, /*#__PURE__*/_react["default"].createElement(_ChevronLeftLarge["default"], {
    className: _DatePickerHeadSt.classes.arrowIcon
  })), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
    className: _DatePickerHeadSt.classes.arrowRight,
    dataHook: "datepicker-right-arrow",
    skin: "light",
    ariaLabel: rightArrowAriaLabel,
    ariaLabelledBy: rightArrowAriaLabelledBy,
    onClick: onRightArrowClick
  }, /*#__PURE__*/_react["default"].createElement(_ChevronRightLarge["default"], {
    className: _DatePickerHeadSt.classes.arrowIcon
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: _DatePickerHeadSt.classes.yearAndMonthWrapper,
    role: "alert"
  }, renderYearAndMonth()));
};

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 = DatePickerHead;
exports["default"] = _default;