@material-ui/lab/node/DayPicker/PickersCalendarHeader.js

Material-UI Lab - Incubator for Material-UI React components.

"use strict";

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.styles = void 0;

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

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _Fade = _interopRequireDefault(require("@material-ui/core/Fade"));

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

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

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

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

var _PickersFadeTransitionGroup = _interopRequireDefault(require("./PickersFadeTransitionGroup"));

var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));

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

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

// tslint:disable-next-line no-relative-import-in-test
const styles = theme => (0, _styles.createStyles)({
  root: {
    display: 'flex',
    alignItems: 'center',
    marginTop: 16,
    marginBottom: 8,
    paddingLeft: 24,
    paddingRight: 12,
    // prevent jumping in safari
    maxHeight: 30,
    minHeight: 30
  },
  yearSelectionSwitcher: {
    marginRight: 'auto'
  },
  previousMonthButton: {
    marginRight: 24
  },
  switchViewDropdown: {
    willChange: 'transform',
    transition: theme.transitions.create('transform'),
    transform: 'rotate(0deg)'
  },
  switchViewDropdownDown: {
    transform: 'rotate(180deg)'
  },
  monthTitleContainer: {
    display: 'flex',
    maxHeight: 30,
    overflow: 'hidden',
    cursor: 'pointer',
    marginRight: 'auto'
  },
  monthText: {
    marginRight: 4
  }
});

exports.styles = styles;

function getSwitchingViewAriaText(view) {
  return view === 'year' ? 'year view is open, switch to calendar view' : 'calendar view is open, switch to year view';
}
/**
 * @ignore - do not document.
 */


function PickersCalendarHeader(props) {
  const {
    onViewChange,
    classes,
    currentMonth: month,
    disableFuture,
    disablePast,
    getViewSwitchingButtonText = getSwitchingViewAriaText,
    leftArrowButtonProps,
    leftArrowButtonText = 'previous month',
    leftArrowIcon,
    maxDate,
    minDate,
    onMonthChange,
    reduceAnimations,
    rightArrowButtonProps,
    rightArrowButtonText = 'next month',
    rightArrowIcon,
    openView: currentView,
    views
  } = props;
  const utils = (0, _useUtils.useUtils)();

  const selectNextMonth = () => onMonthChange(utils.getNextMonth(month), 'left');

  const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(month), 'right');

  const isNextMonthDisabled = (0, _dateHelpersHooks.useNextMonthDisabled)(month, {
    disableFuture,
    maxDate
  });
  const isPreviousMonthDisabled = (0, _dateHelpersHooks.usePreviousMonthDisabled)(month, {
    disablePast,
    minDate
  });

  const toggleView = () => {
    if (views.length === 1 || !onViewChange) {
      return;
    }

    if (views.length === 2) {
      onViewChange(views.find(view => view !== currentView) || views[0]);
    } else {
      // switching only between first 2
      const nextIndexToOpen = views.indexOf(currentView) !== 0 ? 0 : 1;
      onViewChange(views[nextIndexToOpen]);
    }
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement("div", {
    role: "presentation",
    className: classes.monthTitleContainer,
    onClick: toggleView
  }, /*#__PURE__*/React.createElement(_PickersFadeTransitionGroup.default, {
    reduceAnimations: reduceAnimations,
    transKey: utils.format(month, 'month')
  }, /*#__PURE__*/React.createElement(_Typography.default, {
    "aria-live": "polite",
    align: "center",
    variant: "subtitle1",
    className: classes.monthText
  }, utils.format(month, 'month'))), /*#__PURE__*/React.createElement(_PickersFadeTransitionGroup.default, {
    reduceAnimations: reduceAnimations,
    transKey: utils.format(month, 'year')
  }, /*#__PURE__*/React.createElement(_Typography.default, {
    "aria-live": "polite",
    align: "center",
    variant: "subtitle1"
  }, utils.format(month, 'year'))), views.length > 1 && /*#__PURE__*/React.createElement(_IconButton.default, {
    size: "small",
    onClick: toggleView,
    className: classes.yearSelectionSwitcher,
    "aria-label": getViewSwitchingButtonText(currentView)
  }, /*#__PURE__*/React.createElement(_ArrowDropDown.default, {
    className: (0, _clsx.default)(classes.switchViewDropdown, currentView === 'year' && classes.switchViewDropdownDown)
  }))), /*#__PURE__*/React.createElement(_Fade.default, {
    in: currentView === 'date'
  }, /*#__PURE__*/React.createElement(_PickersArrowSwitcher.default, {
    leftArrowButtonProps: leftArrowButtonProps,
    rightArrowButtonProps: rightArrowButtonProps,
    leftArrowButtonText: leftArrowButtonText,
    rightArrowButtonText: rightArrowButtonText,
    leftArrowIcon: leftArrowIcon,
    rightArrowIcon: rightArrowIcon,
    onLeftClick: selectPreviousMonth,
    onRightClick: selectNextMonth,
    isLeftDisabled: isPreviousMonthDisabled,
    isRightDisabled: isNextMonthDisabled
  }))));
}

process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
  leftArrowButtonText: _propTypes.default.string,
  leftArrowIcon: _propTypes.default.node,
  rightArrowButtonText: _propTypes.default.string,
  rightArrowIcon: _propTypes.default.node
} : void 0;

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

exports.default = _default;