feat: add baseSelect

src/components/page-tools/index.tsx

@@ -6,8 +6,9 @@ import {
   SyncOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Select, Space } from 'antd';
+import { Button, Input, Space } from 'antd';
 import React, { useMemo } from 'react';
+import BaseSelect from '../seal-form/base/select';
 import './index.less';
 
 type PageToolsProps = {
@@ -176,7 +177,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
             onChange={handleInputChange}
           ></Input>
           {showSelect && (
-            <Select
+            <BaseSelect
               allowClear
               showSearch={false}
               placeholder={selectHolder}
@@ -184,7 +185,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
               size="large"
               onChange={handleSelectChange}
               options={selectOptions}
-            ></Select>
+            ></BaseSelect>
           )}
           <Button
             type="text"

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

@@ -0,0 +1,43 @@
+import IconFont from '@/components/icon-font';
+import type { SelectProps } from 'antd';
+import { Select } from 'antd';
+import React, { forwardRef, useImperativeHandle } from 'react';
+
+const BaseSelect: React.FC<SelectProps> = forwardRef((props, ref) => {
+  const [isFocus, setIsFocus] = React.useState(false);
+  const inputRef = React.useRef<any>(null);
+
+  useImperativeHandle(ref, () => ({
+    ...(inputRef.current || ({} as any))
+  }));
+
+  const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {
+    setIsFocus(true);
+    props.onFocus?.(e);
+  };
+  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    setIsFocus(false);
+    props.onBlur?.(e);
+  };
+  const renderSuffixIcon = () => {
+    if (props.suffixIcon) {
+      return props.suffixIcon;
+    }
+    if (!props.showSearch) {
+      return <IconFont type="icon-down"></IconFont>;
+    }
+    return !isFocus ? <IconFont type="icon-down"></IconFont> : undefined;
+  };
+
+  return (
+    <Select
+      {...props}
+      ref={inputRef}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      suffixIcon={renderSuffixIcon()}
+    />
+  );
+});
+
+export default BaseSelect;

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

@@ -1,9 +1,10 @@
 import { isNotEmptyValue } from '@/utils/index';
 import { useIntl } from '@umijs/max';
 import type { SelectProps } from 'antd';
-import { Form, Select } from 'antd';
+import { Form } from 'antd';
 import { cloneDeep } from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import BaseSelect from './base/select';
 import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
 import SelectWrapper from './wrapper/select';
@@ -96,7 +97,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
         disabled={props.disabled}
         onClick={handleClickWrapper}
       >
-        <Select
+        <BaseSelect
           {...rest}
           ref={inputRef}
           options={children ? null : _options}
@@ -106,7 +107,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
           notFoundContent={notFoundContent}
         >
           {children}
-        </Select>
+        </BaseSelect>
       </Wrapper>
     </SelectWrapper>
   );

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

@@ -1,10 +1,11 @@
 import { useIntl } from '@umijs/max';
 import type { SelectProps } from 'antd';
-import { Checkbox, Select, Tag } from 'antd';
+import { Checkbox, Tag } from 'antd';
 import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import AutoTooltip from '../auto-tooltip';
+import BaseSelect from './base/select';
 
 const OptionWrapper = styled.div`
   display: flex;
@@ -236,7 +237,7 @@ const SimpleSelect: React.FC<SelectProps> = (props) => {
 
   return (
     <div ref={selectRef}>
-      <Select
+      <BaseSelect
         {...restProps}
         options={optionsList}
         maxTagCount={0}
@@ -251,7 +252,7 @@ const SimpleSelect: React.FC<SelectProps> = (props) => {
         onSearch={handleOnSearch}
         filterOption={filterOption}
         onOpenChange={handleOnOpenChange}
-      ></Select>
+      ></BaseSelect>
     </div>
   );
 };