@retailmenot/anchor/esm/adapt.js

A React UI Library by RetailMeNot

import { a as _taggedTemplateLiteral } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.js';
import { forwardRef, createElement, useContext, useState, Children, Fragment, useEffect, useRef, createRef, Component, cloneElement, useReducer, PureComponent, isValidElement, createContext, useImperativeHandle } from 'react';
import classNames from 'classnames';
import styled, { up, css, down, ThemeContext } from '@xstyled/styled-components';
import { layout, space } from '@xstyled/system';

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

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

  return data;
}

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

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

  return data;
}
var useContext$1 = useContext;
var StyledParent = styled('div')(_templateObject(), layout, space, function (_ref) {
  var keys = _ref.keys;
  return keys.map(function (current, index) {
    var next = keys[index + 1];
    return css(_templateObject2(), index + 1, next && up(next, css({
      display: 'none'
    })), current !== 'xs' && down(current, 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 = __rest(_a, ["className", "children", "forEach"]);

  var theme = useContext$1(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 createElement(StyledParent, Object.assign({
    className: classNames('anchor-adapt', className),
    keys: sortedKeys
  }, props), childs);
};
Adapt.displayName = 'Adapt';

export { Adapt };
//# sourceMappingURL=adapt.js.map