@atlaskit/primitives
Version:
Primitives are token-backed low-level building blocks.
38 lines (37 loc) • 1.49 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { parseXcss } from '../xcss/xcss';
import { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
var hideAboveQueries = UNSAFE_buildAboveMediaQueryCSS({
display: 'none'
});
var hideBelowQueries = UNSAFE_buildBelowMediaQueryCSS({
display: 'none'
});
/**
* Hides the content at a given breakpoint. By default, content is shown. The primary use case is for visual presentation.
* Mix `<Hide above="md">` with `<Show above="md">` to achieve content that shifts at a breakpoint.
*
* Please note:
* - This only uses `display: none` hide, it does not skip rendering of children trees.
* - As this is rendered at all times, there is little performance savings here (just that this is not painted).
*/
export var Hide = function Hide(_ref) {
var above = _ref.above,
below = _ref.below,
children = _ref.children,
_ref$as = _ref.as,
AsElement = _ref$as === void 0 ? 'div' : _ref$as,
xcss = _ref.xcss;
var resolvedStyles = parseXcss(xcss);
return jsx(AsElement
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
, {
className: resolvedStyles.static,
css: [above && hideAboveQueries[above], below && hideBelowQueries[below], resolvedStyles.emotion]
}, children);
};