feat(onTabDrop): onTabDrop 事件新增鼠标位置参数 (#3)

uiwjs · Aug 20, 2022 · bb0b8cd · bb0b8cd
1 parent 61e914c
commit bb0b8cd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/core/README.md b/core/README.md
@@ -256,15 +256,18 @@ 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);
   };
   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
@@ -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
@@ -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 }) => {