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

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

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 styles from './styles.scss';

var caption = function caption(text, dataHook) {
  return React.createElement('div', { 'data-hook': dataHook, className: styles.caption, children: text });
};

var getMonthName = function getMonthName(months, month) {
  return months[month] || months[0];
};

var DatePickerHead = function DatePickerHead(_ref) {
  var date = _ref.date,
      localeUtils = _ref.localeUtils,
      onChange = _ref.onChange,
      onLeftArrowClick = _ref.onLeftArrowClick,
      onRightArrowClick = _ref.onRightArrowClick,
      showMonthDropdown = _ref.showMonthDropdown,
      showYearDropdown = _ref.showYearDropdown;

  // We use global DayPicker-Nav--Left(--Right) class for consistency.
  // All styles of the DayPicker component are global and kept in ../DatePicker.scss
  return React.createElement(
    'div',
    { 'data-hook': 'datepicker-head', className: styles.root },
    React.createElement(
      'div',
      {
        className: classnames(styles.arrow, styles.arrowLeft, 'DayPicker-Nav--Left'),
        'data-hook': 'datepicker-left-arrow',
        onClick: onLeftArrowClick
      },
      React.createElement(ChevronLeftLarge, { className: styles.arrowIcon })
    ),
    showMonthDropdown ? React.createElement(MonthDropdown, {
      date: date,
      onChange: onChange,
      months: localeUtils.getMonths()
    }) : caption(getMonthName(localeUtils.getMonths(), date.getMonth()), 'datepicker-month-caption'),
    showYearDropdown ? React.createElement(YearDropdown, { date: date, onChange: onChange }) : caption(date.getFullYear(), 'datepicker-year-caption'),
    React.createElement(
      'div',
      {
        className: classnames(styles.arrow, styles.arrowRight, 'DayPicker-Nav--Right'),
        'data-hook': 'datepicker-right-arrow',
        onClick: onRightArrowClick
      },
      React.createElement(ChevronRightLarge, { className: styles.arrowIcon })
    )
  );
};

DatePickerHead.propTypes = {
  date: PropTypes.object.isRequired,
  localeUtils: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired,
  onLeftArrowClick: PropTypes.func.isRequired,
  onRightArrowClick: PropTypes.func.isRequired,
  showMonthDropdown: PropTypes.bool,
  showYearDropdown: PropTypes.bool
};

export default DatePickerHead;