Files
ETB/ETB-FrontEnd/node_modules/@mui/x-date-pickers/node/DateTimePicker/DateTimePickerToolbar.js
Iliyan Angelov 306b20e24a Frontend start
2025-09-14 00:54:48 +03:00

200 lines
8.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DateTimePickerToolbar = DateTimePickerToolbar;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _styles = require("@mui/material/styles");
var _material = require("@mui/material");
var _PickersToolbarText = require("../internals/components/PickersToolbarText");
var _PickersToolbar = require("../internals/components/PickersToolbar");
var _pickersToolbarClasses = require("../internals/components/pickersToolbarClasses");
var _PickersToolbarButton = require("../internals/components/PickersToolbarButton");
var _useUtils = require("../internals/hooks/useUtils");
var _dateTimePickerToolbarClasses = require("./dateTimePickerToolbarClasses");
var _shared = require("./shared");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const useUtilityClasses = ownerState => {
const {
classes
} = ownerState;
const slots = {
root: ['root'],
dateContainer: ['dateContainer'],
timeContainer: ['timeContainer'],
separator: ['separator']
};
return (0, _material.unstable_composeClasses)(slots, _dateTimePickerToolbarClasses.getDateTimePickerToolbarUtilityClass, classes);
};
const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToolbar, {
name: 'MuiDateTimePickerToolbar',
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})(({
theme
}) => ({
paddingLeft: 16,
paddingRight: 16,
justifyContent: 'space-around',
position: 'relative',
[`& .${_pickersToolbarClasses.pickersToolbarClasses.penIconButton}`]: (0, _extends2.default)({
position: 'absolute',
top: 8
}, theme.direction === 'rtl' ? {
left: 8
} : {
right: 8
})
}));
const DateTimePickerToolbarDateContainer = (0, _styles.styled)('div', {
name: 'MuiDateTimePickerToolbar',
slot: 'DateContainer',
overridesResolver: (props, styles) => styles.dateContainer
})({
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start'
});
const DateTimePickerToolbarTimeContainer = (0, _styles.styled)('div', {
name: 'MuiDateTimePickerToolbar',
slot: 'TimeContainer',
overridesResolver: (props, styles) => styles.timeContainer
})({
display: 'flex'
});
const DateTimePickerToolbarSeparator = (0, _styles.styled)(_PickersToolbarText.PickersToolbarText, {
name: 'MuiDateTimePickerToolbar',
slot: 'Separator',
overridesResolver: (props, styles) => styles.separator
})({
margin: '0 4px 0 2px',
cursor: 'default'
});
/**
* @ignore - internal component.
*/
function DateTimePickerToolbar(inProps) {
const props = (0, _styles.useThemeProps)({
props: inProps,
name: 'MuiDateTimePickerToolbar'
});
const {
ampm,
parsedValue,
isMobileKeyboardViewOpen,
openView,
setOpenView,
toggleMobileKeyboardView,
toolbarFormat,
toolbarPlaceholder = '',
toolbarTitle: toolbarTitleProp,
views
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const ownerState = props;
const utils = (0, _useUtils.useUtils)();
const localeText = (0, _useUtils.useLocaleText)();
const classes = useUtilityClasses(ownerState);
const toolbarTitle = toolbarTitleProp != null ? toolbarTitleProp : localeText.dateTimePickerDefaultToolbarTitle;
const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
const dateText = React.useMemo(() => {
if (!parsedValue) {
return toolbarPlaceholder;
}
if (toolbarFormat) {
return utils.formatByString(parsedValue, toolbarFormat);
}
return utils.format(parsedValue, 'shortDate');
}, [parsedValue, toolbarFormat, toolbarPlaceholder, utils]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarRoot, (0, _extends2.default)({
toolbarTitle: toolbarTitle,
isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
toggleMobileKeyboardView: toggleMobileKeyboardView,
className: classes.root,
viewType: (0, _shared.resolveViewTypeFromView)(openView)
}, other, {
isLandscape: false,
ownerState: ownerState,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarDateContainer, {
className: classes.dateContainer,
ownerState: ownerState,
children: [views.includes('year') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
tabIndex: -1,
variant: "subtitle1",
onClick: () => setOpenView('year'),
selected: openView === 'year',
value: parsedValue ? utils.format(parsedValue, 'year') : ''
}), views.includes('day') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
tabIndex: -1,
variant: "h4",
onClick: () => setOpenView('day'),
selected: openView === 'day',
value: dateText
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarTimeContainer, {
className: classes.timeContainer,
ownerState: ownerState,
children: [views.includes('hours') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
variant: "h3",
onClick: () => setOpenView('hours'),
selected: openView === 'hours',
value: parsedValue ? formatHours(parsedValue) : '--'
}), views.includes('minutes') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
variant: "h3",
value: ":",
className: classes.separator,
ownerState: ownerState
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
variant: "h3",
onClick: () => setOpenView('minutes'),
selected: openView === 'minutes',
value: parsedValue ? utils.format(parsedValue, 'minutes') : '--'
})]
}), views.includes('seconds') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
variant: "h3",
value: ":",
className: classes.separator,
ownerState: ownerState
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
variant: "h3",
onClick: () => setOpenView('seconds'),
selected: openView === 'seconds',
value: parsedValue ? utils.format(parsedValue, 'seconds') : '--'
})]
})]
})]
}));
}