From 19f3e6cdae5cfd8892a1a6b3b8440ddbd5cc8cdc Mon Sep 17 00:00:00 2001
From: susiwen8 <susiwen8@gmail.com>
Date: Sat, 16 Jan 2021 23:52:03 +0800
Subject: [PATCH] refactor: rewrite Transfer search with hooks (#28895)

* Refac: rewrite transfer search with hook

* [CodeFactor] Apply fixes to commit 3ad857f

[ci skip] [skip ci]

* chore: minor change in search

Co-authored-by: codefactor-io <support@codefactor.io>
---
 components/transfer/search.tsx | 55 ++++++++++++++--------------------
 1 file changed, 23 insertions(+), 32 deletions(-)

diff --git a/components/transfer/search.tsx b/components/transfer/search.tsx
index ea107c0fb7..abc96b66c8 100644
--- a/components/transfer/search.tsx
+++ b/components/transfer/search.tsx
@@ -13,50 +13,41 @@ export interface TransferSearchProps {
   disabled?: boolean;
 }
 
-export default class Search extends React.Component<TransferSearchProps, any> {
-  static defaultProps = {
-    placeholder: '',
-  };
+export default function Search(props: TransferSearchProps) {
+  const { placeholder = '', value, prefixCls, disabled, onChange, handleClear } = props;
 
-  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { onChange } = this.props;
-    if (onChange) {
-      onChange(e);
-    }
-  };
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e);
+    },
+    [onChange],
+  );
 
-  handleClear = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const handleClearFn = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
-    const { handleClear, disabled } = this.props;
     if (!disabled && handleClear) {
       handleClear(e);
     }
   };
 
-  render() {
-    const { placeholder, value, prefixCls, disabled } = this.props;
-    const icon =
-      value && value.length > 0 ? (
-        <a className={`${prefixCls}-action`} onClick={this.handleClear}>
+  return (
+    <>
+      <Input
+        placeholder={placeholder}
+        className={prefixCls}
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+      />
+      {value && value.length > 0 ? (
+        <a className={`${prefixCls}-action`} onClick={handleClearFn}>
           <CloseCircleFilled />
         </a>
       ) : (
         <span className={`${prefixCls}-action`}>
           <SearchOutlined />
         </span>
-      );
-
-    return (
-      <>
-        <Input
-          placeholder={placeholder}
-          className={prefixCls}
-          value={value}
-          onChange={this.handleChange}
-          disabled={disabled}
-        />
-        {icon}
-      </>
-    );
-  }
+      )}
+    </>
+  );
 }