feat(input-button): support loading prop (#2023)

* feat(input-button): support loading prop

* test(input-button): add case

Co-authored-by: maxin <maxin@growingio.com>

src/input/InputButton.tsx

@@ -1,4 +1,4 @@
-import { ErrorFilled, DownFilled } from '@gio-design/icons';
+import { ErrorFilled, DownFilled, LoadingTwoTone } from '@gio-design/icons';
 import { usePrefixCls } from '@gio-design/utils';
 import classNames from 'classnames';
 import React, { useCallback, useMemo } from 'react';
@@ -24,6 +24,7 @@ const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>((props,
     maxWidth,
     active = false,
     onClear: handleOnClear,
+    loading,
     ...rest
   } = props;
 
@@ -55,17 +56,21 @@ const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>((props,
       classNames(className, prefixCls, {
         [`${prefixCls}__disabled`]: disabled,
         [`${prefixCls}__active`]: active,
+        [`${prefixCls}__loading`]: loading,
       }),
-    [className, prefixCls, disabled, active]
+    [className, prefixCls, disabled, active, loading]
   );
 
   const suffix = useMemo(() => {
     const hideClear = allowClear === false;
     const { onClick } = rest;
+    if (loading) {
+      return customizeSuffix || <LoadingTwoTone rotating />;
+    }
     const defaultSuffix =
       value && !hideClear && !disabled ? <ErrorFilled onClick={onClear} /> : <DownFilled onClick={onClick} />;
     return customizeSuffix || defaultSuffix;
-  }, [customizeSuffix, value, onClear, allowClear, disabled, rest]);
+  }, [customizeSuffix, value, onClear, allowClear, disabled, rest, loading]);
 
   const styles = maxWidth ? { maxWidth } : {};
 

src/input/demos/input-button/InputButton.stories.tsx

@@ -51,3 +51,5 @@ export const Size = () => (
 );
 
 export const Active = () => <Input.Button placeholder="Active" active />;
+
+export const Loading = () => <Input.Button placeholder="Loading" loading />;

src/input/demos/input-button/InputButtonPage.tsx

@@ -61,6 +61,15 @@ export default function InputButtonPage() {
         <Story id="upgraded-input-input-button--active" />
       </Canvas>
 
+      <Subheading>Loading</Subheading>
+      <Description>
+        Input Button 支持 loading 属性。如果 loading 为 true，则其 suffix icon 将显示一个 Loading
+        Icon，并且为不可点击状态
+      </Description>
+      <Canvas>
+        <Story id="upgraded-input-input-button--loading" />
+      </Canvas>
+
       <Heading>参数说明</Heading>
       <ArgsTable of={Input.Button} />
     </>

src/input/interface.ts

@@ -80,6 +80,11 @@ export interface InputButtonProps
    */
   disabled?: boolean;
 
+  /**
+   * 加载状态
+   */
+  loading?: boolean;
+
   /**
    * 是否可以被清空
    * @default false

src/input/style/InputButton.less

@@ -97,4 +97,8 @@
       }
     }
   }
+
+  &__loading {
+    pointer-events: none;
+  }
 }

src/input/test/InputButton.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import InputButton from '../InputButton';
+
+describe('InputButton', () => {
+  test('should have loading class', () => {
+    const { container } = render(<InputButton loading />);
+    expect(container.querySelector('.gio-input-btn__loading')).not.toBeNull();
+  });
+});