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

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

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import { Grid, Typography, createStyles, withStyles } from '@material-ui/core';
import { getDate, isSameMonth, isToday, format } from 'date-fns';
import { chunks, getDaysInMonth, inDateRange, isSameDayValid, isWithinIntervalValid, isBeforeValid, isAfterValid } from './utils';
import Header from './Header';
import Day from './Day';
import { NavigationAction } from './types';
const WEEK_DAYS = ['日', '一', '二', '三', '四', '五', '六'];

const styles = () => 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 isWithinIntervalValid(day, hoverDay, endDate);
      }

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

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

    return false;
  };

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

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

export default withStyles(styles, {
  name: 'EgMonth'
})(Month);