shimmer-react/dist/index.js

Shimmer effects for React

'use strict';

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

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

var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));
var classNames = _interopDefault(require('classnames'));

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css = ".shimmer-button {\n  border-radius: 4px;\n  height: 38px;\n  width: 120px;\n  margin-bottom: 20px; }\n  .shimmer-button--sm {\n    border-radius: 3px;\n    height: 31px;\n    width: 100px; }\n  .shimmer-button--lg {\n    height: 48px;\n    width: 140px;\n    border-radius: 5px; }\n";
styleInject(css);

var defineProperty = function (obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
};

var ShimmerButton = function ShimmerButton(_ref) {
  var size = _ref.size;
  return React.createElement("div", {
    className: classNames(defineProperty({
      "shimmer shimmer-button": true
    }, "shimmer-button--" + size, true))
  });
};

ShimmerButton.propTypes = {
  size: PropTypes.oneOf(["lg", "md", "sm"])
};

ShimmerButton.defaultProps = {
  size: "md"
};

var ShimmerCircularImage = function ShimmerCircularImage(_ref) {
  var size = _ref.size,
      center = _ref.center,
      className = _ref.className;

  var style = {};
  if (size) {
    style.width = size + "px";
    style.height = size + "px";
  }

  return React.createElement(
    "div",
    {
      className: classNames({
        "text-center": center
      })
    },
    React.createElement("div", {
      style: style,
      className: classNames(defineProperty({
        "shimmer shimmer-avatar": true
      }, className, className))
    })
  );
};

ShimmerCircularImage.propTypes = {
  size: PropTypes.number,
  center: PropTypes.bool,
  className: PropTypes.string
};

ShimmerCircularImage.defaultProps = {
  center: false,
  size: 80
};

var ShimmerThumbnail = function ShimmerThumbnail(_ref) {
  var height = _ref.height,
      width = _ref.width,
      center = _ref.center,
      className = _ref.className,
      fitOnFrame = _ref.fitOnFrame,
      rounded = _ref.rounded;

  var style = {};
  if (height) style.height = height + "px";
  if (width) style.width = width + "px";

  return React.createElement(
    "div",
    {
      className: classNames({
        "h-100": fitOnFrame,
        "text-center ": center
      })
    },
    React.createElement("div", {
      className: classNames(defineProperty({
        "h-100": fitOnFrame,
        "shimmer shimmer-thumbnail": true,
        "border-rounded": rounded
      }, className, className)),
      style: style
    })
  );
};

ShimmerThumbnail.propTypes = {
  height: PropTypes.number,
  width: PropTypes.number,
  center: PropTypes.bool,
  className: PropTypes.string,
  fitOnFrame: PropTypes.bool,
  rounded: PropTypes.bool
};

ShimmerThumbnail.defaultProps = {
  canter: false,
  fitOnFrame: false,
  rounded: false,
  height: 250
};

var css$1 = ".shimmer-avatar {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  margin-bottom: 20px;\n  display: inline-block; }\n\n.shimmer-thumbnail {\n  min-width: 80px;\n  width: 100%;\n  height: 200px;\n  margin-bottom: 20px;\n  display: inline-block; }\n";
styleInject(css$1);

var css$2 = ".shimmer-title {\n  margin-bottom: 20px; }\n  .shimmer-title--secondary {\n    margin-bottom: 20px; }\n    .shimmer-title--secondary .shimmer-title-line {\n      height: 16px; }\n  .shimmer-title-line {\n    width: 100%;\n    height: 24px;\n    border-radius: 20px; }\n    .shimmer-title-line:first-child {\n      width: 100% !important; }\n    .shimmer-title-line:last-child {\n      width: 40%; }\n";
styleInject(css$2);

var ShimmerTitle = function ShimmerTitle(_ref) {
  var _classNames;

  var line = _ref.line,
      gap = _ref.gap,
      variant = _ref.variant,
      className = _ref.className;

  var renderLines = function renderLines() {
    var title_lines = [];

    for (var index = 0; index < line; index++) {
      title_lines.push(React.createElement("div", { className: "shimmer shimmer-title-line", key: index }));
    }

    return title_lines;
  };

  return React.createElement(
    "div",
    {
      className: classNames((_classNames = {
        grid: true,
        "shimmer-title": variant === "primary",
        "shimmer-title--secondary": variant === "secondary"
      }, defineProperty(_classNames, "grid-gap-" + gap, gap), defineProperty(_classNames, className, className), _classNames))
    },
    renderLines()
  );
};

ShimmerTitle.propTypes = {
  line: PropTypes.number,
  gap: PropTypes.oneOf([10, 15, 20, 30]),
  variant: PropTypes.oneOf(["primary", "secondary"]),
  className: PropTypes.string
};

ShimmerTitle.defaultProps = {
  line: 2,
  gap: 10,
  variant: "primary"
};

var css$3 = ".shimmer-card {\n  border-radius: 8px;\n  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);\n  background-color: #ffffff;\n  width: 100%; }\n  .shimmer-card:not(:first-child) {\n    margin-top: 30px; }\n  .shimmer-card--content-center {\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center; }\n    .shimmer-card--content-center * {\n      width: 100%;\n      margin: auto; }\n";
styleInject(css$3);

var ShimmerCard = function ShimmerCard(_ref) {
  var _classNames;

  var children = _ref.children,
      className = _ref.className,
      paddingSize = _ref.paddingSize;

  if (!children) return null;
  return React.createElement(
    "div",
    {
      className: classNames((_classNames = {
        "shimmer-card": true
      }, defineProperty(_classNames, "p-" + paddingSize, paddingSize), defineProperty(_classNames, className, className), _classNames))
    },
    children
  );
};

ShimmerCard.propTypes = {
  className: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]).isRequired,
  paddingSize: PropTypes.oneOf([false, 20, 30])
};

ShimmerCard.defaultProps = { paddingSize: false };

var ShimmerSimpleGallery = function ShimmerSimpleGallery(_ref) {
  var _classNames, _classNames2;

  var row = _ref.row,
      col = _ref.col,
      gap = _ref.gap,
      className = _ref.className,
      fitOnFrame = _ref.fitOnFrame,
      imageType = _ref.imageType,
      imageHeight = _ref.imageHeight,
      caption = _ref.caption,
      card = _ref.card;

  var renderPhotos = function renderPhotos() {
    var photos = [];
    var items = row * col;

    for (var index = 0; index < items; index++) {
      photos.push(React.createElement(
        "div",
        { key: index },
        imageType === "thumbnail" && React.createElement(ShimmerThumbnail, {
          key: index,
          fitOnFrame: fitOnFrame,
          height: imageHeight,
          className: classNames({
            "m-0": true
          })
        }),
        imageType === "circular" && React.createElement(ShimmerCircularImage, { size: imageHeight, center: true }),
        caption && React.createElement(ShimmerTitle, {
          variant: "secondary",
          className: classNames({
            "mt-15": imageType === "thumbnail",
            "w-50 ml-auto mr-auto circular-image-caption": imageType === "circular"
          })
        })
      ));
    }

    return photos;
  };

  if (!card) return React.createElement(
    "div",
    {
      className: classNames((_classNames = {
        grid: true
      }, defineProperty(_classNames, "grid-gap-" + gap, true), defineProperty(_classNames, "grid-column-" + col, true), defineProperty(_classNames, className, className), _classNames))
    },
    renderPhotos()
  );

  return React.createElement(
    ShimmerCard,
    { paddingSize: 20 },
    React.createElement(
      "div",
      {
        className: classNames((_classNames2 = {
          grid: true
        }, defineProperty(_classNames2, "grid-gap-" + gap, true), defineProperty(_classNames2, "grid-column-" + col, true), defineProperty(_classNames2, className, className), _classNames2))
      },
      renderPhotos()
    )
  );
};

ShimmerSimpleGallery.propTypes = {
  row: PropTypes.number,
  col: PropTypes.oneOf([2, 3, 4]),
  gap: PropTypes.oneOf([20, 30]),
  fitOnFrame: PropTypes.bool,
  imageType: PropTypes.oneOf(["thumbnail", "circular"]),
  imageHeight: PropTypes.number,
  caption: PropTypes.bool,
  card: PropTypes.bool
};

ShimmerSimpleGallery.defaultProps = {
  row: 3,
  col: 3,
  gap: 20,
  fitOnFrame: false,
  imageType: "thumbnail",
  caption: false,
  card: false
};

var css$4 = ".shimmer-gallery-puzzle {\n  height: 540px; }\n\n.circular-image-caption .shimmer-title-line {\n  margin: auto; }\n";
styleInject(css$4);

var ShimmerFeaturedGallery = function ShimmerFeaturedGallery(_ref) {
  var row = _ref.row,
      col = _ref.col,
      gap = _ref.gap,
      card = _ref.card,
      frameHeight = _ref.frameHeight;

  var style = {};
  if (frameHeight) style.height = frameHeight + "px";

  var renderContent = function renderContent() {
    return React.createElement(
      "div",
      { className: "shimmer-row shimmer-gallery-puzzle", style: style },
      React.createElement(
        "div",
        { className: "shimmer-col flex-1" },
        React.createElement(ShimmerThumbnail, { className: "h-100", fitOnFrame: true })
      ),
      React.createElement(
        "div",
        { className: "shimmer-col flex-1" },
        React.createElement(ShimmerSimpleGallery, {
          row: row,
          col: col,
          gap: gap,
          className: "h-100",
          fitOnFrame: true
        })
      )
    );
  };

  if (!card) return renderContent();

  return React.createElement(
    ShimmerCard,
    { paddingSize: 20 },
    renderContent()
  );
};

ShimmerFeaturedGallery.propTypes = {
  row: PropTypes.number,
  col: PropTypes.oneOf([2, 3, 4]),
  gap: PropTypes.oneOf([20, 30]),
  card: PropTypes.bool,
  frameHeight: PropTypes.number
};

ShimmerFeaturedGallery.defaultProps = {
  card: false,
  row: 2,
  col: 2,
  gap: 20,
  frameHeight: 600
};

var ShimmerTableCol = function ShimmerTableCol() {
  return React.createElement("div", { className: "shimmer shimmer-table-col" });
};

var ShimmerTableRow = function ShimmerTableRow(_ref) {
  var col = _ref.col,
      header = _ref.header;

  var renderColumns = function renderColumns() {
    var columns = [];

    for (var index = 0; index < col; index++) {
      columns.push(React.createElement(ShimmerTableCol, { key: index }));
    }

    return columns;
  };

  return React.createElement(
    "div",
    {
      className: classNames({
        "shimmer-table-row": true,
        "shimmer-table-row--header": header
      })
    },
    renderColumns()
  );
};

ShimmerTableRow.propTypes = {
  col: PropTypes.number.isRequired,
  header: PropTypes.bool
};

ShimmerTableRow.defaultProps = {
  col: 5,
  header: false
};

var css$5 = ".shimmer-table-row {\n  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);\n  display: flex;\n  padding: 25px 0;\n  background-color: #ffffff;\n  border-radius: 5px;\n  margin-bottom: 20px; }\n  .shimmer-table-row--header {\n    background-color: transparent;\n    box-shadow: none;\n    margin: 0; }\n  .shimmer-table-row > .shimmer {\n    margin: 0 30px; }\n\n.shimmer-table-col {\n  width: 100%;\n  height: 10px;\n  border-radius: 10px; }\n";
styleInject(css$5);

var ShimmerTable = function ShimmerTable(_ref) {
  var row = _ref.row,
      col = _ref.col;

  var renderRows = function renderRows() {
    var rows = [];

    for (var index = 0; index < row; index++) {
      rows.push(React.createElement(ShimmerTableRow, { col: col, key: index }));
    }

    return rows;
  };

  return React.createElement(
    "div",
    null,
    React.createElement(ShimmerTableRow, { col: col, header: true }),
    renderRows()
  );
};

ShimmerTable.propTypes = {
  row: PropTypes.number,
  col: PropTypes.number
};

ShimmerTable.defaultProps = {
  row: 5,
  col: 5
};

var css$6 = ".shimmer-badge {\n  width: 80px;\n  height: 24px;\n  border-radius: 20px;\n  margin-bottom: 20px; }\n";
styleInject(css$6);

var ShimmerBadge = function ShimmerBadge(_ref) {
  var width = _ref.width;

  var style = {};
  if (width) style.width = width + "px";

  return React.createElement("div", { className: "shimmer shimmer-badge", style: style });
};

ShimmerBadge.propTypes = {
  width: PropTypes.number
};

var css$7 = ".shimmer-text {\n  margin-bottom: 30px; }\n  .shimmer-text-line {\n    width: 100%;\n    height: 8px;\n    border-radius: 10px; }\n    .shimmer-text-line:first-child {\n      width: 100% !important; }\n    .shimmer-text-line:last-child {\n      width: 40%; }\n";
styleInject(css$7);

var ShimmerText = function ShimmerText(_ref) {
  var _classNames;

  var line = _ref.line,
      gap = _ref.gap,
      className = _ref.className;

  var renderLines = function renderLines() {
    var text_lines = [];

    for (var index = 0; index < line; index++) {
      text_lines.push(React.createElement("div", { className: "shimmer shimmer-text-line", key: index }));
    }

    return text_lines;
  };

  return React.createElement(
    "div",
    {
      className: classNames((_classNames = {
        "grid shimmer-text": true
      }, defineProperty(_classNames, "grid-gap-" + gap, gap), defineProperty(_classNames, className, className), _classNames))
    },
    renderLines()
  );
};

ShimmerText.propTypes = {
  line: PropTypes.number,
  gap: PropTypes.oneOf([10, 15, 20, 30]),
  className: PropTypes.string
};

ShimmerText.defaultProps = {
  line: 5,
  gap: 15
};

var css$8 = ".shimmer-separator {\n  height: 1px;\n  background-color: #dddddd;\n  margin: 40px 0; }\n";
styleInject(css$8);

var ShimmerSeparator = function ShimmerSeparator() {
  return React.createElement("div", { className: "shimmer-separator" });
};

var ShimmerSocialPost = function ShimmerSocialPost(_ref) {
  var type = _ref.type,
      title = _ref.title;

  var renderContents = function renderContents() {
    if (type === "image") {
      return React.createElement(ShimmerThumbnail, { height: 300, className: "m-02" });
    } else if (type === "text") {
      return React.createElement(ShimmerText, { line: 13, className: "p-15" });
    } else {
      return React.createElement(
        "div",
        null,
        React.createElement(ShimmerText, { line: 3, className: "p-15" }),
        React.createElement(ShimmerThumbnail, { height: 300, className: "m-02" })
      );
    }
  };

  return React.createElement(
    ShimmerCard,
    null,
    React.createElement(
      "div",
      { className: "p-15" },
      React.createElement(
        "div",
        { className: "flex" },
        React.createElement(ShimmerCircularImage, null),
        React.createElement(
          "div",
          { className: "flex-1 p-15" },
          React.createElement(ShimmerTitle, { variant: "secondary", className: "w-40" })
        )
      ),
      title && React.createElement(ShimmerTitle, { line: 1, className: "w-40 m-0" })
    ),
    renderContents(),
    React.createElement(
      "div",
      { className: "p-15 flex flex-content-between" },
      React.createElement(ShimmerTitle, { line: 1, className: "w-10", variant: "secondary" }),
      React.createElement(ShimmerTitle, { line: 1, className: "w-10", variant: "secondary" })
    )
  );
};

ShimmerSocialPost.propTypes = {
  type: PropTypes.oneOf(["text", "image", "both"]),
  title: PropTypes.bool
};

ShimmerSocialPost.defaultProps = {
  type: "image",
  title: false
};

var ShimmerCategoryItem = function ShimmerCategoryItem(_ref) {
  var hasImage = _ref.hasImage,
      imageType = _ref.imageType,
      imageWidth = _ref.imageWidth,
      imageHeight = _ref.imageHeight,
      title = _ref.title,
      text = _ref.text,
      cta = _ref.cta,
      contentCenter = _ref.contentCenter;

  return React.createElement(
    "div",
    null,
    !hasImage ? React.createElement(
      "div",
      null,
      React.createElement(ShimmerTitle, { variant: "secondary", line: 1, className: "mb-15 w-80" }),
      React.createElement(
        "div",
        { className: "w-40" },
        React.createElement(ShimmerText, { line: 3, gap: 10 })
      )
    ) : React.createElement(
      "div",
      {
        className: classNames({
          flex: true,
          "flex-vertical-center": contentCenter
        })
      },
      imageType === "thumbnail" && React.createElement(ShimmerThumbnail, { width: imageWidth, height: imageHeight }),
      imageType === "circular" && React.createElement(ShimmerCircularImage, { size: imageWidth }),
      React.createElement(
        "div",
        { className: "flex-1 p-15" },
        title && React.createElement(ShimmerTitle, { variant: "secondary" }),
        text && React.createElement(ShimmerText, { line: 3, gap: 10, className: "mb-20" }),
        cta && React.createElement(ShimmerButton, { size: "sm" })
      )
    )
  );
};

ShimmerCategoryItem.propTypes = {
  hasImage: PropTypes.bool.isRequired,
  imageType: PropTypes.oneOf(["circular", "thumbnail"]),
  imageWidth: PropTypes.number,
  imageHeight: PropTypes.number,
  title: PropTypes.bool,
  text: PropTypes.bool,
  cta: PropTypes.bool,
  contentCenter: PropTypes.bool
};

ShimmerCategoryItem.defaultProps = {
  hasImage: false,
  imageType: "thumbnail",
  title: false,
  text: false,
  contentCenter: false
};

var ShimmerCategoryList = function ShimmerCategoryList(_ref) {
  var items = _ref.items,
      categoryStyle = _ref.categoryStyle,
      title = _ref.title;

  var categories = {
    STYLE_ONE: React.createElement(ShimmerCategoryItem, null),
    STYLE_TWO: React.createElement(ShimmerCategoryItem, {
      hasImage: true,
      imageType: "thumbnail",
      imageWidth: 100,
      imageHeight: 100,
      title: true
    }),
    STYLE_THREE: React.createElement(ShimmerCategoryItem, {
      hasImage: true,
      imageType: "circular",
      imageWidth: 100,
      imageHeight: 100,
      title: true
    }),
    STYLE_FOUR: React.createElement(ShimmerCategoryItem, {
      hasImage: true,
      imageType: "thumbnail",
      imageWidth: 100,
      imageHeight: 100,
      text: true
    }),
    STYLE_FIVE: React.createElement(ShimmerCategoryItem, {
      hasImage: true,
      imageType: "circular",
      imageWidth: 100,
      imageHeight: 100,
      text: true
    }),
    STYLE_SIX: React.createElement(ShimmerCategoryItem, {
      hasImage: true,
      imageType: "thumbnail",
      imageWidth: 100,
      imageHeight: 100,
      text: true,
      cta: true
    }),
    STYLE_SEVEN: React.createElement(ShimmerCategoryItem, {
      hasImage: true,
      imageType: "circular",
      imageWidth: 100,
      imageHeight: 100,
      text: true,
      cta: true
    })
  };

  var renderItems = function renderItems() {
    var list = [];
    for (var index = 0; index < items; index++) {
      list.push(React.createElement(
        "div",
        { key: index },
        categories[categoryStyle]
      ));
    }return list;
  };

  return React.createElement(
    ShimmerCard,
    { paddingSize: 20 },
    title && React.createElement(ShimmerTitle, { line: 1, className: "w-60" }),
    renderItems()
  );
};

ShimmerCategoryList.propTypes = {
  title: PropTypes.bool,
  items: PropTypes.number,
  categoryStyle: PropTypes.oneOf(["STYLE_ONE", "STYLE_TWO", "STYLE_THREE", "STYLE_FOUR", "STYLE_FIVE", "STYLE_SIX", "STYLE_SEVEN"])
};

ShimmerCategoryList.defaultProps = {
  title: false,
  items: 5,
  categoryStyle: "STYLE_ONE"
};

var ShimmerPostDetails = function ShimmerPostDetails(_ref) {
  var variant = _ref.variant,
      cta = _ref.cta,
      card = _ref.card;

  var variants = {
    SIMPLE: React.createElement(
      "div",
      null,
      React.createElement(ShimmerTitle, { line: 1, className: "w-40" }),
      React.createElement(ShimmerTitle, { line: 1, variant: "secondary", className: "w-20 mb-40" }),
      React.createElement(
        "div",
        { className: "w-40 mb-40" },
        React.createElement(ShimmerText, { line: 1, className: "mb-15 w-20" }),
        React.createElement(ShimmerText, { line: 1, className: "mb-15 w-40" }),
        React.createElement(ShimmerText, { line: 1, className: "mb-30 w-60" })
      ),
      React.createElement(ShimmerTitle, { line: 1, variant: "secondary", className: "w-30" }),
      React.createElement(ShimmerText, { className: "mb-40" }),
      React.createElement(ShimmerTitle, { line: 1, variant: "secondary", className: "w-30" }),
      React.createElement(ShimmerText, { className: "mb-40" }),
      React.createElement(ShimmerTitle, { line: 1, variant: "secondary", className: "w-30" }),
      React.createElement(ShimmerText, { className: "mb-40" }),
      React.createElement(ShimmerTitle, { line: 1, variant: "secondary", className: "w-30" }),
      React.createElement(ShimmerText, { className: "mb-40" }),
      cta && React.createElement(ShimmerButton, null)
    ),
    EDITOR: React.createElement(
      "div",
      null,
      React.createElement(ShimmerTitle, { line: 1, className: "w-40" }),
      React.createElement(ShimmerThumbnail, { height: 400 }),
      React.createElement(ShimmerText, null),
      React.createElement(ShimmerText, null),
      React.createElement(
        "div",
        { className: "shimmer-row" },
        React.createElement(
          "div",
          { className: "shimmer-col" },
          React.createElement(ShimmerText, { line: 13 })
        ),
        React.createElement(
          "div",
          { className: "shimmer-col" },
          React.createElement(ShimmerThumbnail, { height: 300 })
        )
      ),
      React.createElement(ShimmerText, null),
      React.createElement(ShimmerText, null),
      React.createElement(ShimmerText, null)
    )
  };

  if (!card) return variants[variant];

  return React.createElement(
    ShimmerCard,
    { paddingSize: 30 },
    variants[variant]
  );
};

ShimmerPostDetails.propTypes = {
  variant: PropTypes.oneOf(["SIMPLE", "EDITOR"]),
  cta: PropTypes.bool,
  card: PropTypes.bool
};

ShimmerPostDetails.defaultProps = {
  variant: "SIMPLE",
  cta: false,
  card: false
};

var ShimmerPostItem = function ShimmerPostItem(_ref) {
  var cta = _ref.cta,
      title = _ref.title,
      text = _ref.text,
      imageType = _ref.imageType,
      imageWidth = _ref.imageWidth,
      imageHeight = _ref.imageHeight;

  return React.createElement(
    ShimmerCard,
    null,
    imageType === "thumbnail" && React.createElement(ShimmerThumbnail, {
      height: imageHeight,
      width: imageWidth,
      className: imageWidth && imageWidth !== "w-100" ? "m-30 mb-0" : "mb-0"
    }),
    imageType === "circular" && React.createElement(ShimmerCircularImage, { size: imageWidth, className: "m-30 mb-0" }),
    React.createElement(
      "div",
      { className: "p-30" },
      title && React.createElement(ShimmerTitle, { variant: "secondary" }),
      text && React.createElement(ShimmerText, { line: 3, gap: 10 }),
      cta && React.createElement(ShimmerButton, { size: "sm" })
    )
  );
};

ShimmerPostItem.propTypes = {
  title: PropTypes.bool,
  text: PropTypes.bool,
  cta: PropTypes.bool,
  imageType: PropTypes.oneOf(["circular", "thumbnail"]),
  imageHeight: PropTypes.number,
  imageWidth: PropTypes.number
};

ShimmerPostItem.defaultProps = {
  title: false,
  text: false,
  cta: false,
  imageType: "thumbnail"
};

var ShimmerPostList = function ShimmerPostList(_ref) {
  var _classNames;

  var row = _ref.row,
      col = _ref.col,
      gap = _ref.gap,
      className = _ref.className,
      postStyle = _ref.postStyle;

  var posts = {
    STYLE_ONE: React.createElement(ShimmerPostItem, { title: true, text: true, cta: true }),
    STYLE_TWO: React.createElement(ShimmerPostItem, { title: true, cta: true }),
    STYLE_THREE: React.createElement(ShimmerPostItem, { title: true }),
    STYLE_FOUR: React.createElement(ShimmerPostItem, { text: true, cta: true }),
    STYLE_FIVE: React.createElement(ShimmerPostItem, { text: true }),
    STYLE_SIX: React.createElement(ShimmerPostItem, {
      title: true,
      text: true,
      cta: true,
      imageType: "thumbnail",
      imageWidth: 80,
      imageHeight: 80,
      contentCenter: true
    }),
    STYLE_SEVEN: React.createElement(ShimmerPostItem, {
      text: true,
      cta: true,
      imageType: "thumbnail",
      imageWidth: 80,
      imageHeight: 80,
      contentCenter: true
    }),
    STYLE_EIGHT: React.createElement(ShimmerPostItem, {
      title: true,
      cta: true,
      imageType: "thumbnail",
      imageWidth: 80,
      imageHeight: 80,
      contentCenter: true
    })
  };

  var renderPosts = function renderPosts() {
    var list = [];
    var items = row * col;
    for (var index = 0; index < items; index++) {
      list.push(React.createElement(
        "div",
        { key: index },
        posts[postStyle]
      ));
    }
    return list;
  };

  return React.createElement(
    "div",
    {
      className: classNames((_classNames = {
        grid: true
      }, defineProperty(_classNames, "grid-gap-" + gap, true), defineProperty(_classNames, "grid-column-" + col, true), defineProperty(_classNames, className, className), _classNames))
    },
    renderPosts()
  );
};

ShimmerPostList.propTypes = {
  row: PropTypes.number,
  col: PropTypes.oneOf([2, 3, 4]),
  gap: PropTypes.oneOf([20, 30]),
  postStyle: PropTypes.oneOf(["STYLE_ONE", "STYLE_TWO", "STYLE_THREE", "STYLE_FOUR", "STYLE_FIVE", "STYLE_SIX", "STYLE_SEVEN", "STYLE_EIGHT"])
};

ShimmerPostList.defaultProps = {
  row: 3,
  col: 3,
  gap: 20,
  postStyle: "STYLE_ONE"
};

var ShimmerContentBlock = function ShimmerContentBlock(_ref) {
  var card = _ref.card,
      title = _ref.title,
      text = _ref.text,
      cta = _ref.cta,
      thumbnailWidth = _ref.thumbnailWidth,
      thumbnailHeight = _ref.thumbnailHeight,
      reverse = _ref.reverse;

  var renderContent = function renderContent() {
    return React.createElement(
      "div",
      {
        className: classNames({
          flex: true,
          "flex-reverse": reverse
        })
      },
      React.createElement(
        "div",
        {
          className: classNames({
            flex: true,
            "w-50": !thumbnailWidth
          })
        },
        React.createElement(ShimmerThumbnail, {
          width: thumbnailWidth,
          height: thumbnailHeight,
          className: "h-100 m-0"
        })
      ),
      React.createElement(
        "div",
        { className: " flex-1 p-30" },
        title && React.createElement(ShimmerTitle, { className: "w-40", line: 1 }),
        text && React.createElement(ShimmerText, null),
        cta && React.createElement(ShimmerButton, null)
      )
    );
  };

  if (!card) return renderContent();

  return React.createElement(
    ShimmerCard,
    null,
    renderContent()
  );
};

ShimmerContentBlock.propTypes = {
  card: PropTypes.bool,
  title: PropTypes.bool,
  text: PropTypes.bool,
  cta: PropTypes.bool,
  thumbnailWidth: PropTypes.number,
  thumbnailHeight: PropTypes.number,
  reverse: PropTypes.bool
};

ShimmerContentBlock.defaultProps = {
  card: true,
  title: false,
  text: false,
  cta: false,
  reverse: false
};

var ShimmerSectionHeader = function ShimmerSectionHeader(_ref) {
  var title = _ref.title,
      subTitle = _ref.subTitle,
      center = _ref.center;

  if (!title && !subTitle) return null;
  return React.createElement(
    "div",
    {
      className: classNames({
        "w-60 mb-40": true,
        "ml-auto mr-auto": center
      })
    },
    title && React.createElement(ShimmerTitle, {
      className: classNames({
        "w-40": true,
        "ml-auto mr-auto": center
      }),
      line: 1
    }),
    subTitle && React.createElement(
      "div",
      {
        className: classNames({
          "flex-horizontal-center": center
        })
      },
      React.createElement(ShimmerText, { line: 1, className: "mb-15 w-80" }),
      React.createElement(ShimmerText, { line: 1, className: "mb-15 w-70" }),
      React.createElement(ShimmerText, { line: 1, className: "mb-15 w-60" })
    )
  );
};

ShimmerSectionHeader.propTypes = {
  title: PropTypes.bool,
  subTitle: PropTypes.bool,
  center: PropTypes.bool
};

ShimmerSectionHeader.defaultProps = {
  title: true,
  subTitle: true,
  center: false
};

var css$9 = ".shimmer {\n  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);\n  background-size: 1000px 100%;\n  animation: shimmer 2.2s linear infinite forwards; }\n\n@-webkit-keyframes shimmer {\n  0% {\n    background-position: -100% 0; }\n  100% {\n    background-position: 100% 0; } }\n\n@keyframes shimmer {\n  0% {\n    background-position: -1000px 0; }\n  100% {\n    background-position: 1000px 0; } }\n\n/*\n=====\nPadding Styles\n=====\n*/\n.p-30 {\n  padding: 30px; }\n\n.p-20 {\n  padding: 20px; }\n\n.p-15 {\n  padding: 15px; }\n\n/*\n=====\nMargin Styles\n=====\n*/\n.m-0 {\n  margin: 0; }\n\n.m-auto {\n  margin: auto; }\n\n.ml-auto {\n  margin-left: auto; }\n\n.mr-auto {\n  margin-right: auto; }\n\n.m-15 {\n  margin: 15px; }\n\n.m-30 {\n  margin: 30px; }\n\n.mb-0 {\n  margin-bottom: 0px; }\n\n.mb-10 {\n  margin-bottom: 10px; }\n\n.mb-15 {\n  margin-bottom: 15px; }\n\n.mb-20 {\n  margin-bottom: 20px; }\n\n.mt-15 {\n  margin-top: 15px; }\n\n.mb-30 {\n  margin-bottom: 30px; }\n\n.mb-40 {\n  margin-bottom: 40px; }\n\n/*\n=======\nContent Size Styles\n=======\n*/\n.w-10 {\n  width: 10%; }\n\n.w-20 {\n  width: 20%; }\n\n.w-30 {\n  width: 30%; }\n\n.w-40 {\n  width: 40%; }\n\n.w-50 {\n  width: 50%; }\n\n.w-60 {\n  width: 60%; }\n\n.w-70 {\n  width: 70%; }\n\n.w-80 {\n  width: 80%; }\n\n/*\n========\nFlex Styles\n========\n*/\n.flex {\n  display: flex; }\n\n.flex-direction-column {\n  flex-direction: column; }\n\n.flex-horizontal-center {\n  display: flex;\n  flex-direction: column;\n  align-items: center; }\n\n.flex-vertical-center {\n  align-items: center; }\n\n.flex-content-between {\n  justify-content: space-between; }\n\n.flex-reverse {\n  flex-direction: row-reverse; }\n\n.flex-1 {\n  flex-grow: 1; }\n\n/*\n=======\nGrid Styles\n=======\n*/\n.grid {\n  display: grid; }\n\n.grid-gap-10 {\n  gap: 10px; }\n\n.grid-gap-15 {\n  gap: 15px; }\n\n.grid-gap-20 {\n  gap: 20px; }\n\n.grid-gap-30 {\n  gap: 30px; }\n\n.grid-column-2 {\n  grid-template-columns: auto auto; }\n\n.grid-column-3 {\n  grid-template-columns: auto auto auto; }\n\n.grid-column-4 {\n  grid-template-columns: auto auto auto auto; }\n\n.text-center {\n  text-align: center; }\n\n.border-rounded {\n  border-radius: 4px; }\n\n.h-100 {\n  height: 100% !important; }\n\n.shimmer-hr {\n  border-color: #f6f6f6; }\n\n.shimmer-row {\n  display: flex;\n  margin: 0 -15px; }\n  .shimmer-row .shimmer-col,\n  .shimmer-row [class*=\"shimmer-col-\"] {\n    padding-left: 15px;\n    padding-right: 15px;\n    flex-basis: 0;\n    flex-grow: 1;\n    max-width: 100%; }\n";
styleInject(css$9);

exports.ShimmerButton = ShimmerButton;
exports.ShimmerCircularImage = ShimmerCircularImage;
exports.ShimmerThumbnail = ShimmerThumbnail;
exports.ShimmerCard = ShimmerCard;
exports.ShimmerSimpleGallery = ShimmerSimpleGallery;
exports.ShimmerFeaturedGallery = ShimmerFeaturedGallery;
exports.ShimmerTable = ShimmerTable;
exports.ShimmerTableCol = ShimmerTableCol;
exports.ShimmerTableRow = ShimmerTableRow;
exports.ShimmerBadge = ShimmerBadge;
exports.ShimmerText = ShimmerText;
exports.ShimmerTitle = ShimmerTitle;
exports.ShimmerSocialPost = ShimmerSocialPost;
exports.ShimmerSeparator = ShimmerSeparator;
exports.ShimmerCategoryItem = ShimmerCategoryItem;
exports.ShimmerCategoryList = ShimmerCategoryList;
exports.ShimmerPostItem = ShimmerPostItem;
exports.ShimmerPostDetails = ShimmerPostDetails;
exports.ShimmerPostList = ShimmerPostList;
exports.ShimmerContentBlock = ShimmerContentBlock;
exports.ShimmerSectionHeader = ShimmerSectionHeader;
//# sourceMappingURL=index.js.map