From 670aeeccdfcd4c035a45a87959d3e26264fbbc0b Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Sat, 12 Dec 2020 20:31:01 +1300
Subject: [PATCH] component: add Backdrop component

---
 src/components/UI/Backdrop/Backdrop.css       |  9 ++++++++
 src/components/UI/Backdrop/Backdrop.js        | 13 +++++++++++
 src/components/UI/Modal/Modal.js              | 23 +++++++++++++------
 src/containers/BurgerBuilder/BurgerBuilder.js |  8 ++++++-
 4 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 src/components/UI/Backdrop/Backdrop.css
 create mode 100644 src/components/UI/Backdrop/Backdrop.js

diff --git a/src/components/UI/Backdrop/Backdrop.css b/src/components/UI/Backdrop/Backdrop.css
new file mode 100644
index 0000000..d09bc2d
--- /dev/null
+++ b/src/components/UI/Backdrop/Backdrop.css
@@ -0,0 +1,9 @@
+.Backdrop {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 100;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
\ No newline at end of file
diff --git a/src/components/UI/Backdrop/Backdrop.js b/src/components/UI/Backdrop/Backdrop.js
new file mode 100644
index 0000000..6740640
--- /dev/null
+++ b/src/components/UI/Backdrop/Backdrop.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import classes from './Backdrop.css';
+const backdrop = (props) => {
+    return (
+        props.show ?
+            <div className={classes.Backdrop} 
+            onClick={props.clicked}>
+            </div> : null
+    )
+}
+
+export default backdrop;
\ No newline at end of file
diff --git a/src/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js
index 7bb3855..4a3e780 100644
--- a/src/components/UI/Modal/Modal.js
+++ b/src/components/UI/Modal/Modal.js
@@ -1,16 +1,25 @@
 import React from 'react';
 
+import Aux from '../../../hoc/Auxiliary';
+import Backdrop from '../Backdrop/Backdrop';
 import classes from './Modal.css';
 
 const modal = (props) => {
     return (
-        <div
-            className={classes.Modal}
-            style={{
-                transform: props.show ? 'translateY(0)' : 'translateY(-100vh)'
-            }}>
-            {props.children}
-        </div>
+        <Aux>
+            <Backdrop
+                show={props.show}
+                clicked={props.modalClosed}></Backdrop>
+            <div
+                className={classes.Modal}
+                style={{
+                    transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
+                    opacity: props.show ? '1' : '0',
+                }}>
+                {props.children}
+            </div>
+
+        </Aux>
     );
 };
 
diff --git a/src/containers/BurgerBuilder/BurgerBuilder.js b/src/containers/BurgerBuilder/BurgerBuilder.js
index 313290c..3bc04dc 100644
--- a/src/containers/BurgerBuilder/BurgerBuilder.js
+++ b/src/containers/BurgerBuilder/BurgerBuilder.js
@@ -82,6 +82,10 @@ class BurgerBuilder extends Component {
         this.setState({ purchasing: true });
     }
 
+    purchaseCancelHandler = () => {
+        this.setState({ purchasing: false });
+    }
+
     render() {
         const disabledInfo = {
             ...this.state.ingredients
@@ -93,7 +97,9 @@ class BurgerBuilder extends Component {
 
         return (
             <Aux>
-                <Modal show={this.state.purchasing}>
+                <Modal
+                    show={this.state.purchasing}
+                    modalClosed={this.purchaseCancelHandler}>
                     <OrderSummary ingredients={this.state.ingredients}></OrderSummary>
                 </Modal>
                 <Burger ingredients={this.state.ingredients} />