@e-group/material-lab/DateRangePicker/RangeMenu.js

EGroup Team Lab - Incubator for EGroup Team experimental React components.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.MARKERS = void 0;

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

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

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

var _core = require("@material-ui/core");

var _utils = require("./utils");

var _Month = _interopRequireDefault(require("./Month"));

const MARKERS = {
  FIRST_MONTH: Symbol('firstMonth'),
  SECOND_MONTH: Symbol('secondMonth')
};
exports.MARKERS = MARKERS;

const styles = theme => (0, _core.createStyles)({
  root: {
    display: 'flex',
    [theme.breakpoints.down('xs')]: {
      paddingTop: 53,
      width: '100%',
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'column'
    }
  }
});

const RangeMenu = props => {
  const classes = props.classes,
        startDate = props.startDate,
        endDate = props.endDate,
        hoverDay = props.hoverDay,
        minDate = props.minDate,
        maxDate = props.maxDate,
        onDayClick = props.onDayClick,
        onDayHover = props.onDayHover,
        touched = props.touched,
        focused = props.focused;

  const _getValidatedMonths = (0, _utils.getValidatedMonths)(minDate, maxDate, startDate, endDate),
        _getValidatedMonths2 = (0, _slicedToArray2.default)(_getValidatedMonths, 2),
        intialFirstMonth = _getValidatedMonths2[0],
        initialSecondMonth = _getValidatedMonths2[1];

  const _React$useState = _react.default.useState(intialFirstMonth || new Date()),
        _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
        firstMonth = _React$useState2[0],
        setFirstMonth = _React$useState2[1];

  const _React$useState3 = _react.default.useState(initialSecondMonth || (0, _dateFns.addMonths)(firstMonth, 1)),
        _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
        secondMonth = _React$useState4[0],
        setSecondMonth = _React$useState4[1];

  const setFirstMonthValidated = date => {
    if ((0, _dateFns.isBefore)(date, secondMonth)) {
      setFirstMonth(date);
    }
  };

  const setSecondMonthValidated = date => {
    if ((0, _dateFns.isAfter)(date, firstMonth)) {
      setSecondMonth(date);
    }
  };

  const handleMonthNavigate = (action, marker) => {
    if (marker === MARKERS.FIRST_MONTH) {
      const firstNew = (0, _dateFns.addMonths)(firstMonth, action);
      if ((0, _dateFns.isBefore)(firstNew, secondMonth)) setFirstMonth(firstNew);
    } else {
      const secondNew = (0, _dateFns.addMonths)(secondMonth, action);
      if ((0, _dateFns.isBefore)(firstMonth, secondNew)) setSecondMonth(secondNew);
    }
  };

  const canNavigateCloser = (0, _dateFns.differenceInCalendarMonths)(secondMonth, firstMonth) >= 2;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react.default.createElement(_Month.default, {
    startDate: startDate,
    endDate: endDate,
    minDate: minDate,
    maxDate: maxDate,
    hoverDay: hoverDay,
    value: firstMonth,
    touched: touched,
    focused: focused,
    marker: MARKERS.FIRST_MONTH,
    navState: [true, canNavigateCloser],
    setValue: setFirstMonthValidated,
    onDayClick: onDayClick,
    onDayHover: onDayHover,
    onMonthNavigate: handleMonthNavigate
  }), /*#__PURE__*/_react.default.createElement(_core.Divider, {
    orientation: "vertical",
    flexItem: true
  }), /*#__PURE__*/_react.default.createElement(_Month.default, {
    startDate: startDate,
    endDate: endDate,
    minDate: minDate,
    maxDate: maxDate,
    hoverDay: hoverDay,
    value: secondMonth,
    touched: touched,
    focused: focused,
    marker: MARKERS.SECOND_MONTH,
    navState: [canNavigateCloser, true],
    setValue: setSecondMonthValidated,
    onDayClick: onDayClick,
    onDayHover: onDayHover,
    onMonthNavigate: handleMonthNavigate
  }));
};

var _default = (0, _core.withStyles)(styles, {
  name: 'EgRangeMenu'
})(RangeMenu);

exports.default = _default;