Spaces:
Sleeping
Sleeping
| ; | |
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | |
| Object.defineProperty(exports, "__esModule", { | |
| value: true | |
| }); | |
| exports.default = createContainer; | |
| var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); | |
| var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); | |
| var React = _interopRequireWildcard(require("react")); | |
| var _propTypes = _interopRequireDefault(require("prop-types")); | |
| var _clsx = _interopRequireDefault(require("clsx")); | |
| var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass")); | |
| var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses")); | |
| var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize")); | |
| var _useThemeProps = _interopRequireDefault(require("../useThemeProps")); | |
| var _styled = _interopRequireDefault(require("../styled")); | |
| var _createTheme = _interopRequireDefault(require("../createTheme")); | |
| var _jsxRuntime = require("react/jsx-runtime"); | |
| const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"]; | |
| function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } | |
| function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } | |
| const defaultTheme = (0, _createTheme.default)(); | |
| const defaultCreateStyledComponent = (0, _styled.default)('div', { | |
| name: 'MuiContainer', | |
| slot: 'Root', | |
| overridesResolver: (props, styles) => { | |
| const { | |
| ownerState | |
| } = props; | |
| return [styles.root, styles[`maxWidth${(0, _capitalize.default)(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters]; | |
| } | |
| }); | |
| const useThemePropsDefault = inProps => (0, _useThemeProps.default)({ | |
| props: inProps, | |
| name: 'MuiContainer', | |
| defaultTheme | |
| }); | |
| const useUtilityClasses = (ownerState, componentName) => { | |
| const getContainerUtilityClass = slot => { | |
| return (0, _generateUtilityClass.default)(componentName, slot); | |
| }; | |
| const { | |
| classes, | |
| fixed, | |
| disableGutters, | |
| maxWidth | |
| } = ownerState; | |
| const slots = { | |
| root: ['root', maxWidth && `maxWidth${(0, _capitalize.default)(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters'] | |
| }; | |
| return (0, _composeClasses.default)(slots, getContainerUtilityClass, classes); | |
| }; | |
| 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 | |
| }) => (0, _extends2.default)({ | |
| 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 | |
| }) => (0, _extends2.default)({}, 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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded); | |
| const ownerState = (0, _extends2.default)({}, 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 | |
| (0, _jsxRuntime.jsx)(ContainerRoot, (0, _extends2.default)({ | |
| as: component | |
| // @ts-ignore module augmentation fails if custom breakpoints are used | |
| , | |
| ownerState: ownerState, | |
| className: (0, _clsx.default)(classes.root, className), | |
| ref: ref | |
| }, other)) | |
| ); | |
| }); | |
| process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = { | |
| children: _propTypes.default.node, | |
| classes: _propTypes.default.object, | |
| className: _propTypes.default.string, | |
| component: _propTypes.default.elementType, | |
| disableGutters: _propTypes.default.bool, | |
| fixed: _propTypes.default.bool, | |
| maxWidth: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), _propTypes.default.string]), | |
| 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]) | |
| } : void 0; | |
| return Container; | |
| } |