Skip to content

Commit

Permalink
type: update Wave props type (ant-design#48092)
Browse files Browse the repository at this point in the history
* fix: fix the Wave not disappear when motion === false

* docs: update docs

* type: update type

* type: update type

* docs: revert
  • Loading branch information
li-jia-nan authored Mar 26, 2024
1 parent bc78870 commit 82720bc
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 14 deletions.
7 changes: 4 additions & 3 deletions components/_util/wave/WaveEffect.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import * as React from 'react';
import classNames from 'classnames';
import CSSMotion from 'rc-motion';
import { render, unmount } from 'rc-util/lib/React/render';
import raf from 'rc-util/lib/raf';
import * as React from 'react';
import { render, unmount } from 'rc-util/lib/React/render';

import { TARGET_CLS, type ShowWaveEffect } from './interface';
import { getTargetWaveColor } from './util';
import { type ShowWaveEffect, TARGET_CLS } from './interface';

function validateNum(value: number) {
return Number.isNaN(value) ? 0 : value;
Expand Down
3 changes: 1 addition & 2 deletions components/_util/wave/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import useWave from './useWave';
export interface WaveProps {
disabled?: boolean;
children?: React.ReactNode;
component?: string;
component?: 'Tag' | 'Button' | 'Checkbox' | 'Radio' | 'Switch';
}

const Wave: React.FC<WaveProps> = (props) => {
Expand Down Expand Up @@ -48,7 +48,6 @@ const Wave: React.FC<WaveProps> = (props) => {
) {
return;
}

showWave(e);
};

Expand Down
13 changes: 8 additions & 5 deletions components/_util/wave/useWave.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import * as React from 'react';
import { useEvent } from 'rc-util';
import raf from 'rc-util/lib/raf';
import showWaveEffect from './WaveEffect';

import { ConfigContext } from '../../config-provider';
import useToken from '../../theme/useToken';
import { TARGET_CLS, type ShowWave } from './interface';
import showWaveEffect from './WaveEffect';

export default function useWave(
const useWave = (
nodeRef: React.RefObject<HTMLElement>,
className: string,
component?: string,
) {
component?: 'Tag' | 'Button' | 'Checkbox' | 'Radio' | 'Switch',
) => {
const { wave } = React.useContext(ConfigContext);
const [, token, hashId] = useToken();

Expand Down Expand Up @@ -41,4 +42,6 @@ export default function useWave(
};

return showDebounceWave;
}
};

export default useWave;
12 changes: 11 additions & 1 deletion components/button/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,21 @@ It accepts all props which native buttons support.

## FAQ

### How to close the click wave effect?

If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvider](/components/config-provider#api) as `true`.

```jsx
<ConfigProvider wave={{ disabled: true }}>
<Button>click</Button>
</ConfigProvider>
```

### How to remove space between 2 chinese characters?

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`.

```tsx
```jsx
<ConfigProvider autoInsertSpaceInButton={false}>
<Button>按钮</Button>
</ConfigProvider>
Expand Down
14 changes: 12 additions & 2 deletions components/button/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,11 +90,21 @@ group:

## FAQ

### 如何关闭点击波纹效果?

如果你不需要这个特性,可以设置 [ConfigProvider](/components/config-provider-cn#api)`wave``disabled``true`

```jsx
<ConfigProvider wave={{ disabled: true }}>
<Button>click</Button>
</ConfigProvider>
```

### 如何移除两个汉字之间的空格?

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

```tsx
```jsx
<ConfigProvider autoInsertSpaceInButton={false}>
<Button>按钮</Button>
</ConfigProvider>
Expand Down
3 changes: 2 additions & 1 deletion components/theme/interface/seeds.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { PresetColorType } from './presetColors';

// ======================================================================
// == Seed Token ==
// ======================================================================
Expand Down Expand Up @@ -273,7 +274,7 @@ export interface SeedToken extends PresetColorType {
* @nameEN Motion Style
* @desc 用于配置动画效果,为 `false` 时则关闭动画
* @descEN Used to configure the motion effect, when it is `false`, the motion is turned off
* @default false
* @default true
*/
motion: boolean;
}

0 comments on commit 82720bc

Please sign in to comment.