From 90813bd40d549f29fc9e74209c679916d91e9312 Mon Sep 17 00:00:00 2001
From: Brian Andrews <sbardian@gmail.com>
Date: Tue, 26 Mar 2019 11:20:20 -0600
Subject: [PATCH] Remove lib files and default to auto

---
 README.md             | 15 ++++++++-------
 src/ReactCardFlip.jsx | 31 +++++++++++++++++++++++--------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 186e29b..33b51d4 100644
--- a/README.md
+++ b/README.md
@@ -96,13 +96,14 @@ component as the back of the card.
 
 ### Properties
 
-| Props                | Type   | Description                                                                                                                 | Default    |
-| -------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| isFlipped            | bool   | False to show the front of the card, true to show the back                                                                  | undefined  |
-| flipSpeedBackToFront | number | The speed of the flip animation when the card flips from back to front, the higher the number the slower the flip animation | 0.6        |
-| flipSpeedFrontToBack | number | The speed of the flip animation when the card flips from front to back, the higher the number the slower the flip animation | 0.6        |
-| infinite             | bool   | False to rotate in opposite directions on both sides of the card, true to rotate in the same direction                      | false      |
-| flipDirection        | string | Direction of the card flip (options are: 'horizontal' or 'vertical' )                                                       | horizontal |
+| Props                | Type   | Description                                                                                                                 | Default      |
+| -------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| cardZIndex           | string | z-Index for the flip card. Used to help solve context stack issues while using multiple flip cards.                         | empty string |
+| isFlipped            | bool   | False to show the front of the card, true to show the back                                                                  | undefined    |
+| flipSpeedBackToFront | number | The speed of the flip animation when the card flips from back to front, the higher the number the slower the flip animation | 0.6          |
+| flipSpeedFrontToBack | number | The speed of the flip animation when the card flips from front to back, the higher the number the slower the flip animation | 0.6          |
+| infinite             | bool   | False to rotate in opposite directions on both sides of the card, true to rotate in the same direction                      | false        |
+| flipDirection        | string | Direction of the card flip (options are: 'horizontal' or 'vertical' )                                                       | horizontal   |
 
 ## Development (`src`, `lib` and the build process)
 
diff --git a/src/ReactCardFlip.jsx b/src/ReactCardFlip.jsx
index 967da06..2795358 100644
--- a/src/ReactCardFlip.jsx
+++ b/src/ReactCardFlip.jsx
@@ -29,7 +29,8 @@ class ReactCardFlip extends React.Component {
       infinite,
       flipSpeedFrontToBack,
       flipSpeedBackToFront,
-      cardStyles: { front, back }
+      cardStyles: { front, back },
+      cardZIndex
     } = this.props;
     const { isFlipped, rotation } = this.state;
 
@@ -49,7 +50,8 @@ class ReactCardFlip extends React.Component {
     const styles = {
       container: {
         perspective: '1000px',
-        transformStyle: 'preserve-3d'
+        transformStyle: 'preserve-3d',
+        zIndex: `${cardZIndex}`
       },
       flipper: {
         position: 'relative',
@@ -105,6 +107,7 @@ ReactCardFlip.propTypes = {
     front: PropTypes.object,
     back: PropTypes.object
   }),
+  cardZIndex: PropTypes.string,
   children: (props, propName, componentName) => {
     if (React.Children.count(props[propName]) !== 2) {
       return new Error(`${componentName} requires two children.`);
@@ -115,18 +118,29 @@ ReactCardFlip.propTypes = {
       return;
     }
 
-    if (!(typeof props[propName] === 'string' || props[propName] instanceof String)) {
+    if (
+      !(
+        typeof props[propName] === 'string' || props[propName] instanceof String
+      )
+    ) {
       return new Error(`${propName} requires a string.`);
     }
 
-    if (props[propName].toLowerCase() !== 'horizontal' && props[propName].toLowerCase() !== 'vertical') {
-      return new Error(`${propName} expects (horizontal|vertical), got ${props[propName].toLowerCase()}`);
+    if (
+      props[propName].toLowerCase() !== 'horizontal' &&
+      props[propName].toLowerCase() !== 'vertical'
+    ) {
+      return new Error(
+        `${propName} expects (horizontal|vertical), got ${props[
+          propName
+        ].toLowerCase()}`
+      );
     }
   },
   flipSpeedBackToFront: PropTypes.number,
   flipSpeedFrontToBack: PropTypes.number,
   infinite: PropTypes.bool,
-  isFlipped: PropTypes.bool,
+  isFlipped: PropTypes.bool
 };
 
 ReactCardFlip.defaultProps = {
@@ -134,11 +148,12 @@ ReactCardFlip.defaultProps = {
     front: {},
     back: {}
   },
+  cardZIndex: 'auto',
+  flipDirection: 'horizontal',
   flipSpeedBackToFront: 0.6,
   flipSpeedFrontToBack: 0.6,
   infinite: false,
-  isFlipped: false,
-  flipDirection: 'horizontal'
+  isFlipped: false
 };
 
 export default ReactCardFlip;