fix(modal): backdrop click

Yoctol · Mar 28, 2019 · 7da7e04 · 7da7e04
1 parent bcda7af
commit 7da7e04
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 63 deletions.
diff --git a/packages/tailor-ui/src/Modal/BaseModal.tsx b/packages/tailor-ui/src/Modal/BaseModal.tsx
@@ -9,14 +9,11 @@ import useKeydown, { ESC_KEY_CODE } from '../utils/useKeydown';
 type Size = 'md' | 'lg';
 
 const ModalWrapper = styled.div`
-  display: flex;
   position: fixed;
   z-index: 10001;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 `;
 
 const AnimatedModalWrapper = animated(ModalWrapper);
@@ -32,6 +29,8 @@ const ModalContent = styled(tag.div)<{ type: Size }>`
   background-color: #fff;
 `;
 
+const AnimatedModalContent = animated(ModalContent);
+
 export interface BaseModalProps {
   onCancel: () => void;
   size?: Size;
@@ -83,10 +82,13 @@ const BaseModal: FunctionComponent<BaseModalProps> = ({
       {transitions.map(
         ({ item, key, props }) =>
           item && (
-            <AnimatedModalWrapper key={key} style={props}>
-              <ModalContent size={size} {...otherProps}>
+            <AnimatedModalWrapper
+              key={key}
+              style={{ pointerEvents: props.pointerEvents }}
+            >
+              <AnimatedModalContent size={size} style={props} {...otherProps}>
                 {children}
-              </ModalContent>
+              </AnimatedModalContent>
             </AnimatedModalWrapper>
           )
       )}

diff --git a/packages/tailor-ui/src/Modal/__tests__/__snapshots__/index.spec.tsx.snap b/packages/tailor-ui/src/Modal/__tests__/__snapshots__/index.spec.tsx.snap
@@ -105,25 +105,13 @@ exports[`Modal should render correctly 1`] = `
 }
 
 .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   position: fixed;
   z-index: 10001;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 .c2 {
@@ -320,10 +308,10 @@ exports[`Modal should render correctly 1`] = `
     />
     <div
       class="c1"
-      style="opacity: 0; transform: scale(0.9);"
     >
       <div
         class="c2"
+        style="opacity: 0; transform: scale(0.9);"
       >
         <div
           class="c3"
@@ -485,25 +473,13 @@ exports[`Modal should render correctly with lg size 1`] = `
 }
 
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   position: fixed;
   z-index: 10001;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 .c1 {
@@ -691,10 +667,10 @@ exports[`Modal should render correctly with lg size 1`] = `
 
 <div
       class="c0"
-      style="opacity: 0; transform: scale(0.9);"
     >
       <div
         class="c1"
+        style="opacity: 0; transform: scale(0.9);"
       >
         <div
           class="c2"
@@ -879,25 +855,13 @@ exports[`Modal should render with props closable 1`] = `
 }
 
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   position: fixed;
   z-index: 10001;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 .c1 {
@@ -1183,10 +1147,10 @@ exports[`Modal should render with props closable 1`] = `
 
 <div
       class="c0"
-      style="opacity: 0; transform: scale(0.9);"
     >
       <div
         class="c1"
+        style="opacity: 0; transform: scale(0.9);"
       >
         <div
           class="c2"