material-date-range-picker/DaySelect.js

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

"use strict";

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 dateIsInRange = function dateIsInRange(date, fromDate, toDate) {
  return fromDate && toDate && (0, _dateFns.isWithinRange)(date, fromDate, toDate);
};

var isSelected = function isSelected(date, compareDate) {
  return compareDate && (0, _dateFns.isSameDay)(date, compareDate);
};

function DaySelect(props) {
  var fromDate = props.fromDate,
      toDate = props.toDate,
      getWeeksInMonth = props.getWeeksInMonth,
      getDayLabelsInWeek = props.getDayLabelsInWeek,
      date = props.date,
      getItemProps = props.getItemProps,
      getMenuProps = props.getMenuProps,
      highlightedIndex = props.highlightedIndex,
      setHighlightedIndex = props.setHighlightedIndex;
  var weeksInMonth = getWeeksInMonth();

  var isInOtherMonth = function isInOtherMonth(dateValue) {
    return !(0, _dateFns.isSameMonth)(date, dateValue);
  };

  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_Components.Row, null, getDayLabelsInWeek('dd').map(function (day) {
    return _react.default.createElement(_Components.Header, {
      key: day
    }, _react.default.createElement(_Components.Text, null, day));
  })), _react.default.createElement(_Components.HeaderDivider, null), _react.default.createElement(_Components.Row, getMenuProps({
    onMouseLeave: function onMouseLeave() {
      return setHighlightedIndex(null);
    }
  }), weeksInMonth.map(function (week, i) {
    return week.map(function (day, j, _ref) {
      var length = _ref.length;
      var isFromDate = isSelected(day.dateValue, fromDate);
      var isToDate = isSelected(day.dateValue, toDate);
      var index = i * length + j;
      return _react.default.createElement(_Components.SelectableCell, getItemProps({
        key: day.label,
        item: day.dateValue,
        index: index,
        isHighlighted: highlightedIndex === index,
        isLessImportant: isInOtherMonth(day.dateValue),
        isInRange: dateIsInRange(day.dateValue, fromDate, toDate),
        isRangeStart: isFromDate && toDate,
        isRangeEnd: isToDate && fromDate,
        isSelected: isFromDate || isToDate,
        isCurrent: (0, _dateFns.isToday)(day.dateValue)
      }), _react.default.createElement(_Components.Text, null, day.label));
    });
  })));
}

var _default = DaySelect;
exports.default = _default;