[added] support for react@0.14.0

examples/basic/app.js

@@ -1,28 +1,18 @@
 import React from 'react';
+import DOM from 'react-dom';
 import FlipCard from '../../lib/main';
 
-let App = React.createClass({
+
+const App = React.createClass({
   getInitialState() {
     return {
       isFlipped: false
     };
   },
 
-  showBack() {
-    this.setState({
-      isFlipped: true
-    });
-  },
-
-  showFront() {
-    this.setState({
-      isFlipped: false
-    });
-  },
-
   handleOnFlip(flipped) {
     if (flipped) {
-      this.refs.backButton.getDOMNode().focus();
+      this.refs.backButton.focus();
     }
   },
 
@@ -80,7 +70,19 @@ let App = React.createClass({
         </FlipCard>
       </div>
     );
+  },
+
+  showBack() {
+    this.setState({
+      isFlipped: true
+    });
+  },
+
+  showFront() {
+    this.setState({
+      isFlipped: false
+    });
   }
 });
 
-React.render(<App/>, document.getElementById('example'));
+DOM.render(<App/>, document.getElementById('example'));

lib/components/FlipCard.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
-import cx from '../helpers/classSet';
+import { findDOMNode } from 'react-dom';
+import cx from 'classnames';
 import contains from '../helpers/contains';
 import injectStyle from '../helpers/injectStyle';
 
@@ -16,7 +17,7 @@ export default React.createClass({
     onFlip: PropTypes.func,
     onKeyDown: PropTypes.func,
     children(props, propName, componentName) {
-      let prop = props[propName];
+      const prop = props[propName];
 
       if (React.Children.count(prop) !== 2) {
         return new Error(
@@ -44,6 +45,10 @@ export default React.createClass({
     };
   },
 
+  componentDidMount() {
+    this._hideFlippedSide();
+  },
+
   componentWillReceiveProps(newProps) {
     // Make sure both sides are displayed for animation
     this._showBothSides();
@@ -76,15 +81,15 @@ export default React.createClass({
     // return focus to the element that triggered flipping to the back.
     if (!this.props.flipped &&
          this.focusElement &&
-         contains(this.getDOMNode(), document.activeElement)
+         contains(findDOMNode(this), document.activeElement)
        ) {
       this.focusElement.focus();
       this.focusElement = null;
     }
     // Direct focus to the back if needed
     /* eslint brace-style:0 */
     else if (this.focusBack) {
-      this.refs.back.getDOMNode().focus();
+      this.refs.back.focus();
       this.focusBack = false;
     }
 
@@ -98,26 +103,6 @@ export default React.createClass({
     setTimeout(this._hideFlippedSide, 600);
   },
 
-  componentDidMount() {
-    this._hideFlippedSide();
-  },
-
-  _showBothSides() {
-    this.refs.front.getDOMNode().style.display = '';
-    this.refs.back.getDOMNode().style.display = '';
-  },
-
-  _hideFlippedSide() {
-    // This prevents the flipped side from being tabbable
-    if (this.props.disabled) {
-      if (this.state.isFlipped) {
-        this.refs.front.getDOMNode().style.display = 'none';
-      } else {
-        this.refs.back.getDOMNode().style.display = 'none';
-      }
-    }
-  },
-
   handleFocus() {
     if (this.props.disabled) return;
 
@@ -177,5 +162,21 @@ export default React.createClass({
         </div>
       </div>
     );
+  },
+
+  _showBothSides() {
+    this.refs.front.style.display = '';
+    this.refs.back.style.display = '';
+  },
+
+  _hideFlippedSide() {
+    // This prevents the flipped side from being tabbable
+    if (this.props.disabled) {
+      if (this.state.isFlipped) {
+        this.refs.front.style.display = 'none';
+      } else {
+        this.refs.back.style.display = 'none';
+      }
+    }
   }
 });

lib/components/__tests__/FlipCard-test.js

@@ -1,7 +1,7 @@
-let React = require('react/addons');
-let TestUtils = React.addons.TestUtils;
-let FlipCard = require('../../main');
-let { equal, throws } = require('assert');
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+import FlipCard from '../../main';
+import { equal, throws } from 'assert';
 
 /* eslint func-names:0 */
 describe('react-flipcard', function() {
@@ -12,7 +12,7 @@ describe('react-flipcard', function() {
   });
 
   it('should flip vertically', function() {
-    let card = TestUtils.renderIntoDocument(
+    const card = TestUtils.renderIntoDocument(
       <FlipCard type="vertical">
         <div>foo</div>
         <div>bar</div>
@@ -23,7 +23,7 @@ describe('react-flipcard', function() {
   });
 
   it('should flip horizontally by default', function() {
-    let card = TestUtils.renderIntoDocument(
+    const card = TestUtils.renderIntoDocument(
       <FlipCard>
         <div>foo</div>
         <div>bar</div>
@@ -34,7 +34,7 @@ describe('react-flipcard', function() {
   });
 
   it('should default to enabled', function() {
-    let card = TestUtils.renderIntoDocument(
+    const card = TestUtils.renderIntoDocument(
       <FlipCard>
         <div>foo</div>
         <div>bar</div>
@@ -44,7 +44,7 @@ describe('react-flipcard', function() {
   });
 
   it('should allow disabling', function() {
-    let card = TestUtils.renderIntoDocument(
+    const card = TestUtils.renderIntoDocument(
       <FlipCard disabled={true}>
         <div>foo</div>
         <div>bar</div>

lib/helpers/injectStyle.js

@@ -143,7 +143,7 @@ export default function() {
   if (!style) {
     style = document.createElement('style');
     style.setAttribute('id', 'react-flipcard-style');
-    let head = document.querySelector('head');
+    const head = document.querySelector('head');
     head.insertBefore(style, head.firstChild);
   }
   style.innerHTML = CSS;

package.json

@@ -21,10 +21,16 @@
   },
   "homepage": "https://github.com/mzabriskie/react-flipcard",
   "devDependencies": {
-    "rackt-cli": "^0.4.0",
-    "react": "^0.13.3"
+    "rackt-cli": "^0.5.2",
+    "react": "^0.14.0",
+    "react-addons-test-utils": "^0.14.0",
+    "react-dom": "^0.14.0"
   },
   "peerDependencies": {
-    "react": "^0.13.3"
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0"
+  },
+  "dependencies": {
+    "classnames": "^2.2.0"
   }
 }