fix: Compatible with v4 logic (ant-design#47612)

DraculaPrince · Mar 29, 2024 · dd8df41 · dd8df41
1 parent bd8c26f
commit dd8df41
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx
@@ -1,7 +1,8 @@
+import React, { Suspense, useRef, useState } from 'react';
 import { SearchOutlined } from '@ant-design/icons';
 import { resetWarned } from 'rc-util/lib/warning';
-import React, { Suspense, useRef, useState } from 'react';
 import { act } from 'react-dom/test-utils';
+
 import Button from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -434,4 +435,10 @@ describe('Button', () => {
     const { container } = render(<Button loading={{ delay: 0 }}>Button</Button>);
     expect(container.querySelectorAll('.ant-btn-loading').length).toBe(1);
   });
+
+  // https://github.com/ant-design/ant-design/issues/47605
+  it('Compatible with original `type` behavior', async () => {
+    const { container } = render(<Button type={'' as any} />);
+    expect(container.querySelector('.ant-btn-default')).toBeTruthy();
+  });
 });
diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -96,7 +96,7 @@ const InternalButton: React.ForwardRefRenderFunction<
   const {
     loading = false,
     prefixCls: customizePrefixCls,
-    type = 'default',
+    type,
     danger,
     shape = 'default',
     size: customizeSize,
@@ -115,6 +115,10 @@ const InternalButton: React.ForwardRefRenderFunction<
     ...rest
   } = props;
 
+  // https://github.com/ant-design/ant-design/issues/47605
+  // Compatible with original `type` behavior
+  const mergedType = type || 'default';
+
   const { getPrefixCls, autoInsertSpaceInButton, direction, button } = useContext(ConfigContext);
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
 
@@ -135,7 +139,8 @@ const InternalButton: React.ForwardRefRenderFunction<
 
   const buttonRef = composeRef(ref, internalRef);
 
-  const needInserted = Children.count(children) === 1 && !icon && !isUnBorderedButtonType(type);
+  const needInserted =
+    Children.count(children) === 1 && !icon && !isUnBorderedButtonType(mergedType);
 
   useEffect(() => {
     let delayTimer: ReturnType<typeof setTimeout> | null = null;
@@ -193,7 +198,7 @@ const InternalButton: React.ForwardRefRenderFunction<
     );
 
     warning(
-      !(ghost && isUnBorderedButtonType(type)),
+      !(ghost && isUnBorderedButtonType(mergedType)),
       'usage',
       "`link` or `text` button can't be a `ghost` button.",
     );
@@ -218,10 +223,10 @@ const InternalButton: React.ForwardRefRenderFunction<
     cssVarCls,
     {
       [`${prefixCls}-${shape}`]: shape !== 'default' && shape,
-      [`${prefixCls}-${type}`]: type,
+      [`${prefixCls}-${mergedType}`]: mergedType,
       [`${prefixCls}-${sizeCls}`]: sizeCls,
       [`${prefixCls}-icon-only`]: !children && children !== 0 && !!iconType,
-      [`${prefixCls}-background-ghost`]: ghost && !isUnBorderedButtonType(type),
+      [`${prefixCls}-background-ghost`]: ghost && !isUnBorderedButtonType(mergedType),
       [`${prefixCls}-loading`]: innerLoading,
       [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace && !innerLoading,
       [`${prefixCls}-block`]: block,
@@ -291,7 +296,7 @@ const InternalButton: React.ForwardRefRenderFunction<
     </button>
   );
 
-  if (!isUnBorderedButtonType(type)) {
+  if (!isUnBorderedButtonType(mergedType)) {
     buttonNode = (
       <Wave component="Button" disabled={!!innerLoading}>
         {buttonNode}