diff --git a/components/tree-select/__tests__/__snapshots__/index.test.js.snap b/components/tree-select/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..83b601ea64 --- /dev/null +++ b/components/tree-select/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,93 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TreeSelect TreeSelect Custom Icons should support customized icons 1`] = ` + + + + + + clear + + + + + +`; diff --git a/components/tree-select/__tests__/index.test.js b/components/tree-select/__tests__/index.test.js index d6270bcc7d..9cc7a520ea 100644 --- a/components/tree-select/__tests__/index.test.js +++ b/components/tree-select/__tests__/index.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; -import TreeSelect from '..'; +import TreeSelect, { TreeNode } from '..'; import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; @@ -17,4 +17,30 @@ describe('TreeSelect', () => { expect(multiple.find('.ant-select-search__field').length).toBeTruthy(); }); }); + + describe('TreeSelect Custom Icons', () => { + it('should support customized icons', () => { + const wrapper = mount( + clear} + removeIcon={remove} + value={['leaf1', 'leaf2']} + placeholder="Please select" + multiple + allowClear + treeDefaultExpandAll + > + + + + + + + , + ); + + expect(wrapper.render()).toMatchSnapshot(); + }); + }); }); diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 189a9878ea..61432c6f8a 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -5,6 +5,7 @@ import omit from 'omit.js'; import { TreeSelectProps, TreeNodeValue } from './interface'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import warning from '../_util/warning'; +import { cloneElement } from '../_util/reactNode'; import Icon from '../icon'; import { AntTreeNodeProps } from '../tree'; @@ -74,6 +75,8 @@ export default class TreeSelect extends React.Component dropdownStyle, dropdownClassName, suffixIcon, + removeIcon, + clearIcon, getPopupContainer, ...restProps } = this.props; @@ -99,15 +102,22 @@ export default class TreeSelect extends React.Component checkable = ; } - const inputIcon = (suffixIcon && - (React.isValidElement<{ className?: string }>(suffixIcon) - ? React.cloneElement(suffixIcon) - : suffixIcon)) || ; + const inputIcon = suffixIcon ? ( + cloneElement(suffixIcon) + ) : ( + + ); - const removeIcon = ; + const finalRemoveIcon = removeIcon ? ( + cloneElement(removeIcon) + ) : ( + + ); - const clearIcon = ( - + const finalClearIcon = clearIcon ? ( + cloneElement(clearIcon) + ) : ( + ); return ( @@ -116,8 +126,8 @@ export default class TreeSelect extends React.Component this.renderSwitcherIcon(prefixCls, nodeProps) } inputIcon={inputIcon} - removeIcon={removeIcon} - clearIcon={clearIcon} + removeIcon={finalRemoveIcon} + clearIcon={finalClearIcon} {...rest} showSearch={showSearch} getPopupContainer={getPopupContainer || getContextPopupContainer} diff --git a/components/tree-select/interface.tsx b/components/tree-select/interface.tsx index 9484cb878f..34cf3aa01b 100644 --- a/components/tree-select/interface.tsx +++ b/components/tree-select/interface.tsx @@ -52,6 +52,8 @@ export interface TreeSelectProps extends AbstractSelect searchValue?: string; showCheckedStrategy?: 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD'; suffixIcon?: React.ReactNode; + removeIcon?: React.ReactNode; + clearIcon?: React.ReactNode; treeCheckable?: boolean | React.ReactNode; treeCheckStrictly?: boolean; treeData?: Array;