react-placeholder - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

CHANGELOG.md

@@ -5,2 +5,13 @@ #  Change Log
 
+## [v1.0.3](https://github.com/buildo/react-placeholder/tree/v1.0.3) (2017-05-31)
+[Full Changelog](https://github.com/buildo/react-placeholder/compare/v1.0.2...v1.0.3)
+
+#### New features:
+
+- animation support [#27](https://github.com/buildo/react-placeholder/issues/27)
+
+#### Fixes (bugs & defects):
+
+- Rectangle placeholder without className sets class to undefined [#24](https://github.com/buildo/react-placeholder/issues/24)
+
 ## [v1.0.2](https://github.com/buildo/react-placeholder/tree/v1.0.2) (2017-04-25)
@@ -7,0 +18,0 @@ [Full Changelog](https://github.com/buildo/react-placeholder/compare/v1.0.1...v1.0.2)

lib/placeholders/MediaBlock.js

@@ -56,5 +56,10 @@ 'use strict';
 
+
+      var classes = ['media-block', className].filter(function (c) {
+        return c;
+      }).join(' ');
+
       return _react2.default.createElement(
         'div',
-        { className: 'media-block ' + className, style: _extends({}, style, { display: 'flex' }) },
+        { className: classes, style: _extends({}, style, { display: 'flex' }) },
         _react2.default.createElement(_RoundShape2.default, {
@@ -61,0 +66,0 @@ color: color,

lib/placeholders/RectShape.js

@@ -55,3 +55,7 @@ 'use strict';
 
-      return _react2.default.createElement('div', { className: 'rect-shape ' + className, style: _extends({}, defaultStyle, style) });
+      var classes = ['rect-shape', className].filter(function (c) {
+        return c;
+      }).join(' ');
+
+      return _react2.default.createElement('div', { className: classes, style: _extends({}, defaultStyle, style) });
     }
@@ -58,0 +62,0 @@ }]);

lib/placeholders/RoundShape.js

@@ -55,3 +55,7 @@ 'use strict';
 
-      return _react2.default.createElement('div', { className: 'round-shape ' + className, style: _extends({}, defaultStyles, style) });
+      var classes = ['round-shape', className].filter(function (c) {
+        return c;
+      }).join(' ');
+
+      return _react2.default.createElement('div', { className: classes, style: _extends({}, defaultStyles, style) });
     }
@@ -58,0 +62,0 @@ }]);

lib/placeholders/TextBlock.js

@@ -85,5 +85,9 @@ 'use strict';
 
+      var classes = ['text-block', className].filter(function (c) {
+        return c;
+      }).join(' ');
+
       return _react2.default.createElement(
         'div',
-        { className: 'text-block ' + className, style: _extends({}, style, { width: '100%' }) },
+        { className: classes, style: _extends({}, style, { width: '100%' }) },
         this.getRows()
@@ -90,0 +94,0 @@ );

lib/placeholders/TextRow.js

@@ -58,4 +58,8 @@ 'use strict';
 
+      var classes = ['text-row', className].filter(function (c) {
+        return c;
+      }).join(' ');
+
       return _react2.default.createElement('div', {
-        className: 'text-row ' + className,
+        className: classes,
         style: _extends({}, defaultStyles, style)
@@ -62,0 +66,0 @@ });

lib/ReactPlaceholder.js

@@ -8,2 +8,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 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; }; }();
@@ -56,10 +58,11 @@
     }, _this.getFiller = function () {
-      // eslint-disable-next-line no-unused-vars
       var _this$props = _this.props,
+          firstLaunchOnly = _this$props.firstLaunchOnly,
+          children = _this$props.children,
+          ready = _this$props.ready,
+          className = _this$props.className,
           type = _this$props.type,
           customPlaceholder = _this$props.customPlaceholder,
-          children = _this$props.children,
-          ready = _this$props.ready,
-          firstLaunchOnly = _this$props.firstLaunchOnly,
-          rest = _objectWithoutProperties(_this$props, ['type', 'customPlaceholder', 'children', 'ready', 'firstLaunchOnly']);
+          showLoadingAnimation = _this$props.showLoadingAnimation,
+          rest = _objectWithoutProperties(_this$props, ['firstLaunchOnly', 'children', 'ready', 'className', 'type', 'customPlaceholder', 'showLoadingAnimation']);
 
@@ -70,5 +73,9 @@ if (customPlaceholder) {
 
+      var classes = showLoadingAnimation ? ['show-loading-animation', className].filter(function (c) {
+        return c;
+      }).join(' ') : className;
+
       var Placeholder = placeholders[type];
 
-      return _react2.default.createElement(Placeholder, rest);
+      return _react2.default.createElement(Placeholder, _extends({}, rest, { className: classes }));
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -101,2 +108,3 @@ }
   color: _propTypes2.default.string,
+  showLoadingAnimation: _propTypes2.default.bool,
   customPlaceholder: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.element])
@@ -103,0 +111,0 @@ }, _class.defaultProps = {

package.json

 {
   "name": "react-placeholder",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A React component to easily replicate your page with nice placeholders while the content is loading",
@@ -8,4 +8,5 @@ "main": "lib",
     "test": "jest",
-    "build": "rm -rf lib && mkdir lib && babel src -d lib && rsync -a --include '*/' --include '*.d.ts' --exclude '*' src/ lib/",
-    "lint": "eslint src examples/examples.js",
+    "build": "rm -rf lib && mkdir lib && node-sass src --importer -o lib && babel src -d lib && rsync -a --include '*/' --include '*.d.ts' --exclude '*' src/ lib/",
+    "lint": "scriptoni lint src examples/examples.js",
+    "lint-fix": "scriptoni lint src examples/examples.js --fix",
     "preversion": "npm run lint && npm run test && npm run build-examples",
@@ -47,15 +48,19 @@ "prepublish": "npm run build",
     "babel-cli": "^6.24.0",
-    "babel-eslint": "^7.2.0",
     "babel-jest": "^19.0.0",
     "babel-loader": "^6.4.1",
     "babel-preset-buildo": "^0.1.1",
+    "css-loader": "^0.28.3",
     "enzyme": "^2.7.1",
-    "eslint": "^3.18.0",
-    "eslint-config-buildo": "buildo/eslint-config",
     "eslint-loader": "^1.7.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "html-webpack-plugin": "^2.28.0",
     "jest": "^19.0.2",
+    "node-sass": "4.5.2",
     "react": "^15",
     "react-addons-test-utils": "^15.4.2",
     "react-dom": "^15",
+    "sass-loader": "^4.1.1",
+    "scriptoni": "^0.4.4",
     "smooth-release": "^8.0.0",
+    "style-loader": "^0.17.0",
     "webpack": "^1",
@@ -62,0 +67,0 @@ "webpack-dev-server": "^1"

README.md

@@ -21,3 +21,3 @@ # React Placeholder
 
-[**Live Demo**](https://rawgit.com/buildo/react-placeholder/master/examples/index.html)
+[**Live Demo**](https://rawgit.com/buildo/react-placeholder/master/examples/build/index.html)
 
@@ -34,15 +34,16 @@ you can find more examples [here](https://github.com/buildo/react-placeholder/tree/master/examples)
 ```jsx
-children:          React.PropTypes.oneOfType([
-                      React.PropTypes.node,
-                      React.PropTypes.element
-                   ]).isRequired,
-ready:             React.PropTypes.bool.isRequired,
-firstLaunchOnly:   React.PropTypes.bool,
-type:              React.PropTypes.oneOf(['text', 'media', 'textRow', 'rect', 'round']),
-rows:              React.PropTypes.number,
-color:             React.PropTypes.string,
-customPlaceholder: React.PropTypes.oneOfType([
-                      React.PropTypes.node,
-                      React.PropTypes.element
-                   ])
+children:             PropTypes.oneOfType([
+                         PropTypes.node,
+                         PropTypes.element
+                      ]).isRequired,
+ready:                PropTypes.bool.isRequired,
+firstLaunchOnly:      PropTypes.bool,
+showLoadingAnimation: PropTypes.bool,
+type:                 PropTypes.oneOf(['text', 'media', 'textRow', 'rect', 'round']),
+rows:                 PropTypes.number,
+color:                PropTypes.string,
+customPlaceholder:    PropTypes.oneOfType([
+                         PropTypes.node,
+                         PropTypes.element
+                      ])
 ```
@@ -49,0 +50,0 @@

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

35342

increased by6.36%

Number of package files

15

increased by7.14%

Lines of code

475

increased by7.47%

Number of lines in readme file

79

increased by1.28%

Worsened metrics

Dev dependency count

21

increased by23.53%

No dependency changes