React Perf in dev mode // Smarter background component #3240

js/package.json

@@ -102,6 +102,7 @@
     "postcss-nested": "^1.0.0",
     "postcss-simple-vars": "^3.0.0",
     "raw-loader": "^0.5.1",
+    "react-addons-perf": "~15.3.2",
     "react-addons-test-utils": "~15.3.2",
     "react-copy-to-clipboard": "^4.2.3",
     "react-dom": "~15.3.2",

js/src/index.js

@@ -46,6 +46,12 @@ import './index.html';
 
 injectTapEventPlugin();
 
+if (process.env.NODE_ENV === 'development') {
+  // Expose the React Performance Tools on the`window` object
+  const Perf = require('react-addons-perf');
+  window.Perf = Perf;
+}
+
 const AUTH_HASH = '#/auth?';
 const parityUrl = process.env.PARITY_URL ||
   (

js/src/ui/ParityBackground/parityBackground.js

@@ -16,26 +16,17 @@
 
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 
 class ParityBackground extends Component {
-  static contextTypes = {
-    muiTheme: PropTypes.object.isRequired
-  }
-
   static propTypes = {
+    style: PropTypes.object.isRequired,
     children: PropTypes.node,
     className: PropTypes.string,
-    gradient: PropTypes.string,
-    seed: PropTypes.any,
-    settings: PropTypes.object.isRequired,
     onClick: PropTypes.func
-  }
+  };
 
   render () {
-    const { muiTheme } = this.context;
+    const { children, className, style, onClick } = this.props;
-    const { children, className, gradient, seed, settings, onClick } = this.props;
-    const style = muiTheme.parity.getBackgroundStyle(gradient, seed || settings.backgroundSeed);
 
     return (
       <div
@@ -48,17 +39,29 @@ class ParityBackground extends Component {
   }
 }
 
-function mapStateToProps (state) {
+function mapStateToProps (_, initProps) {
-  const { settings } = state;
+  const { gradient, seed, muiTheme } = initProps;
 
-  return { settings };
+  let _seed = seed;
+  let _props = { style: muiTheme.parity.getBackgroundStyle(gradient, seed) };
+
+  return (state, props) => {
+    const { backgroundSeed } = state.settings;
+    const { seed } = props;
+
+    const newSeed = seed || backgroundSeed;
+
+    if (newSeed === _seed) {
+      return _props;
     }
 
-function mapDispatchToProps (dispatch) {
+    _seed = newSeed;
-  return bindActionCreators({}, dispatch);
+    _props = { style: muiTheme.parity.getBackgroundStyle(gradient, newSeed) };
+
+    return _props;
+  };
 }
 
 export default connect(
-  mapStateToProps,
+  mapStateToProps
-  mapDispatchToProps
 )(ParityBackground);

js/src/views/Application/Container/container.js

@@ -22,6 +22,10 @@ import { Errors, ParityBackground, Tooltips } from '../../../ui';
 import styles from '../application.css';
 
 export default class Container extends Component {
+  static contextTypes = {
+    muiTheme: PropTypes.object.isRequired
+  };
+
   static propTypes = {
     children: PropTypes.node.isRequired,
     showFirstRun: PropTypes.bool,
@@ -30,9 +34,10 @@ export default class Container extends Component {
 
   render () {
     const { children, showFirstRun, onCloseFirstRun } = this.props;
+    const { muiTheme } = this.context;
 
     return (
-      <ParityBackground className={ styles.container }>
+      <ParityBackground className={ styles.container } muiTheme={ muiTheme }>
         <FirstRun
           visible={ showFirstRun }
           onClose={ onCloseFirstRun } />

js/src/views/ParityBar/parityBar.js

@@ -28,6 +28,10 @@ import imagesEthcoreBlock from '../../../assets/images/parity-logo-white-no-text
 import styles from './parityBar.css';
 
 class ParityBar extends Component {
+  static contextTypes = {
+    muiTheme: PropTypes.object.isRequired
+  };
+
   static propTypes = {
     pending: PropTypes.array,
     dapp: PropTypes.bool
@@ -62,6 +66,7 @@ class ParityBar extends Component {
 
   renderBar () {
     const { dapp } = this.props;
+    const { muiTheme } = this.context;
 
     if (!dapp) {
       return null;
@@ -75,7 +80,7 @@ class ParityBar extends Component {
 
     return (
       <div className={ styles.bar }>
-        <ParityBackground className={ styles.corner }>
+        <ParityBackground className={ styles.corner } muiTheme={ muiTheme }>
           <div className={ styles.cornercolor }>
             <Link to='/apps'>
               <Button
@@ -95,9 +100,11 @@ class ParityBar extends Component {
   }
 
   renderExpanded () {
+    const { muiTheme } = this.context;
+
     return (
       <div className={ styles.overlay }>
-        <ParityBackground className={ styles.expanded }>
+        <ParityBackground className={ styles.expanded } muiTheme={ muiTheme }>
           <div className={ styles.header }>
             <div className={ styles.title }>
               <ContainerTitle title='Parity Signer: Pending' />

js/src/views/Settings/Background/background.js

@@ -81,6 +81,7 @@ class Background extends Component {
   renderBackgrounds () {
     const { settings } = this.props;
     const { seeds } = this.state;
+    const { muiTheme } = this.context;
 
     return seeds.map((seed, index) => {
       return (
@@ -89,7 +90,9 @@ class Background extends Component {
             <ParityBackground
               className={ settings.backgroundSeed === seed ? styles.seedactive : styles.seed }
               seed={ seed }
-              onClick={ this.onSelect(seed) } />
+              onClick={ this.onSelect(seed) }
+              muiTheme={ muiTheme }
+            />
           </div>
         </div>
       );