[fixed] Hiding flipped side to prevent tab focus

mzabriskie · Jul 14, 2015 · 6d1c2a1 · 6d1c2a1
1 parent 6318b7d
commit 6d1c2a1
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 19 deletions.
diff --git a/lib/components/FlipCard.js b/lib/components/FlipCard.js
@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import cx from '../helpers/classSet';
 import contains from '../helpers/contains';
 import injectStyle from '../helpers/injectStyle';
 
@@ -44,9 +45,15 @@ export default React.createClass({
   },
 
   componentWillReceiveProps(newProps) {
-    this.setState({
-      isFlipped: newProps.flipped
-    });
+    // Make sure both sides are displayed for animation
+    this._showBothSides();
+
+    // Wait for display above to take effect
+    setTimeout(() => {
+      this.setState({
+        isFlipped: newProps.flipped
+      })
+    }, 0);
   },
 
   componentWillUpdate(nextProps, nextState) {
@@ -61,7 +68,7 @@ export default React.createClass({
     // If isFlipped has changed need to notify
     if (this.state.isFlipped !== nextState.isFlipped) {
       this.notifyFlip = true;
-    }
+    } 
   },
 
   componentDidUpdate() {
@@ -85,6 +92,29 @@ export default React.createClass({
       this.props.onFlip(this.state.isFlipped);
       this.notifyFlip = false;
     }
+
+    // Hide whichever side of the card is down
+    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() {
@@ -109,23 +139,16 @@ export default React.createClass({
     }
   },
 
-  render() {
-    var className = (
-      'ReactFlipCard ReactFlipCard--' +
-      (this.props.type === 'vertical' ? 'vertical' : 'horizontal')
-    );
-
-    if (this.state.isFlipped) {
-      className += ' ReactFlipCard--flipped';
-    }
-
-    if (!this.props.disabled) {
-      className += ' ReactFlipCard--enabled';
-    }
-
+  render() {  
     return (
       <div
-        className={className}
+        className={cx({
+          'ReactFlipCard': true,
+          'ReactFlipCard--vertical': this.props.type === 'vertical',
+          'ReactFlipCard--horizontal': this.props.type !== 'vertical',
+          'ReactFlipCard--flipped': this.state.isFlipped,
+          'ReactFlipCard--enabled': !this.props.disabled
+        })}
         tabIndex={0}
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}

diff --git a/lib/helpers/classSet.js b/lib/helpers/classSet.js
@@ -0,0 +1,9 @@
+module.exports = function classSet(classNames) {
+  if (typeof classNames == 'object') {
+    return Object.keys(classNames).filter(function(className) {
+      return classNames[className];
+    }).join(' ');
+  } else {
+    return Array.prototype.join.call(arguments, ' ');
+  }
+};