react-loading-skeleton-placeholders - npm Package Compare versions

Comparing version 0.2.2 to 1.0.0

lib/package.json

@@ -8,3 +8,3 @@ {
   },
-  "version": "0.2.2",
+  "version": "1.0.0",
   "main": "./index.js",
@@ -11,0 +11,0 @@ "keywords": [

lib/Skeleton/Skeleton.js

@@ -15,2 +15,15 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+var skeletonFlexRowStyle = {
+  display: 'flex',
+  flexDirection: 'row'
+};
+
+var boneFlexRowStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-end',
+  width: '90%',
+  marginLeft: '15px'
+};
+
 /** The Skeleton can be used to dynamically generate bones.  */
@@ -42,7 +55,9 @@
           skull = _props.skull,
-          amount = _props.amount;
+          amount = _props.amount,
+          direction = _props.direction;
 
+      var skeleton = [];
       var bones = [];
       if (skull) {
-        bones.push(React.createElement(Skull, { key: '0-0' }));
+        skeleton.push(React.createElement(Skull, { key: '0-0' }));
       }
@@ -54,4 +69,13 @@ for (var i = 0; i < amount; i++) {
         "div",
-        { className: this.getAnimation() },
-        bones
+        { className: this.getAnimation(), style: direction === 'row' ? skeletonFlexRowStyle : null },
+        React.createElement(
+          "div",
+          null,
+          skeleton
+        ),
+        React.createElement(
+          "div",
+          { style: direction === 'row' ? boneFlexRowStyle : null },
+          bones
+        )
       );
@@ -70,3 +94,5 @@ }
   /** Fade bones in and out  */
-  animate: PropTypes.bool
+  animate: PropTypes.bool,
+  /** Column or Row   */
+  direction: PropTypes.oneOf(['column', 'row'])
 };
@@ -77,5 +103,6 @@
   amount: 1,
-  animate: true
+  animate: true,
+  direction: 'column'
 };
 
 export default Skeleton;

package.json

 {
   "name": "react-loading-skeleton-placeholders",
-  "version": "0.2.2",
+  "version": "1.0.0",
   "main": "./lib/index.js",
@@ -5,0 +5,0 @@ "engines": {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20284

increased by3.35%

Lines of code

189

increased by15.24%

Number of low quality alerts

0

decreased by-100%

No dependency changes