From 6565493b4ba4b7c2a3b8961f859f1f3b4e1c5b80 Mon Sep 17 00:00:00 2001
From: StewartJingga <stewart_jingga@yahoo.com>
Date: Thu, 25 Apr 2024 12:20:38 +0800
Subject: [PATCH] feat(drawer): close on overlay click (#36)

---
 .../apsara-ui/src/Drawer/Drawer.stories.mdx   | 49 -------------------
 .../apsara-ui/src/Drawer/Drawer.stories.tsx   | 23 +++++++++
 .../apsara-ui/src/Drawer/Drawer.styles.tsx    |  9 +++-
 packages/apsara-ui/src/Drawer/Drawer.tsx      | 18 +++++--
 tsconfig.json                                 |  3 +-
 5 files changed, 44 insertions(+), 58 deletions(-)
 delete mode 100644 packages/apsara-ui/src/Drawer/Drawer.stories.mdx
 create mode 100644 packages/apsara-ui/src/Drawer/Drawer.stories.tsx

diff --git a/packages/apsara-ui/src/Drawer/Drawer.stories.mdx b/packages/apsara-ui/src/Drawer/Drawer.stories.mdx
deleted file mode 100644
index 9c55fd5c..00000000
--- a/packages/apsara-ui/src/Drawer/Drawer.stories.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Meta, Preview, Canvas, Story, ArgsTable, IconGallery, IconItem } from "@storybook/addon-docs/blocks";
-import Drawer from "./Drawer";
-
-<Meta
-    title="Feedback/Drawer"
-    argTypes={{
-        position: {
-            description: "Can be set to",
-            control: { type: "select", options: ["left", "right"] },
-            table: {
-                type: { summary: ["left", "right"] },
-                defaultValue: { summary: "left" },
-            },
-        },
-        open: {
-            description: "Can be set to",
-            control: { type: "boolean" },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    }}
-/>
-
-<Canvas>
-    <Story
-        name="left"
-        args={{
-            position: "left",
-            open: true,
-        }}
-    >
-        {(args) => <Drawer {...args}>position left</Drawer>}
-    </Story>
-</Canvas>
-
-<Preview>
-    <Story
-        name="Playground"
-        args={{
-            position: "left",
-            open: false,
-        }}
-    >
-        {(args) => <Drawer {...args}>position</Drawer>}
-    </Story>
-</Preview>
-
-<ArgsTable story="Playground" />
diff --git a/packages/apsara-ui/src/Drawer/Drawer.stories.tsx b/packages/apsara-ui/src/Drawer/Drawer.stories.tsx
new file mode 100644
index 00000000..7e9a3ec8
--- /dev/null
+++ 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,
+};
\ No newline at end of file
diff --git a/packages/apsara-ui/src/Drawer/Drawer.styles.tsx b/packages/apsara-ui/src/Drawer/Drawer.styles.tsx
index bb1b1608..275e78c0 100644
--- 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
index adc6306d..083cb3f7 100644
--- 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
index c6988bf5..d6169fab 100644
--- 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",