From 6d1c2a1e904f27b98ab1956063440999056d8af2 Mon Sep 17 00:00:00 2001 From: mzabriskie Date: Mon, 13 Jul 2015 22:51:49 -0600 Subject: [PATCH] [fixed] Hiding flipped side to prevent tab focus --- lib/components/FlipCard.js | 61 ++++++++++++++++++++++++++------------ lib/helpers/classSet.js | 9 ++++++ 2 files changed, 51 insertions(+), 19 deletions(-) create mode 100644 lib/helpers/classSet.js diff --git a/lib/components/FlipCard.js b/lib/components/FlipCard.js index d1f93c6..db9a2be 100644 --- 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 (