@material-ui/lab/node/DateRangePicker/DateRangePickerViewDesktop.js

Material-UI Lab - Incubator for Material-UI 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.styles = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var React = _interopRequireWildcard(require("react"));

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

var _useUtils = require("../internal/pickers/hooks/useUtils");

var _dateRangeManager = require("./date-range-manager");

var _PickersCalendar = _interopRequireDefault(require("../DayPicker/PickersCalendar"));

var _DateRangePickerDay = _interopRequireDefault(require("../DateRangePickerDay"));

var _propTypes = require("../internal/pickers/constants/prop-types");

var _PickersArrowSwitcher = _interopRequireDefault(require("../internal/pickers/PickersArrowSwitcher"));

var _dateHelpersHooks = require("../internal/pickers/hooks/date-helpers-hooks");

var _dateUtils = require("../internal/pickers/date-utils");

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

const styles = theme => (0, _styles.createStyles)({
  root: {
    display: 'flex',
    flexDirection: 'row'
  },
  rangeCalendarContainer: {
    '&:not(:last-child)': {
      borderRight: `2px solid ${theme.palette.divider}`
    }
  },
  calendar: {
    minWidth: 312,
    minHeight: 288
  },
  arrowSwitcher: {
    padding: '16px 16px 8px 16px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between'
  }
});

exports.styles = styles;

function getCalendarsArray(calendars) {
  switch (calendars) {
    case 1:
      return [0];

    case 2:
      return [0, 0];

    case 3:
      return [0, 0, 0];
    // this will not work in IE11, but allows to support any amount of calendars

    default:
      return new Array(calendars).fill(0);
  }
}
/**
 * @ignore - internal component.
 */


function DateRangePickerViewDesktop(props) {
  const {
    date,
    classes,
    calendars = 2,
    changeMonth,
    leftArrowButtonProps,
    leftArrowButtonText = 'previous month',
    leftArrowIcon,
    rightArrowButtonProps,
    rightArrowButtonText = 'next month',
    rightArrowIcon,
    onChange,
    disableFuture,
    disablePast,
    // eslint-disable-next-line @typescript-eslint/naming-convention
    minDate: __minDate,
    // eslint-disable-next-line @typescript-eslint/naming-convention
    maxDate: __maxDate,
    currentlySelectingRangeEnd,
    currentMonth,
    renderDay = (_, dateRangeProps) => /*#__PURE__*/React.createElement(_DateRangePickerDay.default, dateRangeProps)
  } = props,
        other = (0, _objectWithoutPropertiesLoose2.default)(props, ["date", "classes", "calendars", "changeMonth", "leftArrowButtonProps", "leftArrowButtonText", "leftArrowIcon", "rightArrowButtonProps", "rightArrowButtonText", "rightArrowIcon", "onChange", "disableFuture", "disablePast", "minDate", "maxDate", "currentlySelectingRangeEnd", "currentMonth", "renderDay"]);
  const utils = (0, _useUtils.useUtils)();

  const minDate = __minDate || utils.date(_propTypes.defaultMinDate);

  const maxDate = __maxDate || utils.date(_propTypes.defaultMaxDate);

  const [rangePreviewDay, setRangePreviewDay] = React.useState(null);
  const isNextMonthDisabled = (0, _dateHelpersHooks.useNextMonthDisabled)(currentMonth, {
    disableFuture,
    maxDate
  });
  const isPreviousMonthDisabled = (0, _dateHelpersHooks.usePreviousMonthDisabled)(currentMonth, {
    disablePast,
    minDate
  });
  const previewingRange = (0, _dateRangeManager.calculateRangePreview)({
    utils,
    range: date,
    newDate: rangePreviewDay,
    currentlySelectingRangeEnd
  });
  const handleDayChange = React.useCallback(day => {
    setRangePreviewDay(null);
    onChange(day);
  }, [onChange]);

  const handlePreviewDayChange = newPreviewRequest => {
    if (!(0, _dateUtils.isWithinRange)(utils, newPreviewRequest, date)) {
      setRangePreviewDay(newPreviewRequest);
    } else {
      setRangePreviewDay(null);
    }
  };

  const CalendarTransitionProps = React.useMemo(() => ({
    onMouseLeave: () => setRangePreviewDay(null)
  }), []);
  const selectNextMonth = React.useCallback(() => {
    changeMonth(utils.getNextMonth(currentMonth));
  }, [changeMonth, currentMonth, utils]);
  const selectPreviousMonth = React.useCallback(() => {
    changeMonth(utils.getPreviousMonth(currentMonth));
  }, [changeMonth, currentMonth, utils]);
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, getCalendarsArray(calendars).map((_, index) => {
    const monthOnIteration = utils.setMonth(currentMonth, utils.getMonth(currentMonth) + index);
    return /*#__PURE__*/React.createElement("div", {
      key: index,
      className: classes.rangeCalendarContainer
    }, /*#__PURE__*/React.createElement(_PickersArrowSwitcher.default, {
      className: classes.arrowSwitcher,
      onLeftClick: selectPreviousMonth,
      onRightClick: selectNextMonth,
      isLeftHidden: index !== 0,
      isRightHidden: index !== calendars - 1,
      isLeftDisabled: isPreviousMonthDisabled,
      isRightDisabled: isNextMonthDisabled,
      leftArrowButtonProps: leftArrowButtonProps,
      leftArrowButtonText: leftArrowButtonText,
      leftArrowIcon: leftArrowIcon,
      rightArrowButtonProps: rightArrowButtonProps,
      rightArrowButtonText: rightArrowButtonText,
      rightArrowIcon: rightArrowIcon,
      text: utils.format(monthOnIteration, 'monthAndYear')
    }), /*#__PURE__*/React.createElement(_PickersCalendar.default, (0, _extends2.default)({}, other, {
      key: index,
      date: date,
      onFocusedDayChange: _utils.doNothing,
      className: classes.calendar,
      onChange: handleDayChange,
      currentMonth: monthOnIteration,
      TransitionProps: CalendarTransitionProps,
      renderDay: (day, __, DayProps) => renderDay(day, (0, _extends2.default)({
        isPreviewing: (0, _dateUtils.isWithinRange)(utils, day, previewingRange),
        isStartOfPreviewing: (0, _dateUtils.isStartOfRange)(utils, day, previewingRange),
        isEndOfPreviewing: (0, _dateUtils.isEndOfRange)(utils, day, previewingRange),
        isHighlighting: (0, _dateUtils.isWithinRange)(utils, day, date),
        isStartOfHighlighting: (0, _dateUtils.isStartOfRange)(utils, day, date),
        isEndOfHighlighting: (0, _dateUtils.isEndOfRange)(utils, day, date),
        onMouseEnter: () => handlePreviewDayChange(day)
      }, DayProps))
    })));
  }));
}

var _default = (0, _styles.withStyles)(styles, {
  name: 'MuiPickersDesktopDateRangeCalendar'
})(DateRangePickerViewDesktop);

exports.default = _default;