fix(react-tabs):优化行样式高亮下滑线不受prop.active参数控制问题 (#850)

uiwjs · Jun 9, 2022 · b62311a · b62311a
1 parent 8859eea
commit b62311a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 13 deletions.
diff --git a/packages/react-search-tree/README.md b/packages/react-search-tree/README.md
@@ -295,6 +295,7 @@ const form=useRef()
                   onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}
                   options={data}
                   placeholder="请选择选项"
+                  treeProps={{ style:{ 'height':200, overflow:'scroll' }}}
                 />
             )
           },

diff --git a/packages/react-tabs/README.md b/packages/react-tabs/README.md
@@ -48,19 +48,34 @@ ReactDOM.render(<Demo />, _mount_);
 ```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Tabs } from 'uiw';
+import { Tabs,Button } from 'uiw';
 
 class Demo extends React.Component {
+   constructor(props) {
+    super(props);
+    this.state = {
+      activeKey: '1',
+    };
+  }
+   onClick() {
+     const { activeKey } = this.state;
+    this.setState({activeKey: activeKey < 4 ? (Number(activeKey) + 1).toString() :'1'})
+  };
+
   render() {
     return (
-      <Tabs type="line" activeKey="1" onTabClick={(tab, key, e) => {
+      <>
+        <Button type="primary" onClick={this.onClick.bind(this)}>点击我切换tab显项卡</Button>
+        <Tabs type="line" activeKey={this.state.activeKey} onTabClick={(key,tab, e) => {
           console.log("=>", key, tab);
+          this.setState({activeKey: key})
         }}>
         <Tabs.Pane label="用户管理" key="1">用户管理</Tabs.Pane>
         <Tabs.Pane disabled label="配置管理" key="2">配置管理</Tabs.Pane>
         <Tabs.Pane sequence="fadeIn up" label="角色管理" key="3">角色管理</Tabs.Pane>
         <Tabs.Pane label="大爷欢乐多" key="4"><div>大爷欢乐多22</div></Tabs.Pane>
-      </Tabs>
+ </Tabs>
+      </>
     );
   }
 }

diff --git a/packages/react-tabs/src/index.tsx b/packages/react-tabs/src/index.tsx
@@ -66,14 +66,14 @@ export default function Tabs(props: TabsProps) {
     }
   }, []);
 
-  const divNavRef = useCallback((node, key: number, itemKey: React.Key | null) => {
+  const divNavRef = useCallback((node, key: number, itemKey: React.Key | null, activeKey) => {
     if (node !== null) {
-      node.addEventListener('click', (e: any) => {
-        activeItem.current = node;
-      });
+      // node.addEventListener('click', (e: any) => {
+      //   activeItem.current = node;
+      // });
       divNavWidthChange(node.getBoundingClientRect().width, key);
 
-      if (itemKey === props.activeKey && type === 'line' && labelWidth === 0) {
+      if (itemKey === activeKey) {
         activeItem.current = node;
       }
     }
@@ -103,9 +103,8 @@ export default function Tabs(props: TabsProps) {
     }
   };
 
-  useEffect(() => setActiveKey(props.activeKey), [props.activeKey]);
+  useEffect(() => setActiveKey(props?.activeKey || ''), [props.activeKey]);
   useEffect(() => calcSlideStyle(), [activeKey]);
-
   function calcSlideStyle() {
     if (activeItem.current && type === 'line') {
       labelWidth = activeItem.current.clientWidth;
@@ -176,7 +175,7 @@ export default function Tabs(props: TabsProps) {
           calcSlideStyle();
         };
       }
-      return <div key={key} ref={(ref) => divNavRef(ref, key, item.key)} {...divProps} />;
+      return <div key={key} ref={(ref) => divNavRef(ref, key, item.key, activeKey)} {...divProps} />;
     });
   }
 }
diff --git a/website/src/routes/components/tabs/index.tsx b/website/src/routes/components/tabs/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Tabs, Divider } from 'uiw';
+import { Tabs, Divider, Button } from 'uiw';
 import Markdown from '../../../components/Markdown';
 
 export default () => (
   <Markdown
     path="https://github.com/uiwjs/uiw/tree/master/packages/react-tabs/README.md"
-    dependencies={{ Tabs, Divider }}
+    dependencies={{ Tabs, Divider, Button }}
     renderPage={async () => {
       const md = await import('uiw/node_modules/@uiw/react-tabs/README.md');
       return md.default || md;