react-placeholder - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

examples/examples.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React from 'react/addons';
 import ReactPlaceholder from '../src/ReactPlaceholder';
@@ -9,2 +9,4 @@ import {TextBlock, MediaBlock, TextRow, RectShape, RoundShape} from '../src/placeholders';
 
+  mixins: [React.addons.LinkedStateMixin],
+
   getInitialState() {
@@ -15,2 +17,4 @@ return {
       readyFirstLaunch: false,
+      textBlockRows: 6,
+      mediaBlockRows: 4
     };
@@ -57,6 +61,10 @@ },
         <p>"text"</p>
+        <div className='ui input'>
+          <span style={{lineHeight: '40px'}}>nº of rows:</span>
+          <input type='number' valueLink={this.linkState('textBlockRows')} style={{width: 80, marginLeft: 5}}/>
+        </div>
         <div className='ui segment'>
           <ReactPlaceholder
             ready={this.state.ready}
-            rows={4}
+            rows={this.state.textBlockRows}
             color='#F0F0F0'
@@ -69,2 +77,6 @@ className='my-text-block'>
         <p>"media"</p>
+        <div className='ui input'>
+          <span style={{lineHeight: '40px'}}>nº of rows:</span>
+          <input type='number' valueLink={this.linkState('mediaBlockRows')} style={{width: 80, marginLeft: 5}}/>
+        </div>
         <div className='ui segment'>
@@ -74,3 +86,3 @@ <ReactPlaceholder
             type='media'
-            rows={4}
+            rows={this.state.mediaBlockRows}
             color='#F0F0F0'
@@ -77,0 +89,0 @@ className='my-text-block'>

examples/webpack.config.js

 var path = require('path');
 var webpack = require('webpack');
+var webpackBase = require('./webpack.base');
+var assign = require('lodash/object').assign;
 
@@ -9,3 +11,3 @@ var paths = {
 
-module.exports = {
+module.exports = assign(webpackBase, {
 
@@ -17,7 +19,2 @@ entry: [
 
-  output: {
-    path: paths.EXAMPLES,
-    filename: 'bundle.js'
-  },
-
   devtool: 'source-map',
@@ -32,21 +29,2 @@
 
-  module: {
-    loaders: [
-      {
-        test: /\.jsx?$/,
-        loader: 'babel?stage=0&loose',
-        include: [paths.SRC, paths.EXAMPLES],
-        exclude: /node_modules/
-      }
-    ],
-    preLoaders: [
-      {
-        test: /\.jsx?$/,
-        loader: 'eslint',
-        include: paths.SRC,
-        exclude: /node_modules/
-      }
-    ]
-  },
-
   plugins: [
@@ -58,2 +36,2 @@ new webpack.DefinePlugin({
 
-};
+});

lib/index.js

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

lib/placeholders/MediaBlock.js

@@ -5,4 +5,12 @@ '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; }; })();
+
 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 _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');
@@ -12,2 +20,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _TextBlock = require('./TextBlock');
@@ -21,32 +33,41 @@
 
-var MediaBlock = _react2['default'].createClass({
-  displayName: 'MediaBlock',
+var MediaBlock = (function (_React$Component) {
+  _inherits(MediaBlock, _React$Component);
 
-  propTypes: {
-    rows: _react2['default'].PropTypes.number.isRequired,
-    color: _react2['default'].PropTypes.string.isRequired,
-    style: _react2['default'].PropTypes.object,
-    className: _react2['default'].PropTypes.string
-  },
+  function MediaBlock() {
+    _classCallCheck(this, MediaBlock);
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      className: '',
-      style: {}
-    };
-  },
+    _React$Component.apply(this, arguments);
+  }
 
-  render: function render() {
-    this.props.style.display = 'flex';
+  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;
+
     return _react2['default'].createElement(
       'div',
-      { className: 'media-block ' + this.props.className, style: this.props.style },
-      _react2['default'].createElement(_RoundShape2['default'], { color: this.props.color, style: { minHeight: 55, width: 55, minWidth: 55, marginRight: 10 } }),
-      _react2['default'].createElement(_TextBlock2['default'], { color: this.props.color, rows: this.props.rows })
+      { 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 MediaBlock;
+})(_react2['default'].Component);
+
 exports['default'] = MediaBlock;
 module.exports = exports['default'];

lib/placeholders/RectShape.js

@@ -5,4 +5,12 @@ '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; }; })();
+
 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 _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');
@@ -12,25 +20,23 @@
 
-var _lodashObject = require('lodash/object');
+var _classnames = require('classnames');
 
-var RectShape = _react2['default'].createClass({
-  displayName: 'RectShape',
+var _classnames2 = _interopRequireDefault(_classnames);
 
-  /* eslint-disable key-spacing */
-  propTypes: {
-    className: _react2['default'].PropTypes.string,
-    color: _react2['default'].PropTypes.string,
-    style: _react2['default'].PropTypes.object
-  },
-  /* eslint-enable key-spacing */
+var RectShape = (function (_React$Component) {
+  _inherits(RectShape, _React$Component);
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      className: '',
-      style: {}
-    };
-  },
+  function RectShape() {
+    _classCallCheck(this, RectShape);
 
-  render: function render() {
+    _React$Component.apply(this, arguments);
+  }
+
+  RectShape.prototype.render = function render() {
+    var _props = this.props;
+    var className = _props.className;
+    var style = _props.style;
+    var color = _props.color;
+
     var defaultStyle = {
-      backgroundColor: this.props.color,
+      backgroundColor: color,
       width: '100%',
@@ -40,8 +46,20 @@ height: '100%',
     };
-    return _react2['default'].createElement('div', { className: 'round-shape', style: _lodashObject.assign(defaultStyle, this.props.style) });
-  }
 
-});
+    return _react2['default'].createElement('div', { className: _classnames2['default']('rect-shape', className), style: _extends({}, defaultStyle, style) });
+  };
 
+  _createClass(RectShape, null, [{
+    key: 'propTypes',
+    value: {
+      color: _react2['default'].PropTypes.string,
+      className: _react2['default'].PropTypes.string,
+      style: _react2['default'].PropTypes.object
+    },
+    enumerable: true
+  }]);
+
+  return RectShape;
+})(_react2['default'].Component);
+
 exports['default'] = RectShape;
 module.exports = exports['default'];

lib/placeholders/RoundShape.js

@@ -5,4 +5,12 @@ '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; }; })();
+
 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 _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');
@@ -12,25 +20,23 @@
 
-var _lodashObject = require('lodash/object');
+var _classnames = require('classnames');
 
-var RoundShape = _react2['default'].createClass({
-  displayName: 'RoundShape',
+var _classnames2 = _interopRequireDefault(_classnames);
 
-  /* eslint-disable key-spacing */
-  propTypes: {
-    color: _react2['default'].PropTypes.string,
-    className: _react2['default'].PropTypes.string,
-    style: _react2['default'].PropTypes.object
-  },
-  /* eslint-enable key-spacing */
+var RoundShape = (function (_React$Component) {
+  _inherits(RoundShape, _React$Component);
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      className: '',
-      style: {}
-    };
-  },
+  function RoundShape() {
+    _classCallCheck(this, RoundShape);
 
-  render: function render() {
+    _React$Component.apply(this, arguments);
+  }
+
+  RoundShape.prototype.render = function render() {
+    var _props = this.props;
+    var className = _props.className;
+    var style = _props.style;
+    var color = _props.color;
+
     var defaultStyles = {
-      backgroundColor: this.props.color,
+      backgroundColor: color,
       borderRadius: '500rem',
@@ -40,8 +46,20 @@ width: '100%',
     };
-    return _react2['default'].createElement('div', { className: 'round-shape ' + this.props.className, style: _lodashObject.assign(defaultStyles, this.props.style) });
-  }
 
-});
+    return _react2['default'].createElement('div', { className: _classnames2['default']('round-shape', className), style: _extends({}, defaultStyles, style) });
+  };
 
+  _createClass(RoundShape, null, [{
+    key: 'propTypes',
+    value: {
+      color: _react2['default'].PropTypes.string,
+      className: _react2['default'].PropTypes.string,
+      style: _react2['default'].PropTypes.object
+    },
+    enumerable: true
+  }]);
+
+  return RoundShape;
+})(_react2['default'].Component);
+
 exports['default'] = RoundShape;
 module.exports = exports['default'];

lib/placeholders/TextBlock.js

@@ -5,4 +5,12 @@ '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; }; })();
+
 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 _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');
@@ -12,2 +20,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _TextRow = require('./TextRow');
@@ -19,53 +31,65 @@
 
-var TextBlock = _react2['default'].createClass({
-  displayName: 'TextBlock',
+var TextBlock = (function (_React$Component) {
+  _inherits(TextBlock, _React$Component);
 
-  propTypes: {
-    rows: _react2['default'].PropTypes.number.isRequired,
-    color: _react2['default'].PropTypes.string.isRequired,
-    style: _react2['default'].PropTypes.object,
-    className: _react2['default'].PropTypes.string
-  },
+  function TextBlock() {
+    var _this = this;
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      className: '',
-      style: {}
+    _classCallCheck(this, TextBlock);
+
+    _React$Component.apply(this, arguments);
+
+    this.getRowStyle = function (i) {
+      var _props = _this.props;
+      var rows = _props.rows;
+      var color = _props.color;
+
+      var style = {
+        backgroundColor: color,
+        maxHeight: 100 / (rows * 2 - 1) + '%'
+      };
+
+      if (i % 2 === 0) {
+        style.width = widths[(i / 2 + widths.length) % widths.length] + '%';
+      }
+
+      return style;
     };
-  },
 
-  getRowStyle: function getRowStyle(i) {
-    var rows = this.props.rows * 2 - 1;
-    var style = {
-      backgroundColor: this.props.color,
-      maxHeight: 100 / rows + '%'
+    this.getRows = function () {
+      var rows = _this.props.rows * 2 - 1;
+      var range = Array.apply(null, { length: rows });
+      return range.map(function (x, i) {
+        return _react2['default'].createElement(_TextRow2['default'], { style: _this.getRowStyle(i), invisible: i % 2 > 0, key: i });
+      });
     };
-    if (i % 2 === 0) {
-      style.width = widths[(i / 2 + widths.length) % widths.length] + '%';
-    }
-    return style;
-  },
+  }
 
-  getRows: function getRows() {
-    var _this = this;
+  TextBlock.prototype.render = function render() {
+    var _props2 = this.props;
+    var style = _props2.style;
+    var className = _props2.className;
 
-    var rows = this.props.rows * 2 - 1;
-    var range = Array.apply(null, { length: rows });
-    return range.map(function (x, i) {
-      return _react2['default'].createElement(_TextRow2['default'], { style: _this.getRowStyle(i), invisible: i % 2 > 0, key: i });
-    });
-  },
-
-  render: function render() {
-    this.props.style.width = '100%';
     return _react2['default'].createElement(
       'div',
-      { className: 'text-block ' + this.props.className, style: this.props.style },
+      { 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 TextBlock;
+})(_react2['default'].Component);
+
 exports['default'] = TextBlock;
 module.exports = exports['default'];

lib/placeholders/TextRow.js

@@ -5,4 +5,12 @@ '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; }; })();
+
 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 _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');
@@ -12,42 +20,59 @@
 
-var _lodashObject = require('lodash/object');
+var _classnames = require('classnames');
 
-var TextRow = _react2['default'].createClass({
-  displayName: 'TextRow',
+var _classnames2 = _interopRequireDefault(_classnames);
 
-  /* eslint-disable key-spacing */
-  propTypes: {
-    invisible: _react2['default'].PropTypes.bool,
-    className: _react2['default'].PropTypes.string,
-    color: _react2['default'].PropTypes.string,
-    style: _react2['default'].PropTypes.object
-  },
-  /* eslint-enable key-spacing */
+var TextRow = (function (_React$Component) {
+  _inherits(TextRow, _React$Component);
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      className: '',
-      style: {}
-    };
-  },
+  function TextRow() {
+    _classCallCheck(this, TextRow);
 
-  render: function render() {
-    var defaultStyles = {
+    _React$Component.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;
+
+    var defaultStyle = {
+      maxHeight: maxHeight,
       width: '100%',
       height: 8,
-      maxHeight: this.props.maxHeight,
-      backgroundColor: this.props.color
+      backgroundColor: color
     };
-    var style = _lodashObject.assign(defaultStyles, this.props.style);
-    if (this.props.invisible) {
-      style.width = 0;
-    }
 
-    var invisible = this.props.invisible ? 'invisible' : '';
-    return _react2['default'].createElement('div', { className: 'text-row ' + this.props.className + ' ' + invisible, style: style });
-  }
+    return _react2['default'].createElement('div', {
+      className: _classnames2['default']('text-row', className, { invisible: invisible }),
+      style: _extends({}, defaultStyle, style, {
+        width: invisible ? 0 : style.width || defaultStyle.width
+      })
+    });
+  };
 
-});
+  _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 TextRow;
+})(_react2['default'].Component);
+
 exports['default'] = TextRow;
 module.exports = exports['default'];

lib/ReactPlaceholder.js

@@ -5,4 +5,10 @@ 'use strict';
 
+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 }; }
 
+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');
@@ -18,48 +24,41 @@
 
-var ReactFiller = _react2['default'].createClass({
-  displayName: 'ReactFiller',
+var ReactFiller = (function (_React$Component) {
+  _inherits(ReactFiller, _React$Component);
 
-  /* eslint-disable key-spacing */
-  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])
-  },
-  /* eslint-enable key-spacing */
+  function ReactFiller() {
+    var _this = this;
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      type: 'text',
-      color: '#CDCDCD'
-    };
-  },
+    _classCallCheck(this, ReactFiller);
 
-  getInitialState: function getInitialState() {
-    return {
+    _React$Component.apply(this, arguments);
+
+    this.state = {
       ready: this.props.ready
     };
-  },
 
-  isReady: function isReady() {
-    return this.props.firstLaunchOnly ? this.state.ready : this.props.ready;
-  },
+    this.isReady = function () {
+      return _this.props.firstLaunchOnly ? _this.state.ready : _this.props.ready;
+    };
 
-  getFiller: function getFiller() {
-    if (this.props.customPlaceholder) {
-      return this.props.customPlaceholder;
-    }
-    var Placeholder = _placeholders2['default'][this.props.type];
-    var props = _lodashObject.omit(this.props, ['children', 'ready', 'firstLaunchOnly', 'type']);
-    return _react2['default'].createElement(Placeholder, props);
-  },
+    this.getFiller = function () {
+      var _props = _this.props;
+      var type = _props.type;
+      var customPlaceholder = _props.customPlaceholder;
 
-  render: function render() {
+      if (customPlaceholder) {
+        return customPlaceholder;
+      }
+
+      var Placeholder = _placeholders2['default'][type];
+      var props = _lodashObject.omit(_this.props, ['children', 'ready', 'firstLaunchOnly', 'type']);
+
+      return _react2['default'].createElement(Placeholder, props);
+    };
+  }
+
+  ReactFiller.prototype.render = function render() {
     return this.isReady() ? this.props.children : this.getFiller();
-  },
+  };
 
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+  ReactFiller.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
     if (!this.state.ready) {
@@ -70,7 +69,29 @@ this.setState({
     }
-  }
+  };
 
-});
+  _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
+  }]);
 
+  return ReactFiller;
+})(_react2['default'].Component);
+
 exports['default'] = ReactFiller;
 module.exports = exports['default'];

package.json

 {
   "name": "react-placeholder",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
@@ -10,6 +10,7 @@ "main": "index.js",
     "lint": "eslint src",
-    "preversion": "npm run lint && npm run test",
+    "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 -rf examples/bundle.js"
+    "clean": "rm -f examples/bundle.js examples/bundle.js.map"
   },
@@ -36,11 +37,12 @@ "repository": {
   "devDependencies": {
-    "babel": "^5.4.7",
-    "babel-eslint": "^3.1.11",
-    "babel-loader": "^5.1.3",
-    "eslint": "^0.23.0",
-    "eslint-loader": "^0.14.0",
-    "eslint-plugin-react": "^2.5.2",
+    "babel": "^5.8.12",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^5.3.2",
+    "classnames": "^2.2.5",
+    "eslint": "^3.7.1",
+    "eslint-config-buildo": "buildo/eslint-config",
+    "eslint-loader": "^1.1.1",
     "expect": "^1.6.0",
     "isparta-loader": "^0.2.0",
-    "karma": "^0.12.36",
+    "karma": "^1.3.0",
     "karma-bamboo-reporter": "^0.1.0",
@@ -53,2 +55,3 @@ "karma-chrome-launcher": "^0.1.12",
     "mocha": "^2.2.5",
+    "react": "^0.13.3",
     "require-dir": "^0.3.0",
@@ -55,0 +58,0 @@ "webpack": "^1.9.10",

README.md

@@ -15,4 +15,5 @@ # React Placeholder
 ```
+[**Live Demo**](https://rawgit.com/buildo/react-placeholder/master/examples/index.html)
 
-you can find more exmaples [here](https://github.com/buildo/react-placeholder/tree/master/examples)
+you can find more examples [here](https://github.com/buildo/react-placeholder/tree/master/examples)
 
@@ -19,0 +20,0 @@ ###Install

src/index.js

@@ -1,2 +0,1 @@
-import ReactPlaceholder from 'ReactPlaceholder.js';
-export default ReactPlaceholder;
+export default './ReactPlaceholder.js';

src/placeholders/MediaBlock.js

 import React from 'react';
+import cx from 'classnames';
 import TextBlock from './TextBlock';
@@ -6,5 +7,5 @@ import RoundShape from './RoundShape';
 
-const MediaBlock = React.createClass({
+export default class MediaBlock extends React.Component {
 
-  propTypes: {
+  static propTypes = {
     rows: React.PropTypes.number.isRequired,
@@ -14,17 +15,10 @@ color: React.PropTypes.string.isRequired,
     className: React.PropTypes.string
-  },
+  }
 
-  getDefaultProps() {
-    return {
-      className: '',
-      style: {}
-    };
-  },
-
   render() {
-    this.props.style.display = 'flex';
+    const { className, style, color, rows } = this.props;
     return (
-      <div className={`media-block ${this.props.className}`} style={this.props.style}>
-        <RoundShape color={this.props.color} style={{minHeight: 55, width: 55, minWidth: 55, marginRight: 10}}/>
-        <TextBlock color={this.props.color} rows={this.props.rows} />
+      <div className={cx('media-block', className)} style={{ ...style, display: 'flex' }}>
+        <RoundShape color={color} style={{ minHeight: 55, width: 55, minWidth: 55, marginRight: 10 }}/>
+        <TextBlock color={color} rows={rows} />
       </div>
@@ -34,5 +28,2 @@ );
 
-});
-
-
-export default MediaBlock;
+}

src/placeholders/RectShape.js

 import React from 'react';
-import {assign} from 'lodash/object';
+import cx from 'classnames';
 
-const RectShape = React.createClass({
+export default class RectShape extends React.Component {
 
-  /* eslint-disable key-spacing */
-  propTypes: {
+  static propTypes = {
+    color: React.PropTypes.string,
     className: React.PropTypes.string,
-    color: React.PropTypes.string,
     style: React.PropTypes.object
-  },
-  /* eslint-enable key-spacing */
+  }
 
-  getDefaultProps() {
-    return {
-      className: '',
-      style: {}
-    };
-  },
+  render() {
+    const { className, style, color } = this.props;
 
-  render() {
     const defaultStyle = {
-      backgroundColor: this.props.color,
+      backgroundColor: color,
       width: '100%',
@@ -28,10 +21,8 @@ height: '100%',
     };
+
     return (
-      <div className='round-shape' style={assign(defaultStyle, this.props.style)}/>
+      <div className={cx('rect-shape', className)} style={{ ...defaultStyle, ...style }}/>
     );
   }
 
-});
-
-
-export default RectShape;
+}

src/placeholders/RoundShape.js

 import React from 'react';
-import {assign} from 'lodash/object';
+import cx from 'classnames';
 
-const RoundShape = React.createClass({
+export default class RoundShape extends React.Component {
 
-  /* eslint-disable key-spacing */
-  propTypes: {
+  static propTypes = {
     color: React.PropTypes.string,
     className: React.PropTypes.string,
     style: React.PropTypes.object
-  },
-  /* eslint-enable key-spacing */
+  }
 
-  getDefaultProps() {
-    return {
-      className: '',
-      style: {}
-    };
-  },
+  render() {
+    const { className, style, color } = this.props;
 
-  render() {
     const defaultStyles = {
-      backgroundColor: this.props.color,
+      backgroundColor: color,
       borderRadius: '500rem',
@@ -28,10 +21,8 @@ width: '100%',
     };
+
     return (
-      <div className={`round-shape ${this.props.className}`} style={assign(defaultStyles, this.props.style)}/>
+      <div className={cx('round-shape', className)} style={{ ...defaultStyles, ...style }}/>
     );
   }
 
-});
-
-
-export default RoundShape;
+}

src/placeholders/TextBlock.js

 import React from 'react';
+import cx from 'classnames';
 import TextRow from './TextRow';
@@ -6,5 +7,5 @@
 
-const TextBlock = React.createClass({
+export default class TextBlock extends React.Component {
 
-  propTypes: {
+  static propTypes = {
     rows: React.PropTypes.number.isRequired,
@@ -14,33 +15,30 @@ color: React.PropTypes.string.isRequired,
     className: React.PropTypes.string
-  },
+  }
 
-  getDefaultProps() {
-    return {
-      className: '',
-      style: {}
-    };
-  },
+  getRowStyle = (i) => {
+    const { rows, color } = this.props;
 
-  getRowStyle(i) {
-    const rows = (this.props.rows * 2) - 1;
     const style = {
-      backgroundColor: this.props.color,
-      maxHeight: (100 / rows) + '%'
+      backgroundColor: color,
+      maxHeight: (100 / (rows * 2 - 1)) + '%'
     };
+
     if (i % 2 === 0) {
       style.width = widths[((i / 2) + widths.length) % widths.length] + '%';
     }
+
     return style;
-  },
+  }
 
-  getRows() {
+  getRows = () => {
     const rows = (this.props.rows * 2) - 1;
     const range = Array.apply(null, {length: rows});
     return range.map((x, i) => <TextRow style={this.getRowStyle(i)} invisible={i % 2 > 0} key={i}/>);
-  },
+  }
 
   render() {
-    this.props.style.width = '100%';
+    const { style, className } = this.props;
+
     return (
-      <div className={`text-block ${this.props.className}`} style={this.props.style}>
+      <div className={cx('text-block', className)} style={{ ...style, width: '100%' }}>
         {this.getRows()}
@@ -51,5 +49,2 @@ </div>
 
-});
-
-
-export default TextBlock;
+}

src/placeholders/TextRow.js

 import React from 'react';
-import {assign} from 'lodash/object';
+import cx from 'classnames';
 
-const TextRow = React.createClass({
+export default class TextRow extends React.Component {
 
-  /* eslint-disable key-spacing */
-  propTypes: {
+  static propTypes = {
     invisible: React.PropTypes.bool,
@@ -12,33 +11,30 @@ className: React.PropTypes.string,
     style: React.PropTypes.object
-  },
-  /* eslint-enable key-spacing */
+  }
 
-  getDefaultProps() {
-    return {
-      className: '',
-      style: {}
-    };
-  },
+  static defaultProps = {
+    style: {}
+  }
 
   render() {
-    const defaultStyles = {
+    const { className, maxHeight, color, invisible, style } = this.props;
+
+    const defaultStyle = {
+      maxHeight,
       width: '100%',
       height: 8,
-      maxHeight: this.props.maxHeight,
-      backgroundColor: this.props.color
+      backgroundColor: color
     };
-    const style = assign(defaultStyles, this.props.style);
-    if (this.props.invisible) {
-      style.width = 0;
-    }
 
-    const invisible = this.props.invisible ? 'invisible' : '';
     return (
-      <div className={`text-row ${this.props.className} ${invisible}`} style={style}/>
+      <div
+        className={cx('text-row', className, { invisible })}
+        style={{
+          ...defaultStyle,
+          ...style,
+          width: invisible ? 0 : (style.width || defaultStyle.width)
+        }}
+      />
     );
   }
 
-});
-
-
-export default TextRow;
+}

src/ReactPlaceholder.js

@@ -5,51 +5,48 @@ import React from 'react';
 
-const ReactFiller = React.createClass({
+export default class ReactFiller extends React.Component {
 
-  /* eslint-disable key-spacing */
-  propTypes: {
-    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,
+  static propTypes = {
+    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
-                       ])
-  },
-  /* eslint-enable key-spacing */
+      React.PropTypes.node,
+      React.PropTypes.element
+    ])
+  }
 
-  getDefaultProps() {
-    return {
-      type: 'text',
-      color: '#CDCDCD'
-    };
-  },
+  static defaultProps = {
+    type: 'text',
+    color: '#CDCDCD'
+  }
 
-  getInitialState() {
-    return {
-      ready: this.props.ready
-    };
-  },
+  state = {
+    ready: this.props.ready
+  }
 
-  isReady() {
-    return this.props.firstLaunchOnly ? this.state.ready : this.props.ready;
-  },
+  isReady = () => (
+    this.props.firstLaunchOnly ? this.state.ready : this.props.ready
+  )
 
-  getFiller() {
-    if (this.props.customPlaceholder) {
-      return this.props.customPlaceholder;
+  getFiller = () => {
+    const { type, customPlaceholder } = this.props;
+    if (customPlaceholder) {
+      return customPlaceholder;
     }
-  const Placeholder = placeholders[this.props.type];
+
+    const Placeholder = placeholders[type];
     const props = omit(this.props, ['children', 'ready', 'firstLaunchOnly', 'type']);
+
     return <Placeholder {...props} />;
-  },
+  }
 
   render() {
     return this.isReady() ? this.props.children : this.getFiller();
-  },
+  }
 
@@ -64,5 +61,2 @@ componentWillReceiveProps(nextProps) {
 
-});
-
-
-export default ReactFiller;
+}

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

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

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

Number of package files

28

increased by7.69%

Number of lines in readme file

73

increased by1.39%

Worsened metrics

Total package byte prevSize

343123

decreased by-79.98%

Dev dependency count

21

increased by10.53%

Lines of code

1417

decreased by-93.75%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes