Spaces:
Sleeping
Sleeping
File size: 5,317 Bytes
56fda74 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
import composeClasses from '@mui/utils/composeClasses';
import capitalize from '@mui/utils/capitalize';
import useThemePropsSystem from '../useThemeProps';
import systemStyled from '../styled';
import createTheme from '../createTheme';
import { jsx as _jsx } from "react/jsx-runtime";
const defaultTheme = createTheme();
const defaultCreateStyledComponent = systemStyled('div', {
name: 'MuiContainer',
slot: 'Root',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
}
});
const useThemePropsDefault = inProps => useThemePropsSystem({
props: inProps,
name: 'MuiContainer',
defaultTheme
});
const useUtilityClasses = (ownerState, componentName) => {
const getContainerUtilityClass = slot => {
return generateUtilityClass(componentName, slot);
};
const {
classes,
fixed,
disableGutters,
maxWidth
} = ownerState;
const slots = {
root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
};
return composeClasses(slots, getContainerUtilityClass, classes);
};
export default function createContainer(options = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent = defaultCreateStyledComponent,
useThemeProps = useThemePropsDefault,
componentName = 'MuiContainer'
} = options;
const ContainerRoot = createStyledComponent(({
theme,
ownerState
}) => _extends({
width: '100%',
marginLeft: 'auto',
boxSizing: 'border-box',
marginRight: 'auto',
display: 'block'
}, !ownerState.disableGutters && {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up('sm')]: {
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3)
}
}), ({
theme,
ownerState
}) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpointValueKey) => {
const breakpoint = breakpointValueKey;
const value = theme.breakpoints.values[breakpoint];
if (value !== 0) {
// @ts-ignore
acc[theme.breakpoints.up(breakpoint)] = {
maxWidth: `${value}${theme.breakpoints.unit}`
};
}
return acc;
}, {}), ({
theme,
ownerState
}) => _extends({}, ownerState.maxWidth === 'xs' && {
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up('xs')]: {
// @ts-ignore module augmentation fails if custom breakpoints are used
maxWidth: Math.max(theme.breakpoints.values.xs, 444)
}
}, ownerState.maxWidth &&
// @ts-ignore module augmentation fails if custom breakpoints are used
ownerState.maxWidth !== 'xs' && {
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up(ownerState.maxWidth)]: {
// @ts-ignore module augmentation fails if custom breakpoints are used
maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
}
}));
const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
const props = useThemeProps(inProps);
const {
className,
component = 'div',
disableGutters = false,
fixed = false,
maxWidth = 'lg'
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerState = _extends({}, props, {
component,
disableGutters,
fixed,
maxWidth
});
// @ts-ignore module augmentation fails if custom breakpoints are used
const classes = useUtilityClasses(ownerState, componentName);
return (
/*#__PURE__*/
// @ts-ignore theme is injected by the styled util
_jsx(ContainerRoot, _extends({
as: component
// @ts-ignore module augmentation fails if custom breakpoints are used
,
ownerState: ownerState,
className: clsx(classes.root, className),
ref: ref
}, other))
);
});
process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
children: PropTypes.node,
classes: PropTypes.object,
className: PropTypes.string,
component: PropTypes.elementType,
disableGutters: PropTypes.bool,
fixed: PropTypes.bool,
maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
} : void 0;
return Container;
} |