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

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _ChevronLeftLarge2 = _interopRequireDefault(_ChevronLeftLarge);

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

var _ChevronRightLarge2 = _interopRequireDefault(_ChevronRightLarge);

var _YearDropdown = require('./YearDropdown');

var _YearDropdown2 = _interopRequireDefault(_YearDropdown);

var _MonthDropdown = require('./MonthDropdown');

var _MonthDropdown2 = _interopRequireDefault(_MonthDropdown);

var _styles = require('./styles.scss');

var _styles2 = _interopRequireDefault(_styles);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var caption = function caption(text, dataHook) {
  return _react2.default.createElement('div', { 'data-hook': dataHook, className: _styles2.default.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 _react2.default.createElement(
    'div',
    { 'data-hook': 'datepicker-head', className: _styles2.default.root },
    _react2.default.createElement(
      'div',
      {
        className: (0, _classnames2.default)(_styles2.default.arrow, _styles2.default.arrowLeft, 'DayPicker-Nav--Left'),
        'data-hook': 'datepicker-left-arrow',
        onClick: onLeftArrowClick
      },
      _react2.default.createElement(_ChevronLeftLarge2.default, { className: _styles2.default.arrowIcon })
    ),
    showMonthDropdown ? _react2.default.createElement(_MonthDropdown2.default, {
      date: date,
      onChange: onChange,
      months: localeUtils.getMonths()
    }) : caption(getMonthName(localeUtils.getMonths(), date.getMonth()), 'datepicker-month-caption'),
    showYearDropdown ? _react2.default.createElement(_YearDropdown2.default, { date: date, onChange: onChange }) : caption(date.getFullYear(), 'datepicker-year-caption'),
    _react2.default.createElement(
      'div',
      {
        className: (0, _classnames2.default)(_styles2.default.arrow, _styles2.default.arrowRight, 'DayPicker-Nav--Right'),
        'data-hook': 'datepicker-right-arrow',
        onClick: onRightArrowClick
      },
      _react2.default.createElement(_ChevronRightLarge2.default, { className: _styles2.default.arrowIcon })
    )
  );
};

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

exports.default = DatePickerHead;