Skip to content

Commit 75a85d6

Browse files
authored
refactor: modify address code & add APIS from docs & add test (#507)
* refactor: modify address code & add APIS from docs & add test * modify address test * modify code * feat: revert code
1 parent 73888cc commit 75a85d6

File tree

6 files changed

+73
-18
lines changed

6 files changed

+73
-18
lines changed

.changeset/thin-jars-divide.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@ant-design/web3': patch
3+
---
4+
5+
refactor: modify address code & add APIS from docs & add test

packages/web3/src/address/__tests__/index.test.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,20 @@ describe('Address', () => {
126126
);
127127
});
128128

129+
it('should display custom tooltip if tooltip is set custom', async () => {
130+
const { baseElement } = render(
131+
<Address
132+
ellipsis
133+
address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'}
134+
tooltip={<span>hello</span>}
135+
/>,
136+
);
137+
fireEvent.mouseEnter(baseElement.querySelector('.ant-web3-address-text')!);
138+
await vi.waitFor(() => {
139+
expect(baseElement.querySelector('.ant-tooltip-inner')?.textContent).toBe('hello');
140+
});
141+
});
142+
129143
it('should show copy icon after 2s', async () => {
130144
const { baseElement } = render(
131145
<Address address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B" copyable />,
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Address } from '@ant-design/web3';
2+
import { Space } from 'antd';
3+
4+
const App: React.FC = () => {
5+
return (
6+
<Space>
7+
<Address ellipsis address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'} tooltip />
8+
<Address
9+
ellipsis
10+
address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'}
11+
tooltip={<span>hello</span>}
12+
/>
13+
<Address ellipsis address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'} tooltip={'hi'} />
14+
<Address ellipsis address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'} tooltip={false} />
15+
</Space>
16+
);
17+
};
18+
19+
export default App;

packages/web3/src/address/index.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,17 @@ group:
1919

2020
<code src="./demos/format.tsx"></code>
2121

22+
## Custom Tooltip
23+
24+
<code src="./demos/customTooltip.tsx"></code>
25+
2226
## API
2327

2428
| Property | Description | Type | Default | Version |
2529
| --- | --- | --- | --- | --- |
2630
| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - |
2731
| copyable | Address copyable | `boolean` | `false` | - |
2832
| address | Address | `string` | - | - |
29-
| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | Displays the current full address | - |
33+
| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
3034
| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
35+
| locale | Multilingual settings | `Locale["address"]` | - | - |

packages/web3/src/address/index.tsx

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { ReactNode } from 'react';
2-
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
2+
import React, { isValidElement, useContext, useEffect, useMemo, useRef, useState } from 'react';
33
import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
44
import type { Locale } from '@ant-design/web3-common';
55
import type { TooltipProps } from 'antd';
@@ -25,7 +25,7 @@ export interface AddressProps {
2525
}
2626

2727
export const Address: React.FC<React.PropsWithChildren<AddressProps>> = (props) => {
28-
const { ellipsis, address, copyable, tooltip, format = false, children, locale } = props;
28+
const { ellipsis, address, copyable, tooltip = true, format = false, children, locale } = props;
2929
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
3030
const prefixCls = getPrefixCls('web3-address');
3131
const { wrapSSR, hashId } = useStyle(prefixCls);
@@ -63,15 +63,32 @@ export const Address: React.FC<React.PropsWithChildren<AddressProps>> = (props)
6363
if (!address) {
6464
return null;
6565
}
66-
6766
const filledAddress = fillWith0x(address);
6867

68+
const mergedTooltip = () => {
69+
if (isValidElement(tooltip) || typeof tooltip === 'string') {
70+
return tooltip;
71+
}
72+
if (tooltip) {
73+
return filledAddress;
74+
}
75+
return tooltip;
76+
};
77+
6978
const formattedAddress = mergedFormat(filledAddress);
70-
const displayTooltip = tooltip === undefined || tooltip === true ? filledAddress : tooltip;
79+
80+
const handleOutlinedChange = () => {
81+
writeCopyText(filledAddress).then(() => {
82+
setCopied(true);
83+
timerRef.current = setTimeout(() => {
84+
setCopied(false);
85+
}, 2000);
86+
});
87+
};
7188

7289
return wrapSSR(
7390
<Space className={classNames(prefixCls, hashId)}>
74-
<Tooltip title={displayTooltip}>
91+
<Tooltip title={mergedTooltip()}>
7592
<span className={`${prefixCls}-text`}>
7693
{children ??
7794
(isEllipsis
@@ -84,17 +101,7 @@ export const Address: React.FC<React.PropsWithChildren<AddressProps>> = (props)
84101
{copied ? (
85102
<CheckOutlined title={messages.copiedTips} />
86103
) : (
87-
<CopyOutlined
88-
title={messages.copyTips}
89-
onClick={() => {
90-
writeCopyText(filledAddress).then(() => {
91-
setCopied(true);
92-
timerRef.current = setTimeout(() => {
93-
setCopied(false);
94-
}, 2000);
95-
});
96-
}}
97-
/>
104+
<CopyOutlined title={messages.copyTips} onClick={handleOutlinedChange} />
98105
)}
99106
</>
100107
)}

packages/web3/src/address/index.zh-CN.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,17 @@ group:
1919

2020
<code src="./demos/format.tsx"></code>
2121

22+
## 自定义Tooltip
23+
24+
<code src="./demos/customTooltip.tsx"></code>
25+
2226
## API
2327

2428
| 属性 | 描述 | 类型 | 默认值 | 版本 |
2529
| --- | --- | --- | --- | --- |
2630
| ellipsis | 地址裁剪策略 | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - |
2731
| copyable | 是否可复制 | `boolean` | `false` | - |
2832
| address | 地址 | `string` | - | - |
29-
| tooltip | 鼠标移入地址时展示提示 | `boolean \|` [Tooltip.title](https://ant.design/components/tooltip-cn#api) | 展示当前完整地址 | - |
33+
| tooltip | 鼠标移入地址时展示提示 | `boolean \|` [Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
3034
| format | 地址格式化 | `boolean \| (input: string) => ReactNode` | `false` | - |
35+
| locale | 多语言文案设置 | `Locale["address"]` | - | - |

0 commit comments

Comments
 (0)