[v4.16.0] fix(Tabs): 修复activeKey 高亮下划线未展示问题 #709 (#716) 1feba3a

uiwjs · Mar 25, 2022 · 73d2fb8 · 73d2fb8
1 parent 9df0ac0
commit 73d2fb8
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 13 deletions.
diff --git a/CONTRIBUTORS.svg b/CONTRIBUTORS.svg
diff --git a/asset-manifest.json b/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.b6a99127.css",
-    "main.js": "/static/js/main.b7bad7cd.js",
+    "main.js": "/static/js/main.cfd2d41b.js",
     "static/css/9200.14abaeb3.chunk.css": "/static/css/9200.14abaeb3.chunk.css",
     "static/js/9200.0a1f7353.chunk.js": "/static/js/9200.0a1f7353.chunk.js",
     "static/css/6730.296853db.chunk.css": "/static/css/6730.296853db.chunk.css",
@@ -226,7 +226,7 @@
     "static/js/5183.ac2ca737.js": "/static/js/5183.ac2ca737.js",
     "index.html": "/index.html",
     "main.b6a99127.css.map": "/static/css/main.b6a99127.css.map",
-    "main.b7bad7cd.js.map": "/static/js/main.b7bad7cd.js.map",
+    "main.cfd2d41b.js.map": "/static/js/main.cfd2d41b.js.map",
     "9200.14abaeb3.chunk.css.map": "/static/css/9200.14abaeb3.chunk.css.map",
     "9200.0a1f7353.chunk.js.map": "/static/js/9200.0a1f7353.chunk.js.map",
     "6730.296853db.chunk.css.map": "/static/css/6730.296853db.chunk.css.map",
@@ -454,6 +454,6 @@
     "static/js/vendors-react.a09f50fb.js",
     "static/js/5183.ac2ca737.js",
     "static/css/main.b6a99127.css",
-    "static/js/main.b7bad7cd.js"
+    "static/js/main.cfd2d41b.js"
   ]
 }
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.b7bad7cd.js"></script><link href="./static/css/main.b6a99127.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.cfd2d41b.js"></script><link href="./static/css/main.b6a99127.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
diff --git a/static/js/main.b7bad7cd.js.map b/static/js/main.b7bad7cd.js.map
diff --git a/static/js/main.b7bad7cd.js → static/js/main.cfd2d41b.js b/static/js/main.b7bad7cd.js → static/js/main.cfd2d41b.js
diff --git a/static/js/main.cfd2d41b.js.map b/static/js/main.cfd2d41b.js.map
diff --git a/uiw.js b/uiw.js
@@ -10005,6 +10005,7 @@ var react_tabs_esm_excluded = ["prefixCls", "className", "children", "type", "ac
 
 
 Tabs.Pane = Pane;
+var labelWidth = 0;
 function Tabs(props) {
   var _flowNav$nav;
 
@@ -10050,12 +10051,16 @@ function Tabs(props) {
       flowNavSet(_extends({}, flowNav));
     }
   }, []);
-  var divNavRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)((node, key) => {
+  var divNavRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)((node, key, itemKey) => {
     if (node !== null) {
       node.addEventListener('click', e => {
         activeItem.current = node;
       });
       divNavWidthChange(node.getBoundingClientRect().width, key);
+
+      if (itemKey === props.activeKey && type === 'line' && labelWidth === 0) {
+        activeItem.current = node;
+      }
     }
   }, []);
 
@@ -10094,6 +10099,7 @@ function Tabs(props) {
 
   function calcSlideStyle() {
     if (activeItem.current && type === 'line') {
+      labelWidth = activeItem.current.clientWidth;
       setSlideStyle({
         width: activeItem.current.clientWidth,
         left: activeItem.current.offsetLeft
@@ -10171,7 +10177,7 @@ function Tabs(props) {
       }
 
       return /*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({
-        ref: _ref => divNavRef(_ref, key)
+        ref: _ref => divNavRef(_ref, key, item.key)
       }, divProps), key);
     });
   }

diff --git a/uiw.min.js b/uiw.min.js