From a01450debbf2605fdeadc75d0cad2285472b4d92 Mon Sep 17 00:00:00 2001
From: HeskeyBaozi <hezhiyu233@foxmail.com>
Date: Sat, 15 Sep 2018 00:00:16 +0800
Subject: [PATCH] add suffix interface to select

---
 .../__tests__/__snapshots__/demo.test.js.snap | 103 ++++++++++++++++++
 components/select/demo/suffix.md              |  41 +++++++
 components/select/index.en-US.md              |   1 +
 components/select/index.tsx                   |  15 ++-
 components/select/index.zh-CN.md              |   1 +
 5 files changed, 157 insertions(+), 4 deletions(-)
 create mode 100644 components/select/demo/suffix.md

diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap
index a227072666..a88a498a24 100644
--- a/components/select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.js.snap
@@ -974,6 +974,109 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/select/demo/suffix.md correctly 1`] = `
+<div>
+  <div
+    class="ant-select ant-select-enabled"
+    style="width:120px"
+  >
+    <div
+      aria-autocomplete="list"
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="ant-select-selection
+            ant-select-selection--single"
+      role="combobox"
+      tabindex="0"
+    >
+      <div
+        class="ant-select-selection__rendered"
+      >
+        <div
+          class="ant-select-selection-selected-value"
+          style="display:block;opacity:1"
+          title="Lucy"
+        >
+          Lucy
+        </div>
+      </div>
+      <span
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <i
+          class="anticon anticon-smile"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="smile"
+            fill="currentColor"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
+            />
+          </svg>
+        </i>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-select ant-select-disabled"
+    style="width:120px"
+  >
+    <div
+      aria-autocomplete="list"
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="ant-select-selection
+            ant-select-selection--single"
+      role="combobox"
+      tabindex="-1"
+    >
+      <div
+        class="ant-select-selection__rendered"
+      >
+        <div
+          class="ant-select-selection-selected-value"
+          style="display:block;opacity:1"
+          title="Lucy"
+        >
+          Lucy
+        </div>
+      </div>
+      <span
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <i
+          class="anticon anticon-meh"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="meh"
+            fill="currentColor"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 565H360c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h304c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </i>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/select/demo/tags.md correctly 1`] = `
 <div
   class="ant-select ant-select-enabled"
diff --git a/components/select/demo/suffix.md b/components/select/demo/suffix.md
new file mode 100644
index 0000000000..0e679d8cee
--- /dev/null
+++ b/components/select/demo/suffix.md
@@ -0,0 +1,41 @@
+---
+order: 20
+debug: true
+title:
+  zh-CN: 后缀图标
+  en-US: Suffix
+---
+
+## zh-CN
+
+基本使用。
+
+## en-US
+
+Basic Usage.
+
+````jsx
+import { Select, Icon } from 'antd';
+
+const smileIcon = <Icon type="smile" />;
+const mehIcon = <Icon type="meh" />;
+const Option = Select.Option;
+
+function handleChange(value) {
+  console.log(`selected ${value}`);
+}
+
+ReactDOM.render(
+  <div>
+    <Select suffix={smileIcon} defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
+      <Option value="jack">Jack</Option>
+      <Option value="lucy">Lucy</Option>
+      <Option value="disabled" disabled>Disabled</Option>
+      <Option value="Yiminghe">yiminghe</Option>
+    </Select>
+    <Select suffix={mehIcon} defaultValue="lucy" style={{ width: 120 }} disabled>
+      <Option value="lucy">Lucy</Option>
+    </Select>
+  </div>,
+  mountNode);
+````
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index 01d78a6f90..2f701f2296 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -45,6 +45,7 @@ Select component to select value from options.
 | showArrow | Whether to show the drop-down arrow | boolean | true |
 | showSearch | Whether show search input in single mode. | boolean | false |
 | size | Size of Select input. `default` `large` `small` | string | default |
+| suffix | The custom suffix icon | ReactNode | - |
 | tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] |  |
 | value | Current selected option. | string\|number\|string\[]\|number\[] | - |
 | onBlur | Called when blur | function | - |
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 51422915e5..2d7253cc9c 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -4,6 +4,7 @@ import RcSelect, { Option, OptGroup } from 'rc-select';
 import classNames from 'classnames';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
+import omit from 'omit.js';
 import warning from 'warning';
 import Icon from '../icon';
 
@@ -63,6 +64,7 @@ export interface SelectProps extends AbstractSelectProps {
   tokenSeparators?: string[];
   getInputElement?: () => React.ReactElement<any>;
   autoFocus?: boolean;
+  suffix?: React.ReactNode;
 }
 
 export interface OptionProps {
@@ -155,8 +157,11 @@ export default class Select extends React.Component<SelectProps, {}> {
       className = '',
       size,
       mode,
+      suffix,
       ...restProps
     } = this.props;
+    const rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon']);
+
     const cls = classNames({
       [`${prefixCls}-lg`]: size === 'large',
       [`${prefixCls}-sm`]: size === 'small',
@@ -174,9 +179,11 @@ export default class Select extends React.Component<SelectProps, {}> {
       combobox: this.isCombobox(),
     };
 
-    const inputIcon = (
-      <Icon type="down" className={`${prefixCls}-arrow-icon`} />
-    );
+    const inputIcon = suffix && (
+      React.isValidElement<{ className?: string }>(suffix)
+        ? React.cloneElement(suffix) : suffix) || (
+        <Icon type="down" className={`${prefixCls}-arrow-icon`} />
+      );
 
     const removeIcon = (
       <Icon type="close" className={`${prefixCls}-remove-icon`} />
@@ -196,7 +203,7 @@ export default class Select extends React.Component<SelectProps, {}> {
         removeIcon={removeIcon}
         clearIcon={clearIcon}
         menuItemSelectedIcon={menuItemSelectedIcon}
-        {...restProps}
+        {...rest}
         {...modeConfig}
         prefixCls={prefixCls}
         className={cls}
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index 4529c7df05..05e53e7a72 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -46,6 +46,7 @@ title: Select
 | showArrow | 是否显示下拉小箭头 | boolean | true |
 | showSearch | 使单选模式可搜索 | boolean | false |
 | size | 选择框大小，可选 `large` `small` | string | default |
+| suffix | 自定义的选择框后缀图标 | ReactNode | - |
 | tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] |  |
 | value | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
 | onBlur | 失去焦点的时回调 | function | - |