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

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import { classes, st } from './MonthDropdown.st.css';
import setMonth from 'date-fns/setMonth';
import DatePickerDropdown from '../../DatePickerDropdown';

var optionsOf = function optionsOf(items) {
  return items.map(function (item, index) {
    return {
      value: item,
      id: index
    };
  });
};

var MonthDropdown = function MonthDropdown(_ref) {
  var className = _ref.className,
      months = _ref.months,
      date = _ref.date,
      _onChange = _ref.onChange,
      ariaLabel = _ref.ariaLabel,
      ariaLabelledBy = _ref.ariaLabelledBy;
  var options = optionsOf(months);
  var selectedMonth = options.find(function (_ref2) {
    var id = _ref2.id;
    return id === date.getMonth();
  });
  return /*#__PURE__*/React.createElement(DatePickerDropdown, {
    dataHook: "datepicker-month-dropdown",
    className: st(classes.root, className),
    caption: selectedMonth.value,
    options: options,
    selectedId: selectedMonth.id,
    onChange: function onChange(_ref3) {
      var id = _ref3.id;
      return _onChange(setMonth(date, id));
    },
    ariaLabel: ariaLabel,
    ariaLabelledBy: ariaLabelledBy
  });
};

MonthDropdown.propTypes = {
  className: PropTypes.string,
  months: PropTypes.arrayOf(PropTypes.string).isRequired,
  date: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired,
  ariaLabel: PropTypes.string,
  ariaLabelledBy: PropTypes.string
};
export default MonthDropdown;