-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
/
Copy pathHidden.js
149 lines (144 loc) · 4.21 KB
/
Hidden.js
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
144
145
146
147
148
149
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import HiddenJs from './HiddenJs';
import HiddenCss from './HiddenCss';
/**
* Responsively hides children based on the selected implementation.
*
* @deprecated The Hidden component was deprecated in Material UI v5. To learn more, see [the Hidden section](https://mui.com/material-ui/migration/v5-component-changes/#hidden) of the migration docs.
*/
function Hidden(props) {
const {
implementation = 'js',
lgDown = false,
lgUp = false,
mdDown = false,
mdUp = false,
smDown = false,
smUp = false,
xlDown = false,
xlUp = false,
xsDown = false,
xsUp = false,
...other
} = props;
if (implementation === 'js') {
return (
<HiddenJs
lgDown={lgDown}
lgUp={lgUp}
mdDown={mdDown}
mdUp={mdUp}
smDown={smDown}
smUp={smUp}
xlDown={xlDown}
xlUp={xlUp}
xsDown={xsDown}
xsUp={xsUp}
{...other}
/>
);
}
return (
<HiddenCss
lgDown={lgDown}
lgUp={lgUp}
mdDown={mdDown}
mdUp={mdUp}
smDown={smDown}
smUp={smUp}
xlDown={xlDown}
xlUp={xlUp}
xsDown={xsDown}
xsUp={xsUp}
{...other}
/>
);
}
Hidden.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Specify which implementation to use. 'js' is the default, 'css' works better for
* server-side rendering.
* @default 'js'
*/
implementation: PropTypes.oneOf(['css', 'js']),
/**
* You can use this prop when choosing the `js` implementation with server-side rendering.
*
* As `window.innerWidth` is unavailable on the server,
* we default to rendering an empty component during the first mount.
* You might want to use a heuristic to approximate
* the screen width of the client browser screen width.
*
* For instance, you could be using the user-agent or the client-hints.
* https://caniuse.com/#search=client%20hint
*/
initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
/**
* If `true`, component is hidden on screens below (but not including) this size.
* @default false
*/
lgDown: PropTypes.bool,
/**
* If `true`, component is hidden on screens this size and above.
* @default false
*/
lgUp: PropTypes.bool,
/**
* If `true`, component is hidden on screens below (but not including) this size.
* @default false
*/
mdDown: PropTypes.bool,
/**
* If `true`, component is hidden on screens this size and above.
* @default false
*/
mdUp: PropTypes.bool,
/**
* Hide the given breakpoint(s).
*/
only: PropTypes.oneOfType([
PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired),
]),
/**
* If `true`, component is hidden on screens below (but not including) this size.
* @default false
*/
smDown: PropTypes.bool,
/**
* If `true`, component is hidden on screens this size and above.
* @default false
*/
smUp: PropTypes.bool,
/**
* If `true`, component is hidden on screens below (but not including) this size.
* @default false
*/
xlDown: PropTypes.bool,
/**
* If `true`, component is hidden on screens this size and above.
* @default false
*/
xlUp: PropTypes.bool,
/**
* If `true`, component is hidden on screens below (but not including) this size.
* @default false
*/
xsDown: PropTypes.bool,
/**
* If `true`, component is hidden on screens this size and above.
* @default false
*/
xsUp: PropTypes.bool,
};
export default Hidden;