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

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

"use strict";

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

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 = _interopRequireWildcard(require("react"));

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

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

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

var _Time = _interopRequireDefault(require("./Time"));

var _MenuActions = _interopRequireDefault(require("./MenuActions"));

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

const styles = theme => (0, _core.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 = (0, _react.useState)(new Date()),
        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
        month = _useState2[0],
        setMonth = _useState2[1];

  (0, _react.useEffect)(() => {
    if (focused === 'start' && startDate) {
      setMonth(startDate);
    }

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

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

  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.container
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.item
  }, /*#__PURE__*/_react.default.createElement(_Month.default, {
    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.default.createElement(_core.Divider, {
    orientation: "vertical",
    flexItem: true
  }), /*#__PURE__*/_react.default.createElement(_Time.default, {
    onTimeClick: onTimeClick,
    value: focused === 'start' ? startTime : endTime
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.item
  }, /*#__PURE__*/_react.default.createElement(_MenuActions.default, null, /*#__PURE__*/_react.default.createElement(_core.Button, {
    disabled: focused === 'start' ? !startDate : !endDate,
    onClick: onConfirmClick,
    disableElevation: true,
    color: "primary"
  }, "\u78BA\u8A8D")))));
};

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

exports.default = _default;