Skip to content

Commit 82720bc

Browse files
authored
type: update Wave props type (ant-design#48092)
* fix: fix the Wave not disappear when motion === false * docs: update docs * type: update type * type: update type * docs: revert
1 parent bc78870 commit 82720bc

File tree

6 files changed

+38
-14
lines changed

6 files changed

+38
-14
lines changed

components/_util/wave/WaveEffect.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import * as React from 'react';
12
import classNames from 'classnames';
23
import CSSMotion from 'rc-motion';
3-
import { render, unmount } from 'rc-util/lib/React/render';
44
import raf from 'rc-util/lib/raf';
5-
import * as React from 'react';
5+
import { render, unmount } from 'rc-util/lib/React/render';
6+
7+
import { TARGET_CLS, type ShowWaveEffect } from './interface';
68
import { getTargetWaveColor } from './util';
7-
import { type ShowWaveEffect, TARGET_CLS } from './interface';
89

910
function validateNum(value: number) {
1011
return Number.isNaN(value) ? 0 : value;

components/_util/wave/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import useWave from './useWave';
1212
export interface WaveProps {
1313
disabled?: boolean;
1414
children?: React.ReactNode;
15-
component?: string;
15+
component?: 'Tag' | 'Button' | 'Checkbox' | 'Radio' | 'Switch';
1616
}
1717

1818
const Wave: React.FC<WaveProps> = (props) => {
@@ -48,7 +48,6 @@ const Wave: React.FC<WaveProps> = (props) => {
4848
) {
4949
return;
5050
}
51-
5251
showWave(e);
5352
};
5453

components/_util/wave/useWave.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import * as React from 'react';
22
import { useEvent } from 'rc-util';
33
import raf from 'rc-util/lib/raf';
4-
import showWaveEffect from './WaveEffect';
4+
55
import { ConfigContext } from '../../config-provider';
66
import useToken from '../../theme/useToken';
77
import { TARGET_CLS, type ShowWave } from './interface';
8+
import showWaveEffect from './WaveEffect';
89

9-
export default function useWave(
10+
const useWave = (
1011
nodeRef: React.RefObject<HTMLElement>,
1112
className: string,
12-
component?: string,
13-
) {
13+
component?: 'Tag' | 'Button' | 'Checkbox' | 'Radio' | 'Switch',
14+
) => {
1415
const { wave } = React.useContext(ConfigContext);
1516
const [, token, hashId] = useToken();
1617

@@ -41,4 +42,6 @@ export default function useWave(
4142
};
4243

4344
return showDebounceWave;
44-
}
45+
};
46+
47+
export default useWave;

components/button/index.en-US.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,21 @@ It accepts all props which native buttons support.
8585

8686
## FAQ
8787

88+
### How to close the click wave effect?
89+
90+
If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvider](/components/config-provider#api) as `true`.
91+
92+
```jsx
93+
<ConfigProvider wave={{ disabled: true }}>
94+
<Button>click</Button>
95+
</ConfigProvider>
96+
```
97+
8898
### How to remove space between 2 chinese characters?
8999

90100
Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#api) to set `autoInsertSpaceInButton` as `false`.
91101

92-
```tsx
102+
```jsx
93103
<ConfigProvider autoInsertSpaceInButton={false}>
94104
<Button>按钮</Button>
95105
</ConfigProvider>

components/button/index.zh-CN.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,21 @@ group:
9090

9191
## FAQ
9292

93+
### 如何关闭点击波纹效果?
94+
95+
如果你不需要这个特性,可以设置 [ConfigProvider](/components/config-provider-cn#api)`wave``disabled``true`
96+
97+
```jsx
98+
<ConfigProvider wave={{ disabled: true }}>
99+
<Button>click</Button>
100+
</ConfigProvider>
101+
```
102+
93103
### 如何移除两个汉字之间的空格?
94104

95-
根据 Ant Design 设计规范要求,我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格,如果你不需要这个特性,可以设置 [ConfigProvider](/components/config-provider-cn#api)`autoInsertSpaceInButton``false`
105+
根据 Ant Design 设计规范要求,我们会在按钮内文本按钮和链接按钮除外只有两个汉字时自动添加空格,如果你不需要这个特性,可以设置 [ConfigProvider](/components/config-provider-cn#api)`autoInsertSpaceInButton``false`
96106

97-
```tsx
107+
```jsx
98108
<ConfigProvider autoInsertSpaceInButton={false}>
99109
<Button>按钮</Button>
100110
</ConfigProvider>

components/theme/interface/seeds.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { PresetColorType } from './presetColors';
2+
23
// ======================================================================
34
// == Seed Token ==
45
// ======================================================================
@@ -273,7 +274,7 @@ export interface SeedToken extends PresetColorType {
273274
* @nameEN Motion Style
274275
* @desc 用于配置动画效果,为 `false` 时则关闭动画
275276
* @descEN Used to configure the motion effect, when it is `false`, the motion is turned off
276-
* @default false
277+
* @default true
277278
*/
278279
motion: boolean;
279280
}

0 commit comments

Comments
 (0)