fannypack-v5/es/Show/Show.js

An accessible, composable, and friendly React UI Kit

import { createElement, isValidElement } from 'react';
import '../Provider/ThemeContext.js';
import classNames from 'classnames';
import { css } from 'emotion';
import { css as css$1 } from '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { _ as _objectSpread2, a as _taggedTemplateLiteralLoose } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import { breakpoint } from '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import { useClassName } from '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import '../utils/createComponent.js';
import '../utils/createElement.js';
import '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n      display: none;\n    "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  ", ";\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var belowBreakpoints = {
  tablet: 'mobile',
  desktop: 'tablet',
  widescreen: 'desktop',
  fullHD: 'widescreen'
};
function Show(props) {
  var above = props.above,
      below = props.below;
  var breakpoint;

  if (above) {
    breakpoint = "min-" + above;
  } else if (below) {
    breakpoint = "max-" + belowBreakpoints[below];
  }

  var showClassName = useClassName({
    style: showStyle,
    styleProps: {
      breakpoint: breakpoint
    }
  });
  var children = transformChildren(props.children, showClassName, 0);
  return children;
}

function transformChildren(children, className, index) {
  if (typeof children === 'string') {
    return /*#__PURE__*/createElement("span", {
      key: index,
      className: className
    }, children);
  } else if (isValidElement(children)) {
    if (children.type.toString() === 'Symbol(react.fragment)') {
      return _objectSpread2(_objectSpread2({}, children), {}, {
        props: _objectSpread2(_objectSpread2({}, children.props || {}), {}, {
          // @ts-ignore
          children: transformChildren((children.props || {}).children, className, 0)
        })
      });
    }

    return _objectSpread2(_objectSpread2({}, children), {}, {
      // @ts-ignore
      props: _objectSpread2(_objectSpread2({}, children.props || {}), {}, {
        className: classNames(children.props.className, className)
      })
    });
  } else if (Array.isArray(children)) {
    return children.map(function (child, index) {
      return transformChildren(child, className, index);
    });
  }

  return null;
}

var showStyle = function showStyle(styleProps) {
  return css(_templateObject(), breakpoint(styleProps.breakpoint, css$1(_templateObject2()), {
    show: true
  })(styleProps));
};

export { Show, showStyle };