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

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

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import { differenceInCalendarMonths, addMonths, isAfter, isBefore } from 'date-fns';
import { Divider, createStyles, withStyles } from '@material-ui/core';
import { getValidatedMonths } from './utils';
import Month from './Month';
export const MARKERS = {
  FIRST_MONTH: Symbol('firstMonth'),
  SECOND_MONTH: Symbol('secondMonth')
};

const styles = theme => 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 = getValidatedMonths(minDate, maxDate, startDate, endDate),
        _getValidatedMonths2 = _slicedToArray(_getValidatedMonths, 2),
        intialFirstMonth = _getValidatedMonths2[0],
        initialSecondMonth = _getValidatedMonths2[1];

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

  const _React$useState3 = React.useState(initialSecondMonth || addMonths(firstMonth, 1)),
        _React$useState4 = _slicedToArray(_React$useState3, 2),
        secondMonth = _React$useState4[0],
        setSecondMonth = _React$useState4[1];

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

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

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

  const canNavigateCloser = differenceInCalendarMonths(secondMonth, firstMonth) >= 2;
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement(Month, {
    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.createElement(Divider, {
    orientation: "vertical",
    flexItem: true
  }), /*#__PURE__*/React.createElement(Month, {
    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
  }));
};

export default withStyles(styles, {
  name: 'EgRangeMenu'
})(RangeMenu);