Browse Source

Base crossfade + passage a React 0.14

upgrade-electron
wpetit 4 years ago
parent
commit
6ec432dab7

+ 20
- 2
css/style.css View File

@@ -59,8 +59,8 @@ html, body {
59 59
   z-index: -1;
60 60
 }
61 61
 
62
-.launcher .crossfade-image > .top,
63
-.launcher .crossfade-image > .bottom {
62
+.launcher .crossfade-image .top,
63
+.launcher .crossfade-image .bottom {
64 64
   position: absolute;
65 65
   left: 0;
66 66
   right: 0;
@@ -319,6 +319,24 @@ html, body {
319 319
 
320 320
 /* Animations */
321 321
 
322
+.crossfade-enter {
323
+  opacity: 0.01;
324
+}
325
+
326
+.crossfade-enter.crossfade-enter-active {
327
+  opacity: 1;
328
+  transition: opacity 250ms ease-in;
329
+}
330
+
331
+.example-leave {
332
+  opacity: 1;
333
+}
334
+
335
+.crossfade-leave.crossfade-leave-active {
336
+  opacity: 0.01;
337
+  transition: opacity 250ms ease-in;
338
+}
339
+
322 340
 .pulse {
323 341
   -webkit-animation: 1s pulse infinite;
324 342
 }

+ 3
- 1
package.json View File

@@ -25,8 +25,10 @@
25 25
     "glob": "^5.0.14",
26 26
     "ini": "^1.3.4",
27 27
     "lodash": "^3.10.1",
28
-    "react": "^0.13.3",
28
+    "react": "^0.14.0",
29
+    "react-addons-css-transition-group": "^0.14.0",
29 30
     "react-dnd": "^1.1.5",
31
+    "react-dom": "^0.14.0",
30 32
     "react-redux": "^2.0.0",
31 33
     "redux": "^2.0.0",
32 34
     "redux-thunk": "^0.1.0"

+ 3
- 2
src/app.js View File

@@ -1,4 +1,5 @@
1 1
 var React = require('react');
2
+var ReactDOM = require('react-dom');
2 3
 var LauncherView = require('./components/launcher/launcher-view.js');
3 4
 var EditView = require('./components/edit/edit-view.js');
4 5
 var Provider = require('react-redux').Provider;
@@ -34,9 +35,9 @@ function select(state) {
34 35
 // Connect App to Redux store
35 36
 App = connect(select)(App);
36 37
 
37
-React.render(
38
+ReactDOM.render(
38 39
   <Provider store={store}>
39
-    { function() { return <App />; } }
40
+    <App />
40 41
   </Provider>
41 42
   ,
42 43
   document.body

+ 2
- 2
src/components/edit/tree-item.js View File

@@ -1,4 +1,4 @@
1
-var React = require('react/addons');
1
+var React = require('react');
2 2
 var classNames = require('classnames');
3 3
 var AppIcon = require('../common/app-icon.js');
4 4
 var DragSource = require('react-dnd').DragSource;
@@ -10,7 +10,7 @@ var TreeItem = React.createClass({
10 10
     render: function() {
11 11
 
12 12
       var data = this.props.data;
13
-    
13
+
14 14
       var connectDragSource = this.props.connectDragSource;
15 15
       var connectDropTarget = this.props.connectDropTarget;
16 16
 

+ 6
- 14
src/components/launcher/crossfade-image.js View File

@@ -1,6 +1,7 @@
1
-/* jshint node: true jsx: true */
1
+/* jshint node: true */
2 2
 var React = require('react');
3 3
 var AnimateMixin = require('../mixins/animate');
4
+var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
4 5
 
5 6
 module.exports = React.createClass({
6 7
 
@@ -20,27 +21,18 @@ module.exports = React.createClass({
20 21
 
21 22
   render: function() {
22 23
 
23
-    var topStyle = {};
24
-
25
-    if(this.state.prevSrc) {
26
-      topStyle.backgroundImage = 'url('+this.state.prevSrc+')';
27
-    }
28
-
29
-    var bottomStyle = {
24
+    var topStyle = {
30 25
       backgroundImage: 'url('+this.state.currSrc+')'
31 26
     };
32 27
 
33 28
     return (
34 29
       <div className="crossfade-image">
35
-        <div className="bottom" style={bottomStyle}></div>
36
-        <div ref="top" className="top" style={topStyle}></div>
30
+        <ReactCSSTransitionGroup transitionName="crossfade" transitionLeaveTimeout={2000}>
31
+          <div key={this.state.currSrc} className="top" style={topStyle}></div>
32
+        </ReactCSSTransitionGroup>
37 33
       </div>
38 34
     );
39 35
 
40
-  },
41
-
42
-  componentDidUpdate: function() {
43
-    this.transition(this.refs.top, {opacity: {start: 1, end: 0}}, '5s', 'ease-in-out');
44 36
   }
45 37
 
46 38
 });

+ 2
- 2
src/components/mixins/lazy-load.js View File

@@ -1,4 +1,4 @@
1
-var React = require('react');
1
+var ReactDOM = require('react-dom');
2 2
 
3 3
 var _listeners = [];
4 4
 
@@ -6,7 +6,7 @@ module.exports = {
6 6
 
7 7
   isInViewport: function() {
8 8
 
9
-    var el = React.findDOMNode(this);
9
+    var el = ReactDOM.findDOMNode(this);
10 10
 
11 11
     if(!el) return false;
12 12
 

Loading…
Cancel
Save