1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import * as React from 'react';
|
3 | import PropTypes from 'prop-types';
|
4 | import capitalize from '../utils/capitalize';
|
5 | import withStyles from '../styles/withStyles';
|
6 | import useTheme from '../styles/useTheme';
|
7 |
|
8 | const styles = theme => {
|
9 | const hidden = {
|
10 | display: 'none'
|
11 | };
|
12 | return theme.breakpoints.keys.reduce((acc, key) => {
|
13 | acc[`only${capitalize(key)}`] = {
|
14 | [theme.breakpoints.only(key)]: hidden
|
15 | };
|
16 | acc[`${key}Up`] = {
|
17 | [theme.breakpoints.up(key)]: hidden
|
18 | };
|
19 | acc[`${key}Down`] = {
|
20 | [theme.breakpoints.down(key)]: hidden
|
21 | };
|
22 | return acc;
|
23 | }, {});
|
24 | };
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 | function HiddenCss(props) {
|
31 | const {
|
32 | children,
|
33 | classes,
|
34 | className,
|
35 | only
|
36 | } = props,
|
37 | other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "only"]);
|
38 |
|
39 | const theme = useTheme();
|
40 |
|
41 | if (process.env.NODE_ENV !== 'production') {
|
42 | const unknownProps = Object.keys(other).filter(propName => {
|
43 | const isUndeclaredBreakpoint = !theme.breakpoints.keys.some(breakpoint => {
|
44 | return `${breakpoint}Up` === propName || `${breakpoint}Down` === propName;
|
45 | });
|
46 | return isUndeclaredBreakpoint;
|
47 | });
|
48 |
|
49 | if (unknownProps.length > 0) {
|
50 | console.error(`Material-UI: Unsupported props received by \`<Hidden implementation="css" />\`: ${unknownProps.join(', ')}. Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?`);
|
51 | }
|
52 | }
|
53 |
|
54 | const clsx = [];
|
55 |
|
56 | if (className) {
|
57 | clsx.push(className);
|
58 | }
|
59 |
|
60 | for (let i = 0; i < theme.breakpoints.keys.length; i += 1) {
|
61 | const breakpoint = theme.breakpoints.keys[i];
|
62 | const breakpointUp = props[`${breakpoint}Up`];
|
63 | const breakpointDown = props[`${breakpoint}Down`];
|
64 |
|
65 | if (breakpointUp) {
|
66 | clsx.push(classes[`${breakpoint}Up`]);
|
67 | }
|
68 |
|
69 | if (breakpointDown) {
|
70 | clsx.push(classes[`${breakpoint}Down`]);
|
71 | }
|
72 | }
|
73 |
|
74 | if (only) {
|
75 | const onlyBreakpoints = Array.isArray(only) ? only : [only];
|
76 | onlyBreakpoints.forEach(breakpoint => {
|
77 | clsx.push(classes[`only${capitalize(breakpoint)}`]);
|
78 | });
|
79 | }
|
80 |
|
81 | return React.createElement("div", {
|
82 | className: clsx.join(' ')
|
83 | }, children);
|
84 | }
|
85 |
|
86 | process.env.NODE_ENV !== "production" ? HiddenCss.propTypes = {
|
87 | |
88 |
|
89 |
|
90 | children: PropTypes.node,
|
91 |
|
92 | |
93 |
|
94 |
|
95 |
|
96 | classes: PropTypes.object.isRequired,
|
97 |
|
98 | |
99 |
|
100 |
|
101 | className: PropTypes.string,
|
102 |
|
103 | |
104 |
|
105 |
|
106 |
|
107 | implementation: PropTypes.oneOf(['js', 'css']),
|
108 |
|
109 | |
110 |
|
111 |
|
112 | lgDown: PropTypes.bool,
|
113 |
|
114 | |
115 |
|
116 |
|
117 | lgUp: PropTypes.bool,
|
118 |
|
119 | |
120 |
|
121 |
|
122 | mdDown: PropTypes.bool,
|
123 |
|
124 | |
125 |
|
126 |
|
127 | mdUp: PropTypes.bool,
|
128 |
|
129 | |
130 |
|
131 |
|
132 | only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
|
133 |
|
134 | |
135 |
|
136 |
|
137 | smDown: PropTypes.bool,
|
138 |
|
139 | |
140 |
|
141 |
|
142 | smUp: PropTypes.bool,
|
143 |
|
144 | |
145 |
|
146 |
|
147 | xlDown: PropTypes.bool,
|
148 |
|
149 | |
150 |
|
151 |
|
152 | xlUp: PropTypes.bool,
|
153 |
|
154 | |
155 |
|
156 |
|
157 | xsDown: PropTypes.bool,
|
158 |
|
159 | |
160 |
|
161 |
|
162 | xsUp: PropTypes.bool
|
163 | } : void 0;
|
164 | export default withStyles(styles, {
|
165 | name: 'PrivateHiddenCss'
|
166 | })(HiddenCss); |
\ | No newline at end of file |