light-skeleton/dist/light-skeleton.esm.js

Light react Skeleton loader

import React from 'react';
import styled from 'styled-components';

function _taggedTemplateLiteralLoose(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }

  strings.raw = raw;
  return strings;
}

var _templateObject2, _templateObject3, _templateObject4, _templateObject5;
var TextSkeletonStyle = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #ddd;\n  margin: 10px 0;\n  border-radius: 4px; \n  width: ", ";\n  height: ", ";\n"])), function (e) {
  return e.width ? e.width : '100%';
}, function (e) {
  return e.height ? e.height : '12px';
});
var TitleSkeletonStyle = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #ddd;\n  margin: 10px 0;\n  border-radius: 4px; \n  width: ", ";\n  height: ", ";\n  margin-bottom: ", "\n"])), function (e) {
  return e.width ? e.width : '50%';
}, function (e) {
  return e.height ? e.height : '20px';
}, function (e) {
  return e.marginBottom ? e.marginBottom : '15px';
});
var AvatarSkeletonStyle = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #ddd;\n  margin: 10px 0;\n  border-radius: 4px; \n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n"])), function (e) {
  return e.width ? e.width : '100px';
}, function (e) {
  return e.height ? e.height : '100px';
});
var ThumbnailSkeletonStyle = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #ddd;\n  margin: 10px 0;\n  border-radius: 4px; \n  width: ", ";\n  height: ", ";\n"])), function (e) {
  return e.width ? e.width : '100px';
}, function (e) {
  return e.height ? e.height : '100px';
});

var TextSkeleton = function TextSkeleton(_ref) {
  var width = _ref.width,
      height = _ref.height,
      style = _ref.style;
  return React.createElement(TextSkeletonStyle, {
    width: width,
    height: height,
    style: style
  });
};
var TitleSkeleton = function TitleSkeleton(_ref2) {
  var width = _ref2.width,
      height = _ref2.height,
      marginBottom = _ref2.marginBottom,
      style = _ref2.style;
  return React.createElement(TitleSkeletonStyle, {
    width: width,
    height: height,
    marginBottom: marginBottom,
    style: style
  });
};
var AvatarSkeleton = function AvatarSkeleton(_ref3) {
  var width = _ref3.width,
      height = _ref3.height,
      style = _ref3.style;
  return React.createElement(AvatarSkeletonStyle, {
    width: width,
    height: height,
    style: style
  });
};
var ThumbnailSkeleton = function ThumbnailSkeleton(_ref4) {
  var width = _ref4.width,
      height = _ref4.height,
      style = _ref4.style;
  return React.createElement(ThumbnailSkeletonStyle, {
    width: width,
    height: height,
    style: style
  });
};

export { AvatarSkeleton, TextSkeleton, ThumbnailSkeleton, TitleSkeleton };
//# sourceMappingURL=light-skeleton.esm.js.map