Adding Radium

Author: kenwheeler

dist/spectacle.0.0.1.css

@@ -20,7 +20,7 @@ export default class extends React.Component {
   render() {
     return (
       <Deck transition={['zoom','slide']} transitionDuration={800}>
-        <Slide bgColor="primary">
+        <Slide transition={['zoom']} bgColor="primary">
           <Heading size={1} fit caps textColor="black">
             Spectacle
           </Heading>

dist/spectacle.0.0.1.js

@@ -10,6 +10,7 @@ const Style = Radium.Style;
 
 const TransitionGroup = React.addons.TransitionGroup;
 
+@Radium
 class Deck extends React.Component {
   constructor(props) {
     super(props);
@@ -205,12 +206,14 @@ class Deck extends React.Component {
       top: 0,
       left: 0,
       width: '100%',
-      height: '100%'
+      height: '100%',
+      perspective: 1000,
+      transformStyle: 'preserve-3d'
     };
     return (
       <div
         className="spectacle-deck"
-        style={styles}
+        style={[styles]}
         onClick={this._handleClick}
         {...this._getTouchEvents()}>
         <TransitionGroup component="div">

presentation/deck.jsx

@@ -1,10 +1,15 @@
 import React from 'react/addons';
 import assign from 'object-assign';
+import Radium from 'radium';
 
+@Radium
 class Fill extends React.Component {
   render() {
+    let styles = {
+      flex: 1
+    };
     return (
-      <div className="spectacle-fill">
+      <div style={[styles]}>
         {this.props.children}
       </div>
     )

src/deck.jsx

@@ -1,10 +1,15 @@
 import React from 'react/addons';
 import assign from 'object-assign';
+import Radium from 'radium';
 
+@Radium
 class Fit extends React.Component {
   render() {
+    let styles = {
+      flex: 0
+    };
     return (
-      <div className="spectacle-fit">
+      <div style={[styles]}>
         {this.props.children}
       </div>
     )

src/fill.jsx

@@ -1,10 +1,15 @@
 import React from 'react/addons';
 import assign from 'object-assign';
+import Radium from 'radium';
 
+@Radium
 class Layout extends React.Component {
   render() {
+    let styles = {
+      display: 'flex'
+    };
     return (
-      <div className="spectacle-layout">
+      <div style={[styles]}>
         {this.props.children}
       </div>
     )

src/fit.jsx

@@ -4,6 +4,7 @@ import tweenState from 'react-tween-state';
 import Base from './base';
 import Transitions from './transitions';
 import config from '../presentation/config';
+import Radium from 'radium';
 
 const Slide = React.createClass({
   displayName: 'Slide',
@@ -54,10 +55,10 @@ const Slide = React.createClass({
     };
     return (
       <div className="spectacle-slide"
-        style={assign({}, styles.outer, this.getStyles(), this.getTransitionStyles())}>
-        <div style={styles.inner}>
+        style={[styles.outer, this.getStyles(), this.getTransitionStyles()]}>
+        <div style={[styles.inner]}>
           <div ref="content"
-            style={assign({}, styles.content, this.context.styles.components.content)}>
+            style={[styles.content, this.context.styles.components.content]}>
             {this.props.children}
           </div>
         </div>
@@ -66,4 +67,4 @@ const Slide = React.createClass({
   }
 });
 
-export default Slide;
+export default Radium(Slide);

src/layout.jsx

@@ -171,6 +171,7 @@ export default {
     this.routerCallback(cb);
   },
   getTransitionStyles() {
+    let transformValue = "";
     let styles = {
       zIndex: this.state.z || 100
     };
@@ -180,23 +181,17 @@ export default {
       });
     }
     if(this.props.transition.indexOf('zoom') !== -1) {
-      styles = assign(styles, {
-        transform: 'scale(' + this.getTweeningValue('scale') + ')',
-        WebkitTransform: 'scale(' + this.getTweeningValue('scale') + ')'
-      });
+      transformValue += ' scale(' + this.getTweeningValue('scale') + ')';
     }
     if(this.props.transition.indexOf('slide') !== -1) {
-      styles = assign(styles, {
-        left: this.getTweeningValue('left') + "%"
-      });
+      transformValue += ' translate3d(' + this.getTweeningValue('left') + "%, 0, 0)"
     }
     if(this.props.transition.indexOf('spin') !== -1) {
-      styles = assign(styles, {
-        transform:  'rotateY(' + this.getTweeningValue('x') + 'deg)',
-        WebkitTransform:  'rotateY(' + this.getTweeningValue('x') + 'deg)',
-        transformOrigin: 'center center'
-      });
+      transformValue += ' rotateY(' + this.getTweeningValue('x') + 'deg)';
     }
+    styles = assign(styles, {
+      transform: transformValue
+    });
     return styles;
   }
 }

src/slide.jsx

@@ -1,10 +1,3 @@
-.spectacle-deck {
-  transform-style: preserve-3d;
-
-  -webkit-perspective: 1000;
-          perspective: 1000;
-}
-
 .spectacle-slide {
   -webkit-transform-origin: center center;
           transform-origin: center center;
@@ -13,33 +6,6 @@
           transform-style: preserve-3d;
 }
 
-.spectacle-layout {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-
-  flex-flow: row wrap;
-  -webkit-flex-flow: row wrap;
-}
-
-.spectacle-fit {
-  -webkit-box-flex: 0;
-    -moz-box-flex:  0;
-    e-webkit-flex:  0;
-          ms-flex:  0;
-             flex:  0;
-}
-
-.spectacle-fill {
-  -webkit-box-flex: 1;
-    -moz-box-flex:  1;
-     -webkit-flex:  1;
-         -ms-flex:  1;
-             flex:  1;
-}
-
 /* Firefox */
 
 _:-moz-tree-row(hover), .spectacle-deck {