From 9324e953e3b203dfcc0f96c1c20d9a99a1a23783 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 14 Sep 2021 15:31:42 +0800 Subject: [PATCH] chore: Not preventEvent btn loading (#32158) * chore: Not preventEvent btn loading * test: Update snapshot --- components/_util/wave.tsx | 13 +- .../__tests__/__snapshots__/demo.test.ts.snap | 307 ++++++++++-------- components/button/button.tsx | 2 +- components/button/demo/loading.md | 56 ++-- components/button/style/index.less | 4 +- 5 files changed, 214 insertions(+), 168 deletions(-) diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx index 2ae52871c7..4cd8c49ea1 100644 --- a/components/_util/wave.tsx +++ b/components/_util/wave.tsx @@ -24,7 +24,12 @@ function isNotGrey(color: string) { 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 { static contextType = ConfigContext; private instance?: { @@ -67,10 +72,12 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }> } 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; } - const { insertExtraNode } = this.props; + this.extraNode = document.createElement('div'); const { extraNode } = this; const { getPrefixCls } = this.context; diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap index 0181fa1140..eee481b6af 100644 --- a/components/button/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap @@ -1009,156 +1009,193 @@ Array [ exports[`renders ./components/button/demo/loading.md correctly 1`] = ` Array [ - , - + +
- - - - - - Loading - - , - +
+
- - - - - , -
, - +
+ , +
- - Click me! - - , - , - +
+
- - - , + + + + + Click me! + + +
+
+ +
+ , ] `; diff --git a/components/button/button.tsx b/components/button/button.tsx index 08b2ec19e4..ff034502bb 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -294,7 +294,7 @@ const InternalButton: React.ForwardRefRenderFunction = (pr return buttonNode; } - return {buttonNode}; + return {buttonNode}; }; const Button = React.forwardRef(InternalButton) as CompoundedComponent; diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md index da57eb6bc0..72e2c8cfd0 100644 --- a/components/button/demo/loading.md +++ b/components/button/demo/loading.md @@ -14,7 +14,7 @@ title: A loading indicator can be added to a button by setting the `loading` property on the `Button`. ```jsx -import { Button } from 'antd'; +import { Button, Space } from 'antd'; import { PoweroffOutlined } from '@ant-design/icons'; class App extends React.Component { @@ -47,31 +47,35 @@ class App extends React.Component { const { loadings } = this.state; return ( <> - - - - - + + + +