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

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

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

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

const Menu = 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,
        onTimeClick = props.onTimeClick,
        onConfirmClick = props.onConfirmClick,
        touched = props.touched,
        focused = props.focused,
        startTime = props.startTime,
        endTime = props.endTime;

  const _useState = useState(new Date()),
        _useState2 = _slicedToArray(_useState, 2),
        month = _useState2[0],
        setMonth = _useState2[1];

  useEffect(() => {
    if (focused === 'start' && startDate) {
      setMonth(startDate);
    }

    if (focused === 'end' && endDate) {
      setMonth(endDate);
    }
  }, [endDate, focused, startDate]);

  const handleMonthNavigate = action => {
    setMonth(addMonths(month, action));
  };

  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.container
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.item
  }, /*#__PURE__*/React.createElement(Month, {
    startDate: startDate,
    endDate: endDate,
    minDate: minDate,
    maxDate: maxDate,
    hoverDay: hoverDay,
    value: month,
    touched: touched,
    focused: focused,
    navState: [true, true],
    setValue: setMonth,
    onDayClick: onDayClick,
    onDayHover: onDayHover,
    onMonthNavigate: handleMonthNavigate,
    classes: {
      monthContainer: classes.monthContainer
    }
  }), /*#__PURE__*/React.createElement(Divider, {
    orientation: "vertical",
    flexItem: true
  }), /*#__PURE__*/React.createElement(Time, {
    onTimeClick: onTimeClick,
    value: focused === 'start' ? startTime : endTime
  })), /*#__PURE__*/React.createElement("div", {
    className: classes.item
  }, /*#__PURE__*/React.createElement(MenuActions, null, /*#__PURE__*/React.createElement(Button, {
    disabled: focused === 'start' ? !startDate : !endDate,
    onClick: onConfirmClick,
    disableElevation: true,
    color: "primary"
  }, "\u78BA\u8A8D")))));
};

export default withStyles(styles, {
  name: 'EgMenu'
})(Menu);