react-shimmer-effects
Version:
Shimmer effects for React
1,103 lines (962 loc) • 33 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var classnames = createCommonjsModule(function (module) {
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames() {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg)) {
if (arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
}
} else if (argType === 'object') {
if (arg.toString === Object.prototype.toString) {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
} else {
classes.push(arg.toString());
}
}
}
return classes.join(' ');
}
if (module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = 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);
export { ShimmerButton, ShimmerCircularImage, ShimmerThumbnail, ShimmerCard, ShimmerSimpleGallery, ShimmerFeaturedGallery, ShimmerTable, ShimmerTableCol, ShimmerTableRow, ShimmerBadge, ShimmerText, ShimmerTitle, ShimmerSocialPost, ShimmerSeparator, ShimmerCategoryItem, ShimmerCategoryList, ShimmerPostItem, ShimmerPostDetails, ShimmerPostList, ShimmerContentBlock, ShimmerSectionHeader };
//# sourceMappingURL=index.es.js.map