From ccaf3b6e047f32603e522a0635fe761d3259398e Mon Sep 17 00:00:00 2001 From: oasis <12181600+oasis-cloud@users.noreply.github.com> Date: Thu, 26 Dec 2024 21:08:06 +0800 Subject: [PATCH] feat(navbar): v15 (#2881) * feat(navbar): v15 * feat(navbar): v15 - taro * feat(navbar): v15 - taro * fix: spell error * fix: review --- migrate-from-v2.md | 13 +- src/config.json | 1 + .../__snapshots__/navbar.spec.tsx.snap | 2 +- src/packages/navbar/demos/h5/demo1.tsx | 62 ++----- src/packages/navbar/demos/h5/demo2.tsx | 123 ++++++------- src/packages/navbar/demos/h5/demo3.tsx | 21 +-- src/packages/navbar/demos/taro/demo1.tsx | 114 +++++------- src/packages/navbar/demos/taro/demo2.tsx | 172 +++++++++--------- src/packages/navbar/demos/taro/demo3.tsx | 95 ++++------ src/packages/navbar/doc.en-US.md | 2 +- src/packages/navbar/doc.md | 2 +- src/packages/navbar/doc.taro.md | 2 +- src/packages/navbar/doc.zh-TW.md | 2 +- src/packages/navbar/navbar.scss | 72 ++++---- src/packages/navbar/navbar.taro.tsx | 94 ++-------- src/packages/navbar/navbar.tsx | 88 ++------- 16 files changed, 309 insertions(+), 556 deletions(-) diff --git a/migrate-from-v2.md b/migrate-from-v2.md index 6e386b6808..1e2cfc813c 100644 --- 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 index 57a6efe126..d73b6a7108 100644 --- 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 index deea30ccb2..3559dc5741 100644 --- 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`] = `"
订单详情
"`; +exports[`should render placeholder element when using placeholder prop 1`] = `"
订单详情
"`; diff --git a/src/packages/navbar/demos/h5/demo1.tsx b/src/packages/navbar/demos/h5/demo1.tsx index bf2768d318..7b7783dc7b 100644 --- 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 ( <> 返回 } - right={ - Toast.show('icon')}> - - - } + right={ Toast.show('icon')} />} onBackClick={(e) => Toast.show('返回')} - > - 订单详情 - + /> Toast.show('icon')}> - - - } + title="页面标题" + right={ Toast.show('icon')} />} onBackClick={(e) => Toast.show('返回')} - > - 订单详情 - + /> + Toast.show('标题')}> + 页面标题 + + 副标题 + + } right={ Toast.show('清空')}>清空} left={} back={} onBackClick={(e) => Toast.show('返回')} - > -
- Toast.show('标题')}> - 浏览记录 - - 浏览记录 -
- + /> } + title={ Toast.show('页面标题')}>页面标题} right={ <> - Toast.show('编辑')} - > - 编辑 - + Toast.show('编辑')}>编辑 Toast.show('icon')} /> } onBackClick={(e) => Toast.show('返回')} - > - Toast.show('标题')}>购物车 - Toast.show('icon')} - > - - - + /> ) } diff --git a/src/packages/navbar/demos/h5/demo2.tsx b/src/packages/navbar/demos/h5/demo2.tsx index d347e807aa..9d04f15111 100644 --- 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 ( <> - - - 返回 - - } - right={ - Toast.show('icon')}> - - - } - onBackClick={(e) => Toast.show('返回')} - > - 订单详情 - - Toast.show('icon')}> - - - } - onBackClick={(e) => Toast.show('返回')} - > - 订单详情 - - Toast.show('清空')}>清空} - left={} - back={} - onBackClick={(e) => Toast.show('返回')} - > -
- Toast.show('标题')}> - 浏览记录 - - 浏览记录 + +
+ + + 返回 + + } + right={ Toast.show('icon')} />} + onBackClick={(e) => Toast.show('返回')} + > + 页面标题 +
- - } - right={ - <> - Toast.show('编辑')} - > - 编辑 - - Toast.show('icon')} /> - - } - onBackClick={(e) => Toast.show('返回')} - > - Toast.show('标题')}>购物车 - Toast.show('icon')} - > - - - +
+ Toast.show('icon')} />} + onBackClick={(e) => Toast.show('返回')} + > + 页面标题 + +
+
+ Toast.show('清空')}>清空} + left={} + back={} + onBackClick={(e) => Toast.show('返回')} + > +
+ Toast.show('标题')}> + 页面标题 + + 副标题 +
+ +
+
+ } + right={ + <> + Toast.show('编辑')}>编辑 + Toast.show('icon')} /> + + } + onBackClick={(e) => Toast.show('返回')} + > + Toast.show('页面标题')}>页面标题 + +
+ ) } diff --git a/src/packages/navbar/demos/h5/demo3.tsx b/src/packages/navbar/demos/h5/demo3.tsx index 4edb8308f5..a09ff8c27e 100644 --- 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('0') @@ -11,12 +11,7 @@ const Demo3 = () => { back={} right={ <> - Toast.show('编辑')} - style={{ marginRight: '5px' }} - > - 编辑 - + Toast.show('编辑')}>编辑 Toast.show('icon')} /> } @@ -36,21 +31,14 @@ const Demo3 = () => { Tab 1 Tab 2 Tab 3 - Tab 4
} right={ <> - Toast.show('编辑')} - style={{ marginRight: '5px' }} - > - 编辑 - + Toast.show('编辑')}>编辑 Toast.show('icon')} /> } @@ -68,7 +56,6 @@ const Demo3 = () => { > Tab1 Tab2 - Tab3 diff --git a/src/packages/navbar/demos/taro/demo1.tsx b/src/packages/navbar/demos/taro/demo1.tsx index 26c80cb60e..2494f5967f 100644 --- a/src/packages/navbar/demos/taro/demo1.tsx +++ b/src/packages/navbar/demos/taro/demo1.tsx @@ -1,8 +1,9 @@ import React from 'react' -import { NavBar } from '@nutui/nutui-react-taro' -import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react-taro' import Taro from '@tarojs/taro' -import { View, Text } from '@tarojs/components' +import { View } from '@tarojs/components' +import { NavBar } from '@nutui/nutui-react-taro' +import { ArrowLeft, Close, More, Share } from '@nutui/icons-react-taro' +import { harmony } from '@/utils/platform-taro' import pxTransform from '@/utils/px-transform' const Demo1 = () => { @@ -21,101 +22,68 @@ const Demo1 = () => { fontWeight: 400, color: 'rgba(0,0,0, 0.5)', lineHeight: pxTransform(16), - textAlign: 'center', }, } return ( <> - - 返回 + + 返回 } - right={ - Taro.showToast({ title: 'icon' })} - > - - - } + right={ Taro.showToast({ title: 'icon' })} />} onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - 订单详情 - + /> Taro.showToast({ title: 'icon' })} - > - - - } + title="页面标题" + right={ Taro.showToast({ title: 'icon' })} />} onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - 订单详情 - + /> + Taro.showToast({ title: '标题' })} + > + 页面标题 + + 副标题 + + } right={ - Taro.showToast({ title: '清空' })}>清空 + Taro.showToast({ title: '清空' })}>清空 } - left={} - back={} + left={} + back={} onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - - Taro.showToast({ title: '标题' })} - > - 浏览记录 - - 浏览记录 - - + /> } + back={} + title={ + Taro.showToast({ title: '页面标题' })} + > + 页面标题 + + } right={ <> - Taro.showToast({ title: '编辑' })} > 编辑 - - Taro.showToast({ title: 'icon' })} - /> + + Taro.showToast({ title: 'icon' })} /> } onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - Taro.showToast({ title: '标题' })} - > - 购物车 - - Taro.showToast({ title: 'icon' })} - > - - - + /> ) } diff --git a/src/packages/navbar/demos/taro/demo2.tsx b/src/packages/navbar/demos/taro/demo2.tsx index 7d0b538b9c..43dbc34304 100644 --- a/src/packages/navbar/demos/taro/demo2.tsx +++ b/src/packages/navbar/demos/taro/demo2.tsx @@ -1,15 +1,16 @@ import React from 'react' -import { NavBar } from '@nutui/nutui-react-taro' -import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react-taro' import Taro from '@tarojs/taro' -import { View, Text } from '@tarojs/components' +import { View } from '@tarojs/components' +import { NavBar, Space } from '@nutui/nutui-react-taro' +import { ArrowLeft, Close, More, Share } from '@nutui/icons-react-taro' +import { harmony } from '@/utils/platform-taro' import pxTransform from '@/utils/px-transform' const Demo2 = () => { const styles = { flexCenter: { display: 'flex', - aliginItems: 'center', + alignItems: 'center', }, title: { fontSize: pxTransform(18), @@ -25,99 +26,88 @@ const Demo2 = () => { } return ( <> - - - 返回 - - } - right={ - Taro.showToast({ title: 'icon' })} + + + + + 返回 + + } + right={ Taro.showToast({ title: 'icon' })} />} + onBackClick={(e) => Taro.showToast({ title: '返回' })} > - - - } - onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - 订单详情 - - Taro.showToast({ title: 'icon' })} + Taro.showToast({ title: '页面标题' })} + > + 页面标题 + + + + + Taro.showToast({ title: 'icon' })} />} + onBackClick={(e) => Taro.showToast({ title: '返回' })} > - - - } - onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - 订单详情 - - Taro.showToast({ title: '清空' })}>清空 - } - left={} - back={} - onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - - Taro.showToast({ title: '标题' })} + Taro.showToast({ title: '页面标题' })} + > + 页面标题 + + + + + Taro.showToast({ title: '清空' })}> + 清空 + + } + left={} + back={} + onBackClick={(e) => Taro.showToast({ title: '返回' })} > - 浏览记录 - - 浏览记录 + + + Taro.showToast({ title: '标题' })} + > + 页面标题 + + 副标题 + + + - - } - right={ - <> - Taro.showToast({ title: '编辑' })} + + } + right={ + <> + Taro.showToast({ title: '编辑' })} + > + 编辑 + + Taro.showToast({ title: 'icon' })} /> + + } + onBackClick={(e) => Taro.showToast({ title: '返回' })} + > + Taro.showToast({ title: '页面标题' })} > - 编辑 - - Taro.showToast({ title: 'icon' })} - /> - - } - onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - Taro.showToast({ title: '标题' })} - > - 购物车 - - Taro.showToast({ title: 'icon' })} - > - + 页面标题 + + - + ) } diff --git a/src/packages/navbar/demos/taro/demo3.tsx b/src/packages/navbar/demos/taro/demo3.tsx index 7e72af1beb..9cc3f34e0c 100644 --- a/src/packages/navbar/demos/taro/demo3.tsx +++ b/src/packages/navbar/demos/taro/demo3.tsx @@ -1,92 +1,63 @@ import React, { useState } from 'react' -import { NavBar, Tabs, TabPane } from '@nutui/nutui-react-taro' import Taro from '@tarojs/taro' -import { View, Text } from '@tarojs/components' +import { View } from '@tarojs/components' +import { NavBar, TabPane, Tabs } from '@nutui/nutui-react-taro' import { ArrowLeft, More } from '@nutui/icons-react-taro' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo3 = () => { const [tab1value, setTab1value] = useState('0') const [tab2value, setTab2value] = useState('0') - - const isRnAndHarmony = harmonyAndRn() return ( <> } + back={} right={ <> - Taro.showToast({ title: '编辑' })} - > - 编辑 - - - Taro.showToast({ title: 'icon' })} - /> + Taro.showToast({ title: '编辑' })}>编辑 + Taro.showToast({ title: 'icon' })} /> } onBackClick={(e) => Taro.showToast({ title: '返回' })} > - {isRnAndHarmony ? null : ( - { - setTab1value(paneKey) - }} - style={{ - background: 'transparent', - }} - > - Tab 1 - Tab 2 - Tab 3 - Tab 4 - - )} + { + setTab1value(paneKey) + }} + style={{ + '--nutui-tabs-titles-gap': 0, + }} + > + Tab 1 + Tab 2 + Tab 3 + - } + back={} right={ <> - Taro.showToast({ title: '编辑' })} - > - 编辑 - - Taro.showToast({ title: 'icon' })} - /> + Taro.showToast({ title: '编辑' })}>编辑 + Taro.showToast({ title: 'icon' })} /> } onBackClick={(e) => Taro.showToast({ title: '返回' })} > - {isRnAndHarmony ? null : ( - { - setTab2value(paneKey) - }} - > - Tab 1 - Tab 2 - Tab 3 - - )} + { + setTab2value(paneKey) + }} + > + Tab1 + Tab2 + diff --git a/src/packages/navbar/doc.en-US.md b/src/packages/navbar/doc.en-US.md index 9b63ed45ee..56c4aa2f15 100644 --- a/src/packages/navbar/doc.en-US.md +++ b/src/packages/navbar/doc.en-US.md @@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react' | right | Right side content | `ReactNode` | `-` | | left | The left content, rendered to the right of the return area | `ReactNode` | `-` | | back | Returns the text of the area | `ReactNode` | `-` | -| titleAlign | Title align, optional value center、left | `string` | `center` | +| title | Title | `ReactNode` | `-` | | fixed | Is it fixed | `boolean` | `false` | | safeAreaInsetTop | Whether it is suitable for the safe area | `boolean` | `false` | | placeholder | When fixed to the top, whether to generate a placeholder element of equal height at the label position | `boolean` | `false` | diff --git a/src/packages/navbar/doc.md b/src/packages/navbar/doc.md index 6eee70e428..971ae1aa16 100644 --- a/src/packages/navbar/doc.md +++ b/src/packages/navbar/doc.md @@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react' | right | 右侧内容 | `ReactNode` | `-` | | left | 左侧内容，渲染在返回区域的右侧 | `ReactNode` | `-` | | back | 返回区域的文字 | `ReactNode` | `-` | -| titleAlign | 标题位置,可选值center left | `string` | `center` | +| title | 标题 | `ReactNode` | `-` | | fixed | 是否固定 | `boolean` | `false` | | safeAreaInsetTop | 是否适配安全区 | `boolean` | `false` | | placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | `boolean` | `false` | diff --git a/src/packages/navbar/doc.taro.md b/src/packages/navbar/doc.taro.md index 368a2ec14d..d0595763c8 100644 --- a/src/packages/navbar/doc.taro.md +++ b/src/packages/navbar/doc.taro.md @@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react-taro' | right | 右侧内容 | `ReactNode` | `-` | | left | 左侧内容，渲染在返回区域的右侧 | `ReactNode` | `-` | | back | 返回区域的文字 | `ReactNode` | `-` | -| titleAlign | 标题位置,可选值center left | `string` | `center` | +| title | 标题 | `ReactNode` | `-` | | fixed | 是否固定 | `boolean` | `false` | | safeAreaInsetTop | 是否适配安全区 | `boolean` | `false` | | placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | `boolean` | `false` | diff --git a/src/packages/navbar/doc.zh-TW.md b/src/packages/navbar/doc.zh-TW.md index 80759f3722..1e9108499c 100644 --- a/src/packages/navbar/doc.zh-TW.md +++ b/src/packages/navbar/doc.zh-TW.md @@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react' | right | 右側內容 | `ReactNode` | `-` | | left | 左側內容，渲染在返回區域的右側 | `ReactNode` | `-` | | back | 返回區域的文字 | `ReactNode` | `-` | -| titleAlign | 標題位置,可選值center left | `string` | `center` | +| title | 標題 | `ReactNode` | `-` | | fixed | 是否固定 | `boolean` | `false` | | safeAreaInsetTop | 是否適配安全區 | `boolean` | `false` | | placeholder | 固定在頂部時，是否在標簽位置生成一個等高的佔位元素 | `boolean` | `false` | diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss index 55195ae53b..1bb48f8a19 100644 --- a/src/packages/navbar/navbar.scss +++ b/src/packages/navbar/navbar.scss @@ -3,16 +3,14 @@ position: relative; display: flex; flex-direction: row; - justify-content: center; + justify-content: space-between; align-items: center; height: $navbar-height; box-sizing: border-box; - background: $navbar-background; - box-shadow: $navbar-box-shadow; font-size: $navbar-font-size; color: $navbar-color; - margin-bottom: $navbar-margin-bottom; overflow: hidden; + padding: 0 16px; &-fixed { position: fixed; @@ -32,27 +30,24 @@ padding-top: env(safe-area-inset-top); } - &-align-left { - padding-left: 14px; + &-title-wrapper { + justify-content: space-between; } &-title { - width: 50%; height: 100%; text-align: center; display: flex; + flex: 1; flex-direction: row; align-items: center; - justify-content: center; font-size: $navbar-title-font-size; font-weight: $navbar-title-font-weight; color: $navbar-title-font-color; - &-align-left { - min-width: 0; - flex: 1; - justify-content: flex-start; - padding: 0 8px; - text-align: left; + + &-center { + max-width: 129px; + justify-content: center; } } @@ -62,15 +57,12 @@ &-left, &-right { - position: absolute; - top: 0; - bottom: 0; display: flex; align-items: center; flex-direction: row; + max-width: 124px; height: 100%; cursor: pointer; - padding: 0 14px; /* #ifndef rn harmony jd h5 weapp*/ .nut-icon, .nutui-iconfont { @@ -78,18 +70,21 @@ height: 20px; font-size: 20px; } + /* #endif */ + &-maxwidth { + box-sizing: border-box; + width: calc(124px - 16px); + } } &-left { - left: 0; + padding-right: 16px; + gap: 16px; + &-rtl { - left: auto; - right: 0; - } - &-align-left { - position: static; - padding: 0; + padding-right: 0; + padding-left: 16px; } &-back { @@ -97,29 +92,26 @@ flex-direction: row; align-items: center; justify-content: center; - &-children { - margin-right: 10px; - &-rtl { - margin-right: 0; - margin-left: 10px; - } - } + gap: 16px; + } + + &-hidden { + padding-left: 0; + padding-right: 0; } } &-right { - right: 0; + padding-left: 16px; + justify-content: flex-end; + gap: 16px; + &-rtl { - right: auto; - left: 0; - } - &-align-left { - position: static; - display: inline-flex; - white-space: nowrap; + padding-right: 16px; padding-left: 0; } } + &-rtl { .nut-icon-ArrowLeft { transform: rotateY(180deg); diff --git a/src/packages/navbar/navbar.taro.tsx b/src/packages/navbar/navbar.taro.tsx index ca5952b90a..8d2988a712 100644 --- a/src/packages/navbar/navbar.taro.tsx +++ b/src/packages/navbar/navbar.taro.tsx @@ -1,18 +1,15 @@ -import React, { FunctionComponent, useEffect, useRef, useState } from 'react' +import React, { FunctionComponent } from 'react' import classNames from 'classnames' import { ITouchEvent, View } from '@tarojs/components' import { useRtl } from '@/packages/configprovider/index.taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' -import { getRectByTaro } from '@/utils/get-rect-by-taro' -import { harmonyAndRn } from '@/utils/platform-taro' -import pxTransform from '@/utils/px-transform' -import { SafeArea } from '@/packages/safearea/safearea.taro' +import SafeArea from '@/packages/safearea/index.taro' export interface NavBarProps extends BasicComponent { left: React.ReactNode back: React.ReactNode right: React.ReactNode - titleAlign: 'center' | 'left' + title: React.ReactNode fixed: boolean safeAreaInsetTop: boolean placeholder: boolean @@ -25,7 +22,6 @@ const defaultProps = { ...ComponentDefaults, left: '', right: '', - titleAlign: 'center', back: '', fixed: false, safeAreaInsetTop: false, @@ -36,7 +32,7 @@ export const NavBar: FunctionComponent> = (props) => { const { right, left, - titleAlign, + title, className, style, back, @@ -65,64 +61,20 @@ export const NavBar: FunctionComponent> = (props) => { } } - const leftRef = useRef(null) - const rightRef = useRef(null) - const wrapperRef = useRef(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)) - } - setTimeout(() => { - init() - }, 0) - }, [left, right, back]) - const renderLeft = () => { - return back || left ? ( + return ( - {back && ( + {back ? ( > = (props) => { > {back} - )} + ) : null} {left} - ) : null + ) } const renderContent = () => { - let titleStyle = {} - if (titleAlign === 'center') { - const width = harmonyAndRn() - ? pxTransform(Number(contentWidth)) - : `${contentWidth}px` - const contentRealWidth = /%$/i.test(contentWidth) ? contentWidth : width - titleStyle = { - width: contentRealWidth, - } - } - return ( - {children} + {title || children} ) } @@ -166,10 +106,9 @@ export const NavBar: FunctionComponent> = (props) => { {right} @@ -178,7 +117,7 @@ export const NavBar: FunctionComponent> = (props) => { const renderWrapper = () => { return ( - + {renderLeft()} {renderContent()} {renderRight()} @@ -189,11 +128,12 @@ export const NavBar: FunctionComponent> = (props) => { const classes = classNames({ [`${classPrefix}-fixed`]: fixed, [`${classPrefix}-safe-area-inset-top`]: safeAreaInsetTop, - [`${classPrefix}-align-${titleAlign}`]: true, [`${classPrefix}-rtl`]: rtl, }) - const cls = classNames(classPrefix, classes, className) + const cls = classNames(classPrefix, classes, className, { + [`${classPrefix}-title-wrapper`]: title, + }) return ( <> diff --git a/src/packages/navbar/navbar.tsx b/src/packages/navbar/navbar.tsx index 962b0a1aa5..86430db137 100644 --- a/src/packages/navbar/navbar.tsx +++ b/src/packages/navbar/navbar.tsx @@ -1,15 +1,14 @@ -import React, { FunctionComponent, useEffect, useRef, useState } from 'react' +import React, { FunctionComponent } from 'react' import classNames from 'classnames' import { useRtl } from '@/packages/configprovider/index' import { BasicComponent, ComponentDefaults } from '@/utils/typings' -import { getRect } from '@/utils/use-client-rect' -import { SafeArea } from '@/packages/safearea/safearea' +import SafeArea from '@/packages/safearea' export interface NavBarProps extends BasicComponent { left: React.ReactNode back: React.ReactNode right: React.ReactNode - titleAlign: 'center' | 'left' + title: React.ReactNode fixed: boolean safeAreaInsetTop: boolean placeholder: boolean @@ -22,7 +21,6 @@ const defaultProps = { ...ComponentDefaults, left: '', right: '', - titleAlign: 'center', back: '', fixed: false, safeAreaInsetTop: false, @@ -33,7 +31,7 @@ export const NavBar: FunctionComponent> = (props) => { const { right, left, - titleAlign, + title, className, style, back, @@ -62,60 +60,20 @@ export const NavBar: FunctionComponent> = (props) => { } } - const leftRef = useRef(null) - const rightRef = useRef(null) - const wrapperRef = useRef(null) - const [contentWidth, setContentWidth] = useState('50%') - - const getNodeWidth = (node: Element | null) => { - if (node) { - const ele = getRect(node) - return ele.width - } - return 0 - } - - useEffect(() => { - if (titleAlign === 'left') { - return - } - if (!(back || left || right)) { - setContentWidth('100%') - return - } - const leftRectWidth = getNodeWidth(leftRef?.current) - const rightRectWidth = getNodeWidth(rightRef?.current) - const wrapperWidth = 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)) - }, [left, right, back]) - const renderLeft = () => { - return back || left ? ( + return (
- {back && ( + {back ? (
> = (props) => { > {back}
- )} + ) : null} {left}
- ) : null + ) } const renderContent = () => { - let titleStyle = {} - if (titleAlign === 'center') { - const contentRealWidth = `${contentWidth}${ - /%$/i.test(contentWidth) ? '' : 'px' - }` - titleStyle = { - minWidth: contentRealWidth, - width: contentRealWidth, - } - } - return (
- {children} + {title || children}
) } @@ -159,10 +105,9 @@ export const NavBar: FunctionComponent> = (props) => {
{right}
@@ -171,7 +116,7 @@ export const NavBar: FunctionComponent> = (props) => { const renderWrapper = () => { return ( -
+
{renderLeft()} {renderContent()} {renderRight()} @@ -182,11 +127,12 @@ export const NavBar: FunctionComponent> = (props) => { const classes = classNames({ [`${classPrefix}-fixed`]: fixed, [`${classPrefix}-safe-area-inset-top`]: safeAreaInsetTop, - [`${classPrefix}-align-${titleAlign}`]: true, [`${classPrefix}-rtl`]: rtl, }) - const cls = classNames(classPrefix, classes, className) + const cls = classNames(classPrefix, classes, className, { + [`${classPrefix}-title-wrapper`]: title, + }) return ( <>