@material-ui/core
Version:
React components that implement Google's Material Design.
149 lines (123 loc) • 3.69 kB
JavaScript
import PropTypes from 'prop-types';
import { exactProp } from '@material-ui/utils';
import withWidth, { isWidthDown, isWidthUp } from '../withWidth';
import useTheme from '../styles/useTheme';
/**
* @ignore - internal component.
*/
function HiddenJs(props) {
var children = props.children,
only = props.only,
width = props.width;
var theme = useTheme();
var visible = true; // `only` check is faster to get out sooner if used.
if (only) {
if (Array.isArray(only)) {
for (var i = 0; i < only.length; i += 1) {
var breakpoint = only[i];
if (width === breakpoint) {
visible = false;
break;
}
}
} else if (only && width === only) {
visible = false;
}
} // Allow `only` to be combined with other props. If already hidden, no need to check others.
if (visible) {
// determine visibility based on the smallest size up
for (var _i = 0; _i < theme.breakpoints.keys.length; _i += 1) {
var _breakpoint = theme.breakpoints.keys[_i];
var breakpointUp = props["".concat(_breakpoint, "Up")];
var breakpointDown = props["".concat(_breakpoint, "Down")];
if (breakpointUp && isWidthUp(_breakpoint, width) || breakpointDown && isWidthDown(_breakpoint, width)) {
visible = false;
break;
}
}
}
if (!visible) {
return null;
}
return children;
}
HiddenJs.propTypes = {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Specify which implementation to use. 'js' is the default, 'css' works better for
* server-side rendering.
*/
implementation: PropTypes.oneOf(['js', 'css']),
/**
* 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 an 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`, screens this size and down will be hidden.
*/
lgDown: PropTypes.bool,
/**
* If `true`, screens this size and up will be hidden.
*/
lgUp: PropTypes.bool,
/**
* If `true`, screens this size and down will be hidden.
*/
mdDown: PropTypes.bool,
/**
* If `true`, screens this size and up will be hidden.
*/
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']))]),
/**
* If `true`, screens this size and down will be hidden.
*/
smDown: PropTypes.bool,
/**
* If `true`, screens this size and up will be hidden.
*/
smUp: PropTypes.bool,
/**
* @ignore
* width prop provided by withWidth decorator.
*/
width: PropTypes.string.isRequired,
/**
* If `true`, screens this size and down will be hidden.
*/
xlDown: PropTypes.bool,
/**
* If `true`, screens this size and up will be hidden.
*/
xlUp: PropTypes.bool,
/**
* If `true`, screens this size and down will be hidden.
*/
xsDown: PropTypes.bool,
/**
* If `true`, screens this size and up will be hidden.
*/
xsUp: PropTypes.bool
};
if (process.env.NODE_ENV !== 'production') {
HiddenJs.propTypes = exactProp(HiddenJs.propTypes);
}
export default withWidth()(HiddenJs);