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] 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 00000000..073c218e
--- /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 a11ed52e..df9a02f6 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"