React 16 compatibility.

examples/basic/app.js

@@ -3,24 +3,29 @@ import DOM from 'react-dom';
 import FlipCard from '../../lib/main';
 
 
-const App = React.createClass({
-  getInitialState() {
-    return {
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       isFlipped: false
     };
-  },
+    this.handleOnFlip = this.handleOnFlip.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.showBack = this.showBack.bind(this);
+    this.showFront = this.showFront.bind(this);
+  }
 
   handleOnFlip(flipped) {
     if (flipped) {
       this.refs.backButton.focus();
     }
-  },
+  }
 
   handleKeyDown(e) {
     if (this.state.isFlipped && e.keyCode === 27) {
       this.showFront();
     }
-  },
+  }
 
   render() {
     return (
@@ -53,7 +58,7 @@ const App = React.createClass({
           or the back, with `true` meaning show the back.
         */}
         <FlipCard
-          disabled={true}
+          disabled
           flipped={this.state.isFlipped}
           onFlip={this.handleOnFlip}
           onKeyDown={this.handleKeyDown}
@@ -70,19 +75,19 @@ const App = React.createClass({
         </FlipCard>
       </div>
     );
-  },
+  }
 
   showBack() {
     this.setState({
       isFlipped: true
     });
-  },
+  }
 
   showFront() {
     this.setState({
       isFlipped: false
     });
   }
-});
+}
 
 DOM.render(<App/>, document.getElementById('example'));

lib/components/FlipCard.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
 import cx from 'classnames';
 import contains from '../helpers/contains';
@@ -7,47 +8,24 @@ import injectStyle from '../helpers/injectStyle';
 // Auto inject the styles (will only be done once)
 injectStyle();
 
-export default React.createClass({
-  displayName: 'ReactFlipCard',
-
-  propTypes: {
-    type: PropTypes.string,
-    flipped: PropTypes.bool,
-    disabled: PropTypes.bool,
-    onFlip: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    children(props, propName, componentName) {
-      const prop = props[propName];
-
-      if (React.Children.count(prop) !== 2) {
-        return new Error(
-          '`' + componentName + '` ' +
-          'should contain exactly two children. ' +
-          'The first child represents the front of the card. ' +
-          'The second child represents the back of the card.'
-        );
-      }
-    }
-  },
-
-  getDefaultProps() {
-    return {
-      type: 'horizontal',
-      flipped: false,
-      disabled: false
-    };
-  },
-
-  getInitialState() {
-    return {
+class FlipCard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       hasFocus: false,
       isFlipped: this.props.flipped
     };
-  },
+
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this._hideFlippedSide = this._hideFlippedSide.bind(this);
+    this._showBothSides = this._showBothSides.bind(this);
+  }
 
   componentDidMount() {
     this._hideFlippedSide();
-  },
+  }
 
   componentWillReceiveProps(newProps) {
     // Make sure both sides are displayed for animation
@@ -59,7 +37,7 @@ export default React.createClass({
         isFlipped: newProps.flipped
       });
     }, 0);
-  },
+  }
 
   componentWillUpdate(nextProps, nextState) {
     // If card is flipping to back via props, track element for focus
@@ -74,7 +52,7 @@ export default React.createClass({
     if (this.state.isFlipped !== nextState.isFlipped) {
       this.notifyFlip = true;
     }
-  },
+  }
 
   componentDidUpdate() {
     // If card has flipped to front, and focus is still within the card
@@ -101,29 +79,29 @@ export default React.createClass({
 
     // Hide whichever side of the card is down
     setTimeout(this._hideFlippedSide, 600);
-  },
+  }
 
   handleFocus() {
     if (this.props.disabled) return;
 
     this.setState({
       isFlipped: true
     });
-  },
+  }
 
   handleBlur() {
     if (this.props.disabled) return;
 
     this.setState({
       isFlipped: false
     });
-  },
+  }
 
   handleKeyDown(e) {
     if (typeof this.props.onKeyDown === 'function') {
       this.props.onKeyDown(e);
     }
-  },
+  }
 
   render() {
     return (
@@ -162,12 +140,12 @@ 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
@@ -179,4 +157,21 @@ export default React.createClass({
       }
     }
   }
-});
+}
+
+FlipCard.defaultProps = {
+  type: 'horizontal',
+  flipped: false,
+  disabled: false
+};
+
+FlipCard.propTypes = {
+  type: PropTypes.string,
+  flipped: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onFlip: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  children: PropTypes.element
+};
+
+export default FlipCard;

lib/components/__tests__/FlipCard-test.js

@@ -1,25 +1,20 @@
 import React from 'react';
-import TestUtils from 'react-addons-test-utils';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-dom/test-utils';
 import FlipCard from '../../main';
-import { equal, throws } from 'assert';
+import { equal } from 'assert';
 
 /* eslint func-names:0 */
 describe('react-flipcard', function() {
-  it('should throw an error if less than 2 children are provided', function() {
-    throws(function() {
-      TestUtils.renderIntoDocument(<FlipCard/>);
-    }, TypeError);
-  });
-
   it('should flip vertically', function() {
     const card = TestUtils.renderIntoDocument(
       <FlipCard type="vertical">
         <div>foo</div>
         <div>bar</div>
       </FlipCard>
     );
-    equal(card.getDOMNode().classList.contains('ReactFlipCard--vertical'), true);
-    equal(card.getDOMNode().classList.contains('ReactFlipCard--horizontal'), false);
+    equal(ReactDOM.findDOMNode(card).classList.contains('ReactFlipCard--vertical'), true);
+    equal(ReactDOM.findDOMNode(card).classList.contains('ReactFlipCard--horizontal'), false);
   });
 
   it('should flip horizontally by default', function() {
@@ -29,8 +24,8 @@ describe('react-flipcard', function() {
         <div>bar</div>
       </FlipCard>
     );
-    equal(card.getDOMNode().classList.contains('ReactFlipCard--vertical'), false);
-    equal(card.getDOMNode().classList.contains('ReactFlipCard--horizontal'), true);
+    equal(ReactDOM.findDOMNode(card).classList.contains('ReactFlipCard--vertical'), false);
+    equal(ReactDOM.findDOMNode(card).classList.contains('ReactFlipCard--horizontal'), true);
   });
 
   it('should default to enabled', function() {
@@ -40,17 +35,17 @@ describe('react-flipcard', function() {
         <div>bar</div>
       </FlipCard>
     );
-    equal(card.getDOMNode().classList.contains('ReactFlipCard--enabled'), true);
+    equal(ReactDOM.findDOMNode(card).classList.contains('ReactFlipCard--enabled'), true);
   });
 
   it('should allow disabling', function() {
     const card = TestUtils.renderIntoDocument(
-      <FlipCard disabled={true}>
+      <FlipCard disabled>
         <div>foo</div>
         <div>bar</div>
       </FlipCard>
     );
-    equal(card.getDOMNode().classList.contains('ReactFlipCard--enabled'), false);
+    equal(ReactDOM.findDOMNode(card).classList.contains('ReactFlipCard--enabled'), false);
   });
 
   // TODO: Why doesn't this work?
@@ -68,7 +63,7 @@ describe('react-flipcard', function() {
   //     </FlipCard>
   //   );
   //
-  //   card.getDOMNode().focus();
+  //   ReactDOM.findDOMNode(card).focus();
   //   setTimeout(function () {
   //     ok(called);
   //     done();