feat(drawer): close on overlay click (#36)

goto · Apr 25, 2024 · 6565493 · 6565493
1 parent ec7457d
commit 6565493
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 58 deletions.
diff --git a/packages/apsara-ui/src/Drawer/Drawer.stories.mdx b/packages/apsara-ui/src/Drawer/Drawer.stories.mdx
diff --git a/packages/apsara-ui/src/Drawer/Drawer.stories.tsx b/packages/apsara-ui/src/Drawer/Drawer.stories.tsx
@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import Drawer from './Drawer';
+
+export const Basic = () => {
+    const [open, setOpen] = useState(false);
+    return (
+        <>
+            <button type="button" onClick={() => setOpen(true)}>Click to open Drawer</button>
+            <Drawer
+                open={open}
+                onClose={() => setOpen(false)}
+            >
+                <p>This is sample drawer content</p>
+                <button type="button" onClick={() => console.log('test')}>Test</button>
+            </Drawer>
+        </>
+    );
+}
+
+export default {
+    title: "Overlay/Drawer",
+    component: Drawer,
+};
diff --git a/packages/apsara-ui/src/Drawer/Drawer.styles.tsx b/packages/apsara-ui/src/Drawer/Drawer.styles.tsx
@@ -1,13 +1,18 @@
 import styled from "styled-components";
 
-export const Overlay = styled.div`
-    animation: opacity 200ms ease-out;
+export const Wrapper = styled.div`
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 1000;
+`;
+
+export const Overlay = styled.div`
+    animation: opacity 200ms ease-out;
+    width: 100%;
+    height: 100%;
     background: rgba(0, 0, 0, 0.3);
 `;
 

diff --git a/packages/apsara-ui/src/Drawer/Drawer.tsx b/packages/apsara-ui/src/Drawer/Drawer.tsx
@@ -1,27 +1,35 @@
 import React, { useContext } from "react";
 import { ThemeContext } from "styled-components";
 import Icon from "../Icon";
-import { Overlay, Body } from "./Drawer.styles";
+import { Overlay, Body, Wrapper } from "./Drawer.styles";
 
 type DrawerProps = {
-    onClose?: () => void;
+    onClose: () => void;
+    onOverlayClick?: () => void;
+    disableCloseOnOverlayClick?: boolean; // default: true
     open?: boolean;
     className?: string;
     position?: "left" | "right";
     children?: React.ReactNode;
 };
 
-const Drawer = ({ onClose, open = false, children, className = "", position = "right" }: DrawerProps) => {
+const Drawer = ({ onOverlayClick, disableCloseOnOverlayClick, onClose, open = false, children, className = "", position = "right" }: DrawerProps) => {
     const theme = useContext(ThemeContext);
 
     if (!open) return null;
     return (
-        <Overlay>
+        <Wrapper>
+            <Overlay onClick={() => {
+                if (!disableCloseOnOverlayClick) onClose();
+                if (onOverlayClick) onOverlayClick();
+            }}>
+            </Overlay>
             <Body className={className} position={position}>
                 <Icon name="cross" onClick={onClose} color={theme?.drawer?.close} />
                 {children}
             </Body>
-        </Overlay>
+        </Wrapper>
+
     );
 };
 

diff --git a/tsconfig.json b/tsconfig.json
@@ -6,7 +6,7 @@
         "target": "es6",
         "module": "esnext",
         "lib": ["es6", "dom", "es2016", "es2017", "es2019"],
-        "jsx": "react",
+        "jsx": "react-jsx",
         "sourceMap": true,
 
         /* Strict Type-Checking Options */
@@ -22,7 +22,6 @@
         "noImplicitThis": true,
         "noImplicitAny": true,
         "strictNullChecks": true,
-        "suppressImplicitAnyIndexErrors": true,
 
         /* Module Resolution Options */
         "moduleResolution": "node",