From 6ec432dab77ed9d3d95d2eb89557f510417cb597 Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Wed, 28 Oct 2015 17:22:14 +0100
Subject: [PATCH] Base crossfade + passage a React 0.14

---
 css/style.css                              | 22 ++++++++++++++++++++--
 package.json                               |  4 +++-
 src/app.js                                 |  5 +++--
 src/components/edit/tree-item.js           |  4 ++--
 src/components/launcher/crossfade-image.js | 20 ++++++--------------
 src/components/mixins/lazy-load.js         |  4 ++--
 6 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/css/style.css b/css/style.css
index 92e6a6c..d2ca632 100644
--- a/css/style.css
+++ b/css/style.css
@@ -59,8 +59,8 @@ html, body {
   z-index: -1;
 }
 
-.launcher .crossfade-image > .top,
-.launcher .crossfade-image > .bottom {
+.launcher .crossfade-image .top,
+.launcher .crossfade-image .bottom {
   position: absolute;
   left: 0;
   right: 0;
@@ -319,6 +319,24 @@ html, body {
 
 /* Animations */
 
+.crossfade-enter {
+  opacity: 0.01;
+}
+
+.crossfade-enter.crossfade-enter-active {
+  opacity: 1;
+  transition: opacity 250ms ease-in;
+}
+
+.example-leave {
+  opacity: 1;
+}
+
+.crossfade-leave.crossfade-leave-active {
+  opacity: 0.01;
+  transition: opacity 250ms ease-in;
+}
+
 .pulse {
   -webkit-animation: 1s pulse infinite;
 }
diff --git a/package.json b/package.json
index b0cb5f2..50c7061 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,10 @@
     "glob": "^5.0.14",
     "ini": "^1.3.4",
     "lodash": "^3.10.1",
-    "react": "^0.13.3",
+    "react": "^0.14.0",
+    "react-addons-css-transition-group": "^0.14.0",
     "react-dnd": "^1.1.5",
+    "react-dom": "^0.14.0",
     "react-redux": "^2.0.0",
     "redux": "^2.0.0",
     "redux-thunk": "^0.1.0"
diff --git a/src/app.js b/src/app.js
index 00103b2..1498abb 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,4 +1,5 @@
 var React = require('react');
+var ReactDOM = require('react-dom');
 var LauncherView = require('./components/launcher/launcher-view.js');
 var EditView = require('./components/edit/edit-view.js');
 var Provider = require('react-redux').Provider;
@@ -34,9 +35,9 @@ function select(state) {
 // Connect App to Redux store
 App = connect(select)(App);
 
-React.render(
+ReactDOM.render(
   <Provider store={store}>
-    { function() { return <App />; } }
+    <App />
   </Provider>
   ,
   document.body
diff --git a/src/components/edit/tree-item.js b/src/components/edit/tree-item.js
index 0d3c05a..fc5a6c9 100644
--- a/src/components/edit/tree-item.js
+++ b/src/components/edit/tree-item.js
@@ -1,4 +1,4 @@
-var React = require('react/addons');
+var React = require('react');
 var classNames = require('classnames');
 var AppIcon = require('../common/app-icon.js');
 var DragSource = require('react-dnd').DragSource;
@@ -10,7 +10,7 @@ var TreeItem = React.createClass({
     render: function() {
 
       var data = this.props.data;
-    
+
       var connectDragSource = this.props.connectDragSource;
       var connectDropTarget = this.props.connectDropTarget;
 
diff --git a/src/components/launcher/crossfade-image.js b/src/components/launcher/crossfade-image.js
index 446fae6..37f01c4 100644
--- a/src/components/launcher/crossfade-image.js
+++ b/src/components/launcher/crossfade-image.js
@@ -1,6 +1,7 @@
-/* jshint node: true jsx: true */
+/* jshint node: true */
 var React = require('react');
 var AnimateMixin = require('../mixins/animate');
+var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
 
 module.exports = React.createClass({
 
@@ -20,27 +21,18 @@ module.exports = React.createClass({
 
   render: function() {
 
-    var topStyle = {};
-
-    if(this.state.prevSrc) {
-      topStyle.backgroundImage = 'url('+this.state.prevSrc+')';
-    }
-
-    var bottomStyle = {
+    var topStyle = {
       backgroundImage: 'url('+this.state.currSrc+')'
     };
 
     return (
       <div className="crossfade-image">
-        <div className="bottom" style={bottomStyle}></div>
-        <div ref="top" className="top" style={topStyle}></div>
+        <ReactCSSTransitionGroup transitionName="crossfade" transitionLeaveTimeout={2000}>
+          <div key={this.state.currSrc} className="top" style={topStyle}></div>
+        </ReactCSSTransitionGroup>
       </div>
     );
 
-  },
-
-  componentDidUpdate: function() {
-    this.transition(this.refs.top, {opacity: {start: 1, end: 0}}, '5s', 'ease-in-out');
   }
 
 });
diff --git a/src/components/mixins/lazy-load.js b/src/components/mixins/lazy-load.js
index 7b3dd57..835a60a 100644
--- a/src/components/mixins/lazy-load.js
+++ b/src/components/mixins/lazy-load.js
@@ -1,4 +1,4 @@
-var React = require('react');
+var ReactDOM = require('react-dom');
 
 var _listeners = [];
 
@@ -6,7 +6,7 @@ module.exports = {
 
   isInViewport: function() {
 
-    var el = React.findDOMNode(this);
+    var el = ReactDOM.findDOMNode(this);
 
     if(!el) return false;