From d2e3f0bd572cbc909fdb6a12129fe9b5301c9a59 Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Tue, 28 May 2024 17:10:39 +0800
Subject: [PATCH 1/2] fix: popover reClick position bug

---
 apps/playground/src/helpers/mock-files.ts | 2 +-
 packages/ui/src/popover.tsx               | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/playground/src/helpers/mock-files.ts b/apps/playground/src/helpers/mock-files.ts
index 80ea6e3..604e4b5 100644
--- a/apps/playground/src/helpers/mock-files.ts
+++ b/apps/playground/src/helpers/mock-files.ts
@@ -56,7 +56,7 @@ const tangoConfigJson = {
     },
     '@music163/antd': {
       description: '云音乐低代码中后台应用基础物料',
-      version: '0.2.5',
+      version: '0.2.6',
       library: 'TangoAntd',
       type: 'baseDependency',
       resources: [
diff --git a/packages/ui/src/popover.tsx b/packages/ui/src/popover.tsx
index e3670c4..4883d6a 100644
--- a/packages/ui/src/popover.tsx
+++ b/packages/ui/src/popover.tsx
@@ -97,6 +97,11 @@ export const Popover: React.FC<PopoverProps> = ({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.preventDefault();
+      if (visible) {
+        setVisible(false);
+        onOpenChange(false);
+        return;
+      }
       const x = e.clientX;
       const y = e.clientY;
       setLeft(x);
@@ -104,7 +109,7 @@ export const Popover: React.FC<PopoverProps> = ({
       setVisible(true);
       onOpenChange(true);
     },
-    [onOpenChange],
+    [visible, onOpenChange],
   );
 
   useEffect(() => {

From 69d9aeb0debc2a6fccc0d1d53e8c618b3fbfaac6 Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Tue, 28 May 2024 18:18:15 +0800
Subject: [PATCH 2/2] fix: drag event lose when drag over iframe

---
 apps/storybook/src/ui/drag-panel.stories.tsx | 43 ++++++++++++++++++++
 packages/ui/src/drag-panel.tsx               | 27 +++++++++++-
 2 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 apps/storybook/src/ui/drag-panel.stories.tsx

diff --git a/apps/storybook/src/ui/drag-panel.stories.tsx b/apps/storybook/src/ui/drag-panel.stories.tsx
new file mode 100644
index 0000000..073c218
--- /dev/null
+++ b/apps/storybook/src/ui/drag-panel.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { DragPanel } from '@music163/tango-ui';
+import { Box, Text } from 'coral-system';
+import { Button } from 'antd';
+
+export default {
+  title: 'UI/DragPanel',
+};
+
+export function Basic() {
+  return (
+    <DragPanel
+      title="弹层标题"
+      extra="右上角内容"
+      width={350}
+      body={<Box p="m">内容</Box>}
+      footer={<Text>底部信息</Text>}
+    >
+      <Button>点击唤起浮层</Button>
+    </DragPanel>
+  );
+}
+
+export function FooterCustom() {
+  return (
+    <DragPanel
+      title="弹层标题"
+      extra="右上角内容"
+      width={350}
+      body={<Box p="m">内容</Box>}
+      footer={(close) => (
+        <Box display="flex" justifyContent="space-between">
+          <Text>底部信息</Text>
+          <Button size="small" onClick={() => close()}>
+            点此关闭
+          </Button>
+        </Box>
+      )}
+    >
+      <Button>点击唤起浮层</Button>
+    </DragPanel>
+  );
+}
diff --git a/packages/ui/src/drag-panel.tsx b/packages/ui/src/drag-panel.tsx
index a11ed52..df9a02f 100644
--- a/packages/ui/src/drag-panel.tsx
+++ b/packages/ui/src/drag-panel.tsx
@@ -5,6 +5,24 @@ import Draggable from 'react-draggable';
 import { CloseOutlined } from '@ant-design/icons';
 import { noop } from '@music163/tango-helpers';
 
+// Dragging over an iframe stops dragging when moving the mouse too fast #613
+// https://github.com/react-grid-layout/react-draggable/issues/613
+const injectStyleToBody = () => {
+  const id = 'react-draggable-transparent-selection';
+  if (document.getElementById(id)) {
+    return;
+  }
+  const style = document.createElement('style');
+  style.id = id;
+  style.innerHTML = `
+  /* Prevent iframes from stealing drag events */
+  .react-draggable-transparent-selection iframe {
+    pointer-events: none;
+  }
+  `;
+  document.head.appendChild(style);
+};
+
 const CloseIcon = styled(CloseOutlined)`
   cursor: pointer;
   margin-left: 10px;
@@ -17,7 +35,7 @@ const CloseIcon = styled(CloseOutlined)`
   }
 `;
 
-interface DragPanelProps extends Omit<PopoverProps, 'overlay'> {
+interface DragPanelProps extends Omit<PopoverProps, 'overlay' | 'open'> {
   // 标题
   title?: React.ReactNode | string;
   // 内容
@@ -59,7 +77,12 @@ export function DragPanel({
         onOpenChange(innerOpen);
       }}
       overlay={
-        <Draggable handle=".selection-drag-bar">
+        <Draggable
+          handle=".selection-drag-bar"
+          onStart={() => {
+            injectStyleToBody();
+          }}
+        >
           <Box
             bg="#FFF"
             borderRadius="m"