UNPKG

3.49 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3import * as React from 'react';
4import PropTypes from 'prop-types';
5import HiddenJs from './HiddenJs';
6import HiddenCss from './HiddenCss';
7/**
8 * Responsively hides children based on the selected implementation.
9 */
10
11function Hidden(props) {
12 const {
13 implementation = 'js',
14 lgDown = false,
15 lgUp = false,
16 mdDown = false,
17 mdUp = false,
18 smDown = false,
19 smUp = false,
20 xlDown = false,
21 xlUp = false,
22 xsDown = false,
23 xsUp = false
24 } = props,
25 other = _objectWithoutPropertiesLoose(props, ["implementation", "lgDown", "lgUp", "mdDown", "mdUp", "smDown", "smUp", "xlDown", "xlUp", "xsDown", "xsUp"]);
26
27 if (implementation === 'js') {
28 return /*#__PURE__*/React.createElement(HiddenJs, _extends({
29 lgDown: lgDown,
30 lgUp: lgUp,
31 mdDown: mdDown,
32 mdUp: mdUp,
33 smDown: smDown,
34 smUp: smUp,
35 xlDown: xlDown,
36 xlUp: xlUp,
37 xsDown: xsDown,
38 xsUp: xsUp
39 }, other));
40 }
41
42 return /*#__PURE__*/React.createElement(HiddenCss, _extends({
43 lgDown: lgDown,
44 lgUp: lgUp,
45 mdDown: mdDown,
46 mdUp: mdUp,
47 smDown: smDown,
48 smUp: smUp,
49 xlDown: xlDown,
50 xlUp: xlUp,
51 xsDown: xsDown,
52 xsUp: xsUp
53 }, other));
54}
55
56process.env.NODE_ENV !== "production" ? Hidden.propTypes = {
57 /**
58 * The content of the component.
59 */
60 children: PropTypes.node,
61
62 /**
63 * @ignore
64 */
65 className: PropTypes.string,
66
67 /**
68 * Specify which implementation to use. 'js' is the default, 'css' works better for
69 * server-side rendering.
70 */
71 implementation: PropTypes.oneOf(['js', 'css']),
72
73 /**
74 * You can use this prop when choosing the `js` implementation with server-side rendering.
75 *
76 * As `window.innerWidth` is unavailable on the server,
77 * we default to rendering an empty component during the first mount.
78 * You might want to use an heuristic to approximate
79 * the screen width of the client browser screen width.
80 *
81 * For instance, you could be using the user-agent or the client-hints.
82 * https://caniuse.com/#search=client%20hint
83 */
84 initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
85
86 /**
87 * If `true`, screens this size and down will be hidden.
88 */
89 lgDown: PropTypes.bool,
90
91 /**
92 * If `true`, screens this size and up will be hidden.
93 */
94 lgUp: PropTypes.bool,
95
96 /**
97 * If `true`, screens this size and down will be hidden.
98 */
99 mdDown: PropTypes.bool,
100
101 /**
102 * If `true`, screens this size and up will be hidden.
103 */
104 mdUp: PropTypes.bool,
105
106 /**
107 * Hide the given breakpoint(s).
108 */
109 only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
110
111 /**
112 * If `true`, screens this size and down will be hidden.
113 */
114 smDown: PropTypes.bool,
115
116 /**
117 * If `true`, screens this size and up will be hidden.
118 */
119 smUp: PropTypes.bool,
120
121 /**
122 * If `true`, screens this size and down will be hidden.
123 */
124 xlDown: PropTypes.bool,
125
126 /**
127 * If `true`, screens this size and up will be hidden.
128 */
129 xlUp: PropTypes.bool,
130
131 /**
132 * If `true`, screens this size and down will be hidden.
133 */
134 xsDown: PropTypes.bool,
135
136 /**
137 * If `true`, screens this size and up will be hidden.
138 */
139 xsUp: PropTypes.bool
140} : void 0;
141export default Hidden;
\No newline at end of file