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

@@ -13,50 +13,41 @@ export interface TransferSearchProps {
   disabled?: boolean;
 }
 
-export default class Search extends React.Component<TransferSearchProps, any> {
+export default function Search(props: TransferSearchProps) {
-  static defaultProps = {
+  const { placeholder = '', value, prefixCls, disabled, onChange, handleClear } = props;
-    placeholder: '',
-  };
 
-  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = React.useCallback(
-    const { onChange } = this.props;
+    (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (onChange) {
+      onChange?.(e);
-      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() {
+  return (
-    const { placeholder, value, prefixCls, disabled } = this.props;
+    <>
-    const icon =
+      <Input
-      value && value.length > 0 ? (
+        placeholder={placeholder}
-        <a className={`${prefixCls}-action`} onClick={this.handleClear}>
+        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}
-      </>
-    );
-  }
 }