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>

src/components/seal-form/components/not-found-content.tsx

@@ -0,0 +1,43 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Empty, Typography } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+const { Link } = Typography;
+
+const NoContent = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-block: 12px;
+`;
+
+export const LoadingContent: React.FC = () => {
+  return (
+    <NoContent>
+      <Link>
+        <LoadingOutlined />
+      </Link>
+    </NoContent>
+  );
+};
+
+const NotFoundContent: React.FC<{
+  loading?: boolean;
+  notFoundContent: React.ReactNode;
+}> = ({ loading, notFoundContent }) => {
+  const intl = useIntl();
+  if (loading) {
+    return <LoadingContent />;
+  }
+  return (
+    <NoContent>
+      {notFoundContent || (
+        <Empty description={intl.formatMessage({ id: 'common.data.empty' })} />
+      )}
+    </NoContent>
+  );
+};
+
+export default NotFoundContent;

src/components/seal-form/seal-select.tsx

@@ -5,6 +5,7 @@ import { Form } from 'antd';
 import { cloneDeep } from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import BaseSelect from './base/select';
+import NotFoundContent from './components/not-found-content';
 import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
 import SelectWrapper from './wrapper/select';
@@ -20,6 +21,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
     allowNull,
     isInFormItems = true,
     notFoundContent = null,
+    loading,
     ...rest
   } = props;
   const intl = useIntl();
@@ -107,7 +109,12 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
           onFocus={handleOnFocus}
           onBlur={handleOnBlur}
           onChange={handleChange}
-          notFoundContent={notFoundContent}
+          notFoundContent={
+            <NotFoundContent
+              loading={loading}
+              notFoundContent={notFoundContent}
+            />
+          }
         >
           {children}
         </BaseSelect>