Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@nejcm/react-skeleton

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nejcm/react-skeleton - npm Package Compare versions

Comparing version 3.0.3 to 3.0.4

7

CHANGELOG.md

@@ -0,1 +1,8 @@

## [3.0.4](https://github.com/nejcm/react-skeleton/compare/v3.0.3...v3.0.4) (2020-06-08)
### Bug Fixes
* fixed animation, fixed missing peer dependency ([b1a4af7](https://github.com/nejcm/react-skeleton/commit/b1a4af78f5a83097dae8d8ca8f98c70502823dbc))
## [3.0.3](https://github.com/nejcm/react-skeleton/compare/v3.0.2...v3.0.3) (2020-06-08)

@@ -2,0 +9,0 @@

2

dist/@nejcm/react-skeleton.cjs.js

@@ -153,3 +153,3 @@ 'use strict';

function _templateObject$2() {
var data = _taggedTemplateLiteral(["\n .s-loader {\n position: relative;\n overflow: hidden;\n background-color: rgba(0, 0, 0, 0.055);\n\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.07),\n rgba(0, 0, 0, 0)\n );\n transform: translateX(-100%);\n }\n }\n\n &.s-active {\n .s-loader {\n &:after {\n animation: loading 1.75s 0.5s infinite;\n }\n }\n }\n\n &.s-inactive {\n .s-loader {\n &:after {\n animation: none;\n }\n }\n }\n\n &.s-dark {\n .s-loader {\n background-color: rgba(255, 255, 255, 0.175);\n &:after {\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0.12),\n rgba(255, 255, 255, 0)\n );\n }\n }\n }\n\n @keyframes loading {\n 100% {\n transform: translateX(100%);\n }\n }\n\n .s-rect {\n border-radius: 2px;\n }\n .s-circ {\n border-radius: 50%;\n }\n"]);
var data = _taggedTemplateLiteral(["\n .s-loader {\n position: relative;\n overflow: hidden;\n background-color: rgba(0, 0, 0, 0.055);\n\n &:after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.07),\n rgba(0, 0, 0, 0)\n );\n transform: translateX(-100%);\n }\n }\n\n &.s-active {\n .s-loader {\n &:after {\n animation: loading 1.75s 0.5s infinite;\n }\n }\n }\n\n &.s-inactive {\n .s-loader {\n &:after {\n animation: none;\n }\n }\n }\n\n &.s-dark {\n .s-loader {\n background-color: rgba(255, 255, 255, 0.175);\n &:after {\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0.12),\n rgba(255, 255, 255, 0)\n );\n }\n }\n }\n\n @keyframes loading {\n 100% {\n transform: translateX(100%);\n }\n }\n\n .s-rect {\n border-radius: 2px;\n }\n .s-circ {\n border-radius: 50%;\n }\n"]);

@@ -156,0 +156,0 @@ _templateObject$2 = function () {

2

dist/@nejcm/react-skeleton.esm.js

@@ -146,3 +146,3 @@ import _extends from '@babel/runtime/helpers/extends';

function _templateObject$2() {
var data = _taggedTemplateLiteral(["\n .s-loader {\n position: relative;\n overflow: hidden;\n background-color: rgba(0, 0, 0, 0.055);\n\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.07),\n rgba(0, 0, 0, 0)\n );\n transform: translateX(-100%);\n }\n }\n\n &.s-active {\n .s-loader {\n &:after {\n animation: loading 1.75s 0.5s infinite;\n }\n }\n }\n\n &.s-inactive {\n .s-loader {\n &:after {\n animation: none;\n }\n }\n }\n\n &.s-dark {\n .s-loader {\n background-color: rgba(255, 255, 255, 0.175);\n &:after {\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0.12),\n rgba(255, 255, 255, 0)\n );\n }\n }\n }\n\n @keyframes loading {\n 100% {\n transform: translateX(100%);\n }\n }\n\n .s-rect {\n border-radius: 2px;\n }\n .s-circ {\n border-radius: 50%;\n }\n"]);
var data = _taggedTemplateLiteral(["\n .s-loader {\n position: relative;\n overflow: hidden;\n background-color: rgba(0, 0, 0, 0.055);\n\n &:after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.07),\n rgba(0, 0, 0, 0)\n );\n transform: translateX(-100%);\n }\n }\n\n &.s-active {\n .s-loader {\n &:after {\n animation: loading 1.75s 0.5s infinite;\n }\n }\n }\n\n &.s-inactive {\n .s-loader {\n &:after {\n animation: none;\n }\n }\n }\n\n &.s-dark {\n .s-loader {\n background-color: rgba(255, 255, 255, 0.175);\n &:after {\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0.12),\n rgba(255, 255, 255, 0)\n );\n }\n }\n }\n\n @keyframes loading {\n 100% {\n transform: translateX(100%);\n }\n }\n\n .s-rect {\n border-radius: 2px;\n }\n .s-circ {\n border-radius: 50%;\n }\n"]);

@@ -149,0 +149,0 @@ _templateObject$2 = function () {

1231

dist/@nejcm/react-skeleton.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('react'), require('styled-components')) :
typeof define === 'function' && define.amd ? define(['exports', 'prop-types', 'react', 'styled-components'], factory) :
(global = global || self, factory(global.NejcmReactSkeleton = {}, global.PropTypes, global.React, global.StyledComponents));
}(this, (function (exports, PropTypes, React, styled) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/objectWithoutProperties'), require('prop-types'), require('react'), require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('styled-components'), require('@babel/runtime/helpers/toConsumableArray')) :
typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/objectWithoutProperties', 'prop-types', 'react', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/taggedTemplateLiteral', 'styled-components', '@babel/runtime/helpers/toConsumableArray'], factory) :
(global = global || self, factory(global.NejcmReactSkeleton = {}, global._extends, global._objectWithoutProperties, global.PropTypes, global.React, global._defineProperty, global._taggedTemplateLiteral, global.StyledComponents, global._toConsumableArray));
}(this, (function (exports, _extends, _objectWithoutProperties, PropTypes, React, _defineProperty, _taggedTemplateLiteral, styled, _toConsumableArray) { 'use strict';
PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
var React__default = 'default' in React ? React['default'] : React;
styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
_extends = _extends && Object.prototype.hasOwnProperty.call(_extends, 'default') ? _extends['default'] : _extends;
_objectWithoutProperties = _objectWithoutProperties && Object.prototype.hasOwnProperty.call(_objectWithoutProperties, 'default') ? _objectWithoutProperties['default'] : _objectWithoutProperties;
PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
var React__default = 'default' in React ? React['default'] : React;
_defineProperty = _defineProperty && Object.prototype.hasOwnProperty.call(_defineProperty, 'default') ? _defineProperty['default'] : _defineProperty;
_taggedTemplateLiteral = _taggedTemplateLiteral && Object.prototype.hasOwnProperty.call(_taggedTemplateLiteral, 'default') ? _taggedTemplateLiteral['default'] : _taggedTemplateLiteral;
styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
_toConsumableArray = _toConsumableArray && Object.prototype.hasOwnProperty.call(_toConsumableArray, 'default') ? _toConsumableArray['default'] : _toConsumableArray;
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
var _extends_1 = createCommonjsModule(function (module) {
function _extends() {
module.exports = _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
var measure2Css = function (value) {
return value ? typeof value === 'string' ? value : "".concat(value, "px") : undefined;
};
var extractStyles = function (_ref) {
var width = _ref.width,
maxWidth = _ref.maxWidth,
minWidth = _ref.minWidth,
height = _ref.height,
maxHeight = _ref.maxHeight,
minHeight = _ref.minHeight,
style = _ref.style,
rest = _objectWithoutProperties(_ref, ["width", "maxWidth", "minWidth", "height", "maxHeight", "minHeight", "style"]);
return target;
};
return _objectSpread({
style: _objectSpread({
width: measure2Css(width),
maxWidth: measure2Css(maxWidth),
minWidth: measure2Css(minWidth),
height: measure2Css(height),
maxHeight: measure2Css(maxHeight),
minHeight: measure2Css(minHeight)
}, style)
}, rest);
};
return _extends.apply(this, arguments);
}
function _templateObject() {
var data = _taggedTemplateLiteral([""]);
module.exports = _extends;
});
_templateObject = function () {
return data;
};
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
return data;
}
var CircleWrapper = styled.div(_templateObject());
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
var Circle = function (_ref) {
var className = _ref.className,
rest = _objectWithoutProperties(_ref, ["className"]);
return target;
}
return /*#__PURE__*/React__default.createElement(CircleWrapper, _extends({
className: "s-circ s-loader ".concat(className || '')
}, extractStyles(rest)));
};
var objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
Circle.propTypes = {
/**
* Circle Width
*/
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = objectWithoutPropertiesLoose(source, excluded);
var key, i;
/**
* Max width
*/
maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
/**
* Min width
*/
minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
/**
* Height
*/
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
return target;
}
/**
* Max height
*/
maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
var objectWithoutProperties = _objectWithoutProperties;
/**
* Min height
*/
minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
className: PropTypes.string
} ;
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
function _templateObject$1() {
var data = _taggedTemplateLiteral([""]);
return obj;
}
_templateObject$1 = function () {
return data;
};
var defineProperty = _defineProperty;
return data;
}
var RectangleWrapper = styled.div(_templateObject$1());
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
var Rectangle = function (_ref) {
var className = _ref.className,
rest = _objectWithoutProperties(_ref, ["className"]);
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
return /*#__PURE__*/React__default.createElement(RectangleWrapper, _extends({
className: "s-rect s-loader ".concat(className || '')
}, extractStyles(rest)));
};
var measure2Css = function (value) {
return value ? typeof value === 'string' ? value : "".concat(value, "px") : undefined;
};
var extractStyles = function (_ref) {
var width = _ref.width,
maxWidth = _ref.maxWidth,
minWidth = _ref.minWidth,
height = _ref.height,
maxHeight = _ref.maxHeight,
minHeight = _ref.minHeight,
style = _ref.style,
rest = objectWithoutProperties(_ref, ["width", "maxWidth", "minWidth", "height", "maxHeight", "minHeight", "style"]);
Rectangle.propTypes = {
/**
* Rectangle Width
*/
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
return _objectSpread({
style: _objectSpread({
width: measure2Css(width),
maxWidth: measure2Css(maxWidth),
minWidth: measure2Css(minWidth),
height: measure2Css(height),
maxHeight: measure2Css(maxHeight),
minHeight: measure2Css(minHeight)
}, style)
}, rest);
};
/**
* Max width
*/
maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
function _taggedTemplateLiteral(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
/**
* Min width
*/
minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
}
/**
* Height
*/
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
var taggedTemplateLiteral = _taggedTemplateLiteral;
/**
* Max height
*/
maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
function _templateObject() {
var data = taggedTemplateLiteral([""]);
/**
* Min height
*/
minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
className: PropTypes.string
} ;
_templateObject = function () {
return data;
};
function _templateObject$2() {
var data = _taggedTemplateLiteral(["\n .s-loader {\n position: relative;\n overflow: hidden;\n background-color: rgba(0, 0, 0, 0.055);\n\n &:after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.07),\n rgba(0, 0, 0, 0)\n );\n transform: translateX(-100%);\n }\n }\n\n &.s-active {\n .s-loader {\n &:after {\n animation: loading 1.75s 0.5s infinite;\n }\n }\n }\n\n &.s-inactive {\n .s-loader {\n &:after {\n animation: none;\n }\n }\n }\n\n &.s-dark {\n .s-loader {\n background-color: rgba(255, 255, 255, 0.175);\n &:after {\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0.12),\n rgba(255, 255, 255, 0)\n );\n }\n }\n }\n\n @keyframes loading {\n 100% {\n transform: translateX(100%);\n }\n }\n\n .s-rect {\n border-radius: 2px;\n }\n .s-circ {\n border-radius: 50%;\n }\n"]);
return data;
}
var CircleWrapper = styled.div(_templateObject());
_templateObject$2 = function () {
return data;
};
var Circle = function (_ref) {
var className = _ref.className,
rest = objectWithoutProperties(_ref, ["className"]);
return data;
}
var SkeletonWrapper = styled.div(_templateObject$2());
return /*#__PURE__*/React__default.createElement(CircleWrapper, _extends_1({
className: "s-circ s-loader ".concat(className || '')
}, extractStyles(rest)));
};
var Skeleton = function (_ref) {
var _ref$active = _ref.active,
active = _ref$active === void 0 ? true : _ref$active,
darkTheme = _ref.darkTheme,
className = _ref.className,
rest = _objectWithoutProperties(_ref, ["active", "darkTheme", "className"]);
Circle.propTypes = {
/**
* Circle Width
*/
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
return /*#__PURE__*/React__default.createElement(SkeletonWrapper, _extends({
className: "skeleton ".concat(className || '').concat(active ? ' s-active' : ' s-inactive').concat(darkTheme ? ' s-dark' : '')
}, rest));
};
/**
* Max width
*/
maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
Skeleton.propTypes = {
/**
* Display skeleton for a dark theme.
*/
darkTheme: PropTypes.bool,
/**
* Min width
*/
minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Show animation effect. "true"
*/
active: PropTypes.bool,
className: PropTypes.string
} ;
/*Skeleton.defaultProps = {
active: true,
};*/
/**
* Height
*/
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
Skeleton.Rectangle = Rectangle;
Skeleton.Circle = Circle;
/**
* Max height
*/
maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
function _templateObject$3() {
var data = _taggedTemplateLiteral(["\n .s-header {\n height: 2rem;\n margin-bottom: 1.25rem;\n }\n\n .s-line {\n height: 1.25rem;\n margin-bottom: 0.75rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n"]);
/**
* Min height
*/
minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
className: PropTypes.string
} ;
_templateObject$3 = function () {
return data;
};
function _templateObject$1() {
var data = taggedTemplateLiteral([""]);
return data;
}
var Wrapper = styled.div(_templateObject$3());
_templateObject$1 = function () {
return data;
};
var Paragraph = function (_ref) {
var header = _ref.header,
_ref$lines = _ref.lines,
lines = _ref$lines === void 0 ? 3 : _ref$lines,
_ref$widths = _ref.widths,
widths = _ref$widths === void 0 ? ['100%', '100%', '75%', '35%', '50%', '85%'] : _ref$widths,
skeletonProps = _ref.skeletonProps,
className = _ref.className,
children = _ref.children,
rest = _objectWithoutProperties(_ref, ["header", "lines", "widths", "skeletonProps", "className", "children"]);
return data;
}
var RectangleWrapper = styled.div(_templateObject$1());
var max = widths.length || 0;
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper, _extends({
className: "s-paragraph ".concat(className || '')
}, rest), header && /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
className: "s-header",
width: "50%"
}), lines > 0 ? _toConsumableArray(Array(lines)).map(function (_, i) {
return /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
key: i,
className: "s-line",
width: widths[i % max] || '100%'
});
}) : null, children));
};
Paragraph.propTypes = {
/**
* Show header
*/
header: PropTypes.bool,
var Rectangle = function (_ref) {
var className = _ref.className,
rest = objectWithoutProperties(_ref, ["className"]);
/**
* Number of pragraph lines "3"
*/
lines: PropTypes.number,
return /*#__PURE__*/React__default.createElement(RectangleWrapper, _extends_1({
className: "s-rect s-loader ".concat(className || '')
}, extractStyles(rest)));
};
/**
* Array of rotating line widths. "['100%', '100%', '75%', '35%', '50%', '85%']"
*/
widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
Rectangle.propTypes = {
/**
* Rectangle Width
*/
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node
} ;
/*Paragraph.defaultProps = {
widths: ['100%', '100%', '75%', '35%', '50%', '85%'],
lines: 3,
};*/
/**
* Max width
*/
maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
function _templateObject$4() {
var data = _taggedTemplateLiteral(["\n border: solid 1px rgba(0, 0, 0, 0.08);\n border-radius: 3px;\n padding: 1.25rem;\n\n .s-image {\n margin-bottom: 1rem;\n }\n"]);
/**
* Min width
*/
minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
_templateObject$4 = function () {
return data;
};
/**
* Height
*/
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
return data;
}
var Wrapper$1 = styled.div(_templateObject$4());
/**
* Max height
*/
maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
/**
* Min height
*/
minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
className: PropTypes.string
} ;
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var Card = function (_ref) {
var width = _ref.width,
maxWidth = _ref.maxWidth,
image = _ref.image,
header = _ref.header,
paragraph = _ref.paragraph,
skeletonProps = _ref.skeletonProps,
className = _ref.className,
children = _ref.children,
style = _ref.style,
rest = _objectWithoutProperties(_ref, ["width", "maxWidth", "image", "header", "paragraph", "skeletonProps", "className", "children", "style"]);
function _templateObject$2() {
var data = taggedTemplateLiteral(["\n .s-loader {\n position: relative;\n overflow: hidden;\n background-color: rgba(0, 0, 0, 0.055);\n\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.07),\n rgba(0, 0, 0, 0)\n );\n transform: translateX(-100%);\n }\n }\n\n &.s-active {\n .s-loader {\n &:after {\n animation: loading 1.75s 0.5s infinite;\n }\n }\n }\n\n &.s-inactive {\n .s-loader {\n &:after {\n animation: none;\n }\n }\n }\n\n &.s-dark {\n .s-loader {\n background-color: rgba(255, 255, 255, 0.175);\n &:after {\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0.12),\n rgba(255, 255, 255, 0)\n );\n }\n }\n }\n\n @keyframes loading {\n 100% {\n transform: translateX(100%);\n }\n }\n\n .s-rect {\n border-radius: 2px;\n }\n .s-circ {\n border-radius: 50%;\n }\n"]);
var internalStyle = _objectSpread$1({
width: measure2Css(width),
maxWidth: measure2Css(maxWidth)
}, style);
_templateObject$2 = function () {
return data;
};
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$1, _extends({
className: "s-card ".concat(className || ''),
style: internalStyle
}, rest), image ? /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
className: "s-image",
height: 200
}) : null, header || paragraph ? /*#__PURE__*/React__default.createElement(Paragraph, {
header: header,
lines: paragraph ? 3 : 0,
skeletonProps: skeletonProps
}) : null, children));
};
Card.propTypes = {
/**
* Card width
*/
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
return data;
}
var SkeletonWrapper = styled.div(_templateObject$2());
/**
* Card max width
*/
maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
var Skeleton = function (_ref) {
var _ref$active = _ref.active,
active = _ref$active === void 0 ? true : _ref$active,
darkTheme = _ref.darkTheme,
className = _ref.className,
rest = objectWithoutProperties(_ref, ["active", "darkTheme", "className"]);
/**
* Display image loader "false"
*/
image: PropTypes.bool,
return /*#__PURE__*/React__default.createElement(SkeletonWrapper, _extends_1({
className: "skeleton ".concat(className || '').concat(active ? ' s-active' : ' s-inactive').concat(darkTheme ? ' s-dark' : '')
}, rest));
};
/**
* Display header loader "false"
*/
header: PropTypes.bool,
Skeleton.propTypes = {
/**
* Display skeleton for a dark theme.
*/
darkTheme: PropTypes.bool,
/**
* Display paragraph loader "false"
*/
paragraph: PropTypes.bool,
/**
* Show animation effect. "true"
*/
active: PropTypes.bool,
className: PropTypes.string
} ;
/*Skeleton.defaultProps = {
active: true,
};*/
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node,
style: PropTypes.object
} ;
/*Card.defaultProps = {
image: false,
header: false,
paragraph: false,
};*/
Skeleton.Rectangle = Rectangle;
Skeleton.Circle = Circle;
function _templateObject$5() {
var data = _taggedTemplateLiteral(["\n display: table;\n width: 100%;\n\n > * {\n display: table-cell;\n\n &:first-of-type {\n padding-right: 1.5rem;\n vertical-align: top;\n }\n\n &:last-of-type {\n width: 100%;\n vertical-align: middle;\n }\n }\n"]);
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
_templateObject$5 = function () {
return data;
};
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
}
return data;
}
var Wrapper$2 = styled.div(_templateObject$5());
return arr2;
}
var Comment = function (_ref) {
var _ref$avatarSize = _ref.avatarSize,
avatarSize = _ref$avatarSize === void 0 ? 45 : _ref$avatarSize,
_ref$avatarCircle = _ref.avatarCircle,
avatarCircle = _ref$avatarCircle === void 0 ? true : _ref$avatarCircle,
_ref$lines = _ref.lines,
lines = _ref$lines === void 0 ? 3 : _ref$lines,
skeletonProps = _ref.skeletonProps,
className = _ref.className,
children = _ref.children,
rest = _objectWithoutProperties(_ref, ["avatarSize", "avatarCircle", "lines", "skeletonProps", "className", "children"]);
var arrayLikeToArray = _arrayLikeToArray;
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$2, _extends({
className: "s-comment ".concat(className || '')
}, rest), /*#__PURE__*/React__default.createElement("div", null, avatarCircle ? /*#__PURE__*/React__default.createElement(Skeleton.Circle, {
className: "s-avatar",
width: avatarSize,
height: avatarSize
}) : /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
className: "s-avatar",
width: avatarSize,
height: avatarSize
})), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Paragraph, {
header: false,
lines: lines
}), children)));
};
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return arrayLikeToArray(arr);
}
Comment.propTypes = {
/**
* Avatar size "45"
*/
avatarSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
var arrayWithoutHoles = _arrayWithoutHoles;
/**
* Display avatar image as a circle "true"
*/
avatarCircle: PropTypes.bool,
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}
/**
* Number of comment lines "3"
*/
lines: PropTypes.number,
var iterableToArray = _iterableToArray;
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node
} ;
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
}
function _templateObject$6() {
var data = _taggedTemplateLiteral(["\n .s-label {\n height: 1rem;\n max-width: 150px;\n margin-bottom: 0.3rem;\n }\n .s-input {\n height: 2.5rem;\n margin-bottom: 1.2rem;\n }\n .s-button {\n height: 2.5rem;\n max-width: 175px;\n }\n"]);
var unsupportedIterableToArray = _unsupportedIterableToArray;
_templateObject$6 = function () {
return data;
};
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
return data;
}
var Wrapper$3 = styled.div(_templateObject$6());
var nonIterableSpread = _nonIterableSpread;
var Form = function (_ref) {
var _ref$inputs = _ref.inputs,
inputs = _ref$inputs === void 0 ? 3 : _ref$inputs,
inputHeight = _ref.inputHeight,
_ref$button = _ref.button,
button = _ref$button === void 0 ? true : _ref$button,
_ref$label = _ref.label,
label = _ref$label === void 0 ? true : _ref$label,
_ref$widths = _ref.widths,
widths = _ref$widths === void 0 ? ['100%'] : _ref$widths,
className = _ref.className,
children = _ref.children,
skeletonProps = _ref.skeletonProps,
rest = _objectWithoutProperties(_ref, ["inputs", "inputHeight", "button", "label", "widths", "className", "children", "skeletonProps"]);
function _toConsumableArray(arr) {
return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
}
var max = widths.length || 0;
var style = inputHeight ? {
height: measure2Css(inputHeight)
} : undefined;
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$3, _extends({
className: "s-form ".concat(className || '')
}, rest), _toConsumableArray(Array(inputs)).map(function (_, i) {
return /*#__PURE__*/React__default.createElement(React.Fragment, {
key: i
}, label ? /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
className: "s-label"
}) : null, /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
key: i,
className: "s-input",
width: widths[i % max] || '100%',
style: style
}));
}), button ? /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
className: "s-button",
style: style
}) : null, children));
};
Form.propTypes = {
/**
* Show input label loader "true"
*/
label: PropTypes.bool,
var toConsumableArray = _toConsumableArray;
/**
* Show button loader "true"
*/
button: PropTypes.bool,
function _templateObject$3() {
var data = taggedTemplateLiteral(["\n .s-header {\n height: 2rem;\n margin-bottom: 1.25rem;\n }\n\n .s-line {\n height: 1.25rem;\n margin-bottom: 0.75rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n"]);
/**
* Number of inputs "3"
*/
inputs: PropTypes.number,
_templateObject$3 = function () {
return data;
};
/**
* Input height
*/
inputHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
return data;
}
var Wrapper = styled.div(_templateObject$3());
/**
* Array of rotating input widths. "['100%']"
*/
widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
var Paragraph = function (_ref) {
var header = _ref.header,
_ref$lines = _ref.lines,
lines = _ref$lines === void 0 ? 3 : _ref$lines,
_ref$widths = _ref.widths,
widths = _ref$widths === void 0 ? ['100%', '100%', '75%', '35%', '50%', '85%'] : _ref$widths,
skeletonProps = _ref.skeletonProps,
className = _ref.className,
children = _ref.children,
rest = objectWithoutProperties(_ref, ["header", "lines", "widths", "skeletonProps", "className", "children"]);
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node
} ;
/*Form.defaultProps = {
inputs: 3,
button: true,
label: true,
widths: ['100%'],
};*/
var max = widths.length || 0;
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper, _extends_1({
className: "s-paragraph ".concat(className || '')
}, rest), header && /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
className: "s-header",
width: "50%"
}), lines > 0 ? toConsumableArray(Array(lines)).map(function (_, i) {
return /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
key: i,
className: "s-line",
width: widths[i % max] || '100%'
});
}) : null, children));
};
Paragraph.propTypes = {
/**
* Show header
*/
header: PropTypes.bool,
function _templateObject$7() {
var data = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n margin: -1rem;\n overflow: hidden;\n\n > * {\n flex: 1 1 auto;\n padding: 1rem;\n }\n"]);
/**
* Number of pragraph lines "3"
*/
lines: PropTypes.number,
_templateObject$7 = function () {
return data;
};
/**
* Array of rotating line widths. "['100%', '100%', '75%', '35%', '50%', '85%']"
*/
widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
return data;
}
var Wrapper$4 = styled.div(_templateObject$7());
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node
} ;
/*Paragraph.defaultProps = {
widths: ['100%', '100%', '75%', '35%', '50%', '85%'],
lines: 3,
};*/
var Grid = function (_ref) {
var _ref$cols = _ref.cols,
cols = _ref$cols === void 0 ? 3 : _ref$cols,
className = _ref.className,
skeletonProps = _ref.skeletonProps,
children = _ref.children,
rest = _objectWithoutProperties(_ref, ["cols", "className", "skeletonProps", "children"]);
function _templateObject$4() {
var data = taggedTemplateLiteral(["\n border: solid 1px rgba(0, 0, 0, 0.08);\n border-radius: 3px;\n padding: 1.25rem;\n\n .s-image {\n margin-bottom: 1rem;\n }\n"]);
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$4, _extends({
className: "s-grid ".concat(className || '')
}, rest), cols > 0 ? _toConsumableArray(Array(cols)).map(function (_, i) {
return /*#__PURE__*/React__default.createElement("div", {
key: i
}, typeof children === 'function' ? children(i) : children);
}) : null));
};
Grid.propTypes = {
/**
* Number of repeated columns "3"
*/
cols: PropTypes.number,
_templateObject$4 = function () {
return data;
};
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
return data;
}
var Wrapper$1 = styled.div(_templateObject$4());
/**
* Children to repeat or callback function with index argument
*/
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
className: PropTypes.string
} ;
/*Grid.defaultProps = {
cols: 3,
};*/
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _templateObject$8() {
var data = _taggedTemplateLiteral(["\n width: 100%;\n border-collapse: collapse;\n\n th,\n td {\n padding: 0.8rem;\n border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n }\n\n th {\n .s-cell {\n display: flex;\n height: 2rem;\n }\n }\n\n td {\n .s-cell {\n display: flex;\n height: 1.25rem;\n }\n }\n"]);
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var Card = function (_ref) {
var width = _ref.width,
maxWidth = _ref.maxWidth,
image = _ref.image,
header = _ref.header,
paragraph = _ref.paragraph,
skeletonProps = _ref.skeletonProps,
className = _ref.className,
children = _ref.children,
style = _ref.style,
rest = objectWithoutProperties(_ref, ["width", "maxWidth", "image", "header", "paragraph", "skeletonProps", "className", "children", "style"]);
_templateObject$8 = function () {
return data;
};
var internalStyle = _objectSpread$1({
width: measure2Css(width),
maxWidth: measure2Css(maxWidth)
}, style);
return data;
}
var Wrapper$5 = styled.table(_templateObject$8());
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$1, _extends_1({
className: "s-card ".concat(className || ''),
style: internalStyle
}, rest), image ? /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
className: "s-image",
height: 200
}) : null, header || paragraph ? /*#__PURE__*/React__default.createElement(Paragraph, {
header: header,
lines: paragraph ? 3 : 0,
skeletonProps: skeletonProps
}) : null, children));
};
Card.propTypes = {
/**
* Card width
*/
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
var Table = function (_ref) {
var _ref$head = _ref.head,
head = _ref$head === void 0 ? true : _ref$head,
_ref$rows = _ref.rows,
rows = _ref$rows === void 0 ? 3 : _ref$rows,
_ref$cols = _ref.cols,
cols = _ref$cols === void 0 ? 4 : _ref$cols,
_ref$widths = _ref.widths,
widths = _ref$widths === void 0 ? ['100%', '100%', '75%', '35%', '50%', '85%'] : _ref$widths,
skeletonProps = _ref.skeletonProps,
className = _ref.className,
children = _ref.children,
rest = _objectWithoutProperties(_ref, ["head", "rows", "cols", "widths", "skeletonProps", "className", "children"]);
/**
* Card max width
*/
maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
var isArray = Array.isArray(cols);
/**
* Display image loader "false"
*/
image: PropTypes.bool,
var rowIter = _toConsumableArray(Array(rows));
/**
* Display header loader "false"
*/
header: PropTypes.bool,
var colIter = isArray ? cols : _toConsumableArray(Array(cols));
var max = widths.length;
var td = colIter.map(function (__, j) {
return /*#__PURE__*/React__default.createElement("td", {
key: "c-".concat(j),
style: isArray ? undefined : {
width: widths[j % max]
}
}, /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
as: "span",
width: "100%",
className: "s-cell"
}));
});
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$5, _extends({
className: "s-table ".concat(className || '')
}, rest), head ? /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, colIter.map(function (val, i) {
return /*#__PURE__*/React__default.createElement("th", {
key: i,
align: "left"
}, val ? val : /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
as: "span",
width: "100%",
className: "s-cell"
}));
}))) : null, /*#__PURE__*/React__default.createElement("tbody", null, rowIter.map(function (_, i) {
return /*#__PURE__*/React__default.createElement("tr", {
key: i
}, td);
}), children)));
};
Table.propTypes = {
/**
* Show table head (th) "true"
*/
head: PropTypes.bool,
/**
* Display paragraph loader "false"
*/
paragraph: PropTypes.bool,
/**
* Number of rows "3"
*/
rows: PropTypes.number,
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node,
style: PropTypes.object
} ;
/*Card.defaultProps = {
image: false,
header: false,
paragraph: false,
};*/
/**
* Number or columns or array of custom elements "4"
*/
cols: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.node)]),
function _templateObject$5() {
var data = taggedTemplateLiteral(["\n display: table;\n width: 100%;\n\n > * {\n display: table-cell;\n\n &:first-of-type {\n padding-right: 1.5rem;\n vertical-align: top;\n }\n\n &:last-of-type {\n width: 100%;\n vertical-align: middle;\n }\n }\n"]);
/**
* Array of rotating column widths. "['100%', '100%', '75%', '35%', '50%', '85%']"
*/
widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
_templateObject$5 = function () {
return data;
};
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node
} ;
/*Table.defaultProps = {
head: true,
rows: 3,
cols: 4,
widths: ['100%', '100%', '75%', '35%', '50%', '85%'],
};*/
return data;
}
var Wrapper$2 = styled.div(_templateObject$5());
exports.Card = Card;
exports.Comment = Comment;
exports.Form = Form;
exports.Grid = Grid;
exports.Paragraph = Paragraph;
exports.Table = Table;
exports.default = Skeleton;
var Comment = function (_ref) {
var _ref$avatarSize = _ref.avatarSize,
avatarSize = _ref$avatarSize === void 0 ? 45 : _ref$avatarSize,
_ref$avatarCircle = _ref.avatarCircle,
avatarCircle = _ref$avatarCircle === void 0 ? true : _ref$avatarCircle,
_ref$lines = _ref.lines,
lines = _ref$lines === void 0 ? 3 : _ref$lines,
skeletonProps = _ref.skeletonProps,
className = _ref.className,
children = _ref.children,
rest = objectWithoutProperties(_ref, ["avatarSize", "avatarCircle", "lines", "skeletonProps", "className", "children"]);
Object.defineProperty(exports, '__esModule', { value: true });
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$2, _extends_1({
className: "s-comment ".concat(className || '')
}, rest), /*#__PURE__*/React__default.createElement("div", null, avatarCircle ? /*#__PURE__*/React__default.createElement(Skeleton.Circle, {
className: "s-avatar",
width: avatarSize,
height: avatarSize
}) : /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
className: "s-avatar",
width: avatarSize,
height: avatarSize
})), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Paragraph, {
header: false,
lines: lines
}), children)));
};
Comment.propTypes = {
/**
* Avatar size "45"
*/
avatarSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Display avatar image as a circle "true"
*/
avatarCircle: PropTypes.bool,
/**
* Number of comment lines "3"
*/
lines: PropTypes.number,
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node
} ;
function _templateObject$6() {
var data = taggedTemplateLiteral(["\n .s-label {\n height: 1rem;\n max-width: 150px;\n margin-bottom: 0.3rem;\n }\n .s-input {\n height: 2.5rem;\n margin-bottom: 1.2rem;\n }\n .s-button {\n height: 2.5rem;\n max-width: 175px;\n }\n"]);
_templateObject$6 = function () {
return data;
};
return data;
}
var Wrapper$3 = styled.div(_templateObject$6());
var Form = function (_ref) {
var _ref$inputs = _ref.inputs,
inputs = _ref$inputs === void 0 ? 3 : _ref$inputs,
inputHeight = _ref.inputHeight,
_ref$button = _ref.button,
button = _ref$button === void 0 ? true : _ref$button,
_ref$label = _ref.label,
label = _ref$label === void 0 ? true : _ref$label,
_ref$widths = _ref.widths,
widths = _ref$widths === void 0 ? ['100%'] : _ref$widths,
className = _ref.className,
children = _ref.children,
skeletonProps = _ref.skeletonProps,
rest = objectWithoutProperties(_ref, ["inputs", "inputHeight", "button", "label", "widths", "className", "children", "skeletonProps"]);
var max = widths.length || 0;
var style = inputHeight ? {
height: measure2Css(inputHeight)
} : undefined;
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$3, _extends_1({
className: "s-form ".concat(className || '')
}, rest), toConsumableArray(Array(inputs)).map(function (_, i) {
return /*#__PURE__*/React__default.createElement(React.Fragment, {
key: i
}, label ? /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
className: "s-label"
}) : null, /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
key: i,
className: "s-input",
width: widths[i % max] || '100%',
style: style
}));
}), button ? /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
className: "s-button",
style: style
}) : null, children));
};
Form.propTypes = {
/**
* Show input label loader "true"
*/
label: PropTypes.bool,
/**
* Show button loader "true"
*/
button: PropTypes.bool,
/**
* Number of inputs "3"
*/
inputs: PropTypes.number,
/**
* Input height
*/
inputHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Array of rotating input widths. "['100%']"
*/
widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node
} ;
/*Form.defaultProps = {
inputs: 3,
button: true,
label: true,
widths: ['100%'],
};*/
function _templateObject$7() {
var data = taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n margin: -1rem;\n overflow: hidden;\n\n > * {\n flex: 1 1 auto;\n padding: 1rem;\n }\n"]);
_templateObject$7 = function () {
return data;
};
return data;
}
var Wrapper$4 = styled.div(_templateObject$7());
var Grid = function (_ref) {
var _ref$cols = _ref.cols,
cols = _ref$cols === void 0 ? 3 : _ref$cols,
className = _ref.className,
skeletonProps = _ref.skeletonProps,
children = _ref.children,
rest = objectWithoutProperties(_ref, ["cols", "className", "skeletonProps", "children"]);
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$4, _extends_1({
className: "s-grid ".concat(className || '')
}, rest), cols > 0 ? toConsumableArray(Array(cols)).map(function (_, i) {
return /*#__PURE__*/React__default.createElement("div", {
key: i
}, typeof children === 'function' ? children(i) : children);
}) : null));
};
Grid.propTypes = {
/**
* Number of repeated columns "3"
*/
cols: PropTypes.number,
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
/**
* Children to repeat or callback function with index argument
*/
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
className: PropTypes.string
} ;
/*Grid.defaultProps = {
cols: 3,
};*/
function _templateObject$8() {
var data = taggedTemplateLiteral(["\n width: 100%;\n border-collapse: collapse;\n\n th,\n td {\n padding: 0.8rem;\n border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n }\n\n th {\n .s-cell {\n display: flex;\n height: 2rem;\n }\n }\n\n td {\n .s-cell {\n display: flex;\n height: 1.25rem;\n }\n }\n"]);
_templateObject$8 = function () {
return data;
};
return data;
}
var Wrapper$5 = styled.table(_templateObject$8());
var Table = function (_ref) {
var _ref$head = _ref.head,
head = _ref$head === void 0 ? true : _ref$head,
_ref$rows = _ref.rows,
rows = _ref$rows === void 0 ? 3 : _ref$rows,
_ref$cols = _ref.cols,
cols = _ref$cols === void 0 ? 4 : _ref$cols,
_ref$widths = _ref.widths,
widths = _ref$widths === void 0 ? ['100%', '100%', '75%', '35%', '50%', '85%'] : _ref$widths,
skeletonProps = _ref.skeletonProps,
className = _ref.className,
children = _ref.children,
rest = objectWithoutProperties(_ref, ["head", "rows", "cols", "widths", "skeletonProps", "className", "children"]);
var isArray = Array.isArray(cols);
var rowIter = toConsumableArray(Array(rows));
var colIter = isArray ? cols : toConsumableArray(Array(cols));
var max = widths.length;
var td = colIter.map(function (__, j) {
return /*#__PURE__*/React__default.createElement("td", {
key: "c-".concat(j),
style: isArray ? undefined : {
width: widths[j % max]
}
}, /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
as: "span",
width: "100%",
className: "s-cell"
}));
});
return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$5, _extends_1({
className: "s-table ".concat(className || '')
}, rest), head ? /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, colIter.map(function (val, i) {
return /*#__PURE__*/React__default.createElement("th", {
key: i,
align: "left"
}, val ? val : /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
as: "span",
width: "100%",
className: "s-cell"
}));
}))) : null, /*#__PURE__*/React__default.createElement("tbody", null, rowIter.map(function (_, i) {
return /*#__PURE__*/React__default.createElement("tr", {
key: i
}, td);
}), children)));
};
Table.propTypes = {
/**
* Show table head (th) "true"
*/
head: PropTypes.bool,
/**
* Number of rows "3"
*/
rows: PropTypes.number,
/**
* Number or columns or array of custom elements "4"
*/
cols: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.node)]),
/**
* Array of rotating column widths. "['100%', '100%', '75%', '35%', '50%', '85%']"
*/
widths: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
/**
* Skeleton component props
*/
skeletonProps: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node
} ;
/*Table.defaultProps = {
head: true,
rows: 3,
cols: 4,
widths: ['100%', '100%', '75%', '35%', '50%', '85%'],
};*/
exports.Card = Card;
exports.Comment = Comment;
exports.Form = Form;
exports.Grid = Grid;
exports.Paragraph = Paragraph;
exports.Table = Table;
exports.default = Skeleton;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=react-skeleton.umd.js.map

2

dist/@nejcm/react-skeleton.umd.min.js

@@ -1,2 +0,2 @@

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("prop-types"),require("react"),require("styled-components")):"function"==typeof define&&define.amd?define(["exports","prop-types","react","styled-components"],n):n((e=e||self).NejcmReactSkeleton={},e.PropTypes,e.React,e.StyledComponents)}(this,(function(e,n,t,r){"use strict";n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n;var a="default"in t?t.default:t;r=r&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r;var i=function(e,n){return e(n={exports:{}},n.exports),n.exports}((function(e){function n(){return e.exports=n=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},n.apply(this,arguments)}e.exports=n}));var o=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a};var l=function(e,n){if(null==e)return{};var t,r,a=o(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a};var c=function(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e};function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function u(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?s(Object(t),!0).forEach((function(n){c(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var d=function(e){return e?"string"==typeof e?e:"".concat(e,"px"):void 0},m=function(e){var n=e.width,t=e.maxWidth,r=e.minWidth,a=e.height,i=e.maxHeight,o=e.minHeight,c=e.style,s=l(e,["width","maxWidth","minWidth","height","maxHeight","minHeight","style"]);return u({style:u({width:d(n),maxWidth:d(t),minWidth:d(r),height:d(a),maxHeight:d(i),minHeight:d(o)},c)},s)};var p=function(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))};function f(){var e=p([""]);return f=function(){return e},e}var h=r.div(f());function v(){var e=p([""]);return v=function(){return e},e}var g=r.div(v());function b(){var e=p(["\n .s-loader {\n position: relative;\n overflow: hidden;\n background-color: rgba(0, 0, 0, 0.055);\n\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.07),\n rgba(0, 0, 0, 0)\n );\n transform: translateX(-100%);\n }\n }\n\n &.s-active {\n .s-loader {\n &:after {\n animation: loading 1.75s 0.5s infinite;\n }\n }\n }\n\n &.s-inactive {\n .s-loader {\n &:after {\n animation: none;\n }\n }\n }\n\n &.s-dark {\n .s-loader {\n background-color: rgba(255, 255, 255, 0.175);\n &:after {\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0.12),\n rgba(255, 255, 255, 0)\n );\n }\n }\n }\n\n @keyframes loading {\n 100% {\n transform: translateX(100%);\n }\n }\n\n .s-rect {\n border-radius: 2px;\n }\n .s-circ {\n border-radius: 50%;\n }\n"]);return b=function(){return e},e}var y=r.div(b()),O=function(e){var n=e.active,t=void 0===n||n,r=e.darkTheme,o=e.className,c=l(e,["active","darkTheme","className"]);return a.createElement(y,i({className:"skeleton ".concat(o||"").concat(t?" s-active":" s-inactive").concat(r?" s-dark":"")},c))};O.Rectangle=function(e){var n=e.className,t=l(e,["className"]);return a.createElement(g,i({className:"s-rect s-loader ".concat(n||"")},m(t)))},O.Circle=function(e){var n=e.className,t=l(e,["className"]);return a.createElement(h,i({className:"s-circ s-loader ".concat(n||"")},m(t)))};var w=function(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r};var E=function(e){if(Array.isArray(e))return w(e)};var j=function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)};var P=function(e,n){if(e){if("string"==typeof e)return w(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?w(e,n):void 0}};var N=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")};var k=function(e){return E(e)||j(e)||P(e)||N()};function x(){var e=p(["\n .s-header {\n height: 2rem;\n margin-bottom: 1.25rem;\n }\n\n .s-line {\n height: 1.25rem;\n margin-bottom: 0.75rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n"]);return x=function(){return e},e}var S=r.div(x()),A=function(e){var n=e.header,t=e.lines,r=void 0===t?3:t,o=e.widths,c=void 0===o?["100%","100%","75%","35%","50%","85%"]:o,s=e.skeletonProps,u=e.className,d=e.children,m=l(e,["header","lines","widths","skeletonProps","className","children"]),p=c.length||0;return a.createElement(O,s,a.createElement(S,i({className:"s-paragraph ".concat(u||"")},m),n&&a.createElement(O.Rectangle,{className:"s-header",width:"50%"}),r>0?k(Array(r)).map((function(e,n){return a.createElement(O.Rectangle,{key:n,className:"s-line",width:c[n%p]||"100%"})})):null,d))};function R(){var e=p(["\n border: solid 1px rgba(0, 0, 0, 0.08);\n border-radius: 3px;\n padding: 1.25rem;\n\n .s-image {\n margin-bottom: 1rem;\n }\n"]);return R=function(){return e},e}var W=r.div(R());function C(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function D(){var e=p(["\n display: table;\n width: 100%;\n\n > * {\n display: table-cell;\n\n &:first-of-type {\n padding-right: 1.5rem;\n vertical-align: top;\n }\n\n &:last-of-type {\n width: 100%;\n vertical-align: middle;\n }\n }\n"]);return D=function(){return e},e}var H=r.div(D());function T(){var e=p(["\n .s-label {\n height: 1rem;\n max-width: 150px;\n margin-bottom: 0.3rem;\n }\n .s-input {\n height: 2.5rem;\n margin-bottom: 1.2rem;\n }\n .s-button {\n height: 2.5rem;\n max-width: 175px;\n }\n"]);return T=function(){return e},e}var z=r.div(T());function I(){var e=p(["\n display: flex;\n flex-wrap: wrap;\n margin: -1rem;\n overflow: hidden;\n\n > * {\n flex: 1 1 auto;\n padding: 1rem;\n }\n"]);return I=function(){return e},e}var q=r.div(I());function F(){var e=p(["\n width: 100%;\n border-collapse: collapse;\n\n th,\n td {\n padding: 0.8rem;\n border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n }\n\n th {\n .s-cell {\n display: flex;\n height: 2rem;\n }\n }\n\n td {\n .s-cell {\n display: flex;\n height: 1.25rem;\n }\n }\n"]);return F=function(){return e},e}var M=r.table(F());e.Card=function(e){var n=e.width,t=e.maxWidth,r=e.image,o=e.header,s=e.paragraph,u=e.skeletonProps,m=e.className,p=e.children,f=e.style,h=l(e,["width","maxWidth","image","header","paragraph","skeletonProps","className","children","style"]),v=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?C(Object(t),!0).forEach((function(n){c(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):C(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}({width:d(n),maxWidth:d(t)},f);return a.createElement(O,u,a.createElement(W,i({className:"s-card ".concat(m||""),style:v},h),r?a.createElement(O.Rectangle,{className:"s-image",height:200}):null,o||s?a.createElement(A,{header:o,lines:s?3:0,skeletonProps:u}):null,p))},e.Comment=function(e){var n=e.avatarSize,t=void 0===n?45:n,r=e.avatarCircle,o=void 0===r||r,c=e.lines,s=void 0===c?3:c,u=e.skeletonProps,d=e.className,m=e.children,p=l(e,["avatarSize","avatarCircle","lines","skeletonProps","className","children"]);return a.createElement(O,u,a.createElement(H,i({className:"s-comment ".concat(d||"")},p),a.createElement("div",null,o?a.createElement(O.Circle,{className:"s-avatar",width:t,height:t}):a.createElement(O.Rectangle,{className:"s-avatar",width:t,height:t})),a.createElement("div",null,a.createElement(A,{header:!1,lines:s}),m)))},e.Form=function(e){var n=e.inputs,r=void 0===n?3:n,o=e.inputHeight,c=e.button,s=void 0===c||c,u=e.label,m=void 0===u||u,p=e.widths,f=void 0===p?["100%"]:p,h=e.className,v=e.children,g=e.skeletonProps,b=l(e,["inputs","inputHeight","button","label","widths","className","children","skeletonProps"]),y=f.length||0,w=o?{height:d(o)}:void 0;return a.createElement(O,g,a.createElement(z,i({className:"s-form ".concat(h||"")},b),k(Array(r)).map((function(e,n){return a.createElement(t.Fragment,{key:n},m?a.createElement(O.Rectangle,{className:"s-label"}):null,a.createElement(O.Rectangle,{key:n,className:"s-input",width:f[n%y]||"100%",style:w}))})),s?a.createElement(O.Rectangle,{className:"s-button",style:w}):null,v))},e.Grid=function(e){var n=e.cols,t=void 0===n?3:n,r=e.className,o=e.skeletonProps,c=e.children,s=l(e,["cols","className","skeletonProps","children"]);return a.createElement(O,o,a.createElement(q,i({className:"s-grid ".concat(r||"")},s),t>0?k(Array(t)).map((function(e,n){return a.createElement("div",{key:n},"function"==typeof c?c(n):c)})):null))},e.Paragraph=A,e.Table=function(e){var n=e.head,t=void 0===n||n,r=e.rows,o=void 0===r?3:r,c=e.cols,s=void 0===c?4:c,u=e.widths,d=void 0===u?["100%","100%","75%","35%","50%","85%"]:u,m=e.skeletonProps,p=e.className,f=e.children,h=l(e,["head","rows","cols","widths","skeletonProps","className","children"]),v=Array.isArray(s),g=k(Array(o)),b=v?s:k(Array(s)),y=d.length,w=b.map((function(e,n){return a.createElement("td",{key:"c-".concat(n),style:v?void 0:{width:d[n%y]}},a.createElement(O.Rectangle,{as:"span",width:"100%",className:"s-cell"}))}));return a.createElement(O,m,a.createElement(M,i({className:"s-table ".concat(p||"")},h),t?a.createElement("thead",null,a.createElement("tr",null,b.map((function(e,n){return a.createElement("th",{key:n,align:"left"},e||a.createElement(O.Rectangle,{as:"span",width:"100%",className:"s-cell"}))})))):null,a.createElement("tbody",null,g.map((function(e,n){return a.createElement("tr",{key:n},w)})),f)))},e.default=O,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@babel/runtime/helpers/extends"),require("@babel/runtime/helpers/objectWithoutProperties"),require("prop-types"),require("react"),require("@babel/runtime/helpers/defineProperty"),require("@babel/runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@babel/runtime/helpers/toConsumableArray")):"function"==typeof define&&define.amd?define(["exports","@babel/runtime/helpers/extends","@babel/runtime/helpers/objectWithoutProperties","prop-types","react","@babel/runtime/helpers/defineProperty","@babel/runtime/helpers/taggedTemplateLiteral","styled-components","@babel/runtime/helpers/toConsumableArray"],t):t((e=e||self).NejcmReactSkeleton={},e._extends,e._objectWithoutProperties,e.PropTypes,e.React,e._defineProperty,e._taggedTemplateLiteral,e.StyledComponents,e._toConsumableArray)}(this,(function(e,t,n,r,a,l,i,o,c){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n,r=r&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r;var s="default"in a?a.default:a;function d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?d(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}l=l&&Object.prototype.hasOwnProperty.call(l,"default")?l.default:l,i=i&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i,o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o,c=c&&Object.prototype.hasOwnProperty.call(c,"default")?c.default:c;var u=function(e){return e?"string"==typeof e?e:"".concat(e,"px"):void 0},p=function(e){var t=e.width,r=e.maxWidth,a=e.minWidth,l=e.height,i=e.maxHeight,o=e.minHeight,c=e.style,s=n(e,["width","maxWidth","minWidth","height","maxHeight","minHeight","style"]);return m({style:m({width:u(t),maxWidth:u(r),minWidth:u(a),height:u(l),maxHeight:u(i),minHeight:u(o)},c)},s)};function h(){var e=i([""]);return h=function(){return e},e}var f=o.div(h());function b(){var e=i([""]);return b=function(){return e},e}var g=o.div(b());function y(){var e=i(["\n .s-loader {\n position: relative;\n overflow: hidden;\n background-color: rgba(0, 0, 0, 0.055);\n\n &:after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.07),\n rgba(0, 0, 0, 0)\n );\n transform: translateX(-100%);\n }\n }\n\n &.s-active {\n .s-loader {\n &:after {\n animation: loading 1.75s 0.5s infinite;\n }\n }\n }\n\n &.s-inactive {\n .s-loader {\n &:after {\n animation: none;\n }\n }\n }\n\n &.s-dark {\n .s-loader {\n background-color: rgba(255, 255, 255, 0.175);\n &:after {\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0.12),\n rgba(255, 255, 255, 0)\n );\n }\n }\n }\n\n @keyframes loading {\n 100% {\n transform: translateX(100%);\n }\n }\n\n .s-rect {\n border-radius: 2px;\n }\n .s-circ {\n border-radius: 50%;\n }\n"]);return y=function(){return e},e}var v=o.div(y()),w=function(e){var r=e.active,a=void 0===r||r,l=e.darkTheme,i=e.className,o=n(e,["active","darkTheme","className"]);return s.createElement(v,t({className:"skeleton ".concat(i||"").concat(a?" s-active":" s-inactive").concat(l?" s-dark":"")},o))};function O(){var e=i(["\n .s-header {\n height: 2rem;\n margin-bottom: 1.25rem;\n }\n\n .s-line {\n height: 1.25rem;\n margin-bottom: 0.75rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n"]);return O=function(){return e},e}w.Rectangle=function(e){var r=e.className,a=n(e,["className"]);return s.createElement(g,t({className:"s-rect s-loader ".concat(r||"")},p(a)))},w.Circle=function(e){var r=e.className,a=n(e,["className"]);return s.createElement(f,t({className:"s-circ s-loader ".concat(r||"")},p(a)))};var P=o.div(O()),E=function(e){var r=e.header,a=e.lines,l=void 0===a?3:a,i=e.widths,o=void 0===i?["100%","100%","75%","35%","50%","85%"]:i,d=e.skeletonProps,m=e.className,u=e.children,p=n(e,["header","lines","widths","skeletonProps","className","children"]),h=o.length||0;return s.createElement(w,d,s.createElement(P,t({className:"s-paragraph ".concat(m||"")},p),r&&s.createElement(w.Rectangle,{className:"s-header",width:"50%"}),l>0?c(Array(l)).map((function(e,t){return s.createElement(w.Rectangle,{key:t,className:"s-line",width:o[t%h]||"100%"})})):null,u))};function N(){var e=i(["\n border: solid 1px rgba(0, 0, 0, 0.08);\n border-radius: 3px;\n padding: 1.25rem;\n\n .s-image {\n margin-bottom: 1rem;\n }\n"]);return N=function(){return e},e}var j=o.div(N());function k(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function x(){var e=i(["\n display: table;\n width: 100%;\n\n > * {\n display: table-cell;\n\n &:first-of-type {\n padding-right: 1.5rem;\n vertical-align: top;\n }\n\n &:last-of-type {\n width: 100%;\n vertical-align: middle;\n }\n }\n"]);return x=function(){return e},e}var R=o.div(x());function W(){var e=i(["\n .s-label {\n height: 1rem;\n max-width: 150px;\n margin-bottom: 0.3rem;\n }\n .s-input {\n height: 2.5rem;\n margin-bottom: 1.2rem;\n }\n .s-button {\n height: 2.5rem;\n max-width: 175px;\n }\n"]);return W=function(){return e},e}var A=o.div(W());function C(){var e=i(["\n display: flex;\n flex-wrap: wrap;\n margin: -1rem;\n overflow: hidden;\n\n > * {\n flex: 1 1 auto;\n padding: 1rem;\n }\n"]);return C=function(){return e},e}var q=o.div(C());function D(){var e=i(["\n width: 100%;\n border-collapse: collapse;\n\n th,\n td {\n padding: 0.8rem;\n border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n }\n\n th {\n .s-cell {\n display: flex;\n height: 2rem;\n }\n }\n\n td {\n .s-cell {\n display: flex;\n height: 1.25rem;\n }\n }\n"]);return D=function(){return e},e}var H=o.table(D());e.Card=function(e){var r=e.width,a=e.maxWidth,i=e.image,o=e.header,c=e.paragraph,d=e.skeletonProps,m=e.className,p=e.children,h=e.style,f=n(e,["width","maxWidth","image","header","paragraph","skeletonProps","className","children","style"]),b=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?k(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):k(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({width:u(r),maxWidth:u(a)},h);return s.createElement(w,d,s.createElement(j,t({className:"s-card ".concat(m||""),style:b},f),i?s.createElement(w.Rectangle,{className:"s-image",height:200}):null,o||c?s.createElement(E,{header:o,lines:c?3:0,skeletonProps:d}):null,p))},e.Comment=function(e){var r=e.avatarSize,a=void 0===r?45:r,l=e.avatarCircle,i=void 0===l||l,o=e.lines,c=void 0===o?3:o,d=e.skeletonProps,m=e.className,u=e.children,p=n(e,["avatarSize","avatarCircle","lines","skeletonProps","className","children"]);return s.createElement(w,d,s.createElement(R,t({className:"s-comment ".concat(m||"")},p),s.createElement("div",null,i?s.createElement(w.Circle,{className:"s-avatar",width:a,height:a}):s.createElement(w.Rectangle,{className:"s-avatar",width:a,height:a})),s.createElement("div",null,s.createElement(E,{header:!1,lines:c}),u)))},e.Form=function(e){var r=e.inputs,l=void 0===r?3:r,i=e.inputHeight,o=e.button,d=void 0===o||o,m=e.label,p=void 0===m||m,h=e.widths,f=void 0===h?["100%"]:h,b=e.className,g=e.children,y=e.skeletonProps,v=n(e,["inputs","inputHeight","button","label","widths","className","children","skeletonProps"]),O=f.length||0,P=i?{height:u(i)}:void 0;return s.createElement(w,y,s.createElement(A,t({className:"s-form ".concat(b||"")},v),c(Array(l)).map((function(e,t){return s.createElement(a.Fragment,{key:t},p?s.createElement(w.Rectangle,{className:"s-label"}):null,s.createElement(w.Rectangle,{key:t,className:"s-input",width:f[t%O]||"100%",style:P}))})),d?s.createElement(w.Rectangle,{className:"s-button",style:P}):null,g))},e.Grid=function(e){var r=e.cols,a=void 0===r?3:r,l=e.className,i=e.skeletonProps,o=e.children,d=n(e,["cols","className","skeletonProps","children"]);return s.createElement(w,i,s.createElement(q,t({className:"s-grid ".concat(l||"")},d),a>0?c(Array(a)).map((function(e,t){return s.createElement("div",{key:t},"function"==typeof o?o(t):o)})):null))},e.Paragraph=E,e.Table=function(e){var r=e.head,a=void 0===r||r,l=e.rows,i=void 0===l?3:l,o=e.cols,d=void 0===o?4:o,m=e.widths,u=void 0===m?["100%","100%","75%","35%","50%","85%"]:m,p=e.skeletonProps,h=e.className,f=e.children,b=n(e,["head","rows","cols","widths","skeletonProps","className","children"]),g=Array.isArray(d),y=c(Array(i)),v=g?d:c(Array(d)),O=u.length,P=v.map((function(e,t){return s.createElement("td",{key:"c-".concat(t),style:g?void 0:{width:u[t%O]}},s.createElement(w.Rectangle,{as:"span",width:"100%",className:"s-cell"}))}));return s.createElement(w,p,s.createElement(H,t({className:"s-table ".concat(h||"")},b),a?s.createElement("thead",null,s.createElement("tr",null,v.map((function(e,t){return s.createElement("th",{key:t,align:"left"},e||s.createElement(w.Rectangle,{as:"span",width:"100%",className:"s-cell"}))})))):null,s.createElement("tbody",null,y.map((function(e,t){return s.createElement("tr",{key:t},P)})),f)))},e.default=w,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=react-skeleton.umd.min.js.map

22

package.json
{
"name": "@nejcm/react-skeleton",
"version": "3.0.3",
"version": "3.0.4",
"author": "Nejc Mursic <nmursi2@gmail.com> (https://github.com/nejcm)",

@@ -52,9 +52,9 @@ "description": "React skeleton loader that allows customization with some predefined templates.",

"peerDependencies": {
"prop-types": ">=15",
"@babel/runtime": ">=7",
"prop-types": ">=14",
"react": ">=16.8",
"react-dom": ">=16.8",
"styled-components": ">=4"
},
"dependencies": {
"@babel/runtime": "^7.10.2"
},
"dependencies": {},
"devDependencies": {

@@ -94,3 +94,3 @@ "@babel/compat-data": "^7.10.1",

"eslint-plugin-html": "^6.0.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-import": "^2.21.1",
"eslint-plugin-jest": "^23.13.2",

@@ -108,3 +108,3 @@ "eslint-plugin-jsx-a11y": "6.2.3",

"jest-watch-typeahead": "^0.6.0",
"kcd-scripts": "^6.2.0",
"kcd-scripts": "^6.2.1",
"node-sass": "^4.14.1",

@@ -114,6 +114,7 @@ "prettier": "^2.0.5",

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-is": "^16.13.1",
"react-test-renderer": "^16.13.1",
"rimraf": "^3.0.2",
"rollup": "^2.14.0",
"rollup": "^2.15.0",
"rollup-plugin-babel": "^4.4.0",

@@ -126,4 +127,3 @@ "rollup-plugin-commonjs": "^10.1.0",

"styled-components": "5.1.1",
"typescript": "^3.9.5",
"webpack-merge": "^4.2.2"
"typescript": "^3.9.5"
},

@@ -133,5 +133,5 @@ "browserslist": [

"> 1%",
"IE 11",
"IE >= 11",
"safari >= 7"
]
}
dist/@nejcm/react-skeleton.umd.js.map

Sorry, the diff of this file is not supported yet

dist/@nejcm/react-skeleton.umd.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc