#3: Replace react.createClass with ES6 class (closes #3)

.eslintrc

@@ -22,8 +22,8 @@
     "no-underscore-dangle": 0,
     "quotes": [2, "single"],
     "comma-dangle": 2,
+    "jsx-quotes": 1,
     "react/jsx-boolean-value": 1,
-    "react/jsx-quotes": 1,
     "react/jsx-no-undef": 1,
     "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,

package.json

@@ -33,12 +33,13 @@
   "homepage": "https://github.com/buildo/react-placeholder",
   "dependencies": {},
   "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",
@@ -49,6 +50,7 @@
     "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"

src/ReactPlaceholder.js

@@ -2,55 +2,52 @@ import React from 'react';
 import {omit} from 'lodash/object';
 import placeholders from './placeholders';
 
-const ReactFiller = React.createClass({
-
-  /* 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,
+export default class ReactFiller extends React.Component {
+
+  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();
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     if (!this.state.ready) {
@@ -60,7 +57,4 @@ const ReactFiller = React.createClass({
     }
   }
 
-});
-
-
-export default ReactFiller;
+}

src/index.js

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

src/placeholders/MediaBlock.js

@@ -1,35 +1,26 @@
 import React from 'react';
+import cx from 'classnames';
 import TextBlock from './TextBlock';
 import RoundShape from './RoundShape';
 
 
-const MediaBlock = React.createClass({
+export default class MediaBlock extends React.Component {
 
-  propTypes: {
+  static propTypes = {
     rows: React.PropTypes.number.isRequired,
     color: React.PropTypes.string.isRequired,
     style: React.PropTypes.object,
     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>
     );
   }
 
-});
-
-
-export default MediaBlock;
+}

src/placeholders/RectShape.js

@@ -1,36 +1,27 @@
 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: {
-    className: React.PropTypes.string,
+  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;
+
     const defaultStyle = {
-      backgroundColor: this.props.color,
+      backgroundColor: color,
       width: '100%',
       height: '100%',
       marginRight: 10
     };
+
     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

@@ -1,36 +1,27 @@
 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;
+
     const defaultStyles = {
-      backgroundColor: this.props.color,
+      backgroundColor: color,
       borderRadius: '500rem',
       width: '100%',
       height: '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

@@ -1,52 +1,47 @@
 import React from 'react';
+import cx from 'classnames';
 import TextRow from './TextRow';
 
 const widths = [97, 100, 94, 90, 98, 95, 98, 40];
 
-const TextBlock = React.createClass({
+export default class TextBlock extends React.Component {
 
-  propTypes: {
+  static propTypes = {
     rows: React.PropTypes.number.isRequired,
     color: React.PropTypes.string.isRequired,
     style: React.PropTypes.object,
     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()}
       </div>
     );
   }
 
-});
-
-
-export default TextBlock;
+}