hide and show Modal with animation

justmic007 · Aug 2, 2018 · 25aab5c · 25aab5c
1 parent 8602358
commit 25aab5c
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 4 deletions.
diff --git a/node_modules/.cache/babel-loader/0425eeabad2ee93b5f49a4c88ed40ace79dfa63f.json.gz b/node_modules/.cache/babel-loader/0425eeabad2ee93b5f49a4c88ed40ace79dfa63f.json.gz
diff --git a/node_modules/.cache/babel-loader/7ceab076d056d6aba7684fa3efa6688f7d2b310a.json.gz b/node_modules/.cache/babel-loader/7ceab076d056d6aba7684fa3efa6688f7d2b310a.json.gz
diff --git a/node_modules/.cache/babel-loader/861c945d7aa65be605126755dfea626850f00a7e.json.gz b/node_modules/.cache/babel-loader/861c945d7aa65be605126755dfea626850f00a7e.json.gz
diff --git a/node_modules/.cache/babel-loader/a546a555431e8da0608a1dd0f2ae5f96482e3796.json.gz b/node_modules/.cache/babel-loader/a546a555431e8da0608a1dd0f2ae5f96482e3796.json.gz
diff --git a/node_modules/.cache/babel-loader/dc295d721155db3e56997eb785f815d9e5557218.json.gz b/node_modules/.cache/babel-loader/dc295d721155db3e56997eb785f815d9e5557218.json.gz
diff --git a/src/components/Burger/BuildControls/BuildControls.js b/src/components/Burger/BuildControls/BuildControls.js
@@ -23,7 +23,8 @@ const buildControls = (props) => (
         ))}
         <button
             className={classes.OrderButton}
-            disabled={!props.purchasable}>
+            disabled={!props.purchasable}
+            onClick={props.ordered}>
             <strong>ORDER NOW!</strong>
         </button>
     </div>

diff --git a/src/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js
@@ -3,7 +3,12 @@ import React from 'react';
 import classes from './Modal.css';
 
 const modal = (props) => (
-  <div className={classes.Modal}>
+  <div
+      className={classes.Modal}
+      style={{
+        transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
+        opacity: props.show ? '1': '0'
+      }}>
       {props.children}
   </div>
 );

diff --git a/src/containers/BurgerBuilder/BurgerBuilder.js b/src/containers/BurgerBuilder/BurgerBuilder.js
@@ -26,7 +26,8 @@ class BurgerBuilder extends Component {
       meat: 0
     },
     totalPrice: 4,
-    purchasable: false
+    purchasable: false,
+    purchasing: false
   }
 
   updatePurchaseState(ingredients){
@@ -75,6 +76,10 @@ class BurgerBuilder extends Component {
 
   }
 
+  purchaseHandler = () => {
+    this.setState({purchasing: true});
+  }
+
   render() {
     const disabledInfo = {
         ...this.state.ingredients
@@ -85,7 +90,7 @@ class BurgerBuilder extends Component {
     // {salad: false, meat: false; cheese: false, bacon: false ...}
     return(
       <Aux>
-          <Modal>
+          <Modal show={this.state.purchasing}>
               <OrderSummary ingredients={this.state.ingredients} />
           </Modal>
           <Burger ingredients={this.state.ingredients}/>
@@ -94,6 +99,7 @@ class BurgerBuilder extends Component {
               ingredientRemoved={this.removeIngredientHandler}
               disabled={disabledInfo}
               purchasable={this.state.purchasable}
+              ordered={this.purchaseHandler}
               price={this.state.totalPrice} />
 
       </Aux>