@retailmenot/anchor/esm/skeleton.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, { css, keyframes, ThemeContext } from '@xstyled/styled-components';
import { space, layout, borderRadius, variant, fontSize, lineHeight, th } from '@xstyled/system';

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n                  pointer-events: none;\n                  background: ", ";\n                  animation: ", " 2s ease-in-out\n                      infinite;\n\n                  // hide all children\n                  && * {\n                      visibility: hidden;\n                      opacity: 0;\n                  }\n              "]);

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n                  // its all one word technically, so we want to make sure\n                  // it can be broken up into multiple lines\n                  word-break: break-all;\n                  white-space: normal;\n\n                  // smoothing can make it appear as though theres\n                  // a gap between the block characters\n                  -webkit-font-smoothing: none;\n                  -moz-osx-font-smoothing: auto;\n\n                  color: ", ";\n                  animation: ", " 2s\n                      ease-in-out infinite;\n              "]);

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

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n"]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    0% { background: ", "; }\n    50% { background: ", "; }\n    100% { background: ", "; }\n"]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    0% { color: ", "; }\n    50% { color: ", "; }\n    100% { color: ", "; }\n"]);

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

  return data;
}
var SKELETON_KEY = 'skeleton';
var SKELETON_THEME = {
  variants: {
    base: {
      colorStart: '#E7E7E7',
      colorEnd: '#D3D3D3'
    }
  }
};
var colorVariant = variant({
  key: "".concat(SKELETON_KEY, ".variants"),
  prop: 'variant',
  "default": 'base',
  variants: SKELETON_THEME.variants
});

var colorKeyframe = function colorKeyframe(start, end) {
  return keyframes(_templateObject(), start, end, start);
};

var bgKeyframe = function bgKeyframe(start, end) {
  return keyframes(_templateObject2(), start, end, start);
};

var StyledSkeleton = styled('span')(_templateObject3(), borderRadius, space, layout, fontSize, lineHeight, function (_ref) {
  var textOnly = _ref.textOnly,
      colorStart = _ref.colorStart,
      colorEnd = _ref.colorEnd;
  return textOnly ? css(_templateObject4(), colorStart, colorKeyframe(colorStart, colorEnd)) : css(_templateObject5(), colorStart, bgKeyframe(colorStart, colorEnd));
});
var Skeleton = function Skeleton(_a) {
  var className = _a.className,
      children = _a.children,
      display = _a.display,
      textLength = _a.textLength,
      _a$textChar = _a.textChar,
      textChar = _a$textChar === void 0 ? '▆' : _a$textChar,
      _a$blockRatio = _a.blockRatio,
      blockRatio = _a$blockRatio === void 0 ? 1 / 2.15 : _a$blockRatio,
      _a$loading = _a.loading,
      loading = _a$loading === void 0 ? true : _a$loading,
      colorStart = _a.colorStart,
      colorEnd = _a.colorEnd,
      props = __rest(_a, ["className", "children", "display", "textLength", "textChar", "blockRatio", "loading", "colorStart", "colorEnd"]);

  if (!loading) {
    return typeof children === 'undefined' ? null : children;
  }

  var theme = useContext(ThemeContext);

  var _colorVariant = colorVariant(Object.assign(Object.assign({}, props), {
    theme: theme
  })),
      themeStart = _colorVariant.colorStart,
      themeEnd = _colorVariant.colorEnd; // Keyframes don't play nice with prop functions, so we're manually
  // calculating the raw color value from the theme before plugging it in


  var startValue = th.color(colorStart || themeStart)({
    theme: theme
  });
  var endValue = th.color(colorEnd || themeEnd)({
    theme: theme
  });
  var onlyChild = Children.count(children) === 1 && Children.toArray(children)[0]; // We're removing duplicate white space because they don't show up in html

  var childText = typeof onlyChild === 'string' && onlyChild.replace(/\s\s+/g, ' ');
  var length = textLength || childText && childText.length;
  var blockText = length && Array(Math.ceil(length * blockRatio) + 1).join(textChar);
  var textOnly = !!blockText;
  return createElement(StyledSkeleton, Object.assign({
    className: classNames('anchor-skeleton', className),
    display: display || (textOnly ? 'inherit' : 'inline-block'),
    textOnly: textOnly,
    colorStart: startValue,
    colorEnd: endValue
  }, props), blockText || children);
};

export { Skeleton, SKELETON_KEY, SKELETON_THEME };
//# sourceMappingURL=skeleton.js.map