fix: fix activeKay props issue.

Author: jaywcjlove

core/README.md

@@ -145,6 +145,13 @@ function App() {
   };
   const closeHandle = (item, evn) => {
     evn.stopPropagation();
+    const idx = data.findIndex((m) => m.id === item.id);
+
+    let active = '';
+    if (idx > -1 && activeKey) {
+      active = data[idx - 1] ? data[idx - 1].id : data[idx].id;
+      setActiveKey(active || '');
+    }
     setData(data.filter((m) => m.id !== item.id));
   };
   const addHandle = () => {
@@ -161,6 +168,7 @@ function App() {
     <Fragment>
       <button onClick={addHandle}>Add{count}</button>
       <TabWarp
+        activeKey={activeKey}
         style={{ gap: 3, overflow: 'auto' }}
         onTabClick={(id, evn) => tabClick(id, evn)}
         onTabDrop={(id, index) => tabDrop(id, index)}
@@ -256,7 +264,7 @@ function App() {
   return (
     <Fragment>
       <button onClick={addHandle}>Add{count}</button>
-      <TabWarp style={{}} onTabClick={(id, evn) => tabClick(id, evn)} onTabDrop={(id, index) => tabDrop(id, index)}>
+      <TabWarp onTabClick={(id, evn) => tabClick(id, evn)} onTabDrop={(id, index) => tabDrop(id, index)}>
         {data.map((m, idx) => {
           return (
             <TabItem key={idx} id={m.id}>

core/src/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { FC, isValidElement, PropsWithChildren, useLayoutEffect } from 'react';
+import React, { FC, isValidElement, PropsWithChildren, useEffect, useLayoutEffect } from 'react';
 import { useDrop } from 'react-dnd';
 import { useDataContext, InitialState } from './store';
 import { ItemTypes } from './Tab';
@@ -10,6 +10,8 @@ export const Tabs: FC<PropsWithChildren<TabsProps>> = ({ children, activeKey, ..
     accept: ItemTypes.Tab,
   }));
 
+  useEffect(() => dispatch!({ activeKey }), [activeKey]);
+
   useLayoutEffect(() => {
     if (children) {
       const data: InitialState['data'] = [];

core/src/index.tsx

@@ -17,17 +17,14 @@ export interface TabsProps extends React.DetailedHTMLProps<React.HTMLAttributes<
   onTabDrop?: (id: string, index?: number) => void;
 }
 
-const TabContainer: FC<PropsWithChildren<TabsProps>> = ({ activeKey: keyId, onTabClick, onTabDrop, ...props }) => {
+const TabContainer: FC<PropsWithChildren<TabsProps>> = ({ activeKey, onTabClick, onTabDrop, ...props }) => {
   const tabClick = useEventCallback(onTabClick!);
   const tabDrop = useEventCallback(onTabDrop!);
-  const [activeKey, setActiveKey] = useState(keyId);
-
-  useEffect(() => setActiveKey(keyId), [keyId]);
 
   return (
     <DndProvider backend={HTML5Backend}>
       <Provider init={{ data: [], activeKey, onTabClick: tabClick, onTabDrop: tabDrop }}>
-        <Tabs {...props} />
+        <Tabs {...props} activeKey={activeKey} />
       </Provider>
     </DndProvider>
   );