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
+
+
+
+ Please select
+
+
+
+`;
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;