@nejcm/react-skeleton - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

CHANGELOG.md

@@ -0,1 +1,8 @@
+## [3.1.1](https://github.com/nejcm/react-skeleton/compare/v3.1.0...v3.1.1) (2020-08-06)
+
+
+### Bug Fixes
+
+* fixed docs ([5a80fda](https://github.com/nejcm/react-skeleton/commit/5a80fda2c77c52ab4247699c1b8217bd63da4d29))
+
 # [3.1.0](https://github.com/nejcm/react-skeleton/compare/v3.0.6...v3.1.0) (2020-08-05)
@@ -2,0 +9,0 @@

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

@@ -148,2 +148,3 @@ 'use strict';
 };
+Paragraph.displayName = 'Paragraph';
 
@@ -164,2 +165,3 @@ function _templateObject$4() {
 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) {
@@ -177,10 +179,8 @@ var width = _ref.width,
 
-  var internalStyle = _objectSpread$1({
-    width: measure2Css(width),
-    maxWidth: measure2Css(maxWidth)
-  }, style);
-
   return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$1, _extends({
     className: "s-card ".concat(className || ''),
-    style: internalStyle
+    style: _objectSpread$1({
+      width: measure2Css(width),
+      maxWidth: measure2Css(maxWidth)
+    }, style)
   }, rest), image ? /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
@@ -196,2 +196,4 @@ className: "s-image",
 
+Card.displayName = 'Card';
+
 function _templateObject$5() {
@@ -235,2 +237,3 @@ 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"]);
 };
+Comment.displayName = 'Comment';
 
@@ -285,2 +288,3 @@ function _templateObject$6() {
 };
+Form.displayName = 'Form';
 
@@ -318,2 +322,3 @@ function _templateObject$7() {
 };
+Grid.displayName = 'Grid';
 
@@ -377,2 +382,3 @@ function _templateObject$8() {
 };
+Table.displayName = 'Table';
 
@@ -379,0 +385,0 @@ exports.Card = Card;

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

@@ -141,2 +141,3 @@ import _extends from '@babel/runtime/helpers/extends';
 };
+Paragraph.displayName = 'Paragraph';
 
@@ -157,2 +158,3 @@ function _templateObject$4() {
 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) {
@@ -170,10 +172,8 @@ var width = _ref.width,
 
-  var internalStyle = _objectSpread$1({
-    width: measure2Css(width),
-    maxWidth: measure2Css(maxWidth)
-  }, style);
-
   return /*#__PURE__*/React.createElement(Skeleton, skeletonProps, /*#__PURE__*/React.createElement(Wrapper$1, _extends({
     className: "s-card ".concat(className || ''),
-    style: internalStyle
+    style: _objectSpread$1({
+      width: measure2Css(width),
+      maxWidth: measure2Css(maxWidth)
+    }, style)
   }, rest), image ? /*#__PURE__*/React.createElement(Skeleton.Rectangle, {
@@ -189,2 +189,4 @@ className: "s-image",
 
+Card.displayName = 'Card';
+
 function _templateObject$5() {
@@ -228,2 +230,3 @@ 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"]);
 };
+Comment.displayName = 'Comment';
 
@@ -278,2 +281,3 @@ function _templateObject$6() {
 };
+Form.displayName = 'Form';
 
@@ -311,2 +315,3 @@ function _templateObject$7() {
 };
+Grid.displayName = 'Grid';
 
@@ -370,4 +375,5 @@ function _templateObject$8() {
 };
+Table.displayName = 'Table';
 
 export default Skeleton;
 export { Card, Comment, Form, Grid, Paragraph, Table };

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

@@ -147,2 +147,3 @@ (function (global, factory) {
   };
+  Paragraph.displayName = 'Paragraph';
 
@@ -163,2 +164,3 @@ function _templateObject$4() {
   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) {
@@ -176,10 +178,8 @@ var width = _ref.width,
 
-    var internalStyle = _objectSpread$1({
-      width: measure2Css(width),
-      maxWidth: measure2Css(maxWidth)
-    }, style);
-
     return /*#__PURE__*/React__default.createElement(Skeleton, skeletonProps, /*#__PURE__*/React__default.createElement(Wrapper$1, _extends({
       className: "s-card ".concat(className || ''),
-      style: internalStyle
+      style: _objectSpread$1({
+        width: measure2Css(width),
+        maxWidth: measure2Css(maxWidth)
+      }, style)
     }, rest), image ? /*#__PURE__*/React__default.createElement(Skeleton.Rectangle, {
@@ -195,2 +195,4 @@ className: "s-image",
 
+  Card.displayName = 'Card';
+
   function _templateObject$5() {
@@ -234,2 +236,3 @@ 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"]);
   };
+  Comment.displayName = 'Comment';
 
@@ -284,2 +287,3 @@ function _templateObject$6() {
   };
+  Form.displayName = 'Form';
 
@@ -317,2 +321,3 @@ function _templateObject$7() {
   };
+  Grid.displayName = 'Grid';
 
@@ -376,2 +381,3 @@ function _templateObject$8() {
   };
+  Table.displayName = 'Table';
 
@@ -378,0 +384,0 @@ exports.Card = Card;

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

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@babel/runtime/helpers/extends"),require("@babel/runtime/helpers/objectWithoutProperties"),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","react","@babel/runtime/helpers/defineProperty","@babel/runtime/helpers/taggedTemplateLiteral","styled-components","@babel/runtime/helpers/toConsumableArray"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).NejcmReactSkeleton={},e._extends,e._objectWithoutProperties,e.React,e._defineProperty,e._taggedTemplateLiteral,e.StyledComponents,e._toConsumableArray)}(this,(function(e,t,n,r,a,l,i,o){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n;var c="default"in r?r.default:r;function s(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 d(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}a=a&&Object.prototype.hasOwnProperty.call(a,"default")?a.default:a,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;var m=function(e){return e?"string"==typeof e?e:"".concat(e,"px"):void 0},u=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 d({style:d({width:m(t),maxWidth:m(r),minWidth:m(a),height:m(l),maxHeight:m(i),minHeight:m(o)},c)},s)};function h(){var e=l([""]);return h=function(){return e},e}var p=i.div(h());function f(){var e=l([""]);return f=function(){return e},e}var b=i.div(f());function g(){var e=l(["\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 g=function(){return e},e}var v=i.div(g()),y=function(e){var r=e.active,a=void 0===r||r,l=e.darkTheme,i=e.className,o=n(e,["active","darkTheme","className"]);return c.createElement(v,t({className:"skeleton ".concat(i||"").concat(a?" s-active":" s-inactive").concat(l?" s-dark":"")},o))};function w(){var e=l(["\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 w=function(){return e},e}y.displayName="Skeleton",y.Rectangle=function(e){var r=e.className,a=n(e,["className"]);return c.createElement(b,t({className:"s-rect s-loader ".concat(r||"")},u(a)))},y.Circle=function(e){var r=e.className,a=n(e,["className"]);return c.createElement(p,t({className:"s-circ s-loader ".concat(r||"")},u(a)))};var O=i.div(w()),P=function(e){var r=e.header,a=e.lines,l=void 0===a?3:a,i=e.widths,s=void 0===i?["100%","100%","75%","35%","50%","85%"]:i,d=e.skeletonProps,m=e.className,u=e.children,h=n(e,["header","lines","widths","skeletonProps","className","children"]),p=s.length||0;return c.createElement(y,d,c.createElement(O,t({className:"s-paragraph ".concat(m||"")},h),r&&c.createElement(y.Rectangle,{className:"s-header",width:"50%"}),l>0?o(Array(l)).map((function(e,t){return c.createElement(y.Rectangle,{key:t,className:"s-line",width:s[t%p]||"100%"})})):null,u))};function E(){var e=l(["\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 E=function(){return e},e}var N=i.div(E());function j(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 k(){var e=l(["\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 k=function(){return e},e}var x=i.div(k());function R(){var e=l(["\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 R=function(){return e},e}var W=i.div(R());function A(){var e=l(["\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 A=function(){return e},e}var C=i.div(A());function S(){var e=l(["\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 S=function(){return e},e}var D=i.table(S());e.Card=function(e){var r=e.width,l=e.maxWidth,i=e.image,o=e.header,s=e.paragraph,d=e.skeletonProps,u=e.className,h=e.children,p=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?j(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({width:m(r),maxWidth:m(l)},p);return c.createElement(y,d,c.createElement(N,t({className:"s-card ".concat(u||""),style:b},f),i?c.createElement(y.Rectangle,{className:"s-image",height:200}):null,o||s?c.createElement(P,{header:o,lines:s?3:0,skeletonProps:d}):null,h))},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,s=void 0===o?3:o,d=e.skeletonProps,m=e.className,u=e.children,h=n(e,["avatarSize","avatarCircle","lines","skeletonProps","className","children"]);return c.createElement(y,d,c.createElement(x,t({className:"s-comment ".concat(m||"")},h),c.createElement("div",null,i?c.createElement(y.Circle,{className:"s-avatar",width:a,height:a}):c.createElement(y.Rectangle,{className:"s-avatar",width:a,height:a})),c.createElement("div",null,c.createElement(P,{header:!1,lines:s}),u)))},e.Form=function(e){var a=e.inputs,l=void 0===a?3:a,i=e.inputHeight,s=e.button,d=void 0===s||s,u=e.label,h=void 0===u||u,p=e.widths,f=void 0===p?["100%"]:p,b=e.skeletonProps,g=e.className,v=e.children,w=n(e,["inputs","inputHeight","button","label","widths","skeletonProps","className","children"]),O=f.length||0,P=i?{height:m(i)}:void 0;return c.createElement(y,b,c.createElement(W,t({className:"s-form ".concat(g||"")},w),o(Array(l)).map((function(e,t){return c.createElement(r.Fragment,{key:t},h?c.createElement(y.Rectangle,{className:"s-label"}):null,c.createElement(y.Rectangle,{key:t,className:"s-input",width:f[t%O]||"100%",style:P}))})),d?c.createElement(y.Rectangle,{className:"s-button",style:P}):null,v))},e.Grid=function(e){var r=e.cols,a=void 0===r?3:r,l=e.skeletonProps,i=e.className,s=e.children,d=n(e,["cols","skeletonProps","className","children"]);return c.createElement(y,l,c.createElement(C,t({className:"s-grid ".concat(i||"")},d),a>0?o(Array(a)).map((function(e,t){return c.createElement("div",{key:t},"function"==typeof s?s(t):s)})):null))},e.Paragraph=P,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,s=void 0===o?4:o,d=e.widths,m=void 0===d?["100%","100%","75%","35%","50%","85%"]:d,u=e.skeletonProps,h=e.className,p=e.children,f=n(e,["head","rows","cols","widths","skeletonProps","className","children"]),b=Array(i).fill(0),g=Array.isArray(s)?s:Array(s).fill(0),v=m.length,w=g.map((function(e,t){return c.createElement("td",{key:"c-".concat(t),style:{width:m[t%v]}},c.createElement(y.Rectangle,{as:"span",width:"100%",className:"s-cell"}))}));return c.createElement(y,u,c.createElement(D,t({className:"s-table ".concat(h||"")},f),a?c.createElement("thead",null,c.createElement("tr",null,g.map((function(e,t){return c.createElement("th",{key:t,align:"left"},e||c.createElement(y.Rectangle,{as:"span",width:"100%",className:"s-cell"}))})))):null,c.createElement("tbody",null,b.map((function(e,t){return c.createElement("tr",{key:t},w)})),p)))},e.default=y,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("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","react","@babel/runtime/helpers/defineProperty","@babel/runtime/helpers/taggedTemplateLiteral","styled-components","@babel/runtime/helpers/toConsumableArray"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).NejcmReactSkeleton={},e._extends,e._objectWithoutProperties,e.React,e._defineProperty,e._taggedTemplateLiteral,e.StyledComponents,e._toConsumableArray)}(this,(function(e,t,n,r,a,l,i,o){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n;var c="default"in r?r.default:r;function s(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 d(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}a=a&&Object.prototype.hasOwnProperty.call(a,"default")?a.default:a,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;var m=function(e){return e?"string"==typeof e?e:"".concat(e,"px"):void 0},u=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 d({style:d({width:m(t),maxWidth:m(r),minWidth:m(a),height:m(l),maxHeight:m(i),minHeight:m(o)},c)},s)};function p(){var e=l([""]);return p=function(){return e},e}var h=i.div(p());function f(){var e=l([""]);return f=function(){return e},e}var b=i.div(f());function g(){var e=l(["\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 g=function(){return e},e}var y=i.div(g()),v=function(e){var r=e.active,a=void 0===r||r,l=e.darkTheme,i=e.className,o=n(e,["active","darkTheme","className"]);return c.createElement(y,t({className:"skeleton ".concat(i||"").concat(a?" s-active":" s-inactive").concat(l?" s-dark":"")},o))};function w(){var e=l(["\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 w=function(){return e},e}v.displayName="Skeleton",v.Rectangle=function(e){var r=e.className,a=n(e,["className"]);return c.createElement(b,t({className:"s-rect s-loader ".concat(r||"")},u(a)))},v.Circle=function(e){var r=e.className,a=n(e,["className"]);return c.createElement(h,t({className:"s-circ s-loader ".concat(r||"")},u(a)))};var O=i.div(w()),N=function(e){var r=e.header,a=e.lines,l=void 0===a?3:a,i=e.widths,s=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=s.length||0;return c.createElement(v,d,c.createElement(O,t({className:"s-paragraph ".concat(m||"")},p),r&&c.createElement(v.Rectangle,{className:"s-header",width:"50%"}),l>0?o(Array(l)).map((function(e,t){return c.createElement(v.Rectangle,{key:t,className:"s-line",width:s[t%h]||"100%"})})):null,u))};function P(){var e=l(["\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 P=function(){return e},e}N.displayName="Paragraph";var E=i.div(P());function j(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 k(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?j(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var x=function(e){var r=e.width,a=e.maxWidth,l=e.image,i=e.header,o=e.paragraph,s=e.skeletonProps,d=e.className,u=e.children,p=e.style,h=n(e,["width","maxWidth","image","header","paragraph","skeletonProps","className","children","style"]);return c.createElement(v,s,c.createElement(E,t({className:"s-card ".concat(d||""),style:k({width:m(r),maxWidth:m(a)},p)},h),l?c.createElement(v.Rectangle,{className:"s-image",height:200}):null,i||o?c.createElement(N,{header:i,lines:o?3:0,skeletonProps:s}):null,u))};function C(){var e=l(["\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 C=function(){return e},e}x.displayName="Card";var R=i.div(C()),W=function(e){var r=e.avatarSize,a=void 0===r?45:r,l=e.avatarCircle,i=void 0===l||l,o=e.lines,s=void 0===o?3:o,d=e.skeletonProps,m=e.className,u=e.children,p=n(e,["avatarSize","avatarCircle","lines","skeletonProps","className","children"]);return c.createElement(v,d,c.createElement(R,t({className:"s-comment ".concat(m||"")},p),c.createElement("div",null,i?c.createElement(v.Circle,{className:"s-avatar",width:a,height:a}):c.createElement(v.Rectangle,{className:"s-avatar",width:a,height:a})),c.createElement("div",null,c.createElement(N,{header:!1,lines:s}),u)))};function A(){var e=l(["\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 A=function(){return e},e}W.displayName="Comment";var S=i.div(A()),T=function(e){var a=e.inputs,l=void 0===a?3:a,i=e.inputHeight,s=e.button,d=void 0===s||s,u=e.label,p=void 0===u||u,h=e.widths,f=void 0===h?["100%"]:h,b=e.skeletonProps,g=e.className,y=e.children,w=n(e,["inputs","inputHeight","button","label","widths","skeletonProps","className","children"]),O=f.length||0,N=i?{height:m(i)}:void 0;return c.createElement(v,b,c.createElement(S,t({className:"s-form ".concat(g||"")},w),o(Array(l)).map((function(e,t){return c.createElement(r.Fragment,{key:t},p?c.createElement(v.Rectangle,{className:"s-label"}):null,c.createElement(v.Rectangle,{key:t,className:"s-input",width:f[t%O]||"100%",style:N}))})),d?c.createElement(v.Rectangle,{className:"s-button",style:N}):null,y))};function D(){var e=l(["\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 D=function(){return e},e}T.displayName="Form";var H=i.div(D()),q=function(e){var r=e.cols,a=void 0===r?3:r,l=e.skeletonProps,i=e.className,s=e.children,d=n(e,["cols","skeletonProps","className","children"]);return c.createElement(v,l,c.createElement(H,t({className:"s-grid ".concat(i||"")},d),a>0?o(Array(a)).map((function(e,t){return c.createElement("div",{key:t},"function"==typeof s?s(t):s)})):null))};function _(){var e=l(["\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 _=function(){return e},e}q.displayName="Grid";var F=i.table(_()),L=function(e){var r=e.head,a=void 0===r||r,l=e.rows,i=void 0===l?3:l,o=e.cols,s=void 0===o?4:o,d=e.widths,m=void 0===d?["100%","100%","75%","35%","50%","85%"]:d,u=e.skeletonProps,p=e.className,h=e.children,f=n(e,["head","rows","cols","widths","skeletonProps","className","children"]),b=Array(i).fill(0),g=Array.isArray(s)?s:Array(s).fill(0),y=m.length,w=g.map((function(e,t){return c.createElement("td",{key:"c-".concat(t),style:{width:m[t%y]}},c.createElement(v.Rectangle,{as:"span",width:"100%",className:"s-cell"}))}));return c.createElement(v,u,c.createElement(F,t({className:"s-table ".concat(p||"")},f),a?c.createElement("thead",null,c.createElement("tr",null,g.map((function(e,t){return c.createElement("th",{key:t,align:"left"},e||c.createElement(v.Rectangle,{as:"span",width:"100%",className:"s-cell"}))})))):null,c.createElement("tbody",null,b.map((function(e,t){return c.createElement("tr",{key:t},w)})),h)))};L.displayName="Table",e.Card=x,e.Comment=W,e.Form=T,e.Grid=q,e.Paragraph=N,e.Table=L,e.default=v,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-skeleton.umd.min.js.map

package.json

 {
   "name": "@nejcm/react-skeleton",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "author": "Nejc Mursic <[e-mail]> (https://github.com/nejcm)",
@@ -49,3 +49,3 @@ "description": "React skeleton loader that allows customization with some predefined templates.",
     "tsc:watch": "tsc --watch",
-    "tsc:declaration": "tsc -p tsconfig.json --emitDeclarationOnly",
+    "tsc:declaration": "rimraf types && tsc -p tsconfig.json --emitDeclarationOnly",
     "build": "npm run clean && kcd-scripts build --bundle --no-clean --size-snapshot && npm run tsc:declaration",
@@ -82,3 +82,3 @@ "validate": "npm run format && npm run lint && npm run test:build",
     "@testing-library/user-event": "^12.1.0",
-    "@types/jest": "^26.0.8",
+    "@types/jest": "^26.0.9",
     "@types/node": "^14.0.27",
@@ -85,0 +85,0 @@ "@types/react": "^16.9.44",

types/components/Skeleton/components/Circle/index.d.ts

 import React from 'react';
-import { Styles } from '../../../../helpers';
-export interface CircleProps extends Styles {
+export interface CircleProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Element width
+     */
+    width?: string | number;
+    /**
+     * Element max width
+     */
+    maxWidth?: string | number;
+    /**
+     * Element min width
+     */
+    minWidth?: string | number;
+    /**
+     * Element height
+     */
+    height?: string | number;
+    /**
+     * Element max height
+     */
+    maxHeight?: string | number;
+    /**
+     * Element min height
+     */
+    minHeight?: string | number;
+    /**
+     * Specify element type "div"
+     */
     as?: string;
 }
-declare const Circle: React.SFC<CircleProps>;
+declare const Circle: React.FC<CircleProps>;
 export default Circle;

types/components/Skeleton/components/Rectangle/index.d.ts

 import React from 'react';
-import { Styles } from '../../../../helpers';
-export interface RectangleProps extends Styles {
+export interface RectangleProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Element width
+     */
+    width?: string | number;
+    /**
+     * Element max width
+     */
+    maxWidth?: string | number;
+    /**
+     * Element min width
+     */
+    minWidth?: string | number;
+    /**
+     * Element height
+     */
+    height?: string | number;
+    /**
+     * Element max height
+     */
+    maxHeight?: string | number;
+    /**
+     * Element min height
+     */
+    minHeight?: string | number;
+    /**
+     * Specify element type "div"
+     */
     as?: string;
 }
-declare const Rectangle: React.SFC<RectangleProps>;
+declare const Rectangle: React.FC<RectangleProps>;
 export default Rectangle;

types/components/Skeleton/index.d.ts

@@ -14,3 +14,3 @@ import React from 'react';
 }
-declare const Skeleton: React.SFC<SkeletonProps> & {
+declare const Skeleton: React.FC<SkeletonProps> & {
     Rectangle: typeof Rectangle;
@@ -17,0 +17,0 @@ Circle: typeof Circle;

types/components/Templates/Card/index.d.ts

@@ -29,2 +29,3 @@ import React from 'react';
 }
-export declare const Card: React.SFC<CardProps>;
+declare const Card: React.FC<CardProps>;
+export { Card };

types/components/Templates/Comment/index.d.ts

@@ -21,3 +21,2 @@ import React from 'react';
 }
-declare const Comment: React.SFC<CommentProps>;
-export { Comment };
+export declare const Comment: React.FC<CommentProps>;

types/components/Templates/Form/index.d.ts

@@ -29,2 +29,2 @@ import React from 'react';
 }
-export declare const Form: React.SFC<FormProps>;
+export declare const Form: React.FC<FormProps>;

types/components/Templates/Grid/index.d.ts

@@ -18,2 +18,2 @@ import React from 'react';
 }
-export declare const Grid: React.SFC<GridProps>;
+export declare const Grid: React.FC<GridProps>;

types/components/Templates/Paragraph/index.d.ts

@@ -21,2 +21,2 @@ import React from 'react';
 }
-export declare const Paragraph: React.SFC<ParagraphProps>;
+export declare const Paragraph: React.FC<ParagraphProps>;

types/components/Templates/Table/index.d.ts

@@ -25,2 +25,2 @@ import React from 'react';
 }
-export declare const Table: React.SFC<TableProps>;
+export declare const Table: React.FC<TableProps>;

types/helpers/index.d.ts

 /// <reference types="react" />
 export declare const measure2Css: (value: string | number | undefined | null) => string | undefined;
-export interface Styles extends React.HTMLAttributes<HTMLElement> {
+export interface Styles {
     /**
@@ -28,3 +28,5 @@ * Element width
     minHeight?: string | number;
+    style?: React.CSSProperties;
+    [key: string]: unknown;
 }
 export declare const extractStyles: ({ width, maxWidth, minWidth, height, maxHeight, minHeight, style, ...rest }: Styles) => React.HTMLAttributes<HTMLElement>;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

130441

increased by3.46%

Lines of code

1319

increased by5.6%

No dependency changes