feat: select add dropdownRender removeIcon clearIcon menuItemSelectedIcon

Author: tangjinzhou

components/select/__tests__/__snapshots__/demo.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select Select Custom Icons should support customized icons 1`] = `
+<div class="ant-select ant-select-enabled">
+  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
+    <div class="ant-select-selection__rendered"></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
+  </div>
+</div>
+`;

components/select/__tests__/__snapshots__/index.test.js.snap

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { asyncExpect } from '@/tests/utils'
 import Select from '..'
+import Icon from '../../icon'
 import focusTest from '../../../tests/shared/focusTest'
 
 describe('Select', () => {
@@ -144,4 +145,23 @@ describe('Select', () => {
       expect(triggerComponent.componentInstance.visible).toBe(false)
     })
   })
+
+  describe('Select Custom Icons', () => {
+    it('should support customized icons', () => {
+      const wrapper = mount({
+        render () {
+          return (
+            <Select
+              removeIcon={<Icon type='close' />}
+              clearIcon={<Icon type='close' />}
+              menuItemSelectedIcon={<Icon type='close' />}
+            >
+              <Option value='1'>1</Option>
+            </Select>
+          )
+        },
+      })
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
 })

components/select/__tests__/index.test.js

@@ -21,6 +21,9 @@ Basic Usage
     <a-select defaultValue="lucy" style='width: 120px' disabled>
       <a-select-option value="lucy">Lucy</a-select-option>
     </a-select>
+    <a-select defaultValue="lucy" style='width: 120px' loading>
+      <a-select-option value="lucy">Lucy</a-select-option>
+    </a-select>
   </div>
 </template>
 <script>

components/select/demo/basic.md

@@ -0,0 +1,38 @@
+
+<cn>
+#### 扩展菜单
+使用 `dropdownRender` 对下拉菜单进行自由扩展。
+</cn>
+
+<us>
+#### Custom dropdown
+Customize the dropdown menu via `dropdownRender`.
+</us>
+
+```html
+<template>
+  <a-select defaultValue="lucy" style="width: 120px">
+    <div slot="dropdownRender" slot-scope="menu">
+      <v-nodes :vnodes="menu"/>
+      <a-divider style="margin: 4px 0;" />
+      <div style="padding: 8px; cursor: pointer;">
+        <a-icon type="plus" /> Add item
+      </div>
+    </div>
+    <a-select-option value="jack">Jack</a-select-option>
+    <a-select-option value="lucy">Lucy</a-select-option>
+  </a-select>
+</template>
+<script>
+export default {
+  data: ()=>({console: console}),
+  components: {
+    VNodes: {
+      functional: true,
+      render: (h, ctx) => ctx.props.vnodes
+    }
+  },
+}
+</script>
+```
+

components/select/demo/custom-dropdown-menu.md

@@ -0,0 +1,47 @@
+
+<cn>
+#### 隐藏已选择选项
+隐藏下拉列表中已选择的选项。
+</cn>
+
+<us>
+#### Hide Already Selected
+Hide already selected options in the dropdown.
+</us>
+
+```html
+<template>
+  <a-select
+    mode="multiple"
+    placeholder="Inserted are removed"
+    :value="selectedItems"
+    @change="handleChange"
+    style="width: 100%"
+  >
+    <a-select-option v-for="item in filteredOptions" :key="item" :value="item">
+      {{item}}
+    </a-select-option>
+  </a-select>
+</template>
+<script>
+const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
+export default {
+  data() {
+    return {
+      selectedItems: [],
+    }
+  },
+  computed: {
+    filteredOptions() {
+      return OPTIONS.filter(o => !this.selectedItems.includes(o));
+    }
+  },
+  methods: {
+    handleChange(selectedItems) {
+      this.selectedItems = selectedItems
+    }
+  }
+}
+</script>
+```
+

components/select/demo/hide-selected.md

@@ -11,6 +11,8 @@ import SearchBox from './search-box'
 import Search from './search'
 import SelectUsers from './select-users'
 import Suffix from './suffix'
+import HideSelected from './hide-selected'
+import CustomDropdownMenu from './custom-dropdown-menu'
 
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
@@ -50,6 +52,8 @@ export default {
         <Search/>
         <SelectUsers/>
         <Suffix/>
+        <HideSelected />
+        <CustomDropdownMenu />
         <api>
           <CN slot='cn' />
           <US/>

components/select/demo/index.vue

@@ -19,6 +19,7 @@
 | disabled | Whether disabled select | boolean | false |
 | dropdownClassName | className of dropdown menu | string | - |
 | dropdownMatchSelectWidth | Whether dropdown's width is same with select. | boolean | true |
+| dropdownRender | Customize dropdown content | (menuNode: VNode, props) => VNode | - |
 | dropdownStyle | style of dropdown menu | object | - |
 | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
 | firstActiveValue | Value of action option by default | string\|string\[] | - |
@@ -34,12 +35,16 @@
 | showSearch | Whether show search input in single mode. | boolean | false |
 | showArrow | Whether to show the drop-down arrow | boolean |  true |
 | size | Size of Select input. `default` `large` `small` | string | default |
-| suffixIcon | The custom suffix icon | string \| VNode \| slot | - |
+| suffixIcon | The custom suffix icon | VNode \| slot | - |
+| removeIcon | The custom remove icon | VNode \| slot | - |
+| clearIcon | The custom clear icon | VNode \| slot | - |
+| menuItemSelectedIcon | The custom menuItemSelected icon | VNode \| slot | - |
 | tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] |  |
 | value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - |
 | options | Data of the selectOption, manual construction work is no longer needed if this property has been set | array<{value, label, [disabled, key, title]}> | \[] |
 | defaultOpen | Initial open state of dropdown | boolean | - |
 | open | Controlled open state of dropdown | boolean | - |
+| loading | indicate loading state | Boolean | false |
 
 ### events
 | Events Name | Description | Arguments |

components/select/index.en-US.md

@@ -12,6 +12,10 @@ import { cloneElement } from '../_util/vnode'
 const AbstractSelectProps = () => ({
   prefixCls: PropTypes.string,
   size: PropTypes.oneOf(['small', 'large', 'default']),
+  showAction: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(String),
+  ]),
   notFoundContent: PropTypes.any,
   transitionName: PropTypes.string,
   choiceTransitionName: PropTypes.string,
@@ -37,6 +41,8 @@ const AbstractSelectProps = () => ({
   open: PropTypes.bool,
   defaultOpen: PropTypes.bool,
   autoClearSearchValue: PropTypes.bool,
+  dropdownRender: PropTypes.func,
+  loading: PropTypes.bool,
 })
 const Value = PropTypes.shape({
   key: PropTypes.string,
@@ -71,6 +77,9 @@ const SelectProps = {
   getInputElement: PropTypes.func,
   options: PropTypes.array,
   suffixIcon: PropTypes.any,
+  removeIcon: PropTypes.any,
+  clearIcon: PropTypes.any,
+  menuItemSelectedIcon: PropTypes.any,
 }
 
 const SelectPropTypes = {
@@ -107,6 +116,9 @@ const Select = {
     prop: 'value',
     event: 'change',
   },
+  inject: {
+    configProvider: { default: {}},
+  },
   created () {
     warning(
       this.$props.mode !== 'combobox',
@@ -134,17 +146,39 @@ const Select = {
       const { mode } = this
       return mode === 'combobox' || mode === SECRET_COMBOBOX_MODE_DO_NOT_USE
     },
+
+    renderSuffixIcon () {
+      const { prefixCls, loading } = this.$props
+      let suffixIcon = getComponentFromProp(this, 'suffixIcon')
+      suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon
+      if (suffixIcon) {
+        return isValidElement(suffixIcon)
+          ? cloneElement(suffixIcon, { class: `${prefixCls}-arrow-icon` })
+          : suffixIcon
+      }
+      if (loading) {
+        return <Icon type='loading' />
+      }
+      return <Icon type='down' class={`${prefixCls}-arrow-icon`} />
+    },
+
     renderSelect (locale) {
       const {
         prefixCls,
         size,
         mode,
         options,
+        getPopupContainer,
         ...restProps
       } = getOptionProps(this)
-      let suffixIcon = getComponentFromProp(this, 'suffixIcon')
-      suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon
-      const rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'suffixIcon'])
+      const { getPopupContainer: getContextPopupContainer } = this.configProvider
+      let removeIcon = getComponentFromProp(this, 'removeIcon')
+      removeIcon = Array.isArray(removeIcon) ? removeIcon[0] : removeIcon
+      let clearIcon = getComponentFromProp(this, 'clearIcon')
+      clearIcon = Array.isArray(clearIcon) ? clearIcon[0] : clearIcon
+      let menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon')
+      menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon) ? menuItemSelectedIcon[0] : menuItemSelectedIcon
+      const rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'suffixIcon', 'menuItemSelectedIcon'])
 
       const cls = {
         [`${prefixCls}-lg`]: size === 'large',
@@ -162,31 +196,27 @@ const Select = {
         tags: mode === 'tags',
         combobox: this.isCombobox(),
       }
+      const finalRemoveIcon = (removeIcon &&
+        (isValidElement(removeIcon)
+          ? cloneElement(removeIcon, { class: `${prefixCls}-remove-icon` })
+          : removeIcon)) || <Icon type='close' class={`${prefixCls}-remove-icon`} />
 
-      const inputIcon = suffixIcon && (
-        isValidElement(suffixIcon)
-          ? cloneElement(suffixIcon) : suffixIcon) || (
-        <Icon type='down' class={`${prefixCls}-arrow-icon`} />
-      )
+      const finalClearIcon = (clearIcon &&
+        (isValidElement(clearIcon)
+          ? cloneElement(clearIcon, { class: `${prefixCls}-clear-icon` })
+          : clearIcon)) || (<Icon type='close-circle' theme='filled' class={`${prefixCls}-clear-icon`} />)
 
-      const removeIcon = (
-        <Icon type='close' class={`${prefixCls}-remove-icon`} />
-      )
-
-      const clearIcon = (
-        <Icon type='close-circle' theme='filled' class={`${prefixCls}-clear-icon`} />
-      )
-
-      const menuItemSelectedIcon = (
-        <Icon type='check' class={`${prefixCls}-selected-icon`} />
-      )
+      const finalMenuItemSelectedIcon = (menuItemSelectedIcon &&
+        (isValidElement(menuItemSelectedIcon)
+          ? cloneElement(menuItemSelectedIcon, { class: `${prefixCls}-selected-icon` })
+          : menuItemSelectedIcon)) || <Icon type='check' class={`${prefixCls}-selected-icon`} />
 
       const selectProps = {
         props: {
-          inputIcon,
-          removeIcon,
-          clearIcon,
-          menuItemSelectedIcon,
+          inputIcon: this.renderSuffixIcon(),
+          removeIcon: finalRemoveIcon,
+          clearIcon: finalClearIcon,
+          menuItemSelectedIcon: finalMenuItemSelectedIcon,
           ...rest,
           ...modeConfig,
           prefixCls,
@@ -201,6 +231,8 @@ const Select = {
             })
             : filterEmpty(this.$slots.default),
           __propsSymbol__: Symbol(),
+          dropdownRender: getComponentFromProp(this, 'dropdownRender', {}, false),
+          getPopupContainer: getPopupContainer || getContextPopupContainer,
         },
         on: this.$listeners,
         class: cls,

components/select/index.jsx

@@ -18,6 +18,7 @@
 | disabled | 是否禁用 | boolean | false |
 | dropdownClassName | 下拉菜单的 className 属性 | string | - |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
+| dropdownRender | 自定义下拉框内容 | (menuNode: VNode, props) => VNode | - |
 | dropdownStyle | 下拉菜单的 style 属性 | object | - |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
 | firstActiveValue | 默认高亮的选项 | string\|string\[] | - |
@@ -33,7 +34,10 @@
 | showSearch | 使单选模式可搜索 | boolean | false |
 | showArrow | 是否显示下拉小箭头 | boolean |  true |
 | size | 选择框大小，可选 `large` `small` | string | default |
-| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |
+| suffixIcon | 自定义的选择框后缀图标 | VNode \| slot | - |
+| removeIcon | 自定义的多选框清除图标 | VNode \| slot | - |
+| clearIcon | 自定义的多选框清空图标 | VNode \| slot | - |
+| menuItemSelectedIcon | 自定义当前选中的条目图标 | VNode \| slot | - |
 | tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] |  |
 | value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
 | options | options 数据，如果设置则不需要手动构造 selectOption 节点 | array<{value, label, [disabled, key, title]}> | \[] |