forked from Gitlink/forgeplus-react
394 lines
9.6 KiB
JavaScript
394 lines
9.6 KiB
JavaScript
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
|
|
typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
|
|
(factory((global.ContentLoader = {}),global.React));
|
|
}(this, (function (exports,React) { 'use strict';
|
|
|
|
function _extends() {
|
|
_extends = Object.assign || function (target) {
|
|
for (var i = 1; i < arguments.length; i++) {
|
|
var source = arguments[i];
|
|
|
|
for (var key in source) {
|
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
|
|
return _extends.apply(this, arguments);
|
|
}
|
|
|
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
if (source == null) return {};
|
|
var target = {};
|
|
var sourceKeys = Object.keys(source);
|
|
var key, i;
|
|
|
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
key = sourceKeys[i];
|
|
if (excluded.indexOf(key) >= 0) continue;
|
|
target[key] = source[key];
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
var uid = (function () {
|
|
return Math.random().toString(36).substring(2);
|
|
});
|
|
|
|
var Svg = (function (_ref) {
|
|
var animate = _ref.animate,
|
|
ariaLabel = _ref.ariaLabel,
|
|
children = _ref.children,
|
|
className = _ref.className,
|
|
height = _ref.height,
|
|
preserveAspectRatio = _ref.preserveAspectRatio,
|
|
primaryColor = _ref.primaryColor,
|
|
primaryOpacity = _ref.primaryOpacity,
|
|
rtl = _ref.rtl,
|
|
secondaryColor = _ref.secondaryColor,
|
|
secondaryOpacity = _ref.secondaryOpacity,
|
|
speed = _ref.speed,
|
|
style = _ref.style,
|
|
uniquekey = _ref.uniquekey,
|
|
width = _ref.width,
|
|
props = _objectWithoutPropertiesLoose(_ref, ["animate", "ariaLabel", "children", "className", "height", "preserveAspectRatio", "primaryColor", "primaryOpacity", "rtl", "secondaryColor", "secondaryOpacity", "speed", "style", "uniquekey", "width"]);
|
|
|
|
var idClip = uniquekey ? uniquekey + "-idClip" : uid();
|
|
var idGradient = uniquekey ? uniquekey + "-idGradient" : uid();
|
|
var defautlAnimation = ["-3; 1", "-2; 2", "-1; 3"];
|
|
var rtlAnimation = ["1; -3", "2; -2", "3; -1"];
|
|
var animationValues = rtl ? rtlAnimation : defautlAnimation;
|
|
return React.createElement("svg", _extends({
|
|
role: "img",
|
|
style: style,
|
|
className: className,
|
|
"aria-labelledby": ariaLabel ? ariaLabel : null,
|
|
viewBox: "0 0 " + width + " " + height,
|
|
preserveAspectRatio: preserveAspectRatio
|
|
}, props), ariaLabel ? React.createElement("title", null, ariaLabel) : null, React.createElement("rect", {
|
|
x: "0",
|
|
y: "0",
|
|
width: width,
|
|
height: height,
|
|
clipPath: "url(#" + idClip + ")",
|
|
style: {
|
|
fill: "url(#" + idGradient + ")"
|
|
}
|
|
}), React.createElement("defs", null, React.createElement("clipPath", {
|
|
id: idClip
|
|
}, children), React.createElement("linearGradient", {
|
|
id: idGradient
|
|
}, React.createElement("stop", {
|
|
offset: "0%",
|
|
stopColor: primaryColor,
|
|
stopOpacity: primaryOpacity
|
|
}, animate && React.createElement("animate", {
|
|
attributeName: "offset",
|
|
values: animationValues[0],
|
|
dur: speed + "s",
|
|
repeatCount: "indefinite"
|
|
})), React.createElement("stop", {
|
|
offset: "50%",
|
|
stopColor: secondaryColor,
|
|
stopOpacity: secondaryOpacity
|
|
}, animate && React.createElement("animate", {
|
|
attributeName: "offset",
|
|
values: animationValues[1],
|
|
dur: speed + "s",
|
|
repeatCount: "indefinite"
|
|
})), React.createElement("stop", {
|
|
offset: "100%",
|
|
stopColor: primaryColor,
|
|
stopOpacity: primaryOpacity
|
|
}, animate && React.createElement("animate", {
|
|
attributeName: "offset",
|
|
values: animationValues[2],
|
|
dur: speed + "s",
|
|
repeatCount: "indefinite"
|
|
})))));
|
|
});
|
|
|
|
var defaultProps = {
|
|
animate: true,
|
|
ariaLabel: "Loading interface...",
|
|
height: 130,
|
|
preserveAspectRatio: "xMidYMid meet",
|
|
primaryColor: "#f0f0f0",
|
|
primaryOpacity: 1,
|
|
rtl: false,
|
|
secondaryColor: "#e0e0e0",
|
|
secondaryOpacity: 1,
|
|
speed: 2,
|
|
width: 400
|
|
};
|
|
|
|
var InitialComponent = function InitialComponent(props) {
|
|
return React.createElement("rect", {
|
|
x: "0",
|
|
y: "0",
|
|
rx: "5",
|
|
ry: "5",
|
|
width: props.width,
|
|
height: props.height
|
|
});
|
|
};
|
|
|
|
var Holder = (function (props) {
|
|
var mergedProps = _extends({}, defaultProps, props);
|
|
|
|
var children = props.children ? props.children : React.createElement(InitialComponent, mergedProps);
|
|
return React.createElement(Svg, mergedProps, children);
|
|
});
|
|
|
|
var FacebookStyle = function FacebookStyle(props) {
|
|
return React.createElement(Holder, props, React.createElement("rect", {
|
|
x: "70",
|
|
y: "15",
|
|
rx: "4",
|
|
ry: "4",
|
|
width: "117",
|
|
height: "6.4"
|
|
}), React.createElement("rect", {
|
|
x: "70",
|
|
y: "35",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "85",
|
|
height: "6.4"
|
|
}), React.createElement("rect", {
|
|
x: "0",
|
|
y: "80",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "350",
|
|
height: "6.4"
|
|
}), React.createElement("rect", {
|
|
x: "0",
|
|
y: "100",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "380",
|
|
height: "6.4"
|
|
}), React.createElement("rect", {
|
|
x: "0",
|
|
y: "120",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "201",
|
|
height: "6.4"
|
|
}), React.createElement("circle", {
|
|
cx: "30",
|
|
cy: "30",
|
|
r: "30"
|
|
}));
|
|
};
|
|
|
|
var InstagramStyle = function InstagramStyle(props) {
|
|
return React.createElement(Holder, _extends({}, props, {
|
|
height: 480
|
|
}), React.createElement("circle", {
|
|
cx: "30",
|
|
cy: "30",
|
|
r: "30"
|
|
}), React.createElement("rect", {
|
|
x: "75",
|
|
y: "13",
|
|
rx: "4",
|
|
ry: "4",
|
|
width: "100",
|
|
height: "13"
|
|
}), React.createElement("rect", {
|
|
x: "75",
|
|
y: "37",
|
|
rx: "4",
|
|
ry: "4",
|
|
width: "50",
|
|
height: "8"
|
|
}), React.createElement("rect", {
|
|
x: "0",
|
|
y: "70",
|
|
rx: "5",
|
|
ry: "5",
|
|
width: "400",
|
|
height: "400"
|
|
}));
|
|
};
|
|
|
|
var CodeStyle = function CodeStyle(props) {
|
|
return React.createElement(Holder, props, React.createElement("rect", {
|
|
x: "0",
|
|
y: "0",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "70",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "80",
|
|
y: "0",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "100",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "190",
|
|
y: "0",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "10",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "15",
|
|
y: "20",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "130",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "155",
|
|
y: "20",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "130",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "15",
|
|
y: "40",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "90",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "115",
|
|
y: "40",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "60",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "185",
|
|
y: "40",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "60",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "0",
|
|
y: "60",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "30",
|
|
height: "10"
|
|
}));
|
|
};
|
|
|
|
var ListStyle = function ListStyle(props) {
|
|
return React.createElement(Holder, props, React.createElement("rect", {
|
|
x: "0",
|
|
y: "0",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "250",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "20",
|
|
y: "20",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "220",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "20",
|
|
y: "40",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "170",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "0",
|
|
y: "60",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "250",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "20",
|
|
y: "80",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "200",
|
|
height: "10"
|
|
}), React.createElement("rect", {
|
|
x: "20",
|
|
y: "100",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "80",
|
|
height: "10"
|
|
}));
|
|
};
|
|
|
|
var BulletListStyle = function BulletListStyle(props) {
|
|
return React.createElement(Holder, props, React.createElement("circle", {
|
|
cx: "10",
|
|
cy: "20",
|
|
r: "8"
|
|
}), React.createElement("rect", {
|
|
x: "25",
|
|
y: "15",
|
|
rx: "5",
|
|
ry: "5",
|
|
width: "220",
|
|
height: "10"
|
|
}), React.createElement("circle", {
|
|
cx: "10",
|
|
cy: "50",
|
|
r: "8"
|
|
}), React.createElement("rect", {
|
|
x: "25",
|
|
y: "45",
|
|
rx: "5",
|
|
ry: "5",
|
|
width: "220",
|
|
height: "10"
|
|
}), React.createElement("circle", {
|
|
cx: "10",
|
|
cy: "80",
|
|
r: "8"
|
|
}), React.createElement("rect", {
|
|
x: "25",
|
|
y: "75",
|
|
rx: "5",
|
|
ry: "5",
|
|
width: "220",
|
|
height: "10"
|
|
}), React.createElement("circle", {
|
|
cx: "10",
|
|
cy: "110",
|
|
r: "8"
|
|
}), React.createElement("rect", {
|
|
x: "25",
|
|
y: "105",
|
|
rx: "5",
|
|
ry: "5",
|
|
width: "220",
|
|
height: "10"
|
|
}));
|
|
};
|
|
|
|
exports.default = Holder;
|
|
exports.Facebook = FacebookStyle;
|
|
exports.Instagram = InstagramStyle;
|
|
exports.Code = CodeStyle;
|
|
exports.List = ListStyle;
|
|
exports.BulletList = BulletListStyle;
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
})));
|