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

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

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["className", "classes", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { styled, useThemeProps } from '@mui/material/styles';
import composeClasses from '@mui/utils/composeClasses';
import { useToolbarOwnerState, DateTimePickerToolbarOverrideContext } from '@mui/x-date-pickers/internals';
import { usePickerAdapter, usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
import { getDateTimeRangePickerToolbarUtilityClass } from "./dateTimeRangePickerToolbarClasses.js";
import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
import { usePickerRangePositionContext } from "../hooks/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useUtilityClasses = classes => {
  const slots = {
    root: ['root'],
    startToolbar: ['startToolbar'],
    endToolbar: ['endToolbar']
  };
  return composeClasses(slots, getDateTimeRangePickerToolbarUtilityClass, classes);
};
const DateTimeRangePickerToolbarRoot = styled('div', {
  name: 'MuiDateTimeRangePickerToolbar',
  slot: 'Root'
})({
  display: 'flex',
  flexDirection: 'column'
});
const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
  name: 'MuiDateTimeRangePickerToolbar',
  slot: 'StartToolbar'
})({
  borderBottom: 'none',
  paddingBottom: 0
});
const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
  name: 'MuiDateTimeRangePickerToolbar',
  slot: 'EndToolbar'
})({});
const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
  const props = useThemeProps({
    props: inProps,
    name: 'MuiDateTimeRangePickerToolbar'
  });
  const adapter = usePickerAdapter();
  const {
      className,
      classes: classesProp,
      ampm,
      hidden,
      toolbarFormat,
      toolbarPlaceholder,
      titleId,
      sx
    } = props,
    other = _objectWithoutPropertiesLoose(props, _excluded);
  const {
    value,
    setValue,
    disabled,
    readOnly,
    view,
    setView,
    views
  } = usePickerContext();
  const translations = usePickerTranslations();
  const ownerState = useToolbarOwnerState();
  const {
    rangePosition,
    setRangePosition
  } = usePickerRangePositionContext();
  const classes = useUtilityClasses(classesProp);
  const commonToolbarProps = {
    views,
    ampm,
    disabled,
    readOnly,
    hidden,
    toolbarFormat,
    toolbarPlaceholder
  };
  const wrappedSetValue = React.useCallback(newDate => {
    const {
      nextSelection,
      newRange
    } = calculateRangeChange({
      newDate,
      adapter,
      range: value,
      rangePosition,
      allowRangeFlip: true
    });
    setRangePosition(nextSelection);
    setValue(newRange, {
      changeImportance: 'set'
    });
  }, [setValue, setRangePosition, value, rangePosition, adapter]);
  const startOverrides = React.useMemo(() => {
    const handleStartRangeViewChange = newView => {
      if (newView === 'year' || newView === 'month') {
        return;
      }
      if (rangePosition !== 'start') {
        setRangePosition('start');
      }
      setView(newView);
    };
    return {
      value: value[0],
      setValue: wrappedSetValue,
      forceDesktopVariant: true,
      setView: handleStartRangeViewChange,
      view: rangePosition === 'start' ? view : null
    };
  }, [value, wrappedSetValue, rangePosition, view, setRangePosition, setView]);
  const endOverrides = React.useMemo(() => {
    const handleEndRangeViewChange = newView => {
      if (newView === 'year' || newView === 'month') {
        return;
      }
      if (rangePosition !== 'end') {
        setRangePosition('end');
      }
      setView(newView);
    };
    return {
      value: value[1],
      setValue: wrappedSetValue,
      forceDesktopVariant: true,
      setView: handleEndRangeViewChange,
      view: rangePosition === 'end' ? view : null
    };
  }, [value, wrappedSetValue, rangePosition, view, setRangePosition, setView]);
  if (hidden) {
    return null;
  }
  return /*#__PURE__*/_jsxs(DateTimeRangePickerToolbarRoot, _extends({
    className: clsx(classes.root, className),
    ownerState: ownerState,
    ref: ref,
    sx: sx
  }, other, {
    children: [/*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
      value: startOverrides,
      children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({
        toolbarTitle: translations.start,
        ownerState: ownerState,
        className: classes.startToolbar,
        titleId: titleId ? `${titleId}-start-toolbar` : undefined
      }, commonToolbarProps))
    }), /*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
      value: endOverrides,
      children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({
        toolbarTitle: translations.end,
        ownerState: ownerState,
        className: classes.endToolbar,
        titleId: titleId ? `${titleId}-end-toolbar` : undefined
      }, commonToolbarProps))
    })]
  }));
});
if (process.env.NODE_ENV !== "production") DateTimeRangePickerToolbar.displayName = "DateTimeRangePickerToolbar";
process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  ampm: PropTypes.bool,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: PropTypes.object,
  className: PropTypes.string,
  /**
   * If `true`, show the toolbar even in desktop mode.
   * @default `true` for Desktop, `false` for Mobile.
   */
  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]),
  titleId: PropTypes.string,
  /**
   * Toolbar date format.
   */
  toolbarFormat: PropTypes.string,
  /**
   * Toolbar value placeholder—it is displayed when the value is empty.
   * @default "––"
   */
  toolbarPlaceholder: PropTypes.node
} : void 0;
export { DateTimeRangePickerToolbar };