@primer/react/lib/Hidden/Hidden.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var clsx = require('clsx');
var Hidden_module = require('./Hidden.module.css.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

/* Normalize the value that is received from the prop `when`.
 * For array types : ['narrow', 'wide'] -> {narrow: true, wide: true}
 * For string types: 'narrow' -> {narrow: true}
 */
function normalize(hiddenViewports) {
  // For array types
  if (Array.isArray(hiddenViewports)) {
    const breakpoints = {};
    // ['narrow', 'wide'] -> {narrow: true, wide: true}
    for (const breakpoint of hiddenViewports) {
      breakpoints[breakpoint] = true;
    }
    return breakpoints;
  }
  // For string types
  // 'narrow' -> {narrow: true}
  return {
    [hiddenViewports]: true
  };
}
const Hidden = ({
  when,
  className,
  style,
  children
}) => {
  const normalizedStyles = normalize(when);
  return /*#__PURE__*/React__default.default.createElement("div", {
    className: clsx.clsx(className, Hidden_module.Hidden),
    style: {
      '--hiddenDisplay-narrow': normalizedStyles.narrow ? 'none' : undefined,
      '--hiddenDisplay-regular': normalizedStyles.regular ? 'none' : undefined,
      '--hiddenDisplay-wide': normalizedStyles.wide ? 'none' : undefined,
      ...style
    }
  }, children);
};
Hidden.displayName = "Hidden";
Hidden.displayName = 'Hidden';

exports.Hidden = Hidden;