@mui/x-date-pickers-pro/esm/DateTimeRangePicker/DateTimeRangePickerTabs.js

The Pro plan edition of the MUI X Date and Time Picker components.

'use client';

import * as React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { styled, useThemeProps } from '@mui/material/styles';
import composeClasses from '@mui/utils/composeClasses';
import useEventCallback from '@mui/utils/useEventCallback';
import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
import { isDatePickerView, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
import IconButton from '@mui/material/IconButton';
import Button from '@mui/material/Button';
import { getDateTimeRangePickerTabsUtilityClass } from "./dateTimeRangePickerTabsClasses.js";
import { usePickerRangePositionContext } from "../hooks/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const viewToTab = (view, rangePosition) => {
  if (isDatePickerView(view)) {
    return rangePosition === 'start' ? 'start-date' : 'end-date';
  }
  return rangePosition === 'start' ? 'start-time' : 'end-time';
};
const tabToView = tab => {
  if (tab === 'start-date' || tab === 'end-date') {
    return 'day';
  }
  return 'hours';
};
const useUtilityClasses = classes => {
  const slots = {
    root: ['root'],
    tabButton: ['tabButton'],
    navigationButton: ['navigationButton'],
    filler: ['filler']
  };
  return composeClasses(slots, getDateTimeRangePickerTabsUtilityClass, classes);
};
const DateTimeRangePickerTabsRoot = styled('div', {
  name: 'MuiDateTimeRangePickerTabs',
  slot: 'Root'
})(({
  theme
}) => ({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
  minHeight: 48
}));
const DateTimeRangePickerTab = styled(Button, {
  name: 'MuiDateTimeRangePickerTabs',
  slot: 'TabButton'
})({
  textTransform: 'none'
});
const DateTimeRangePickerTabFiller = styled('div', {
  name: 'MuiDateTimeRangePickerTabs',
  slot: 'Filler'
})({
  width: 40
});
const tabOptions = ['start-date', 'start-time', 'end-date', 'end-time'];
const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
  const props = useThemeProps({
    props: inProps,
    name: 'MuiDateTimeRangePickerTabs'
  });
  const {
    dateIcon = /*#__PURE__*/_jsx(DateRangeIcon, {}),
    timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
    hidden = typeof window === 'undefined' || window.innerHeight < 667,
    className,
    classes: classesProp,
    sx
  } = props;
  const translations = usePickerTranslations();
  const {
    ownerState
  } = usePickerPrivateContext();
  const {
    view,
    setView
  } = usePickerContext();
  const classes = useUtilityClasses(classesProp);
  const {
    rangePosition,
    setRangePosition
  } = usePickerRangePositionContext();
  const value = React.useMemo(() => view == null ? null : viewToTab(view, rangePosition), [view, rangePosition]);
  const isPreviousHidden = value === 'start-date';
  const isNextHidden = value === 'end-time';
  const tabLabel = React.useMemo(() => {
    switch (value) {
      case 'start-date':
        return translations.startDate;
      case 'start-time':
        return translations.startTime;
      case 'end-date':
        return translations.endDate;
      case 'end-time':
        return translations.endTime;
      default:
        return '';
    }
  }, [translations.endDate, translations.endTime, translations.startDate, translations.startTime, value]);
  const handleRangePositionChange = useEventCallback(newTab => {
    if (newTab.includes('start')) {
      setRangePosition('start');
    } else {
      setRangePosition('end');
    }
  });
  const changeToPreviousTab = useEventCallback(() => {
    const previousTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) - 1];
    setView(tabToView(previousTab));
    handleRangePositionChange(previousTab);
  });
  const changeToNextTab = useEventCallback(() => {
    const nextTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) + 1];
    setView(tabToView(nextTab));
    handleRangePositionChange(nextTab);
  });
  if (hidden) {
    return null;
  }
  let startIcon;
  if (view == null) {
    startIcon = null;
  } else if (isDatePickerView(view)) {
    startIcon = dateIcon;
  } else {
    startIcon = timeIcon;
  }
  return /*#__PURE__*/_jsxs(DateTimeRangePickerTabsRoot, {
    ownerState: ownerState,
    className: clsx(classes.root, className),
    sx: sx,
    children: [!isPreviousHidden ? /*#__PURE__*/_jsx(IconButton, {
      onClick: changeToPreviousTab,
      className: classes.navigationButton,
      title: translations.openPreviousView,
      children: /*#__PURE__*/_jsx(ArrowLeftIcon, {})
    }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
      className: classes.filler
    }), /*#__PURE__*/_jsx(DateTimeRangePickerTab, {
      startIcon: startIcon,
      className: classes.tabButton,
      size: "large",
      children: tabLabel
    }), !isNextHidden ? /*#__PURE__*/_jsx(IconButton, {
      onClick: changeToNextTab,
      className: classes.navigationButton,
      title: translations.openNextView,
      children: /*#__PURE__*/_jsx(ArrowRightIcon, {})
    }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
      className: classes.filler
    })]
  });
};
if (process.env.NODE_ENV !== "production") DateTimeRangePickerTabs.displayName = "DateTimeRangePickerTabs";
process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  /**
   * Override or extend the styles applied to the component.
   */
  classes: PropTypes.object,
  className: PropTypes.string,
  /**
   * Date tab icon.
   * @default DateRangeIcon
   */
  dateIcon: PropTypes.element,
  /**
   * Toggles visibility of the tabs allowing view switching.
   * @default `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`
   */
  hidden: PropTypes.bool,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
  /**
   * Time tab icon.
   * @default TimeIcon
   */
  timeIcon: PropTypes.element
} : void 0;
export { DateTimeRangePickerTabs };