@e-group/material-lab/DateRangePicker/Month.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 = void 0;

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

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

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

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

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

var _Header = _interopRequireDefault(require("./Header"));

var _Day = _interopRequireDefault(require("./Day"));

var _types = require("./types");

const WEEK_DAYS = ['日', '一', '二', '三', '四', '五', '六'];

const styles = () => (0, _core.createStyles)({
  root: {
    display: 'inline-flex',
    width: 318
  },
  weekDaysContainer: {
    marginTop: 10,
    paddingLeft: 30,
    paddingRight: 30
  },
  monthContainer: {
    paddingLeft: 15,
    paddingRight: 15,
    marginTop: 15,
    marginBottom: 20
  },
  weekContainer: {
    margin: '2px 0'
  }
});

const Month = props => {
  const classes = props.classes,
        date = props.value,
        marker = props.marker,
        setDate = props.setValue,
        minDate = props.minDate,
        maxDate = props.maxDate,
        touched = props.touched,
        focused = props.focused,
        hoverDay = props.hoverDay,
        startDate = props.startDate,
        endDate = props.endDate,
        onDayClick = props.onDayClick,
        onDayHover = props.onDayHover,
        onMonthNavigate = props.onMonthNavigate;

  const inHoverRange = day => {
    if (!hoverDay) return false;

    if (focused === 'start') {
      if (!startDate && endDate) {
        return (0, _utils.isWithinIntervalValid)(day, hoverDay, endDate);
      }

      if (startDate && endDate) {
        return (0, _utils.isWithinIntervalValid)(day, hoverDay, startDate);
      }
    } else if (focused === 'end') {
      if (startDate && !endDate) {
        return (0, _utils.isWithinIntervalValid)(day, startDate, hoverDay);
      }

      if (startDate && endDate) {
        return (0, _utils.isWithinIntervalValid)(day, endDate, hoverDay);
      }
    }

    return false;
  };

  const _props$navState = (0, _slicedToArray2.default)(props.navState, 2),
        back = _props$navState[0],
        forward = _props$navState[1];

  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
    container: true
  }, /*#__PURE__*/_react.default.createElement(_Header.default, {
    date: date,
    setDate: setDate,
    nextDisabled: !forward,
    prevDisabled: !back,
    onClickPrevious: () => {
      if (onMonthNavigate) {
        onMonthNavigate(_types.NavigationAction.Previous, marker);
      }
    },
    onClickNext: () => {
      if (onMonthNavigate) {
        onMonthNavigate(_types.NavigationAction.Next, marker);
      }
    }
  }), /*#__PURE__*/_react.default.createElement(_core.Grid, {
    item: true,
    container: true,
    justify: "space-between",
    className: classes.weekDaysContainer
  }, WEEK_DAYS.map(day => /*#__PURE__*/_react.default.createElement(_core.Typography, {
    variant: "body2",
    color: "textSecondary",
    key: day
  }, day))), /*#__PURE__*/_react.default.createElement(_core.Grid, {
    item: true,
    container: true,
    direction: "column",
    className: classes.monthContainer
  }, (0, _utils.chunks)((0, _utils.getDaysInMonth)(date), 7).map(week => /*#__PURE__*/_react.default.createElement(_core.Grid, {
    key: week[0].getTime(),
    container: true,
    justify: "center",
    className: classes.weekContainer
  }, week.map(day => {
    const isStart = (0, _utils.isSameDayValid)(day, startDate);
    const isEnd = (0, _utils.isSameDayValid)(day, endDate);
    const isRangeOneDay = (0, _utils.isSameDayValid)(startDate, endDate);
    const disable = !(0, _utils.isWithinIntervalValid)(day, minDate, maxDate) || touched.start && (0, _utils.isBeforeValid)(day, startDate) || touched.end && (0, _utils.isAfterValid)(day, endDate);
    const isHovered = (0, _utils.isSameDayValid)(day, hoverDay);
    const startOfHoveredRange = isHovered && ((0, _utils.isBeforeValid)(hoverDay, startDate) || (0, _utils.isBeforeValid)(hoverDay, endDate));
    const endOfHoveredRange = isHovered && ((0, _utils.isAfterValid)(hoverDay, startDate) || (0, _utils.isAfterValid)(hoverDay, endDate));
    return /*#__PURE__*/_react.default.createElement(_Day.default, {
      key: (0, _dateFns.format)(day, 'MM-dd-yyyy'),
      filled: isStart || isEnd,
      outlined: (0, _dateFns.isToday)(day),
      isInDateRange: (0, _utils.inDateRange)(day, startDate, endDate) && !isRangeOneDay,
      isInHoveredRange: inHoverRange(day),
      startOfHoveredRange: startOfHoveredRange,
      endOfHoveredRange: endOfHoveredRange,
      disabled: disable,
      invisible: !(0, _dateFns.isSameMonth)(date, day),
      startOfDateRange: isStart && !isRangeOneDay,
      endOfDateRange: isEnd && !isRangeOneDay,
      onClick: () => {
        if (onDayClick) {
          onDayClick(day);
        }
      },
      onHover: () => {
        if (onDayHover) {
          onDayHover(day);
        }
      },
      value: (0, _dateFns.getDate)(day)
    });
  }))))));
};

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

exports.default = _default;