material-date-range-picker/MonthSelect.js

React components, that implements material design pickers for material-ui v1

"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.default = void 0;

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

var _dateFns = require("date-fns");

var _Components = require("./Components");

var _YearSelect = _interopRequireDefault(require("./YearSelect"));

function getMonthsInYear(date, dateFormat) {
  if (dateFormat === void 0) {
    dateFormat = 'MMM';
  }

  var result = [];
  var selectedMonth = (0, _dateFns.getMonth)(date);

  for (var month = 0; month < 12; month++) {
    var dateValue = (0, _dateFns.addMonths)(date, month - selectedMonth);
    result.push({
      dateValue: dateValue,
      label: (0, _dateFns.format)(dateValue, dateFormat)
    });
  }

  return result;
}

function MonthSelect(props) {
  var setDate = props.setDate,
      date = props.date;
  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_Components.Header, {
    widthPercentage: 1
  }, _react.default.createElement(_Components.Text, null, "Month & Year")), _react.default.createElement(_Components.HeaderDivider, null), _react.default.createElement(_Components.Row, null, getMonthsInYear(date).map(function (month) {
    return _react.default.createElement(_Components.SelectableCell, {
      key: month.label,
      widthPercentage: 1 / 4,
      horizontalSpacing: true,
      onClick: function onClick() {
        return setDate(month.dateValue);
      },
      isSelected: (0, _dateFns.isSameMonth)(month.dateValue, date),
      isCurrent: (0, _dateFns.isThisMonth)(month.dateValue)
    }, _react.default.createElement(_Components.Text, null, month.label));
  })), _react.default.createElement(_YearSelect.default, props));
}

var _default = MonthSelect;
exports.default = _default;