react-placeholder - npm Package Compare versions

Comparing version 0.0.3 to 1.0.0

lib/index.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _ReactPlaceholder = require('./ReactPlaceholder');
 
-var _ReactPlaceholderJs = require('./ReactPlaceholder.js');
+var _ReactPlaceholder2 = _interopRequireDefault(_ReactPlaceholder);
 
-var _ReactPlaceholderJs2 = _interopRequireDefault(_ReactPlaceholderJs);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports['default'] = _ReactPlaceholderJs2['default'];
-module.exports = exports['default'];
+exports.default = _ReactPlaceholder2.default;

lib/placeholders/index.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.media = exports.text = exports.rect = exports.round = exports.textRow = exports.MediaBlock = exports.TextBlock = exports.RectShape = exports.RoundShape = exports.TextRow = undefined;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _TextRow2 = require('./TextRow');
 
-var _TextRow = require('./TextRow');
+var _TextRow3 = _interopRequireDefault(_TextRow2);
 
-var _TextRow2 = _interopRequireDefault(_TextRow);
+var _RoundShape2 = require('./RoundShape');
 
-var _RoundShape = require('./RoundShape');
+var _RoundShape3 = _interopRequireDefault(_RoundShape2);
 
-var _RoundShape2 = _interopRequireDefault(_RoundShape);
+var _RectShape2 = require('./RectShape');
 
-var _RectShape = require('./RectShape');
+var _RectShape3 = _interopRequireDefault(_RectShape2);
 
-var _RectShape2 = _interopRequireDefault(_RectShape);
+var _TextBlock2 = require('./TextBlock');
 
-var _TextBlock = require('./TextBlock');
+var _TextBlock3 = _interopRequireDefault(_TextBlock2);
 
-var _TextBlock2 = _interopRequireDefault(_TextBlock);
+var _MediaBlock2 = require('./MediaBlock');
 
-var _MediaBlock = require('./MediaBlock');
+var _MediaBlock3 = _interopRequireDefault(_MediaBlock2);
 
-var _MediaBlock2 = _interopRequireDefault(_MediaBlock);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+exports.TextRow = _TextRow3.default;
 // import Card from 'Card';
 
-exports['default'] = {
-  textRow: _TextRow2['default'],
-  round: _RoundShape2['default'],
-  rect: _RectShape2['default'],
-  text: _TextBlock2['default'],
-  media: _MediaBlock2['default']
-  // card:  Card
-  ,
-  TextRow: _TextRow2['default'],
-  RoundShape: _RoundShape2['default'],
-  RectShape: _RectShape2['default'],
-  TextBlock: _TextBlock2['default'],
-  MediaBlock: _MediaBlock2['default'] };
-module.exports = exports['default'];
+exports.RoundShape = _RoundShape3.default;
+exports.RectShape = _RectShape3.default;
+exports.TextBlock = _TextBlock3.default;
+exports.MediaBlock = _MediaBlock3.default;
+var textRow = exports.textRow = _TextRow3.default;
+var round = exports.round = _RoundShape3.default;
+var rect = exports.rect = _RectShape3.default;
+var text = exports.text = _TextBlock3.default;
+var media = exports.media = _MediaBlock3.default;

lib/placeholders/MediaBlock.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
 
 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; }; })();
+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; }; }();
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _class, _temp;
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -19,6 +18,2 @@
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _TextBlock = require('./TextBlock');
@@ -32,3 +27,11 @@
 
-var MediaBlock = (function (_React$Component) {
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var MediaBlock = (_temp = _class = function (_React$Component) {
   _inherits(MediaBlock, _React$Component);
@@ -39,35 +42,33 @@
 
-    _React$Component.apply(this, arguments);
+    return _possibleConstructorReturn(this, (MediaBlock.__proto__ || Object.getPrototypeOf(MediaBlock)).apply(this, arguments));
   }
 
-  MediaBlock.prototype.render = function render() {
-    var _props = this.props;
-    var className = _props.className;
-    var style = _props.style;
-    var color = _props.color;
-    var rows = _props.rows;
+  _createClass(MediaBlock, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          className = _props.className,
+          style = _props.style,
+          color = _props.color,
+          rows = _props.rows;
 
-    return _react2['default'].createElement(
-      'div',
-      { className: _classnames2['default']('media-block', className), style: _extends({}, style, { display: 'flex' }) },
-      _react2['default'].createElement(_RoundShape2['default'], { color: color, style: { minHeight: 55, width: 55, minWidth: 55, marginRight: 10 } }),
-      _react2['default'].createElement(_TextBlock2['default'], { color: color, rows: rows })
-    );
-  };
-
-  _createClass(MediaBlock, null, [{
-    key: 'propTypes',
-    value: {
-      rows: _react2['default'].PropTypes.number.isRequired,
-      color: _react2['default'].PropTypes.string.isRequired,
-      style: _react2['default'].PropTypes.object,
-      className: _react2['default'].PropTypes.string
-    },
-    enumerable: true
+      return _react2.default.createElement(
+        'div',
+        { className: 'media-block ' + className, style: _extends({}, style, { display: 'flex' }) },
+        _react2.default.createElement(_RoundShape2.default, {
+          color: color,
+          style: { minHeight: 55, width: 55, minWidth: 55, marginRight: 10 }
+        }),
+        _react2.default.createElement(_TextBlock2.default, { color: color, rows: rows })
+      );
+    }
   }]);
 
   return MediaBlock;
-})(_react2['default'].Component);
-
-exports['default'] = MediaBlock;
-module.exports = exports['default'];
+}(_react2.default.Component), _class.propTypes = {
+  rows: _react2.default.PropTypes.number.isRequired,
+  color: _react2.default.PropTypes.string.isRequired,
+  style: _react2.default.PropTypes.object,
+  className: _react2.default.PropTypes.string
+}, _temp);
+exports.default = MediaBlock;

lib/placeholders/RectShape.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
 
 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; }; })();
+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; }; }();
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _class, _temp;
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -19,7 +18,11 @@
 
-var _classnames = require('classnames');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _classnames2 = _interopRequireDefault(_classnames);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var RectShape = (function (_React$Component) {
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var RectShape = (_temp = _class = function (_React$Component) {
   _inherits(RectShape, _React$Component);
@@ -30,35 +33,31 @@
 
-    _React$Component.apply(this, arguments);
+    return _possibleConstructorReturn(this, (RectShape.__proto__ || Object.getPrototypeOf(RectShape)).apply(this, arguments));
   }
 
-  RectShape.prototype.render = function render() {
-    var _props = this.props;
-    var className = _props.className;
-    var style = _props.style;
-    var color = _props.color;
+  _createClass(RectShape, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          className = _props.className,
+          style = _props.style,
+          color = _props.color;
 
-    var defaultStyle = {
-      backgroundColor: color,
-      width: '100%',
-      height: '100%',
-      marginRight: 10
-    };
 
-    return _react2['default'].createElement('div', { className: _classnames2['default']('rect-shape', className), style: _extends({}, defaultStyle, style) });
-  };
+      var defaultStyle = {
+        backgroundColor: color,
+        width: '100%',
+        height: '100%',
+        marginRight: 10
+      };
 
-  _createClass(RectShape, null, [{
-    key: 'propTypes',
-    value: {
-      color: _react2['default'].PropTypes.string,
-      className: _react2['default'].PropTypes.string,
-      style: _react2['default'].PropTypes.object
-    },
-    enumerable: true
+      return _react2.default.createElement('div', { className: 'rect-shape ' + className, style: _extends({}, defaultStyle, style) });
+    }
   }]);
 
   return RectShape;
-})(_react2['default'].Component);
-
-exports['default'] = RectShape;
-module.exports = exports['default'];
+}(_react2.default.Component), _class.propTypes = {
+  color: _react2.default.PropTypes.string,
+  className: _react2.default.PropTypes.string,
+  style: _react2.default.PropTypes.object
+}, _temp);
+exports.default = RectShape;

lib/placeholders/RoundShape.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
 
 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; }; })();
+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; }; }();
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _class, _temp;
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -19,7 +18,11 @@
 
-var _classnames = require('classnames');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _classnames2 = _interopRequireDefault(_classnames);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var RoundShape = (function (_React$Component) {
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var RoundShape = (_temp = _class = function (_React$Component) {
   _inherits(RoundShape, _React$Component);
@@ -30,35 +33,31 @@
 
-    _React$Component.apply(this, arguments);
+    return _possibleConstructorReturn(this, (RoundShape.__proto__ || Object.getPrototypeOf(RoundShape)).apply(this, arguments));
   }
 
-  RoundShape.prototype.render = function render() {
-    var _props = this.props;
-    var className = _props.className;
-    var style = _props.style;
-    var color = _props.color;
+  _createClass(RoundShape, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          className = _props.className,
+          style = _props.style,
+          color = _props.color;
 
-    var defaultStyles = {
-      backgroundColor: color,
-      borderRadius: '500rem',
-      width: '100%',
-      height: '100%'
-    };
 
-    return _react2['default'].createElement('div', { className: _classnames2['default']('round-shape', className), style: _extends({}, defaultStyles, style) });
-  };
+      var defaultStyles = {
+        backgroundColor: color,
+        borderRadius: '500rem',
+        width: '100%',
+        height: '100%'
+      };
 
-  _createClass(RoundShape, null, [{
-    key: 'propTypes',
-    value: {
-      color: _react2['default'].PropTypes.string,
-      className: _react2['default'].PropTypes.string,
-      style: _react2['default'].PropTypes.object
-    },
-    enumerable: true
+      return _react2.default.createElement('div', { className: 'round-shape ' + className, style: _extends({}, defaultStyles, style) });
+    }
   }]);
 
   return RoundShape;
-})(_react2['default'].Component);
-
-exports['default'] = RoundShape;
-module.exports = exports['default'];
+}(_react2.default.Component), _class.propTypes = {
+  color: _react2.default.PropTypes.string,
+  className: _react2.default.PropTypes.string,
+  style: _react2.default.PropTypes.object
+}, _temp);
+exports.default = RoundShape;

lib/placeholders/TextBlock.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
 
 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; }; })();
+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; }; }();
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _class, _temp2;
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -19,6 +18,2 @@
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _TextRow = require('./TextRow');
@@ -28,67 +23,77 @@
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var widths = [97, 100, 94, 90, 98, 95, 98, 40];
 
-var TextBlock = (function (_React$Component) {
+var TextBlock = (_temp2 = _class = function (_React$Component) {
   _inherits(TextBlock, _React$Component);
 
   function TextBlock() {
-    var _this = this;
+    var _ref;
 
+    var _temp, _this, _ret;
+
     _classCallCheck(this, TextBlock);
 
-    _React$Component.apply(this, arguments);
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    this.getRowStyle = function (i) {
-      var _props = _this.props;
-      var rows = _props.rows;
-      var color = _props.color;
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TextBlock.__proto__ || Object.getPrototypeOf(TextBlock)).call.apply(_ref, [this].concat(args))), _this), _this.getRowStyle = function (i) {
+      var _this$props = _this.props,
+          rows = _this$props.rows,
+          color = _this$props.color;
 
-      var style = {
+
+      return {
         backgroundColor: color,
-        maxHeight: 100 / (rows * 2 - 1) + '%'
+        maxHeight: 100 / (rows * 2 - 1) + '%',
+        width: widths[(i + widths.length) % widths.length] + '%'
       };
+    }, _this.getRows = function () {
+      var _this$props2 = _this.props,
+          rows = _this$props2.rows,
+          lineSpacing = _this$props2.lineSpacing;
 
-      if (i % 2 === 0) {
-        style.width = widths[(i / 2 + widths.length) % widths.length] + '%';
-      }
-
-      return style;
-    };
-
-    this.getRows = function () {
-      var rows = _this.props.rows * 2 - 1;
-      var range = Array.apply(null, { length: rows });
+      var range = Array.apply(null, { length: rows }); // eslint-disable-line prefer-spread
       return range.map(function (x, i) {
-        return _react2['default'].createElement(_TextRow2['default'], { style: _this.getRowStyle(i), invisible: i % 2 > 0, key: i });
+        return _react2.default.createElement(_TextRow2.default, {
+          style: _this.getRowStyle(i),
+          lineSpacing: i !== 0 ? lineSpacing : 0,
+          key: i
+        });
       });
-    };
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
-  TextBlock.prototype.render = function render() {
-    var _props2 = this.props;
-    var style = _props2.style;
-    var className = _props2.className;
+  _createClass(TextBlock, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          style = _props.style,
+          className = _props.className;
 
-    return _react2['default'].createElement(
-      'div',
-      { className: _classnames2['default']('text-block', className), style: _extends({}, style, { width: '100%' }) },
-      this.getRows()
-    );
-  };
 
-  _createClass(TextBlock, null, [{
-    key: 'propTypes',
-    value: {
-      rows: _react2['default'].PropTypes.number.isRequired,
-      color: _react2['default'].PropTypes.string.isRequired,
-      style: _react2['default'].PropTypes.object,
-      className: _react2['default'].PropTypes.string
-    },
-    enumerable: true
+      return _react2.default.createElement(
+        'div',
+        { className: 'text-block ' + className, style: _extends({}, style, { width: '100%' }) },
+        this.getRows()
+      );
+    }
   }]);
 
   return TextBlock;
-})(_react2['default'].Component);
-
-exports['default'] = TextBlock;
-module.exports = exports['default'];
+}(_react2.default.Component), _class.propTypes = {
+  rows: _react2.default.PropTypes.number.isRequired,
+  color: _react2.default.PropTypes.string.isRequired,
+  lineSpacing: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]),
+  style: _react2.default.PropTypes.object,
+  className: _react2.default.PropTypes.string
+}, _temp2);
+exports.default = TextBlock;

lib/placeholders/TextRow.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
 
 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; }; })();
+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; }; }();
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _class, _temp;
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -19,7 +18,11 @@
 
-var _classnames = require('classnames');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _classnames2 = _interopRequireDefault(_classnames);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var TextRow = (function (_React$Component) {
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var TextRow = (_temp = _class = function (_React$Component) {
   _inherits(TextRow, _React$Component);
@@ -30,49 +33,40 @@
 
-    _React$Component.apply(this, arguments);
+    return _possibleConstructorReturn(this, (TextRow.__proto__ || Object.getPrototypeOf(TextRow)).apply(this, arguments));
   }
 
-  TextRow.prototype.render = function render() {
-    var _props = this.props;
-    var className = _props.className;
-    var maxHeight = _props.maxHeight;
-    var color = _props.color;
-    var invisible = _props.invisible;
-    var style = _props.style;
+  _createClass(TextRow, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          className = _props.className,
+          maxHeight = _props.maxHeight,
+          color = _props.color,
+          lineSpacing = _props.lineSpacing,
+          style = _props.style;
 
-    var defaultStyle = {
-      maxHeight: maxHeight,
-      width: '100%',
-      height: 8,
-      backgroundColor: color
-    };
 
-    return _react2['default'].createElement('div', {
-      className: _classnames2['default']('text-row', className, { invisible: invisible }),
-      style: _extends({}, defaultStyle, style, {
-        width: invisible ? 0 : style.width || defaultStyle.width
-      })
-    });
-  };
+      var defaultStyles = {
+        maxHeight: maxHeight,
+        width: '100%',
+        height: '1em',
+        backgroundColor: color,
+        marginTop: lineSpacing
+      };
 
-  _createClass(TextRow, null, [{
-    key: 'propTypes',
-    value: {
-      invisible: _react2['default'].PropTypes.bool,
-      className: _react2['default'].PropTypes.string,
-      color: _react2['default'].PropTypes.string,
-      style: _react2['default'].PropTypes.object
-    },
-    enumerable: true
-  }, {
-    key: 'defaultProps',
-    value: {
-      style: {}
-    },
-    enumerable: true
+      return _react2.default.createElement('div', {
+        className: 'text-row ' + className,
+        style: _extends({}, defaultStyles, style)
+      });
+    }
   }]);
 
   return TextRow;
-})(_react2['default'].Component);
-
-exports['default'] = TextRow;
-module.exports = exports['default'];
+}(_react2.default.Component), _class.propTypes = {
+  className: _react2.default.PropTypes.string,
+  color: _react2.default.PropTypes.string,
+  lineSpacing: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]),
+  style: _react2.default.PropTypes.object
+}, _class.defaultProps = {
+  lineSpacing: '0.7em'
+}, _temp);
+exports.default = TextRow;

lib/ReactPlaceholder.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
 
-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 _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; }; }();
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _class, _temp2;
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -17,31 +16,43 @@
 
-var _lodashObject = require('lodash/object');
+var _lodash = require('lodash.omit');
 
+var _lodash2 = _interopRequireDefault(_lodash);
+
 var _placeholders = require('./placeholders');
 
-var _placeholders2 = _interopRequireDefault(_placeholders);
+var placeholders = _interopRequireWildcard(_placeholders);
 
-var ReactFiller = (function (_React$Component) {
-  _inherits(ReactFiller, _React$Component);
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
-  function ReactFiller() {
-    var _this = this;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-    _classCallCheck(this, ReactFiller);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-    _React$Component.apply(this, arguments);
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-    this.state = {
-      ready: this.props.ready
-    };
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-    this.isReady = function () {
+var ReactPlaceholder = (_temp2 = _class = function (_React$Component) {
+  _inherits(ReactPlaceholder, _React$Component);
+
+  function ReactPlaceholder() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, ReactPlaceholder);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ReactPlaceholder.__proto__ || Object.getPrototypeOf(ReactPlaceholder)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      ready: _this.props.ready
+    }, _this.isReady = function () {
       return _this.props.firstLaunchOnly ? _this.state.ready : _this.props.ready;
-    };
+    }, _this.getFiller = function () {
+      var _this$props = _this.props,
+          type = _this$props.type,
+          customPlaceholder = _this$props.customPlaceholder;
 
-    this.getFiller = function () {
-      var _props = _this.props;
-      var type = _props.type;
-      var customPlaceholder = _props.customPlaceholder;
-
       if (customPlaceholder) {
@@ -51,46 +62,38 @@ return customPlaceholder;
 
-      var Placeholder = _placeholders2['default'][type];
-      var props = _lodashObject.omit(_this.props, ['children', 'ready', 'firstLaunchOnly', 'type']);
+      var Placeholder = placeholders[type];
+      var props = (0, _lodash2.default)(_this.props, ['children', 'ready', 'firstLaunchOnly', 'type']);
 
-      return _react2['default'].createElement(Placeholder, props);
-    };
+      return _react2.default.createElement(Placeholder, props);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
-  ReactFiller.prototype.render = function render() {
-    return this.isReady() ? this.props.children : this.getFiller();
-  };
-
-  ReactFiller.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    if (!this.state.ready) {
-      this.setState({
-        ready: nextProps.ready
-      });
+  _createClass(ReactPlaceholder, [{
+    key: 'render',
+    value: function render() {
+      return this.isReady() ? this.props.children : this.getFiller();
     }
-  };
-
-  _createClass(ReactFiller, null, [{
-    key: 'propTypes',
-    value: {
-      children: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.node, _react2['default'].PropTypes.element]).isRequired,
-      ready: _react2['default'].PropTypes.bool.isRequired,
-      firstLaunchOnly: _react2['default'].PropTypes.bool,
-      type: _react2['default'].PropTypes.oneOf(['text', 'media', 'textRow', 'rect', 'round']),
-      rows: _react2['default'].PropTypes.number,
-      color: _react2['default'].PropTypes.string,
-      customPlaceholder: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.node, _react2['default'].PropTypes.element])
-    },
-    enumerable: true
   }, {
-    key: 'defaultProps',
-    value: {
-      type: 'text',
-      color: '#CDCDCD'
-    },
-    enumerable: true
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (!this.state.ready) {
+        this.setState({
+          ready: nextProps.ready
+        });
+      }
+    }
   }]);
 
-  return ReactFiller;
-})(_react2['default'].Component);
-
-exports['default'] = ReactFiller;
-module.exports = exports['default'];
+  return ReactPlaceholder;
+}(_react2.default.Component), _class.propTypes = {
+  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.node, _react2.default.PropTypes.element]).isRequired,
+  ready: _react2.default.PropTypes.bool.isRequired,
+  firstLaunchOnly: _react2.default.PropTypes.bool,
+  type: _react2.default.PropTypes.oneOf(['text', 'media', 'textRow', 'rect', 'round']),
+  rows: _react2.default.PropTypes.number,
+  color: _react2.default.PropTypes.string,
+  customPlaceholder: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.node, _react2.default.PropTypes.element])
+}, _class.defaultProps = {
+  type: 'text',
+  color: '#CDCDCD'
+}, _temp2);
+exports.default = ReactPlaceholder;

package.json

 {
   "name": "react-placeholder",
-  "version": "0.0.3",
-  "description": "",
-  "main": "index.js",
+  "version": "1.0.0",
+  "description": "A React component to easily replicate your page with nice placeholders while the content is loading",
+  "main": "lib",
   "scripts": {
-    "test": "./node_modules/karma/bin/karma start",
-    "build": "rm -rf lib && mkdir lib && babel --loose --stage 0 --out-dir lib src",
-    "lint": "eslint src",
+    "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",
     "preversion": "npm run lint && npm run test && npm run build-examples",
     "prepublish": "npm run build",
-    "build-examples": "npm run clean && webpack --config examples/webpack.config.build.js --progress",
-    "start": "npm run clean && webpack-dev-server --config examples/webpack.config.js --progress --hot --inline",
-    "clean": "rm -f examples/bundle.js examples/bundle.js.map"
+    "build-examples": "npm run clean && webpack --config examples/webpack.config.build.babel.js --progress",
+    "start": "webpack-dev-server --config examples/webpack.config.babel.js --progress --hot --inline",
+    "clean": "rm -f examples/bundle.js examples/bundle.js.map",
+    "release-version": "smooth-release"
   },
@@ -33,30 +34,34 @@ "repository": {
   },
+  "files": [
+    "lib",
+    "index.d.ts"
+  ],
   "homepage": "https://github.com/buildo/react-placeholder",
-  "dependencies": {},
+  "typings": "lib/index.d.ts",
+  "dependencies": {
+    "lodash.omit": "^4.5.0"
+  },
   "devDependencies": {
-    "babel": "^5.8.12",
-    "babel-eslint": "^7.0.0",
-    "babel-loader": "^5.3.2",
-    "classnames": "^2.2.5",
-    "eslint": "^3.7.1",
+    "babel": "^6.23.0",
+    "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",
+    "enzyme": "^2.7.1",
+    "eslint": "^3.18.0",
     "eslint-config-buildo": "buildo/eslint-config",
-    "eslint-loader": "^1.1.1",
-    "expect": "^1.6.0",
-    "isparta-loader": "^0.2.0",
-    "karma": "^1.3.0",
-    "karma-bamboo-reporter": "^0.1.0",
-    "karma-chrome-launcher": "^0.1.12",
-    "karma-coverage": "^0.3.1",
-    "karma-mocha": "^0.1.10",
-    "karma-webpack": "^1.5.1",
-    "lodash": "^3.9.3",
-    "mocha": "^2.2.5",
-    "react": "^0.13.3",
-    "require-dir": "^0.3.0",
-    "webpack": "^1.9.10",
-    "webpack-dev-server": "^1.8.2"
+    "eslint-loader": "^1.7.0",
+    "jest": "^19.0.2",
+    "react": "^15",
+    "react-addons-test-utils": "^15.4.2",
+    "react-dom": "^15",
+    "smooth-release": "^7.0.1",
+    "webpack": "^1",
+    "webpack-dev-server": "^1"
   },
   "peerDependencies": {
-    "react": ">= 0.12.x"
+    "react": "^0.14 || ^15",
+    "react-dom": "^0.14 || ^15"
   }
 }

README.md

 # React Placeholder
-A React component to easily show a placeholder while loading. You can use one of the default set, or pass your own!
+A React component to easily replicate your page with nice placeholders while the content is loading.
+You can use a placeholder from the default set, or pass your own!
 
+![image](https://cloud.githubusercontent.com/assets/691940/24140211/78406120-0e1f-11e7-9738-af2b2434c50e.png)
+
 ```jsx
@@ -9,3 +12,3 @@ import ReactPlaceholder from 'react-placeholder';
   <div>
-    <ReactPlaceholder type='text' rows={6} ready={this.state.ready}>
+    <ReactPlaceholder type='media' rows={7} ready={this.state.ready}>
       <MyComponent />
@@ -16,2 +19,5 @@ </ReactPlaceholder>
 ```
+
+
+
 [**Live Demo**](https://rawgit.com/buildo/react-placeholder/master/examples/index.html)
@@ -21,3 +27,3 @@
 
-###Install
+### Install
 ```
@@ -27,3 +33,3 @@ npm install --save react-placeholder
 
-###Props
+### Props
 
@@ -46,3 +52,3 @@ ```jsx
 
-###Customization
+### Customization
 If the built-in set of placeholders is not enough, you can pass you own through the prop **"customPlaceholder"**
@@ -59,7 +65,7 @@
 ```jsx
-import {TextBlock, MediaBlock, TextRow, RectShape, RoundShape} from 'react-placeholder/placeholders';
+import {TextBlock, MediaBlock, TextRow, RectShape, RoundShape} from 'react-placeholder/lib/placeholders';
 
 const awesomePlaceholder (
   <div className='my-awesome-placeholder'>
-    <RectShape color='blue' style={{widht: 30, height: 80}}/>
+    <RectShape color='blue' style={{width: 30, height: 80}}/>
     <TextBlock rows={7} color='yellow'/>
@@ -74,6 +80,5 @@ </div>
 
-###Style
+### Style
 you can style the placeholder by passing **```className```** or **```style```** or by using the built-in classes:
 
 *"text-block", "media-block", "text-row", "rect-shape", "round-shape".*
-

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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

Dev dependency count

17

decreased by-19.05%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

78

increased by6.85%

Worsened metrics

Total package byte prevSize

31822

decreased by-90.73%

Dependency count

3

increased by200%

Number of package files

14

decreased by-50%

Lines of code

427

decreased by-69.95%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash.omit@^4.5.0

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedlodash.omit@4.5.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-dom@15.7.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.38(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removedreact@18.3.1(transitive)