@mui/x-date-pickers-pro
Version:
The Pro plan edition of the MUI X Date and Time Picker components.
253 lines (252 loc) • 9.24 kB
JavaScript
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["className", "ampm", "toolbarPlaceholder", "classes"];
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 { PickersToolbar, PickersToolbarButton, PickersToolbarText, getMeridiem, formatMeridiem, pickersToolbarClasses, pickersToolbarTextClasses, MULTI_SECTION_CLOCK_SECTION_WIDTH, useToolbarOwnerState } from '@mui/x-date-pickers/internals';
import { usePickerAdapter, usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
import { getTimeRangePickerToolbarUtilityClass } from "./timeRangePickerToolbarClasses.js";
import { usePickerRangePositionContext } from "../hooks/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useUtilityClasses = (classes, ownerState) => {
const {
pickerVariant
} = ownerState;
const slots = {
root: ['root'],
container: ['container', pickerVariant],
separator: ['separator'],
timeContainer: ['timeContainer']
};
return composeClasses(slots, getTimeRangePickerToolbarUtilityClass, classes);
};
const TimeRangePickerToolbarRoot = styled(PickersToolbar, {
name: 'MuiTimeRangePickerToolbar',
slot: 'Root'
})(({
theme
}) => ({
borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
padding: '12px 0px 8px 0px',
[`& .${pickersToolbarClasses.content} .${pickersToolbarTextClasses.root}[data-selected]`]: {
color: (theme.vars || theme).palette.primary.main,
fontWeight: theme.typography.fontWeightBold
},
[`& .${pickersToolbarClasses.title}`]: {
paddingLeft: 12
}
}));
const TimeRangePickerToolbarContainer = styled('div', {
name: 'MuiTimeRangePickerToolbar',
slot: 'Container',
shouldForwardProp: prop => prop !== 'pickerVariant'
})({
display: 'flex',
flex: 1,
variants: [{
props: {
pickerVariant: 'mobile'
},
style: {
flexDirection: 'column',
rowGap: 8
}
}, {
props: {
pickerVariant: 'desktop'
},
style: {
flexDirection: 'row',
gap: 1
}
}]
});
const TimeRangePickerToolbarTimeContainer = styled('div', {
name: 'MuiTimeRangePickerToolbar',
slot: 'TimeContainer'
})({
display: 'flex',
justifyContent: 'space-around',
flex: 1
});
const TimeRangePickerToolbarSeparator = styled(PickersToolbarText, {
name: 'MuiTimeRangePickerToolbar',
slot: 'Separator'
})({
cursor: 'default'
});
/**
* @ignore - internal component
*/
function TimeRangePickerToolbarTimeElement(props) {
const {
value,
ampm,
onViewChange,
view,
separatorClasses,
toolbarPlaceholder
} = props;
const adapter = usePickerAdapter();
const {
variant,
views
} = usePickerContext();
const formatHours = time => ampm ? adapter.format(time, 'hours12h') : adapter.format(time, 'hours24h');
const meridiemMode = getMeridiem(value, adapter);
const sectionWidth = variant === 'desktop' ? MULTI_SECTION_CLOCK_SECTION_WIDTH : '100%';
return /*#__PURE__*/_jsxs(TimeRangePickerToolbarTimeContainer, {
children: [views.includes('hours') && /*#__PURE__*/_jsxs(React.Fragment, {
children: [/*#__PURE__*/_jsx(PickersToolbarButton, {
variant: "h5",
width: sectionWidth,
onClick: () => onViewChange('hours'),
selected: view === 'hours',
value: adapter.isValid(value) ? formatHours(value) : toolbarPlaceholder
}), /*#__PURE__*/_jsx(TimeRangePickerToolbarSeparator, {
variant: "h5",
value: ":",
className: separatorClasses
}), /*#__PURE__*/_jsx(PickersToolbarButton, {
variant: "h5",
width: sectionWidth,
onClick: () => onViewChange('minutes'),
selected: view === 'minutes' || !views.includes('minutes') && view === 'hours',
value: adapter.isValid(value) ? adapter.format(value, 'minutes') : toolbarPlaceholder,
disabled: !views.includes('minutes')
})]
}), views.includes('seconds') && /*#__PURE__*/_jsxs(React.Fragment, {
children: [/*#__PURE__*/_jsx(TimeRangePickerToolbarSeparator, {
variant: "h5",
value: ":",
className: separatorClasses
}), /*#__PURE__*/_jsx(PickersToolbarButton, {
variant: "h5",
width: sectionWidth,
onClick: () => onViewChange('seconds'),
selected: view === 'seconds',
value: value ? adapter.format(value, 'seconds') : toolbarPlaceholder
})]
}), ampm && /*#__PURE__*/_jsx(PickersToolbarButton, {
variant: "h5",
onClick: () => onViewChange('meridiem'),
selected: view === 'meridiem',
value: value && meridiemMode ? formatMeridiem(adapter, meridiemMode) : toolbarPlaceholder,
width: sectionWidth
})]
});
}
process.env.NODE_ENV !== "production" ? TimeRangePickerToolbarTimeElement.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.isRequired,
onViewChange: PropTypes.func.isRequired,
separatorClasses: PropTypes.string.isRequired,
/**
* Toolbar value placeholder—it is displayed when the value is empty.
* @default "––"
*/
toolbarPlaceholder: PropTypes.node,
value: PropTypes.object,
view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds'])
} : void 0;
const TimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function TimeRangePickerToolbar(inProps, ref) {
const props = useThemeProps({
props: inProps,
name: 'MuiTimeRangePickerToolbar'
});
const {
className,
ampm,
toolbarPlaceholder = '--',
classes: classesProp
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const {
value,
view,
setView
} = usePickerContext();
const translations = usePickerTranslations();
const ownerState = useToolbarOwnerState();
const {
rangePosition,
setRangePosition
} = usePickerRangePositionContext();
const classes = useUtilityClasses(classesProp, ownerState);
const handleStartRangeViewChange = React.useCallback(newView => {
if (rangePosition !== 'start') {
setRangePosition('start');
}
setView(newView);
}, [setRangePosition, setView, rangePosition]);
const handleEndRangeViewChange = React.useCallback(newView => {
if (rangePosition !== 'end') {
setRangePosition('end');
}
setView(newView);
}, [setRangePosition, setView, rangePosition]);
if (!view) {
return null;
}
return /*#__PURE__*/_jsx(TimeRangePickerToolbarRoot, _extends({}, other, {
toolbarTitle: translations.timeRangePickerToolbarTitle,
className: clsx(className, classes.root),
ownerState: ownerState,
ref: ref,
children: /*#__PURE__*/_jsxs(TimeRangePickerToolbarContainer, {
className: classes.container,
pickerVariant: ownerState.pickerVariant,
children: [/*#__PURE__*/_jsx(TimeRangePickerToolbarTimeElement, {
view: rangePosition === 'start' ? view : undefined,
value: value[0],
onViewChange: handleStartRangeViewChange,
ampm: ampm,
separatorClasses: classes.separator,
toolbarPlaceholder: toolbarPlaceholder
}), /*#__PURE__*/_jsx(TimeRangePickerToolbarTimeElement, {
view: rangePosition === 'end' ? view : undefined,
value: value[1],
onViewChange: handleEndRangeViewChange,
ampm: ampm,
separatorClasses: classes.separator,
toolbarPlaceholder: toolbarPlaceholder
})]
})
}));
});
if (process.env.NODE_ENV !== "production") TimeRangePickerToolbar.displayName = "TimeRangePickerToolbar";
process.env.NODE_ENV !== "production" ? TimeRangePickerToolbar.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.isRequired,
/**
* 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 value placeholder—it is displayed when the value is empty.
* @default "––"
*/
toolbarPlaceholder: PropTypes.node
} : void 0;
export { TimeRangePickerToolbar };