stupa-pdf-api/frontend/node_modules/@mui/x-date-pickers/legacy/DateTimePicker/DateTimePickerTabs.js

148 lines
5.0 KiB
JavaScript

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import * as React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import Tab from '@mui/material/Tab';
import Tabs, { tabsClasses } from '@mui/material/Tabs';
import { styled, useThemeProps } from '@mui/material/styles';
import composeClasses from '@mui/utils/composeClasses';
import { TimeIcon, DateRangeIcon } from '../icons';
import { useLocaleText } from '../internals/hooks/useUtils';
import { getDateTimePickerTabsUtilityClass } from './dateTimePickerTabsClasses';
import { isDatePickerView } from '../internals/utils/date-utils';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var viewToTab = function viewToTab(view) {
if (isDatePickerView(view)) {
return 'date';
}
return 'time';
};
var tabToView = function tabToView(tab) {
if (tab === 'date') {
return 'day';
}
return 'hours';
};
var useUtilityClasses = function useUtilityClasses(ownerState) {
var classes = ownerState.classes;
var slots = {
root: ['root']
};
return composeClasses(slots, getDateTimePickerTabsUtilityClass, classes);
};
var DateTimePickerTabsRoot = styled(Tabs, {
name: 'MuiDateTimePickerTabs',
slot: 'Root',
overridesResolver: function overridesResolver(_, styles) {
return styles.root;
}
})(function (_ref) {
var theme = _ref.theme;
return {
boxShadow: "0 -1px 0 0 inset ".concat((theme.vars || theme).palette.divider),
'&:last-child': _defineProperty({
boxShadow: "0 1px 0 0 inset ".concat((theme.vars || theme).palette.divider)
}, "& .".concat(tabsClasses.indicator), {
bottom: 'auto',
top: 0
})
};
});
/**
* Demos:
*
* - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
* - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
*
* API:
*
* - [DateTimePickerTabs API](https://mui.com/x/api/date-pickers/date-time-picker-tabs/)
*/
var DateTimePickerTabs = function DateTimePickerTabs(inProps) {
var props = useThemeProps({
props: inProps,
name: 'MuiDateTimePickerTabs'
});
var _props$dateIcon = props.dateIcon,
dateIcon = _props$dateIcon === void 0 ? /*#__PURE__*/_jsx(DateRangeIcon, {}) : _props$dateIcon,
onViewChange = props.onViewChange,
_props$timeIcon = props.timeIcon,
timeIcon = _props$timeIcon === void 0 ? /*#__PURE__*/_jsx(TimeIcon, {}) : _props$timeIcon,
view = props.view,
_props$hidden = props.hidden,
hidden = _props$hidden === void 0 ? typeof window === 'undefined' || window.innerHeight < 667 : _props$hidden,
className = props.className,
sx = props.sx;
var localeText = useLocaleText();
var classes = useUtilityClasses(props);
var handleChange = function handleChange(event, value) {
onViewChange(tabToView(value));
};
if (hidden) {
return null;
}
return /*#__PURE__*/_jsxs(DateTimePickerTabsRoot, {
ownerState: props,
variant: "fullWidth",
value: viewToTab(view),
onChange: handleChange,
className: clsx(className, classes.root),
sx: sx,
children: [/*#__PURE__*/_jsx(Tab, {
value: "date",
"aria-label": localeText.dateTableLabel,
icon: /*#__PURE__*/_jsx(React.Fragment, {
children: dateIcon
})
}), /*#__PURE__*/_jsx(Tab, {
value: "time",
"aria-label": localeText.timeTableLabel,
icon: /*#__PURE__*/_jsx(React.Fragment, {
children: timeIcon
})
})]
});
};
process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
className: PropTypes.string,
/**
* Date tab icon.
* @default DateRange
*/
dateIcon: PropTypes.node,
/**
* Toggles visibility of the tabs allowing view switching.
* @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
*/
hidden: PropTypes.bool,
/**
* Callback called when a tab is clicked
* @template TView
* @param {TView} view The view to open
*/
onViewChange: PropTypes.func.isRequired,
/**
* 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 Time
*/
timeIcon: PropTypes.node,
/**
* Currently visible picker view.
*/
view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired
} : void 0;
export { DateTimePickerTabs };