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

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

import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import Fade from '@material-ui/core/Fade';
import { createStyles, withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import { useUtils } from '../internal/pickers/hooks/useUtils';
import FadeTransitionGroup from './PickersFadeTransitionGroup';
// tslint:disable-next-line no-relative-import-in-test
import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
import ArrowSwitcher from '../internal/pickers/PickersArrowSwitcher';
import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internal/pickers/hooks/date-helpers-hooks';
export const styles = theme => 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
  }
});

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 = useUtils();

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

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

  const isNextMonthDisabled = useNextMonthDisabled(month, {
    disableFuture,
    maxDate
  });
  const isPreviousMonthDisabled = 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(FadeTransitionGroup, {
    reduceAnimations: reduceAnimations,
    transKey: utils.format(month, 'month')
  }, /*#__PURE__*/React.createElement(Typography, {
    "aria-live": "polite",
    align: "center",
    variant: "subtitle1",
    className: classes.monthText
  }, utils.format(month, 'month'))), /*#__PURE__*/React.createElement(FadeTransitionGroup, {
    reduceAnimations: reduceAnimations,
    transKey: utils.format(month, 'year')
  }, /*#__PURE__*/React.createElement(Typography, {
    "aria-live": "polite",
    align: "center",
    variant: "subtitle1"
  }, utils.format(month, 'year'))), views.length > 1 && /*#__PURE__*/React.createElement(IconButton, {
    size: "small",
    onClick: toggleView,
    className: classes.yearSelectionSwitcher,
    "aria-label": getViewSwitchingButtonText(currentView)
  }, /*#__PURE__*/React.createElement(ArrowDropDownIcon, {
    className: clsx(classes.switchViewDropdown, currentView === 'year' && classes.switchViewDropdownDown)
  }))), /*#__PURE__*/React.createElement(Fade, {
    in: currentView === 'date'
  }, /*#__PURE__*/React.createElement(ArrowSwitcher, {
    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.string,
  leftArrowIcon: PropTypes.node,
  rightArrowButtonText: PropTypes.string,
  rightArrowIcon: PropTypes.node
} : void 0;
export default withStyles(styles, {
  name: 'MuiPickersCalendarHeader'
})(PickersCalendarHeader);