Skip to content

Commit 875e323

Browse files
xiaoyatongxiaoyatong
committed
feat: 支持 icon
1 parent e6e0a20 commit 875e323

File tree

11 files changed

+42
-44
lines changed

11 files changed

+42
-44
lines changed

‎migrate-from-v2.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -562,10 +562,9 @@ plugins: [
562562

563563
#### BackTop
564564

565-
- `elId` 重命名为 `target`
566-
- 移除 `right`、`bottom`，通过 style 传入，增加支持 `left`、`top`
567-
- `distance` 重命名为 `threshold`
568-
- 移除 `isAnimation`，通过 `duration` 设置 0 实现无动画效果
565+
- 使用 `HoverButton` 重构 `BackTop`
566+
- 新增 `icon` 字段，可直接修改图标
567+
- 继续支持自定义节点
569568

570569
#### Dialog
571570

‎src/packages/backtop/__test__/backtop.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ test('backtop custom test', () => {
4545
'style',
4646
'z-index: 900; bottom: 110px; right: 10px;'
4747
)
48-
4948
fireEvent.click(container)
5049
expect(handleClick).toBeCalled
5150
expect(container).toMatchSnapshot()
@@ -61,14 +60,15 @@ test('scroll', async () => {
6160
</div>
6261
)
6362
const track = container.querySelector('.backtop-wrapper')
63+
const element18 = container.querySelectorAll('.backtop-button')[0]
6464
if (track) {
6565
track.scrollTop = 200
6666
act(() => {
6767
track.dispatchEvent(new Event('scroll'))
6868
})
6969
await waitFor(() => {
70-
const element18 = container.querySelector('.backtop-button')
7170
expect(element18).toHaveClass('nut-backtop-show')
7271
})
72+
fireEvent.click(element18 as Element)
7373
}
7474
})

‎src/packages/backtop/backtop.taro.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,21 @@ import {
1515
import { ITouchEvent, View } from '@tarojs/components'
1616
import classNames from 'classnames'
1717
import { Top } from '@nutui/icons-react-taro'
18-
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
19-
import HoverButton from '@/packages/hoverbutton/index.taro'
20-
import { harmonyAndRn, rn } from '@/utils/platform-taro'
18+
import { ComponentDefaults } from '@/utils/typings'
19+
import HoverButton, {
20+
HoverButtonProps,
21+
} from '@/packages/hoverbutton/index.taro'
22+
import { rn } from '@/utils/platform-taro'
2123

22-
export interface BackTopProps extends BasicComponent {
24+
export interface BackTopProps extends HoverButtonProps {
2325
threshold: number
2426
zIndex: number
2527
duration: number
2628
/**
2729
* 容器滚动时的回调参数，主要用于 rn、鸿蒙端
2830
*/
2931
scrollRes?: PageScrollObject
30-
onClick?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void
32+
// onClick?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void
3133
}
3234

3335
const defaultProps = {
@@ -37,8 +39,6 @@ const defaultProps = {
3739
duration: 1000,
3840
} as BackTopProps
3941

40-
const isNative = harmonyAndRn()
41-
4242
export const BackTop: FunctionComponent<
4343
Partial<BackTopProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>
4444
> = (props) => {
@@ -48,6 +48,7 @@ export const BackTop: FunctionComponent<
4848
zIndex,
4949
className,
5050
duration,
51+
icon,
5152
style,
5253
scrollRes,
5354
onClick,
@@ -104,7 +105,7 @@ export const BackTop: FunctionComponent<
104105
<HoverButton
105106
className={cls}
106107
style={{ zIndex, ...style }}
107-
icon={!children && <Top />}
108+
icon={!children && (icon || <Top />)}
108109
onClick={(e) => {
109110
goTop(e)
110111
}}

‎src/packages/backtop/backtop.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import React, {
88
import type { MouseEvent } from 'react'
99
import classNames from 'classnames'
1010
import { Top } from '@nutui/icons-react'
11-
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
11+
import { ComponentDefaults } from '@/utils/typings'
1212
import requestAniFrame, { cancelRaf } from '@/utils/raf'
13-
import HoverButton from '@/packages/hoverbutton/index'
13+
import HoverButton, { HoverButtonProps } from '@/packages/hoverbutton/index'
1414

15-
export interface BackTopProps extends BasicComponent {
15+
export interface BackTopProps extends HoverButtonProps {
1616
target: string
1717
threshold: number
1818
zIndex: number
@@ -38,6 +38,7 @@ export const BackTop: FunctionComponent<
3838
zIndex,
3939
className,
4040
duration,
41+
icon,
4142
style,
4243
onClick,
4344
} = {
@@ -123,7 +124,7 @@ export const BackTop: FunctionComponent<
123124
<HoverButton
124125
className={cls}
125126
style={{ zIndex, ...style }}
126-
icon={!children && <Top />}
127+
icon={!children && (icon || <Top />)}
127128
onClick={(e) => {
128129
goTop(e)
129130
}}

‎src/packages/backtop/demo.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@ const BackTopDemo = () => {
1616
})
1717

1818
return (
19-
<div className="demo">
20-
<h2>{translated.title}</h2>
21-
<Demo1 />
22-
</div>
19+
<>
20+
<div className="demo" style={{ height: '100vh' }} id="target">
21+
<h2>{translated.title}</h2>
22+
<Demo1 />
23+
</div>
24+
</>
2325
)
2426
}
2527

‎src/packages/backtop/demos/h5/demo1.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import { BackTop, Cell } from '@nutui/nutui-react'
33

44
const Demo1 = () => {
55
return (
6-
<div id="target" style={{ height: '100vh' }}>
6+
<>
77
{new Array(24).fill(0).map((_, index) => {
88
return <Cell key={index}>我是测试数据{index}</Cell>
99
})}
1010
<BackTop target="target" />
11-
</div>
11+
</>
1212
)
1313
}
1414
export default Demo1

‎src/packages/backtop/demos/h5/demo2.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import { BackTop, Cell } from '@nutui/nutui-react'
33

44
const Demo2 = () => {
55
return (
6-
<div id="target" style={{ height: '100vh' }}>
6+
<>
77
{new Array(24).fill(0).map((_, index) => {
88
return <Cell key={index}>我是测试数据{index}</Cell>
99
})}
1010
<BackTop target="target" threshold={200} />
11-
</div>
11+
</>
1212
)
1313
}
1414
export default Demo2

‎src/packages/backtop/demos/h5/demo3.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import { BackTop, Cell } from '@nutui/nutui-react'
44

55
const Demo3 = () => {
66
return (
7-
<div id="target" style={{ height: '100vh' }}>
7+
<>
88
{new Array(24).fill(0).map((_, index) => {
99
return <Cell key={index}>我是测试数据{index}</Cell>
1010
})}
1111
<BackTop threshold={100} target="target">
1212
<Top width={12} height={12} />
1313
<div style={{ fontSize: '12px' }}>顶部</div>
1414
</BackTop>
15-
</div>
15+
</>
1616
)
1717
}
1818
export default Demo3

‎src/packages/backtop/demos/h5/demo4.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { BackTop, Cell } from '@nutui/nutui-react'
33

44
const Demo4 = () => {
55
return (
6-
<div id="target" style={{ height: '800px', overflowY: 'auto' }}>
6+
<div id="target2" style={{ height: '800px', overflowY: 'auto' }}>
77
{new Array(24).fill(0).map((_, index) => {
88
return <Cell key={index}>我是测试数据{index}</Cell>
99
})}
10-
<BackTop target="target" threshold={100} />
10+
<BackTop target="target2" threshold={100} />
1111
</div>
1212
)
1313
}

‎src/packages/backtop/demos/h5/demo5.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
11
import React from 'react'
22
import { BackTop, Cell } from '@nutui/nutui-react'
3-
import { Top } from '@nutui/icons-react'
43

54
const Demo5 = () => {
65
const handleClick = () => {
7-
console.log('触发返回顶部')
6+
const ele = document.getElementsByClassName('backtop-button')[0]
87
}
98
return (
10-
<div style={{ height: '100vh' }} id="target">
9+
<>
1110
{new Array(24).fill(0).map((_, index) => {
1211
return <Cell key={index}>我是测试数据{index}</Cell>
1312
})}
1413
<BackTop
15-
threshold={200}
16-
style={{
17-
bottom: '50px',
18-
right: '20px',
14+
onClick={() => {
15+
handleClick()
1916
}}
20-
onClick={handleClick}
2117
target="target"
22-
>
23-
<Top width={12} height={12} />
24-
<div style={{ fontSize: '12px' }}>顶部</div>
25-
</BackTop>
26-
</div>
18+
className="backtop-button"
19+
/>
20+
</>
2721
)
2822
}
2923
export default Demo5

0 commit comments

Comments
 (0)