@mui/x-date-pickers
Version:
The community edition of the Date and Time Picker components (MUI X).
111 lines • 2.95 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "className", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
import * as React from 'react';
import clsx from 'clsx';
import Typography from '@mui/material/Typography';
import { styled, useThemeProps } from '@mui/material/styles';
import composeClasses from '@mui/utils/composeClasses';
import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
const {
classes
} = ownerState;
const slots = {
root: ['root'],
content: ['content']
};
return composeClasses(slots, getPickersToolbarUtilityClass, classes);
};
const PickersToolbarRoot = styled('div', {
name: 'MuiPickersToolbar',
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})(({
theme
}) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'space-between',
padding: theme.spacing(2, 3),
variants: [{
props: {
isLandscape: true
},
style: {
height: 'auto',
maxWidth: 160,
padding: 16,
justifyContent: 'flex-start',
flexWrap: 'wrap'
}
}]
}));
const PickersToolbarContent = styled('div', {
name: 'MuiPickersToolbar',
slot: 'Content',
overridesResolver: (props, styles) => styles.content
})({
display: 'flex',
flexWrap: 'wrap',
width: '100%',
flex: 1,
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
variants: [{
props: {
isLandscape: true
},
style: {
justifyContent: 'flex-start',
alignItems: 'flex-start',
flexDirection: 'column'
}
}, {
props: {
isLandscape: true,
landscapeDirection: 'row'
},
style: {
flexDirection: 'row'
}
}]
});
export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(inProps, ref) {
const props = useThemeProps({
props: inProps,
name: 'MuiPickersToolbar'
});
const {
children,
className,
toolbarTitle,
hidden,
titleId
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerState = props;
const classes = useUtilityClasses(ownerState);
if (hidden) {
return null;
}
return /*#__PURE__*/_jsxs(PickersToolbarRoot, _extends({
ref: ref,
className: clsx(classes.root, className),
ownerState: ownerState
}, other, {
children: [/*#__PURE__*/_jsx(Typography, {
color: "text.secondary",
variant: "overline",
id: titleId,
children: toolbarTitle
}), /*#__PURE__*/_jsx(PickersToolbarContent, {
className: classes.content,
ownerState: ownerState,
children: children
})]
}));
});