feat(navbar): title区域自适应宽度 (#1891)

jdf2e · Jan 26, 2024 · f70d860 · f70d860
1 parent cf9f8d6
commit f70d860
Show file tree

Hide file tree

Showing 11 changed files with 205 additions and 31 deletions.
diff --git a/src/packages/navbar/__test__/__snapshots__/navbar.spec.tsx.snap b/src/packages/navbar/__test__/__snapshots__/navbar.spec.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render placeholder element when using placeholder prop 1`] = `"<div class="nut-navbar nut-navbar-fixed nut-navbar-title-align-center" style="z-index: 10;"><div class="nut-navbar-title">订单详情</div><div class="nut-navbar-right"></div></div>"`;
+exports[`should render placeholder element when using placeholder prop 1`] = `"<div class="nut-navbar nut-navbar-fixed nut-navbar-title-align-center" style="z-index: 10;"><div class="nut-navbar-title" style="min-width: 100%; width: 100%;">订单详情</div><div class="nut-navbar-right"></div></div>"`;
diff --git a/src/packages/navbar/demo.scss b/src/packages/navbar/demo.scss
@@ -13,6 +13,9 @@
       font-size: 12px;
       color: $color-text-help;
     }
+    &.title-left {
+      text-align: left;
+    }
   }
 
   .navbar-tabs {

diff --git a/src/packages/navbar/demo.taro.tsx b/src/packages/navbar/demo.taro.tsx
@@ -151,16 +151,21 @@ const NavBarDemo = () => {
           }
           onBackClick={(e) => Taro.showToast({ title: translated.a74a1fd4 })}
         >
-          <div>
+          <div style={{ width: '100%' }}>
             <Tabs
               value={tab1value}
               onChange={(paneKey) => {
                 setTab1value(paneKey)
               }}
+              style={{
+                '--nutui-tabs-titles-padding': 0,
+                '--nutui-tabs-titles-gap': 0,
+              }}
             >
               <TabPane title="Tab 1"> Tab 1 </TabPane>
               <TabPane title="Tab 2"> Tab 2 </TabPane>
               <TabPane title="Tab 3"> Tab 3 </TabPane>
+              <TabPane title="Tab 4"> Tab 4 </TabPane>
             </Tabs>
           </div>
         </NavBar>
@@ -200,7 +205,7 @@ const NavBarDemo = () => {
           back={<ArrowLeft size={14} />}
           onBackClick={(e) => Taro.showToast({ title: translated.a74a1fd4 })}
         >
-          <div className="title">
+          <div className="title title-left">
             <span
               onClick={(e) => Taro.showToast({ title: translated.cfbdc781 })}
             >

diff --git a/src/packages/navbar/demo.tsx b/src/packages/navbar/demo.tsx
@@ -134,16 +134,21 @@ const NavBarDemo = () => {
           }
           onBackClick={(e) => Toast.show(translated.a74a1fd4)}
         >
-          <div>
+          <div style={{ width: '100%' }}>
             <Tabs
               value={tab1value}
               onChange={(paneKey) => {
                 setTab1value(paneKey)
               }}
+              style={{
+                '--nutui-tabs-titles-padding': 0,
+                '--nutui-tabs-titles-gap': 0,
+              }}
             >
               <TabPane title="Tab 1"> Tab 1 </TabPane>
               <TabPane title="Tab 2"> Tab 2 </TabPane>
               <TabPane title="Tab 3"> Tab 3 </TabPane>
+              <TabPane title="Tab 4"> Tab 4 </TabPane>
             </Tabs>
           </div>
         </NavBar>
@@ -187,7 +192,7 @@ const NavBarDemo = () => {
           back={<ArrowLeft />}
           onBackClick={(e) => Toast.show(translated.a74a1fd4)}
         >
-          <div className="title">
+          <div className="title title-left">
             <span onClick={(e) => Toast.show(translated.b840c88f)}>
               {translated.e51e4582}
             </span>

diff --git a/src/packages/navbar/doc.en-US.md b/src/packages/navbar/doc.en-US.md
@@ -138,11 +138,19 @@ const App = () => {
           }
           onBackClick={(e) => Toast.show("back")}
         >
-            <Tabs value={tab1value} onChange={({ paneKey }) => { setTab1value(paneKey) }}>
-              <TabPane title="Tab 1"> Tab 1 </TabPane>
-              <TabPane title="Tab 2"> Tab 2 </TabPane>
-              <TabPane title="Tab 3"> Tab 3 </TabPane>
-            </Tabs>
+            <div style={{ width: '100%' }}>
+              <Tabs value={tab1value} onChange={({ paneKey }) => { setTab1value(paneKey) }}
+                style={{
+                  '--nutui-tabs-titles-padding': 0,
+                  '--nutui-tabs-titles-gap': 0,
+                }}
+              >
+                <TabPane title="Tab 1"> Tab 1 </TabPane>
+                <TabPane title="Tab 2"> Tab 2 </TabPane>
+                <TabPane title="Tab 3"> Tab 3 </TabPane>
+                <TabPane title="Tab 4"> Tab 4 </TabPane>
+              </Tabs>
+            </div>
       </NavBar>
   );
 };  

diff --git a/src/packages/navbar/doc.md b/src/packages/navbar/doc.md
@@ -139,11 +139,19 @@ const App = () => {
           }
           onBackClick={(e) =>  Toast.show("返回")}
         >
-            <Tabs value={tab1value} onChange={({ paneKey }) => { setTab1value(paneKey) }}>
+          <div style={{ width: '100%' }}>
+            <Tabs value={tab1value} onChange={({ paneKey }) => { setTab1value(paneKey) }}
+              style={{
+                '--nutui-tabs-titles-padding': 0,
+                '--nutui-tabs-titles-gap': 0,
+              }}
+            >
               <TabPane title="Tab 1"> Tab 1 </TabPane>
               <TabPane title="Tab 2"> Tab 2 </TabPane>
               <TabPane title="Tab 3"> Tab 3 </TabPane>
+              <TabPane title="Tab 4"> Tab 4 </TabPane>
             </Tabs>
+          </div>
       </NavBar>
   );
 };  

diff --git a/src/packages/navbar/doc.taro.md b/src/packages/navbar/doc.taro.md
@@ -126,6 +126,7 @@ import  React, { useState } from "react";
 import { NavBar, Tabs, TabPane } from '@nutui/nutui-react-taro';
 import { ArrowLeft,More } from '@nutui/icons-react-taro'
 import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
 
 const App = () => {
   const [tab1value, setTab1value] = useState('0')
@@ -142,11 +143,19 @@ const App = () => {
           }
           onBackClick={(e) => Taro.showToast({ title: '返回' })}
         >
-            <Tabs value={tab1value} onChange={({ paneKey }) => { setTab1value(paneKey) }}>
+          <View style={{ width: '100%' }}>
+            <Tabs value={tab1value} onChange={({ paneKey }) => { setTab1value(paneKey) }}
+              style={{
+                '--nutui-tabs-titles-padding': 0,
+                '--nutui-tabs-titles-gap': 0,
+              }}
+            >
               <TabPane title="Tab 1"> Tab 1 </TabPane>
               <TabPane title="Tab 2"> Tab 2 </TabPane>
               <TabPane title="Tab 3"> Tab 3 </TabPane>
+              <TabPane title="Tab 4"> Tab 4 </TabPane>
             </Tabs>
+          </View>
       </NavBar>
   );
 };  

diff --git a/src/packages/navbar/doc.zh-TW.md b/src/packages/navbar/doc.zh-TW.md
@@ -138,11 +138,19 @@ const App = () => {
           }
           onBackClick={(e) =>  Toast.show("返回")}
         >
-            <Tabs value={tab1value} onChange={({ paneKey }) => { setTab1value(paneKey) }}>
+          <div style={{ width: '100%' }}>
+            <Tabs value={tab1value} onChange={({ paneKey }) => { setTab1value(paneKey) }}
+              style={{
+                '--nutui-tabs-titles-padding': 0,
+                '--nutui-tabs-titles-gap': 0,
+              }}
+            >
               <TabPane title="Tab 1"> Tab 1 </TabPane>
               <TabPane title="Tab 2"> Tab 2 </TabPane>
               <TabPane title="Tab 3"> Tab 3 </TabPane>
+              <TabPane title="Tab 4"> Tab 4 </TabPane>
             </Tabs>
+          </div>
       </NavBar>
   );
 };  

diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss
@@ -108,10 +108,17 @@
         }
       }
     }
+    .nut-navbar-right {
+      position: static;
+      display: inline-flex;
+      white-space: nowrap;
+      padding-left: 0;
+    }
     .nut-navbar-left-back {
       margin-right: 0;
     }
     .nut-navbar-title {
+      min-width: 0;
       margin: 0;
       flex: 1;
       justify-content: flex-start;

diff --git a/src/packages/navbar/navbar.taro.tsx b/src/packages/navbar/navbar.taro.tsx
@@ -1,7 +1,9 @@
-import React, { FunctionComponent } from 'react'
+import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
 
+import { ITouchEvent, View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { getRectByTaro } from '@/utils/get-rect-by-taro'
 
 export interface NavBarProps extends BasicComponent {
   left: React.ReactNode
@@ -12,7 +14,7 @@ export interface NavBarProps extends BasicComponent {
   safeAreaInsetTop: boolean
   placeholder: boolean
   zIndex: number | string
-  onBackClick: (e: React.MouseEvent<HTMLElement>) => void
+  onBackClick: (e: ITouchEvent) => void
   children?: React.ReactNode
 }
 
@@ -58,37 +60,97 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
     }
   }
 
+  const leftRef = useRef<any>(null)
+  const rightRef = useRef<any>(null)
+  const wrapperRef = useRef<any>(null)
+  const [contentWidth, setContentWidth] = useState('50%')
+
+  const getNodeWidth = async (node: Element | null) => {
+    if (node) {
+      const refe = await getRectByTaro(node)
+      return refe.width
+    }
+    return 0
+  }
+
+  useEffect(() => {
+    if (titleAlign === 'left') {
+      return
+    }
+    if (!(back || left || right)) {
+      setContentWidth('100%')
+    }
+
+    const init = async () => {
+      const leftRectWidth = await getNodeWidth(leftRef?.current)
+      const rightRectWidth = await getNodeWidth(rightRef?.current)
+      const wrapperWidth = await getNodeWidth(wrapperRef?.current)
+      let centerWidth = wrapperWidth / 2
+
+      if (leftRectWidth && rightRectWidth) {
+        centerWidth =
+          wrapperWidth -
+          (leftRectWidth > rightRectWidth
+            ? leftRectWidth * 2
+            : rightRectWidth * 2)
+      } else {
+        centerWidth = wrapperWidth - leftRectWidth * 2 - rightRectWidth * 2
+      }
+      setContentWidth(centerWidth.toFixed(2))
+    }
+    init()
+  }, [left, right, back])
+
   const renderLeft = () => {
-    return (
-      <div className={`${classPrefix}-left`}>
+    return back || left ? (
+      <View className={`${classPrefix}-left`} ref={leftRef}>
         {back && (
-          <div
+          <View
             className={`${classPrefix}-left-back`}
             onClick={(e) => onBackClick(e)}
           >
             {back}
-          </div>
+          </View>
         )}
         {left}
-      </div>
-    )
+      </View>
+    ) : null
   }
 
   const renderContent = () => {
-    return <div className={`${classPrefix}-title`}>{children}</div>
+    let titleStyle = {}
+    if (titleAlign === 'center') {
+      const contentRealWidth = `${contentWidth}${
+        /%$/i.test(contentWidth) ? '' : 'px'
+      }`
+      titleStyle = {
+        minWidth: contentRealWidth,
+        width: contentRealWidth,
+      }
+    }
+
+    return (
+      <View className={`${classPrefix}-title`} style={titleStyle}>
+        {children}
+      </View>
+    )
   }
 
   const renderRight = () => {
-    return <div className={`${classPrefix}-right`}>{right}</div>
+    return (
+      <View className={`${classPrefix}-right`} ref={rightRef}>
+        {right}
+      </View>
+    )
   }
 
   const renderWrapper = () => {
     return (
-      <div className={cls} style={styles()}>
+      <View className={cls} style={styles()} ref={wrapperRef}>
         {renderLeft()}
         {renderContent()}
         {renderRight()}
-      </div>
+      </View>
     )
   }
 
@@ -103,7 +165,7 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
   return (
     <>
       {fixed && placeholder ? (
-        <div className={`${classPrefix}-placeholder`}>{renderWrapper()}</div>
+        <View className={`${classPrefix}-placeholder`}>{renderWrapper()}</View>
       ) : (
         renderWrapper()
       )}