@retailmenot/anchor/commonjs/skeleton.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 _templateObject5() {
  var data = __chunk_1._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 = __chunk_1._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 = __chunk_1._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 = __chunk_1._taggedTemplateLiteral(["\n    0% { background: ", "; }\n    50% { background: ", "; }\n    100% { background: ", "; }\n"]);

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

  return data;
}

function _templateObject() {
  var data = __chunk_1._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 = system.variant({
  key: "".concat(SKELETON_KEY, ".variants"),
  prop: 'variant',
  "default": 'base',
  variants: SKELETON_THEME.variants
});

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

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

var StyledSkeleton = styled__default('span')(_templateObject3(), system.borderRadius, system.space, system.layout, system.fontSize, system.lineHeight, function (_ref) {
  var textOnly = _ref.textOnly,
      colorStart = _ref.colorStart,
      colorEnd = _ref.colorEnd;
  return textOnly ? styled.css(_templateObject4(), colorStart, colorKeyframe(colorStart, colorEnd)) : styled.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 = __chunk_2.__rest(_a, ["className", "children", "display", "textLength", "textChar", "blockRatio", "loading", "colorStart", "colorEnd"]);

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

  var theme = React.useContext(styled.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 = system.th.color(colorStart || themeStart)({
    theme: theme
  });
  var endValue = system.th.color(colorEnd || themeEnd)({
    theme: theme
  });
  var onlyChild = React.Children.count(children) === 1 && React.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 React.createElement(StyledSkeleton, Object.assign({
    className: classNames('anchor-skeleton', className),
    display: display || (textOnly ? 'inherit' : 'inline-block'),
    textOnly: textOnly,
    colorStart: startValue,
    colorEnd: endValue
  }, props), blockText || children);
};

exports.Skeleton = Skeleton;
exports.SKELETON_KEY = SKELETON_KEY;
exports.SKELETON_THEME = SKELETON_THEME;
//# sourceMappingURL=skeleton.js.map