1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import withStyles from '../styles/withStyles';
|
7 | import capitalize from '../utils/capitalize';
|
8 | export const styles = theme => ({
|
9 |
|
10 | root: {
|
11 | width: '100%',
|
12 | marginLeft: 'auto',
|
13 | boxSizing: 'border-box',
|
14 | marginRight: 'auto',
|
15 | paddingLeft: theme.spacing(2),
|
16 | paddingRight: theme.spacing(2),
|
17 | display: 'block',
|
18 |
|
19 | [theme.breakpoints.up('sm')]: {
|
20 | paddingLeft: theme.spacing(3),
|
21 | paddingRight: theme.spacing(3)
|
22 | }
|
23 | },
|
24 |
|
25 |
|
26 | disableGutters: {
|
27 | paddingLeft: 0,
|
28 | paddingRight: 0
|
29 | },
|
30 |
|
31 |
|
32 | fixed: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
|
33 | const value = theme.breakpoints.values[breakpoint];
|
34 |
|
35 | if (value !== 0) {
|
36 | acc[theme.breakpoints.up(breakpoint)] = {
|
37 | maxWidth: value
|
38 | };
|
39 | }
|
40 |
|
41 | return acc;
|
42 | }, {}),
|
43 |
|
44 |
|
45 | maxWidthXs: {
|
46 | [theme.breakpoints.up('xs')]: {
|
47 | maxWidth: Math.max(theme.breakpoints.values.xs, 444)
|
48 | }
|
49 | },
|
50 |
|
51 |
|
52 | maxWidthSm: {
|
53 | [theme.breakpoints.up('sm')]: {
|
54 | maxWidth: theme.breakpoints.values.sm
|
55 | }
|
56 | },
|
57 |
|
58 |
|
59 | maxWidthMd: {
|
60 | [theme.breakpoints.up('md')]: {
|
61 | maxWidth: theme.breakpoints.values.md
|
62 | }
|
63 | },
|
64 |
|
65 |
|
66 | maxWidthLg: {
|
67 | [theme.breakpoints.up('lg')]: {
|
68 | maxWidth: theme.breakpoints.values.lg
|
69 | }
|
70 | },
|
71 |
|
72 |
|
73 | maxWidthXl: {
|
74 | [theme.breakpoints.up('xl')]: {
|
75 | maxWidth: theme.breakpoints.values.xl
|
76 | }
|
77 | }
|
78 | });
|
79 | const Container = React.forwardRef(function Container(props, ref) {
|
80 | const {
|
81 | classes,
|
82 | className,
|
83 | component: Component = 'div',
|
84 | disableGutters = false,
|
85 | fixed = false,
|
86 | maxWidth = 'lg'
|
87 | } = props,
|
88 | other = _objectWithoutPropertiesLoose(props, ["classes", "className", "component", "disableGutters", "fixed", "maxWidth"]);
|
89 |
|
90 | return React.createElement(Component, _extends({
|
91 | className: clsx(classes.root, className, fixed && classes.fixed, disableGutters && classes.disableGutters, maxWidth !== false && classes[`maxWidth${capitalize(String(maxWidth))}`]),
|
92 | ref: ref
|
93 | }, other));
|
94 | });
|
95 | process.env.NODE_ENV !== "production" ? Container.propTypes = {
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 | |
102 |
|
103 |
|
104 | children: PropTypes
|
105 |
|
106 | .node.isRequired,
|
107 |
|
108 | |
109 |
|
110 |
|
111 |
|
112 | classes: PropTypes.object,
|
113 |
|
114 | |
115 |
|
116 |
|
117 | className: PropTypes.string,
|
118 |
|
119 | |
120 |
|
121 |
|
122 |
|
123 | component: PropTypes
|
124 |
|
125 | .elementType,
|
126 |
|
127 | |
128 |
|
129 |
|
130 | disableGutters: PropTypes.bool,
|
131 |
|
132 | |
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 | fixed: PropTypes.bool,
|
139 |
|
140 | |
141 |
|
142 |
|
143 |
|
144 |
|
145 | maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false])
|
146 | } : void 0;
|
147 | export default withStyles(styles, {
|
148 | name: 'MuiContainer'
|
149 | })(Container); |
\ | No newline at end of file |