@retailmenot/anchor/commonjs/adapt.js

A React UI Library by RetailMeNot

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var __chunk_1 = require('./anchor-chunk-24f232e7.js');
var __chunk_2 = require('./anchor-chunk-9d9a5df6.js');
var React = require('react');
var classNames = _interopDefault(require('classnames'));
var styled = require('@xstyled/styled-components');
var styled__default = _interopDefault(styled);
var system = require('@xstyled/system');

function _templateObject2() {
  var data = __chunk_1._taggedTemplateLiteral(["\n              > :nth-child(", ") {\n                  ", "\n                  ", "\n              }\n          "]);

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

  return data;
}

function _templateObject() {
  var data = __chunk_1._taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  ", "\n"]);

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

  return data;
}
var useContext = React.useContext;
var StyledParent = styled__default('div')(_templateObject(), system.layout, system.space, function (_ref) {
  var keys = _ref.keys;
  return keys.map(function (current, index) {
    var next = keys[index + 1];
    return styled.css(_templateObject2(), index + 1, next && styled.up(next, styled.css({
      display: 'none'
    })), current !== 'xs' && styled.down(current, styled.css({
      display: 'none'
    })));
  });
});
/**
 * The purpose of Adapt is to display different content for different breakpoints.
 * It accomplishes this via media queries and display: none. It expects a forEach
 * prop object with values mapped to different breakpoints and children as a render
 * prop. It then renders the child function for each breakpoint, passing in the
 * associated value and the breakpoint as the first two arguments.
 *
 * Example usage:
 * <Adapt forEach={{ xs: 'apple', md: 'banana' }}>
 *   {(value, breakpoint) => (
 *     <p>
 *       {value}
 *     </p>
 *   )}
 * </Adapt>
 *
 * =>
 *   <p>apple</p>  // displays below md breakpoint
 *   <p>banana</p>  // displays at and above md breakpoint
 */

var Adapt = function Adapt(_a) {
  var className = _a.className,
      children = _a.children,
      forEach = _a.forEach,
      props = __chunk_2.__rest(_a, ["className", "children", "forEach"]);

  var theme = useContext(styled.ThemeContext);
  var breakpoints = theme && theme.breakpoints;
  var keys = Object.keys(forEach); // Keys are sorted by their pixel values (if available) so
  // that the css styles are ordered properly.
  // This could be changed to use ResponsiveContext's sorted breakpoints.

  var sortedKeys = breakpoints ? keys.sort(function (a, b) {
    return (breakpoints[a] || 0) - (breakpoints[b] || 0);
  }) : keys;
  var childs = keys.map(function (key) {
    return children(forEach[key], key);
  });
  return React.createElement(StyledParent, Object.assign({
    className: classNames('anchor-adapt', className),
    keys: sortedKeys
  }, props), childs);
};
Adapt.displayName = 'Adapt';

exports.Adapt = Adapt;
//# sourceMappingURL=adapt.js.map