feat(navbar): v15 (#2881)

* feat(navbar): v15 * feat(navbar): v15 - taro * feat(navbar): v15 - taro * fix: spell error * fix: review
jdf2e · Dec 26, 2024 · ccaf3b6 · ccaf3b6
1 parent 3eea54a
commit ccaf3b6
Show file tree

Hide file tree

Showing 16 changed files with 309 additions and 556 deletions.
diff --git a/migrate-from-v2.md b/migrate-from-v2.md
@@ -273,16 +273,9 @@ plugins: [
 
 #### NavBar
 
-- `desc` 重命名为 `right`，类型修改为 `React.Node`
-- 新增 `left`，左侧内容，渲染在返回区域的右侧
-- 新增 `back`，返回区域内容
-- `onClickBack` 重命名为 `onBackClick`
-- 移除 `title`，通过 `children` 实现
-- 移除 `leftText` `leftShow`，通过 `back`、`left`实现
-- `safeAreaInsetTop` 重命名为 `safeArea`
-- `border` 废弃
-- 移除 `onClickTitle` `onClickRight` `onClickIcon`，通过在`left`、`title`、`right`自定义事件实现，参考文档demo示例
--
+- 移除 titleAlign 属性，可通过 title 和 children 替代
+- 增加 title 属性，默认居中展示
+- 组件中出现 children ，则采取 titleAlign 的 left 方式布局
 
 #### Pagination
 

diff --git a/src/config.json b/src/config.json
@@ -331,6 +331,7 @@
           "sort": 1,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "dsj"
         },
         {

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 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`should render placeholder element when using placeholder prop 1`] = `"<div class="nut-navbar nut-navbar-fixed nut-navbar-align-center" style="z-index: 10;"><div class="nut-navbar-title nut-navbar-title-align-center" style="min-width: 100%; width: 100%;">订单详情</div><div class="nut-navbar-right nut-navbar-right-align-center"></div></div>"`;
+exports[`should render placeholder element when using placeholder prop 1`] = `"<div class="nut-navbar nut-navbar-fixed" style="z-index: 10;"><div class="nut-navbar-left nut-navbar-left-hidden"></div><div class="nut-navbar-title">订单详情</div><div class="nut-navbar-right"></div></div>"`;
diff --git a/src/packages/navbar/demos/h5/demo1.tsx b/src/packages/navbar/demos/h5/demo1.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import { NavBar, Toast } from '@nutui/nutui-react'
-import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
+import { ArrowLeft, Close, More, Share } from '@nutui/icons-react'
 
 const Demo1 = () => {
   const styles = {
     flexCenter: {
       display: 'flex',
-      aliginItems: 'center',
+      alignItems: 'center',
     },
     title: {
       fontSize: '18px',
@@ -18,73 +18,51 @@ const Demo1 = () => {
       fontWeight: 400,
       color: 'rgba(0,0,0, 0.5)',
       lineHeight: '16px',
-      textAlign: 'center',
     },
   }
   return (
     <>
       <NavBar
+        title="页面标题"
         back={
           <>
             <ArrowLeft />
             返回
           </>
         }
-        right={
-          <span style={styles.flexCenter} onClick={(e) => Toast.show('icon')}>
-            <Share />
-          </span>
-        }
+        right={<Share onClick={(e) => Toast.show('icon')} />}
         onBackClick={(e) => Toast.show('返回')}
-      >
-        订单详情
-      </NavBar>
+      />
       <NavBar
-        right={
-          <span style={styles.flexCenter} onClick={(e) => Toast.show('icon')}>
-            <Share />
-          </span>
-        }
+        title="页面标题"
+        right={<Share onClick={(e) => Toast.show('icon')} />}
         onBackClick={(e) => Toast.show('返回')}
-      >
-        订单详情
-      </NavBar>
+      />
       <NavBar
+        title={
+          <div style={{ ...styles.flexCenter, flexDirection: 'column' }}>
+            <span style={styles.title} onClick={(e) => Toast.show('标题')}>
+              页面标题
+            </span>
+            <span style={styles.description}>副标题</span>
+          </div>
+        }
         right={<span onClick={(e) => Toast.show('清空')}>清空</span>}
         left={<Close />}
         back={<ArrowLeft />}
         onBackClick={(e) => Toast.show('返回')}
-      >
-        <div style={{ ...styles.flexCenter, flexDirection: 'column' }}>
-          <span style={styles.title} onClick={(e) => Toast.show('标题')}>
-            浏览记录
-          </span>
-          <span style={styles.description}>浏览记录</span>
-        </div>
-      </NavBar>
+      />
       <NavBar
         back={<ArrowLeft />}
+        title={<span onClick={(e) => Toast.show('页面标题')}>页面标题</span>}
         right={
           <>
-            <span
-              style={{ marginRight: '5px' }}
-              onClick={(e) => Toast.show('编辑')}
-            >
-              编辑
-            </span>
+            <span onClick={(e) => Toast.show('编辑')}>编辑</span>
             <More onClick={(e) => Toast.show('icon')} />
           </>
         }
         onBackClick={(e) => Toast.show('返回')}
-      >
-        <span onClick={(e) => Toast.show('标题')}>购物车</span>
-        <i
-          style={{ ...styles.flexCenter, margin: '0 5px' }}
-          onClick={(e) => Toast.show('icon')}
-        >
-          <Cart />
-        </i>
-      </NavBar>
+      />
     </>
   )
 }

diff --git a/src/packages/navbar/demos/h5/demo2.tsx b/src/packages/navbar/demos/h5/demo2.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { NavBar, Toast } from '@nutui/nutui-react'
-import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
+import { NavBar, Toast, Space } from '@nutui/nutui-react'
+import { ArrowLeft, Close, More, Share } from '@nutui/icons-react'
 
 const Demo2 = () => {
   const styles = {
     flexCenter: {
       display: 'flex',
-      aliginItems: 'center',
+      alignItems: 'center',
     },
     title: {
       fontSize: '18px',
@@ -22,72 +22,59 @@ const Demo2 = () => {
   }
   return (
     <>
-      <NavBar
-        titleAlign="left"
-        back={
-          <>
-            <ArrowLeft />
-            返回
-          </>
-        }
-        right={
-          <span style={styles.flexCenter} onClick={(e) => Toast.show('icon')}>
-            <Share />
-          </span>
-        }
-        onBackClick={(e) => Toast.show('返回')}
-      >
-        订单详情
-      </NavBar>
-      <NavBar
-        titleAlign="left"
-        right={
-          <span style={styles.flexCenter} onClick={(e) => Toast.show('icon')}>
-            <Share />
-          </span>
-        }
-        onBackClick={(e) => Toast.show('返回')}
-      >
-        订单详情
-      </NavBar>
-      <NavBar
-        titleAlign="left"
-        right={<span onClick={(e) => Toast.show('清空')}>清空</span>}
-        left={<Close />}
-        back={<ArrowLeft />}
-        onBackClick={(e) => Toast.show('返回')}
-      >
-        <div style={{ ...styles.flexCenter, flexDirection: 'column' }}>
-          <span style={styles.title} onClick={(e) => Toast.show('标题')}>
-            浏览记录
-          </span>
-          <span style={styles.description}>浏览记录</span>
+      <Space direction="vertical">
+        <div style={{ background: '#fff' }}>
+          <NavBar
+            back={
+              <>
+                <ArrowLeft />
+                返回
+              </>
+            }
+            right={<Share onClick={(e) => Toast.show('icon')} />}
+            onBackClick={(e) => Toast.show('返回')}
+          >
+            页面标题
+          </NavBar>
         </div>
-      </NavBar>
-      <NavBar
-        titleAlign="left"
-        back={<ArrowLeft />}
-        right={
-          <>
-            <span
-              style={{ marginRight: '5px' }}
-              onClick={(e) => Toast.show('编辑')}
-            >
-              编辑
-            </span>
-            <More onClick={(e) => Toast.show('icon')} />
-          </>
-        }
-        onBackClick={(e) => Toast.show('返回')}
-      >
-        <span onClick={(e) => Toast.show('标题')}>购物车</span>
-        <i
-          style={{ ...styles.flexCenter, margin: '0 5px' }}
-          onClick={(e) => Toast.show('icon')}
-        >
-          <Cart />
-        </i>
-      </NavBar>
+        <div style={{ background: '#fff' }}>
+          <NavBar
+            right={<Share onClick={(e) => Toast.show('icon')} />}
+            onBackClick={(e) => Toast.show('返回')}
+          >
+            页面标题
+          </NavBar>
+        </div>
+        <div style={{ background: '#fff' }}>
+          <NavBar
+            right={<span onClick={(e) => Toast.show('清空')}>清空</span>}
+            left={<Close />}
+            back={<ArrowLeft />}
+            onBackClick={(e) => Toast.show('返回')}
+          >
+            <div style={{ ...styles.flexCenter, flexDirection: 'column' }}>
+              <span style={styles.title} onClick={(e) => Toast.show('标题')}>
+                页面标题
+              </span>
+              <span style={styles.description}>副标题</span>
+            </div>
+          </NavBar>
+        </div>
+        <div style={{ background: '#fff' }}>
+          <NavBar
+            back={<ArrowLeft />}
+            right={
+              <>
+                <span onClick={(e) => Toast.show('编辑')}>编辑</span>
+                <More onClick={(e) => Toast.show('icon')} />
+              </>
+            }
+            onBackClick={(e) => Toast.show('返回')}
+          >
+            <span onClick={(e) => Toast.show('页面标题')}>页面标题</span>
+          </NavBar>
+        </div>
+      </Space>
     </>
   )
 }

diff --git a/src/packages/navbar/demos/h5/demo3.tsx b/src/packages/navbar/demos/h5/demo3.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { NavBar, Toast, Tabs, TabPane } from '@nutui/nutui-react'
-import { More, ArrowLeft } from '@nutui/icons-react'
+import { NavBar, TabPane, Tabs, Toast } from '@nutui/nutui-react'
+import { ArrowLeft, More } from '@nutui/icons-react'
 
 const Demo3 = () => {
   const [tab1value, setTab1value] = useState<string | number>('0')
@@ -11,12 +11,7 @@ const Demo3 = () => {
         back={<ArrowLeft />}
         right={
           <>
-            <span
-              onClick={(e) => Toast.show('编辑')}
-              style={{ marginRight: '5px' }}
-            >
-              编辑
-            </span>
+            <span onClick={(e) => Toast.show('编辑')}>编辑</span>
             <More onClick={(e) => Toast.show('icon')} />
           </>
         }
@@ -36,21 +31,14 @@ const Demo3 = () => {
             <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>
       <NavBar
-        titleAlign="left"
         back={<ArrowLeft />}
         right={
           <>
-            <span
-              onClick={(e) => Toast.show('编辑')}
-              style={{ marginRight: '5px' }}
-            >
-              编辑
-            </span>
+            <span onClick={(e) => Toast.show('编辑')}>编辑</span>
             <More onClick={(e) => Toast.show('icon')} />
           </>
         }
@@ -68,7 +56,6 @@ const Demo3 = () => {
           >
             <TabPane title="Tab1"> Tab1 </TabPane>
             <TabPane title="Tab2"> Tab2 </TabPane>
-            <TabPane title="Tab3"> Tab3 </TabPane>
           </Tabs>
         </div>
       </NavBar>