From 335d2280a18ede8f5d99cdb9ee4bcdf50ec0b465 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 18 Mar 2025 12:48:00 +0800 Subject: [PATCH 1/2] fix(fixednav): harmony --- src/config.json | 2 +- src/packages/fixednav/demo.taro.tsx | 5 +- src/packages/fixednav/demos/h5/demo5.tsx | 11 ++- src/packages/fixednav/demos/taro/demo1.tsx | 21 +++--- src/packages/fixednav/demos/taro/demo2.tsx | 23 +++--- src/packages/fixednav/demos/taro/demo3.tsx | 19 +++-- src/packages/fixednav/demos/taro/demo4.tsx | 22 +++--- src/packages/fixednav/fixednav.scss | 82 ++++++++++++---------- src/packages/fixednav/fixednav.taro.tsx | 6 +- src/packages/fixednav/fixednav.tsx | 4 +- 10 files changed, 104 insertions(+), 91 deletions(-) diff --git a/src/config.json b/src/config.json index 7b054c0244..84a46e709e 100644 --- a/src/config.json +++ b/src/config.json @@ -330,7 +330,7 @@ "taro": true, "v15": 100, "author": "Ymm0008", - "dd": false + "dd": true }, { "version": "3.0.0", diff --git a/src/packages/fixednav/demo.taro.tsx b/src/packages/fixednav/demo.taro.tsx index c161ebe614..4a27b8a734 100644 --- a/src/packages/fixednav/demo.taro.tsx +++ b/src/packages/fixednav/demo.taro.tsx @@ -1,6 +1,7 @@ import React from 'react' import Taro from '@tarojs/taro' import { ScrollView } from '@tarojs/components' +import { harmony } from '@/utils/platform-taro' import Header from '@/sites/components/header' import Demo1 from './demos/taro/demo1' import Demo2 from './demos/taro/demo2' @@ -17,8 +18,8 @@ const FixedNavDemo = () => { - {/* */} - + {/* 配合 Drag 支持拖拽 ，harmony暂不支持 */} + {harmony() ? null : } ) diff --git a/src/packages/fixednav/demos/h5/demo5.tsx b/src/packages/fixednav/demos/h5/demo5.tsx index 2943f1ec0b..17fdd9b87f 100644 --- a/src/packages/fixednav/demos/h5/demo5.tsx +++ b/src/packages/fixednav/demos/h5/demo5.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react' -import { Drag, FixedNav } from '@nutui/nutui-react' +import { Drag, FixedNav, useRtl } from '@nutui/nutui-react' const Demo5 = () => { + const rtl = useRtl() const list = [ { id: 1, @@ -37,7 +38,13 @@ const Demo5 = () => { } return ( <> - + { const list = [ @@ -36,17 +37,15 @@ const Demo1 = () => { console.log(item, event) } return ( - <> - - + ) } export default Demo1 diff --git a/src/packages/fixednav/demos/taro/demo2.tsx b/src/packages/fixednav/demos/taro/demo2.tsx index fe8b0a3f29..d874bdb6c1 100644 --- a/src/packages/fixednav/demos/taro/demo2.tsx +++ b/src/packages/fixednav/demos/taro/demo2.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { FixedNav } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo2 = () => { const list = [ @@ -36,18 +37,16 @@ const Demo2 = () => { console.log(item, event) } return ( - <> - - + ) } export default Demo2 diff --git a/src/packages/fixednav/demos/taro/demo3.tsx b/src/packages/fixednav/demos/taro/demo3.tsx index bc92d8b776..4e91c5f835 100644 --- a/src/packages/fixednav/demos/taro/demo3.tsx +++ b/src/packages/fixednav/demos/taro/demo3.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { FixedNav } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo3 = () => { const list = [ @@ -36,16 +37,14 @@ const Demo3 = () => { console.log(item, event) } return ( - <> - - + ) } export default Demo3 diff --git a/src/packages/fixednav/demos/taro/demo4.tsx b/src/packages/fixednav/demos/taro/demo4.tsx index 65a54d025d..bb600ceaee 100644 --- a/src/packages/fixednav/demos/taro/demo4.tsx +++ b/src/packages/fixednav/demos/taro/demo4.tsx @@ -1,6 +1,8 @@ import React, { useState } from 'react' import { FixedNav } from '@nutui/nutui-react-taro' import { Retweet } from '@nutui/icons-react-taro' +import { View, Text } from '@tarojs/components' +import pxTransform from '@/utils/px-transform' const Demo4 = () => { const [visible, setVisible] = useState(false) @@ -16,7 +18,7 @@ const Demo4 = () => { return ( <> { content={ <> - {visible ? '自定义开' : '自定义关'} + {visible ? '自定义开' : '自定义关'} } > -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • 5
    • -
+ + {[1, 2, 3, 4, 5].map((item) => { + return ( + + {item} + + ) + })} + ) diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss index c3b321634b..7c85ede37e 100644 --- a/src/packages/fixednav/fixednav.scss +++ b/src/packages/fixednav/fixednav.scss @@ -6,7 +6,6 @@ z-index: $fixednav-index; display: inline-block; height: 50px; - right: 0; &.active { .nut-fixednav-btn { @@ -19,9 +18,9 @@ transform: translateX(0%) !important; } - &.left { + &.nut-fixednav-left { .nut-icon { - transform: rotate(0deg) !important; + transform: rotate(0deg); } } } @@ -29,13 +28,10 @@ &-btn { box-sizing: border-box; position: absolute; - right: 0; - z-index: $fixednav-index; width: 70px; height: 100%; background: $fixednav-button-background; - border-radius: 45px 0px 0px 45px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); display: flex; align-items: center; @@ -50,33 +46,21 @@ } .nut-icon { - margin-right: 5px; - transition: all 0.3s; - transform: rotate(0deg); transition: all 0.3s; } } &-list { position: absolute; - right: 0; - transform: translateX(100%); transition: all 0.5s; - z-index: $fixednav-index; flex-shrink: 0; height: 100%; background: $fixednav-background-color; display: flex; justify-content: space-between; - border-radius: 25px 0px 0px 25px; box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); - padding: { - left: 20px; - right: 80px; - } - &-item { position: relative; flex: 1; @@ -89,57 +73,77 @@ flex-shrink: 0; color: $fixednav-color; - img { - width: 20px; - height: 20px; - margin-bottom: 2px; - } - .nut-fixednav-list-text { font-size: 10px; } } + + &-image { + width: 20px; + height: 20px; + margin-bottom: 2px; + } } - &.left { - right: auto; - left: 0; + &-right { + right: 0; + .nut-fixednav-btn { + right: 0; + border-radius: 45px 0px 0px 45px; + .nut-icon { + margin-right: 5px; + transform: rotate(0deg); + } + } + .nut-fixednav-list { + right: 0; + transform: translateX(100%); + border-radius: 25px 0px 0px 25px; + padding: { + left: 20px; + right: 80px; + } + } + } + &-left { + left: 0; .nut-fixednav-btn { flex-direction: row-reverse; - right: auto; left: 0; border-radius: 0 45px 45px 0; - .nut-icon { - transform: rotate(180deg); - margin-right: 0px; margin-left: 5px; + transform: rotate(180deg); } } .nut-fixednav-list { transform: translateX(-100%); - right: auto; + left: 0; border-radius: 0px 25px 25px 0px; - padding: { left: 80px; right: 20px; } - - margin: 0; } } } [dir='rtl'] .nut-fixednav, .nut-rtl .nut-fixednav { - right: auto; - left: 0; + &-right { + right: auto; + left: 0; + } &.active { .nut-icon { - transform: rotate(-180deg); + transform: rotate(0deg); + } + &.nut-fixednav-left { + .nut-icon { + transform: rotate(-180deg); + } } } @@ -174,7 +178,7 @@ } } - &.left { + &-left { left: auto; right: 0; diff --git a/src/packages/fixednav/fixednav.taro.tsx b/src/packages/fixednav/fixednav.taro.tsx index 85581835c8..1074e4951f 100644 --- a/src/packages/fixednav/fixednav.taro.tsx +++ b/src/packages/fixednav/fixednav.taro.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent } from 'react' import classNames from 'classnames' import { ArrowLeft } from '@nutui/icons-react-taro' -import { View } from '@tarojs/components' +import { View, Image } from '@tarojs/components' import Overlay from '@/packages/overlay/index.taro' import { useConfig } from '@/packages/configprovider/index.taro' import { TaroFixedNavProps } from '@/types' @@ -55,7 +55,7 @@ export const FixedNav: FunctionComponent< { active: visible, }, - type, + `${classPrefix}-${type}`, className ) @@ -69,7 +69,7 @@ export const FixedNav: FunctionComponent< {React.isValidElement(item.icon) ? ( item.icon ) : ( - + )} {item.text} diff --git a/src/packages/fixednav/fixednav.tsx b/src/packages/fixednav/fixednav.tsx index cc403ed863..281495e5d5 100644 --- a/src/packages/fixednav/fixednav.tsx +++ b/src/packages/fixednav/fixednav.tsx @@ -55,7 +55,7 @@ export const FixedNav: FunctionComponent< { active: visible, }, - type, + `${classPrefix}-${type}`, className ) @@ -69,7 +69,7 @@ export const FixedNav: FunctionComponent< {React.isValidElement(item.icon) ? ( item.icon ) : ( - + )}
{item.text}
From a2ac78b9d7988d08d33df2edf37d48f077018307 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 18 Mar 2025 12:55:12 +0800 Subject: [PATCH 2/2] fix: update test --- src/packages/fixednav/__tests__/fixednav.spec.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/packages/fixednav/__tests__/fixednav.spec.tsx b/src/packages/fixednav/__tests__/fixednav.spec.tsx index 5f7520d442..dce90d380b 100644 --- a/src/packages/fixednav/__tests__/fixednav.spec.tsx +++ b/src/packages/fixednav/__tests__/fixednav.spec.tsx @@ -30,12 +30,16 @@ const list: FixedNavItem[] = [ test('basic usage', () => { const { container } = render() - expect(container.querySelector('.nut-fixednav')).toHaveClass('right') + expect(container.querySelector('.nut-fixednav')).toHaveClass( + 'nut-fixednav-right' + ) }) test('left nav', () => { const { container } = render() - expect(container.querySelector('.nut-fixednav')).toHaveClass('left') + expect(container.querySelector('.nut-fixednav')).toHaveClass( + 'nut-fixednav-left' + ) }) test('should be displayed after setting the un-active-text', () => {