chore: clear space onblur

src/components/seal-form/auto-complete.tsx

@@ -1,12 +1,20 @@
-import { AutoComplete, Form, Spin } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import { AutoComplete, Form, Typography } from 'antd';
 import type { AutoCompleteProps } from 'antd/lib';
 import React, { useEffect, useRef, useState } from 'react';
+import { LoadingContent } from './components/not-found-content';
 import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
 import SelectWrapper from './wrapper/select';
 
+const Link = Typography.Link;
+
 const SealAutoComplete: React.FC<
-  AutoCompleteProps & SealFormItemProps & { onInput?: (e: Event) => void }
+  AutoCompleteProps &
+    SealFormItemProps & {
+      onInput?: (e: Event) => void;
+      clearSpaceOnBlur?: boolean;
+    }
 > = (props) => {
   const {
     label,
@@ -22,6 +30,8 @@ const SealAutoComplete: React.FC<
     style,
     addAfter,
     loading,
+    allowClear,
+    clearSpaceOnBlur,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -46,6 +56,7 @@ const SealAutoComplete: React.FC<
   };
 
   const handleChange = (val: string, option: any) => {
+    console.log('handleChange val:', val);
     let value = val;
     if (trim) {
       value = value?.trim?.();
@@ -62,7 +73,13 @@ const SealAutoComplete: React.FC<
     if (!props.value) {
       setIsFocus(false);
     }
-    e.target.value = e.target.value?.trim?.();
+
+    if (clearSpaceOnBlur) {
+      e.target.value = e.target.value?.replace(/\s+/g, '');
+      props.onChange?.(e.target.value);
+    } else {
+      e.target.value = e.target.value?.trim();
+    }
     props.onBlur?.(e);
   };
 
@@ -75,9 +92,20 @@ const SealAutoComplete: React.FC<
   };
   const renderAfter = () => {
     if (loading) {
-      return <Spin size="small"></Spin>;
+      return (
+        <Link>
+          <LoadingOutlined />
+        </Link>
+      );
     }
-    return addAfter;
+    return null;
+  };
+
+  const popupRender = (originNode: React.ReactElement): React.ReactElement => {
+    if (loading) {
+      return <LoadingContent />;
+    }
+    return originNode || null;
   };
 
   return (
@@ -91,7 +119,6 @@ const SealAutoComplete: React.FC<
         required={required}
         description={description}
         disabled={props.disabled}
-        addAfter={renderAfter()}
         onClick={handleClickWrapper}
       >
         <AutoComplete
@@ -104,6 +131,8 @@ const SealAutoComplete: React.FC<
               ''
             )
           }
+          allowClear={!loading && allowClear}
+          suffixIcon={renderAfter()}
           // @ts-ignore
           status={checkStatus || status}
           onSelect={handleOnSelect}
@@ -111,6 +140,7 @@ const SealAutoComplete: React.FC<
           onBlur={handleOnBlur}
           onSearch={handleSearch}
           onChange={handleChange}
+          popupRender={popupRender}
         ></AutoComplete>
       </Wrapper>
     </SelectWrapper>