From bb0b8cd54a756f9a0d83fc49b5aac56f66049bf7 Mon Sep 17 00:00:00 2001
From: yaobin <yaob421123@163.com>
Date: Sat, 20 Aug 2022 10:26:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(onTabDrop):=20onTabDrop=20=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E6=96=B0=E5=A2=9E=E9=BC=A0=E6=A0=87=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=20(#3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/README.md     | 9 ++++++---
 core/src/Tab.tsx   | 5 +++--
 core/src/index.tsx | 3 ++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/core/README.md b/core/README.md
index 61bd636..d0563a7 100644
--- a/core/README.md
+++ b/core/README.md
@@ -256,7 +256,7 @@ function App() {
     const newData = [...data, { id: `tab-3-${count}`, children: `New Tab ${count}` }];
     setData(newData);
   };
-  const tabDrop = (id, index) => {
+  const tabDrop = (id, index, offset) => {
     const oldIndex = [...data].findIndex((m) => m.id === id);
     const newData = insertAndShift([...data], oldIndex, index);
     setData(newData);
@@ -264,7 +264,10 @@ function App() {
   return (
     <Fragment>
       <button onClick={addHandle}>Add{count}</button>
-      <TabWarp onTabClick={(id, evn) => tabClick(id, evn)} onTabDrop={(id, index) => tabDrop(id, index)}>
+      <TabWarp
+        onTabClick={(id, evn) => tabClick(id, evn)}
+        onTabDrop={(id, index, offset) => tabDrop(id, index, offset)}
+      >
         {data.map((m, idx) => {
           return (
             <TabItem key={idx} id={m.id}>
@@ -290,7 +293,7 @@ export interface TabsProps extends React.DetailedHTMLProps<React.HTMLAttributes<
   /**
    * Optional. Called when a compatible item is dropped on the target.
    */
-  onTabDrop?: (id: string) => void;
+  onTabDrop?: (id: string, index?: number, offset?: XYCoord | null) => void;
 }
 export interface TabProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   id: string;
diff --git a/core/src/Tab.tsx b/core/src/Tab.tsx
index eaabe3b..e65d91a 100644
--- a/core/src/Tab.tsx
+++ b/core/src/Tab.tsx
@@ -76,8 +76,9 @@ export const Tab: FC<PropsWithChildren<TabProps>> = ({ children, id, index, ...p
       item: () => {
         return { id, index };
       },
-      end: (item) => {
-        onTabDrop && onTabDrop(id, item.index);
+      end: (item, monitor) => {
+        const clientOffset = monitor.getClientOffset();
+        onTabDrop && onTabDrop(id, item.index, clientOffset);
       },
       collect: (monitor) => {
         return {
diff --git a/core/src/index.tsx b/core/src/index.tsx
index 6085914..9ff5f33 100644
--- a/core/src/index.tsx
+++ b/core/src/index.tsx
@@ -4,6 +4,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { Tabs } from './Tabs';
 import { Provider } from './store';
 import { useEventCallback } from './hooks';
+import type { XYCoord } from 'dnd-core';
 
 export * from './Tab';
 export * from './hooks';
@@ -14,7 +15,7 @@ export interface TabsProps extends React.DetailedHTMLProps<React.HTMLAttributes<
   /**
    * Optional. Called when a compatible item is dropped on the target.
    */
-  onTabDrop?: (id: string, index?: number) => void;
+  onTabDrop?: (id: string, index?: number, offset?: XYCoord | null) => void;
 }
 
 const TabContainer: FC<PropsWithChildren<TabsProps>> = ({ activeKey, onTabClick, onTabDrop, ...props }) => {