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

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import ChevronLeftLarge from 'wix-ui-icons-common/ChevronLeftLarge';
import ChevronRightLarge from 'wix-ui-icons-common/ChevronRightLarge';
import YearDropdown from './YearDropdown';
import MonthDropdown from './MonthDropdown';
import { st, classes } from './DatePickerHead.st.css';
import Text from '../../Text';
import IconButton from '../../IconButton';

var getMonthName = function getMonthName(months, month) {
  return months[month] || months[0];
}; // Reverse display order of month/year in certain languages


export var REVERSE_MONTH_YEAR_LANGUAGES = ['ja', 'zh', 'ko'];

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.createElement(MonthDropdown, {
      className: classes.monthDropdown,
      date: date,
      onChange: onChange,
      months: localeUtils.getMonths(),
      ariaLabel: monthDropdownAriaLabel,
      ariaLabelledBy: monthDropdownAriaLabelledBy
    }) : /*#__PURE__*/React.createElement(Text, {
      className: classes.caption,
      weight: "normal",
      dataHook: 'datepicker-month-caption'
    }, getMonthName(localeUtils.getMonths(), date.getMonth()));
  };

  var renderYear = function renderYear() {
    return showYearDropdown ? /*#__PURE__*/React.createElement(YearDropdown, {
      className: classes.yearDropdown,
      date: date,
      onChange: onChange,
      ariaLabel: yearDropdownAriaLabel,
      ariaLabelledBy: yearDropdownAriaLabelledBy
    }) : /*#__PURE__*/React.createElement(Text, {
      className: classes.caption,
      weight: "normal",
      dataHook: 'datepicker-year-caption'
    }, date.getFullYear());
  };

  var renderYearAndMonth = function renderYearAndMonth() {
    var shouldReverseOrder = getShouldReverseOrder(locale);

    if (shouldReverseOrder) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, renderYear(), renderMonth());
    }

    return /*#__PURE__*/React.createElement(React.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.createElement("div", {
    "data-hook": "datepicker-head",
    className: st(classes.root, className),
    onKeyDown: _handleKeyDown
  }, /*#__PURE__*/React.createElement(IconButton, {
    className: classes.arrowLeft,
    dataHook: "datepicker-left-arrow",
    skin: "light",
    ariaLabel: leftArrowAriaLabel,
    ariaLabelledBy: leftArrowAriaLabelledBy,
    onClick: onLeftArrowClick
  }, /*#__PURE__*/React.createElement(ChevronLeftLarge, {
    className: classes.arrowIcon
  })), /*#__PURE__*/React.createElement(IconButton, {
    className: classes.arrowRight,
    dataHook: "datepicker-right-arrow",
    skin: "light",
    ariaLabel: rightArrowAriaLabel,
    ariaLabelledBy: rightArrowAriaLabelledBy,
    onClick: onRightArrowClick
  }, /*#__PURE__*/React.createElement(ChevronRightLarge, {
    className: classes.arrowIcon
  })), /*#__PURE__*/React.createElement("div", {
    className: classes.yearAndMonthWrapper,
    role: "alert"
  }, renderYearAndMonth()));
};

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;