UNPKG

4.81 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
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
11import { jsx as _jsx } from "react/jsx-runtime";
12
13function Hidden(props) {
14 var _props$implementation = props.implementation,
15 implementation = _props$implementation === void 0 ? 'js' : _props$implementation,
16 _props$lgDown = props.lgDown,
17 lgDown = _props$lgDown === void 0 ? false : _props$lgDown,
18 _props$lgUp = props.lgUp,
19 lgUp = _props$lgUp === void 0 ? false : _props$lgUp,
20 _props$mdDown = props.mdDown,
21 mdDown = _props$mdDown === void 0 ? false : _props$mdDown,
22 _props$mdUp = props.mdUp,
23 mdUp = _props$mdUp === void 0 ? false : _props$mdUp,
24 _props$smDown = props.smDown,
25 smDown = _props$smDown === void 0 ? false : _props$smDown,
26 _props$smUp = props.smUp,
27 smUp = _props$smUp === void 0 ? false : _props$smUp,
28 _props$xlDown = props.xlDown,
29 xlDown = _props$xlDown === void 0 ? false : _props$xlDown,
30 _props$xlUp = props.xlUp,
31 xlUp = _props$xlUp === void 0 ? false : _props$xlUp,
32 _props$xsDown = props.xsDown,
33 xsDown = _props$xsDown === void 0 ? false : _props$xsDown,
34 _props$xsUp = props.xsUp,
35 xsUp = _props$xsUp === void 0 ? false : _props$xsUp,
36 other = _objectWithoutProperties(props, ["implementation", "lgDown", "lgUp", "mdDown", "mdUp", "smDown", "smUp", "xlDown", "xlUp", "xsDown", "xsUp"]);
37
38 if (implementation === 'js') {
39 return /*#__PURE__*/_jsx(HiddenJs, _extends({
40 lgDown: lgDown,
41 lgUp: lgUp,
42 mdDown: mdDown,
43 mdUp: mdUp,
44 smDown: smDown,
45 smUp: smUp,
46 xlDown: xlDown,
47 xlUp: xlUp,
48 xsDown: xsDown,
49 xsUp: xsUp
50 }, other));
51 }
52
53 return /*#__PURE__*/_jsx(HiddenCss, _extends({
54 lgDown: lgDown,
55 lgUp: lgUp,
56 mdDown: mdDown,
57 mdUp: mdUp,
58 smDown: smDown,
59 smUp: smUp,
60 xlDown: xlDown,
61 xlUp: xlUp,
62 xsDown: xsDown,
63 xsUp: xsUp
64 }, other));
65}
66
67process.env.NODE_ENV !== "production" ? Hidden.propTypes
68/* remove-proptypes */
69= {
70 // ----------------------------- Warning --------------------------------
71 // | These PropTypes are generated from the TypeScript type definitions |
72 // | To update them edit the d.ts file and run "yarn proptypes" |
73 // ----------------------------------------------------------------------
74
75 /**
76 * The content of the component.
77 */
78 children: PropTypes.node,
79
80 /**
81 * Specify which implementation to use. 'js' is the default, 'css' works better for
82 * server-side rendering.
83 * @default 'js'
84 */
85 implementation: PropTypes.oneOf(['css', 'js']),
86
87 /**
88 * You can use this prop when choosing the `js` implementation with server-side rendering.
89 *
90 * As `window.innerWidth` is unavailable on the server,
91 * we default to rendering an empty component during the first mount.
92 * You might want to use a heuristic to approximate
93 * the screen width of the client browser screen width.
94 *
95 * For instance, you could be using the user-agent or the client-hints.
96 * https://caniuse.com/#search=client%20hint
97 */
98 initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
99
100 /**
101 * If `true`, screens this size and down are hidden.
102 * @default false
103 */
104 lgDown: PropTypes.bool,
105
106 /**
107 * If `true`, screens this size and up are hidden.
108 * @default false
109 */
110 lgUp: PropTypes.bool,
111
112 /**
113 * If `true`, screens this size and down are hidden.
114 * @default false
115 */
116 mdDown: PropTypes.bool,
117
118 /**
119 * If `true`, screens this size and up are hidden.
120 * @default false
121 */
122 mdUp: PropTypes.bool,
123
124 /**
125 * Hide the given breakpoint(s).
126 */
127 only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired)]),
128
129 /**
130 * If `true`, screens this size and down are hidden.
131 * @default false
132 */
133 smDown: PropTypes.bool,
134
135 /**
136 * If `true`, screens this size and up are hidden.
137 * @default false
138 */
139 smUp: PropTypes.bool,
140
141 /**
142 * If `true`, screens this size and down are hidden.
143 * @default false
144 */
145 xlDown: PropTypes.bool,
146
147 /**
148 * If `true`, screens this size and up are hidden.
149 * @default false
150 */
151 xlUp: PropTypes.bool,
152
153 /**
154 * If `true`, screens this size and down are hidden.
155 * @default false
156 */
157 xsDown: PropTypes.bool,
158
159 /**
160 * If `true`, screens this size and up are hidden.
161 * @default false
162 */
163 xsUp: PropTypes.bool
164} : void 0;
165export default Hidden;
\No newline at end of file