From a2ee339891dc4bd004c37833db228e187c3ae763 Mon Sep 17 00:00:00 2001
From: shiliqian <shiliqian@growingio.com>
Date: Thu, 20 May 2021 15:16:19 +0800
Subject: [PATCH] fix(select): fix select props classname error

---
 src/components/select/Select.stories.tsx | 5 ++++-
 src/components/select/Select.tsx         | 3 ++-
 src/components/select/Selector/index.tsx | 3 +--
 src/components/select/interface.ts       | 5 +++++
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx
index 769c692572..15ee574577 100644
--- a/src/components/select/Select.stories.tsx
+++ b/src/components/select/Select.stories.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import { Story, Meta } from '@storybook/react/types-6-0';
+import { FilterOutlined } from '@gio-design/icons';
 import Select, { SelectProps } from './index';
 import Docs from './Select.mdx';
 import './style';
+import Button from '../button';
+
 
 export default {
   title: 'Functional Components/Select',
@@ -41,7 +44,7 @@ const templatestEllipsisOptions = values.map((value, index) => ({
 }))
 const Template: Story<SelectProps> = (args) => (
   <div>
-    <Select {...args} options={templatestEllipsisOptions} />
+    <Select {...args} triggerComponent={<Button type='text' size='small' icon={<FilterOutlined />} />} options={templatestEllipsisOptions} />
     <br />
     <br />
     <Select {...args} style={{ width: '300px' }} />
diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
index 4b5da7d415..612984c526 100644
--- a/src/components/select/Select.tsx
+++ b/src/components/select/Select.tsx
@@ -49,6 +49,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
       allowCustomOption = false,
       autoWidth = true,
       allowDeselect = multiple,
+      triggerComponent,
       notFoundContent,
       customizePrefixCls,
       className,
@@ -382,7 +383,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
         visible && onVisibleChange(!visible);
       }
     };
-    const trigger = (
+    const trigger = triggerComponent || (
       <Selector
         size={size}
         input={input}
diff --git a/src/components/select/Selector/index.tsx b/src/components/select/Selector/index.tsx
index f050f73fd2..6c190d4227 100644
--- a/src/components/select/Selector/index.tsx
+++ b/src/components/select/Selector/index.tsx
@@ -187,8 +187,7 @@ const Selector: React.ForwardRefRenderFunction<unknown, SelectorProps> = (props,
         [`${prefix}-bordered`]: bordered,
         [`${prefix}-focused`]: isFocused,
         [`${prefix}-disabled`]: disabled,
-        className,
-      })}
+      },className)}
       aria-disabled={disabled}
       aria-hidden='true'
       style={style}
diff --git a/src/components/select/interface.ts b/src/components/select/interface.ts
index 4d9cde0108..f31f1c9446 100644
--- a/src/components/select/interface.ts
+++ b/src/components/select/interface.ts
@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import React from 'react';
 import { SizeType } from '../config-provider/SizeContext';
 
 export type MaybeArray<T> = T | T[];
@@ -142,6 +143,10 @@ export interface SelectProps {
    * 多选模式下 是否允许通过搜索自定义插入 option
    */
   allowCustomOption?: boolean;
+  /**
+   * 被包裹的元素
+   */
+  triggerComponent?: React.ReactElement;
   /**
    * 自定义无搜索内容
    */