mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
chore: Not preventEvent btn loading (#32158)
* chore: Not preventEvent btn loading * test: Update snapshot
This commit is contained in:
二货机器人
GitHub
parent
0e3171cc52
commit
9324e953e3
@ -24,7 +24,12 @@ function isNotGrey(color: string) {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Wave extends React.Component<{ insertExtraNode?: boolean }> {
|
export interface WaveProps {
|
||||||
|
insertExtraNode?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Wave extends React.Component<WaveProps> {
|
||||||
static contextType = ConfigContext;
|
static contextType = ConfigContext;
|
||||||
|
|
||||||
private instance?: {
|
private instance?: {
|
||||||
@ -67,10 +72,12 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
|
|||||||
}
|
}
|
||||||
|
|
||||||
onClick = (node: HTMLElement, waveColor: string) => {
|
onClick = (node: HTMLElement, waveColor: string) => {
|
||||||
if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
|
const { insertExtraNode, disabled } = this.props;
|
||||||
|
|
||||||
|
if (disabled || !node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const { insertExtraNode } = this.props;
|
|
||||||
this.extraNode = document.createElement('div');
|
this.extraNode = document.createElement('div');
|
||||||
const { extraNode } = this;
|
const { extraNode } = this;
|
||||||
const { getPrefixCls } = this.context;
|
const { getPrefixCls } = this.context;
|
||||||
|
|||||||
@ -1009,156 +1009,193 @@ Array [
|
|||||||
|
|
||||||
exports[`renders ./components/button/demo/loading.md correctly 1`] = `
|
exports[`renders ./components/button/demo/loading.md correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
<button
|
<div
|
||||||
class="ant-btn ant-btn-primary ant-btn-loading"
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
type="button"
|
style="width:100%"
|
||||||
>
|
>
|
||||||
<span
|
<div
|
||||||
class="ant-btn-loading-icon"
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
>
|
>
|
||||||
<span
|
<button
|
||||||
aria-label="loading"
|
class="ant-btn ant-btn-primary ant-btn-loading"
|
||||||
class="anticon anticon-loading anticon-spin"
|
type="button"
|
||||||
role="img"
|
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
class="ant-btn-loading-icon"
|
||||||
data-icon="loading"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<span
|
||||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
aria-label="loading"
|
||||||
/>
|
class="anticon anticon-loading anticon-spin"
|
||||||
</svg>
|
role="img"
|
||||||
</span>
|
>
|
||||||
</span>
|
<svg
|
||||||
<span>
|
aria-hidden="true"
|
||||||
Loading
|
data-icon="loading"
|
||||||
</span>
|
fill="currentColor"
|
||||||
</button>,
|
focusable="false"
|
||||||
<button
|
height="1em"
|
||||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
|
viewBox="0 0 1024 1024"
|
||||||
type="button"
|
width="1em"
|
||||||
>
|
>
|
||||||
<span
|
<path
|
||||||
class="ant-btn-loading-icon"
|
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Loading
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
>
|
>
|
||||||
<span
|
<button
|
||||||
aria-label="loading"
|
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
|
||||||
class="anticon anticon-loading anticon-spin"
|
type="button"
|
||||||
role="img"
|
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
class="ant-btn-loading-icon"
|
||||||
data-icon="loading"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<span
|
||||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
aria-label="loading"
|
||||||
/>
|
class="anticon anticon-loading anticon-spin"
|
||||||
</svg>
|
role="img"
|
||||||
</span>
|
>
|
||||||
</span>
|
<svg
|
||||||
<span>
|
aria-hidden="true"
|
||||||
Loading
|
data-icon="loading"
|
||||||
</span>
|
fill="currentColor"
|
||||||
</button>,
|
focusable="false"
|
||||||
<button
|
height="1em"
|
||||||
class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-loading"
|
viewBox="0 0 1024 1024"
|
||||||
type="button"
|
width="1em"
|
||||||
>
|
>
|
||||||
<span
|
<path
|
||||||
class="ant-btn-loading-icon"
|
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Loading
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
>
|
>
|
||||||
<span
|
<button
|
||||||
aria-label="loading"
|
class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-loading"
|
||||||
class="anticon anticon-loading anticon-spin"
|
type="button"
|
||||||
role="img"
|
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
class="ant-btn-loading-icon"
|
||||||
data-icon="loading"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<span
|
||||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
aria-label="loading"
|
||||||
/>
|
class="anticon anticon-loading anticon-spin"
|
||||||
</svg>
|
role="img"
|
||||||
</span>
|
>
|
||||||
</span>
|
<svg
|
||||||
</button>,
|
aria-hidden="true"
|
||||||
<br />,
|
data-icon="loading"
|
||||||
<button
|
fill="currentColor"
|
||||||
class="ant-btn ant-btn-primary"
|
focusable="false"
|
||||||
type="button"
|
height="1em"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
style="width:100%"
|
||||||
>
|
>
|
||||||
<span>
|
<div
|
||||||
Click me!
|
class="ant-space-item"
|
||||||
</span>
|
style="margin-right:8px"
|
||||||
</button>,
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="poweroff"
|
|
||||||
class="anticon anticon-poweroff"
|
|
||||||
role="img"
|
|
||||||
>
|
>
|
||||||
<svg
|
<button
|
||||||
aria-hidden="true"
|
class="ant-btn ant-btn-primary"
|
||||||
data-icon="poweroff"
|
type="button"
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<span>
|
||||||
d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
|
Click me!
|
||||||
/>
|
</span>
|
||||||
</svg>
|
</button>
|
||||||
</span>
|
</div>
|
||||||
<span>
|
<div
|
||||||
Click me!
|
class="ant-space-item"
|
||||||
</span>
|
style="margin-right:8px"
|
||||||
</button>,
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary ant-btn-icon-only"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="poweroff"
|
|
||||||
class="anticon anticon-poweroff"
|
|
||||||
role="img"
|
|
||||||
>
|
>
|
||||||
<svg
|
<button
|
||||||
aria-hidden="true"
|
class="ant-btn ant-btn-primary"
|
||||||
data-icon="poweroff"
|
type="button"
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<span
|
||||||
d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
|
aria-label="poweroff"
|
||||||
/>
|
class="anticon anticon-poweroff"
|
||||||
</svg>
|
role="img"
|
||||||
</span>
|
>
|
||||||
</button>,
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="poweroff"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Click me!
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-primary ant-btn-icon-only"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="poweroff"
|
||||||
|
class="anticon anticon-poweroff"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="poweroff"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
]
|
]
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@ -294,7 +294,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
|
|||||||
return buttonNode;
|
return buttonNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
return <Wave>{buttonNode}</Wave>;
|
return <Wave disabled={!!innerLoading}>{buttonNode}</Wave>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Button = React.forwardRef<unknown, ButtonProps>(InternalButton) as CompoundedComponent;
|
const Button = React.forwardRef<unknown, ButtonProps>(InternalButton) as CompoundedComponent;
|
||||||
|
|||||||
@ -14,7 +14,7 @@ title:
|
|||||||
A loading indicator can be added to a button by setting the `loading` property on the `Button`.
|
A loading indicator can be added to a button by setting the `loading` property on the `Button`.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { Button } from 'antd';
|
import { Button, Space } from 'antd';
|
||||||
import { PoweroffOutlined } from '@ant-design/icons';
|
import { PoweroffOutlined } from '@ant-design/icons';
|
||||||
|
|
||||||
class App extends React.Component {
|
class App extends React.Component {
|
||||||
@ -47,31 +47,35 @@ class App extends React.Component {
|
|||||||
const { loadings } = this.state;
|
const { loadings } = this.state;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Button type="primary" loading>
|
<Space style={{ width: '100%' }}>
|
||||||
Loading
|
<Button type="primary" loading>
|
||||||
</Button>
|
Loading
|
||||||
<Button type="primary" size="small" loading>
|
</Button>
|
||||||
Loading
|
<Button type="primary" size="small" loading>
|
||||||
</Button>
|
Loading
|
||||||
<Button type="primary" icon={<PoweroffOutlined />} loading />
|
</Button>
|
||||||
<br />
|
<Button type="primary" icon={<PoweroffOutlined />} loading />
|
||||||
<Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
|
</Space>
|
||||||
Click me!
|
|
||||||
</Button>
|
<Space style={{ width: '100%' }}>
|
||||||
<Button
|
<Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
|
||||||
type="primary"
|
Click me!
|
||||||
icon={<PoweroffOutlined />}
|
</Button>
|
||||||
loading={loadings[1]}
|
<Button
|
||||||
onClick={() => this.enterLoading(1)}
|
type="primary"
|
||||||
>
|
icon={<PoweroffOutlined />}
|
||||||
Click me!
|
loading={loadings[1]}
|
||||||
</Button>
|
onClick={() => this.enterLoading(1)}
|
||||||
<Button
|
>
|
||||||
type="primary"
|
Click me!
|
||||||
icon={<PoweroffOutlined />}
|
</Button>
|
||||||
loading={loadings[2]}
|
<Button
|
||||||
onClick={() => this.enterLoading(2)}
|
type="primary"
|
||||||
/>
|
icon={<PoweroffOutlined />}
|
||||||
|
loading={loadings[2]}
|
||||||
|
onClick={() => this.enterLoading(2)}
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -151,9 +151,7 @@
|
|||||||
|
|
||||||
&&-loading {
|
&&-loading {
|
||||||
position: relative;
|
position: relative;
|
||||||
&:not([disabled]) {
|
cursor: default;
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user