@mui/x-date-pickers-pro
Version:
The Pro plan edition of the MUI X Date and Time Picker components.
204 lines (203 loc) • 7.54 kB
JavaScript
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DateTimeRangePickerToolbar = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _styles = require("@mui/material/styles");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _internals = require("@mui/x-date-pickers/internals");
var _hooks = require("@mui/x-date-pickers/hooks");
var _DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
var _dateTimeRangePickerToolbarClasses = require("./dateTimeRangePickerToolbarClasses");
var _dateRangeManager = require("../internals/utils/date-range-manager");
var _hooks2 = require("../hooks");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["className", "classes", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
const useUtilityClasses = classes => {
const slots = {
root: ['root'],
startToolbar: ['startToolbar'],
endToolbar: ['endToolbar']
};
return (0, _composeClasses.default)(slots, _dateTimeRangePickerToolbarClasses.getDateTimeRangePickerToolbarUtilityClass, classes);
};
const DateTimeRangePickerToolbarRoot = (0, _styles.styled)('div', {
name: 'MuiDateTimeRangePickerToolbar',
slot: 'Root'
})({
display: 'flex',
flexDirection: 'column'
});
const DateTimeRangePickerToolbarStart = (0, _styles.styled)(_DateTimePicker.DateTimePickerToolbar, {
name: 'MuiDateTimeRangePickerToolbar',
slot: 'StartToolbar'
})({
borderBottom: 'none',
paddingBottom: 0
});
const DateTimeRangePickerToolbarEnd = (0, _styles.styled)(_DateTimePicker.DateTimePickerToolbar, {
name: 'MuiDateTimeRangePickerToolbar',
slot: 'EndToolbar'
})({});
const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
const props = (0, _styles.useThemeProps)({
props: inProps,
name: 'MuiDateTimeRangePickerToolbar'
});
const adapter = (0, _hooks.usePickerAdapter)();
const {
className,
classes: classesProp,
ampm,
hidden,
toolbarFormat,
toolbarPlaceholder,
titleId,
sx
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const {
value,
setValue,
disabled,
readOnly,
view,
setView,
views
} = (0, _hooks.usePickerContext)();
const translations = (0, _hooks.usePickerTranslations)();
const ownerState = (0, _internals.useToolbarOwnerState)();
const {
rangePosition,
setRangePosition
} = (0, _hooks2.usePickerRangePositionContext)();
const classes = useUtilityClasses(classesProp);
const commonToolbarProps = {
views,
ampm,
disabled,
readOnly,
hidden,
toolbarFormat,
toolbarPlaceholder
};
const wrappedSetValue = React.useCallback(newDate => {
const {
nextSelection,
newRange
} = (0, _dateRangeManager.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__*/(0, _jsxRuntime.jsxs)(DateTimeRangePickerToolbarRoot, (0, _extends2.default)({
className: (0, _clsx.default)(classes.root, className),
ownerState: ownerState,
ref: ref,
sx: sx
}, other, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.DateTimePickerToolbarOverrideContext.Provider, {
value: startOverrides,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarStart, (0, _extends2.default)({
toolbarTitle: translations.start,
ownerState: ownerState,
className: classes.startToolbar,
titleId: titleId ? `${titleId}-start-toolbar` : undefined
}, commonToolbarProps))
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.DateTimePickerToolbarOverrideContext.Provider, {
value: endOverrides,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarEnd, (0, _extends2.default)({
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.default.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: _propTypes.default.object,
className: _propTypes.default.string,
/**
* If `true`, show the toolbar even in desktop mode.
* @default `true` for Desktop, `false` for Mobile.
*/
hidden: _propTypes.default.bool,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
titleId: _propTypes.default.string,
/**
* Toolbar date format.
*/
toolbarFormat: _propTypes.default.string,
/**
* Toolbar value placeholder—it is displayed when the value is empty.
* @default "––"
*/
toolbarPlaceholder: _propTypes.default.node
} : void 0;