@material-ui/lab/node/DayPicker/PickersCalendar.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 React = _interopRequireWildcard(require("react"));

var _clsx = _interopRequireDefault(require("clsx"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

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

var _PickersDay = _interopRequireDefault(require("../PickersDay/PickersDay"));

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

var _dimensions = require("../internal/pickers/constants/dimensions");

var _useKeyDown = require("../internal/pickers/hooks/useKeyDown");

var _PickersSlideTransition = _interopRequireDefault(require("./PickersSlideTransition"));

const weeksContainerHeight = (_dimensions.DAY_SIZE + _dimensions.DAY_MARGIN * 4) * 6;

const styles = theme => (0, _styles.createStyles)({
  root: {
    minHeight: weeksContainerHeight
  },
  loadingContainer: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    minHeight: weeksContainerHeight
  },
  weekContainer: {
    overflow: 'hidden'
  },
  week: {
    margin: `${_dimensions.DAY_MARGIN}px 0`,
    display: 'flex',
    justifyContent: 'center'
  },
  iconButton: {
    zIndex: 1,
    backgroundColor: theme.palette.background.paper
  },
  previousMonthButton: {
    marginRight: 12
  },
  daysHeader: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  weekDayLabel: {
    width: 36,
    height: 40,
    margin: '0 2px',
    textAlign: 'center',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    color: theme.palette.text.secondary
  }
});

exports.styles = styles;

var _ref = /*#__PURE__*/React.createElement("span", null, "...");

/**
 * @ignore - do not document.
 */
function PickersCalendar(props) {
  const {
    allowKeyboardControl,
    allowSameDateSelection,
    onFocusedDayChange: changeFocusedDay,
    classes,
    className,
    currentMonth,
    date,
    disableHighlightToday,
    focusedDay,
    isDateDisabled,
    isMonthSwitchingAnimating,
    loading,
    onChange,
    onMonthSwitchingAnimationEnd,
    reduceAnimations,
    renderDay,
    renderLoading = () => _ref,
    showDaysOutsideCurrentMonth,
    slideDirection,
    TransitionProps
  } = props;
  const now = (0, _useUtils.useNow)();
  const utils = (0, _useUtils.useUtils)();
  const theme = (0, _styles.useTheme)();
  const handleDaySelect = React.useCallback((day, isFinish = 'finish') => {
    // TODO possibly buggy line figure out and add tests
    const finalDate = Array.isArray(date) ? day : utils.mergeDateAndTime(day, date || now);
    onChange(finalDate, isFinish);
  }, [date, now, onChange, utils]);
  const initialDate = Array.isArray(date) ? date[0] : date;
  const nowFocusedDay = focusedDay || initialDate || now;
  (0, _useKeyDown.useGlobalKeyDown)(Boolean(allowKeyboardControl), {
    [_useKeyDown.keycode.ArrowUp]: () => changeFocusedDay(utils.addDays(nowFocusedDay, -7)),
    [_useKeyDown.keycode.ArrowDown]: () => changeFocusedDay(utils.addDays(nowFocusedDay, 7)),
    [_useKeyDown.keycode.ArrowLeft]: () => changeFocusedDay(utils.addDays(nowFocusedDay, theme.direction === 'ltr' ? -1 : 1)),
    [_useKeyDown.keycode.ArrowRight]: () => changeFocusedDay(utils.addDays(nowFocusedDay, theme.direction === 'ltr' ? 1 : -1)),
    [_useKeyDown.keycode.Home]: () => changeFocusedDay(utils.startOfWeek(nowFocusedDay)),
    [_useKeyDown.keycode.End]: () => changeFocusedDay(utils.endOfWeek(nowFocusedDay)),
    [_useKeyDown.keycode.PageUp]: () => changeFocusedDay(utils.getNextMonth(nowFocusedDay)),
    [_useKeyDown.keycode.PageDown]: () => changeFocusedDay(utils.getPreviousMonth(nowFocusedDay))
  });
  const currentMonthNumber = utils.getMonth(currentMonth);
  const selectedDates = (Array.isArray(date) ? date : [date]).filter(Boolean).map(selectedDateItem => selectedDateItem && utils.startOfDay(selectedDateItem));
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.daysHeader
  }, utils.getWeekdays().map((day, i) => /*#__PURE__*/React.createElement(_Typography.default, {
    "aria-hidden": true,
    key: day + i.toString(),
    variant: "caption",
    className: classes.weekDayLabel
  }, day.charAt(0).toUpperCase()))), loading ? /*#__PURE__*/React.createElement("div", {
    className: classes.loadingContainer
  }, renderLoading()) : /*#__PURE__*/React.createElement(_PickersSlideTransition.default, (0, _extends2.default)({
    transKey: currentMonthNumber,
    onExited: onMonthSwitchingAnimationEnd,
    reduceAnimations: reduceAnimations,
    slideDirection: slideDirection,
    className: (0, _clsx.default)(classes.root, className)
  }, TransitionProps), /*#__PURE__*/React.createElement("div", {
    role: "grid",
    className: classes.weekContainer
  }, utils.getWeekArray(currentMonth).map(week => /*#__PURE__*/React.createElement("div", {
    role: "row",
    key: `week-${week[0]}`,
    className: classes.week
  }, week.map(day => {
    const dayProps = {
      key: day === null || day === void 0 ? void 0 : day.toString(),
      day,
      role: 'cell',
      isAnimating: isMonthSwitchingAnimating,
      disabled: isDateDisabled(day),
      allowKeyboardControl,
      allowSameDateSelection,
      focused: allowKeyboardControl && Boolean(focusedDay) && utils.isSameDay(day, nowFocusedDay),
      today: utils.isSameDay(day, now),
      outsideCurrentMonth: utils.getMonth(day) !== currentMonthNumber,
      selected: selectedDates.some(selectedDate => selectedDate && utils.isSameDay(selectedDate, day)),
      disableHighlightToday,
      showDaysOutsideCurrentMonth,
      focusable: allowKeyboardControl && Boolean(nowFocusedDay) && utils.toJsDate(nowFocusedDay).getDate() === utils.toJsDate(day).getDate(),
      onDayFocus: changeFocusedDay,
      onDaySelect: handleDaySelect
    };
    return renderDay ? renderDay(day, selectedDates, dayProps) : /*#__PURE__*/React.createElement(_PickersDay.default, dayProps);
  }))))));
}

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

exports.default = _default;