diff --git a/components/config-provider/index.jsx b/components/config-provider/index.jsx index 0aab21431..8178180bb 100644 --- a/components/config-provider/index.jsx +++ b/components/config-provider/index.jsx @@ -1,6 +1,6 @@ import Vue from 'vue'; import PropTypes from '../_util/vue-types'; -import { filterEmpty } from '../_util/props-util'; +import { filterEmpty, getComponentFromProp } from '../_util/props-util'; import defaultRenderEmpty from './renderEmpty'; function getWatch(keys = []) { @@ -46,7 +46,7 @@ const ConfigProvider = { }, methods: { renderEmptyComponent() { - const customRender = (this.$scopedSlots && this.$scopedSlots['renderEmpty']) || this.$slots['renderEmpty']; + const customRender = getComponentFromProp(this,'renderEmpty'); return this.$props.renderEmpty || customRender || defaultRenderEmpty; }, getPrefixCls(suffixCls, customizePrefixCls) { diff --git a/components/tree/DirectoryTree.jsx b/components/tree/DirectoryTree.jsx index 38c23a58d..b17823368 100644 --- a/components/tree/DirectoryTree.jsx +++ b/components/tree/DirectoryTree.jsx @@ -7,6 +7,7 @@ import { calcRangeKeys, getFullKeyList } from './util'; import Icon from '../icon'; import BaseMixin from '../_util/BaseMixin'; import { initDefaultProps, getOptionProps } from '../_util/props-util'; +import { ConfigConsumerProps } from '../config-provider'; // export type ExpandAction = false | 'click' | 'doubleClick'; @@ -37,7 +38,6 @@ export default { props: initDefaultProps( { ...TreeProps(), expandAction: PropTypes.oneOf([false, 'click', 'doubleclick']) }, { - prefixCls: 'ant-tree', showIcon: true, expandAction: 'click', }, @@ -49,7 +49,9 @@ export default { // // Shift click usage // lastSelectedKey?: string; // cachedSelectedKeys?: string[]; - + inject: { + configProvider: { default: () => ({}) }, + }, data() { const props = getOptionProps(this); const { defaultExpandAll, defaultExpandParent, expandedKeys, defaultExpandedKeys } = props; @@ -181,7 +183,9 @@ export default { }, render() { - const { prefixCls, ...props } = getOptionProps(this); + const { prefixCls: customizePrefixCls, ...props } = getOptionProps(this); + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('tree', customizePrefixCls); const { _expandedKeys: expandedKeys, _selectedKeys: selectedKeys } = this.$data; const treeProps = { props: { diff --git a/components/tree/Tree.jsx b/components/tree/Tree.jsx index 93fd161b4..fc70ae3e3 100644 --- a/components/tree/Tree.jsx +++ b/components/tree/Tree.jsx @@ -2,7 +2,9 @@ import warning from 'warning'; import { Tree as VcTree, TreeNode } from '../vc-tree'; import animation from '../_util/openAnimation'; import PropTypes from '../_util/vue-types'; -import { initDefaultProps, getOptionProps, filterEmpty } from '../_util/props-util'; +import { initDefaultProps, getOptionProps, filterEmpty, getComponentFromProp, getClass } from '../_util/props-util'; +import { cloneElement } from '../_util/vnode'; +import { ConfigConsumerProps } from '../config-provider'; import Icon from '../icon'; function TreeProps() { @@ -73,6 +75,7 @@ function TreeProps() { // onDrop: (options: AntTreeNodeMouseEvent) => void, showIcon: PropTypes.bool, icon: PropTypes.func, + switcherIcon: PropTypes.any, prefixCls: PropTypes.string, filterTreeNode: PropTypes.func, openAnimation: PropTypes.any, @@ -90,7 +93,6 @@ export default { event: 'check', }, props: initDefaultProps(TreeProps(), { - prefixCls: 'ant-tree', checkable: false, showIcon: false, openAnimation: { @@ -98,6 +100,9 @@ export default { props: { appear: null }, }, }), + inject: { + configProvider: { default: () => ({}) }, + }, created() { warning( !('treeNodes' in getOptionProps(this)), @@ -106,8 +111,8 @@ export default { }, TreeNode, methods: { - renderSwitcherIcon({ isLeaf, expanded, loading }) { - const { prefixCls, showLine } = this.$props; + renderSwitcherIcon(prefixCls, switcherIcon, { isLeaf, expanded, loading }) { + const { showLine } = this.$props; if (loading) { return ; } @@ -123,10 +128,20 @@ export default { /> ); } else { + const switcherCls = `${prefixCls}-switcher-icon`; if (isLeaf) { return null; + }else if (switcherIcon) { + const switcherOriginCls = getClass(switcherIcon[0]); + return cloneElement(switcherIcon, { + class: { + ...switcherOriginCls, + [switcherCls]: true, + }, + }); + } else { + return ; } - return ; } }, updateTreeData(treeData) { @@ -167,7 +182,10 @@ export default { }, render() { const props = getOptionProps(this); - const { prefixCls, showIcon, treeNodes } = props; + const { prefixCls: customizePrefixCls, showIcon, treeNodes } = props; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('tree', customizePrefixCls); + const switcherIcon = getComponentFromProp(this, 'switcherIcon'); const checkable = props.checkable; let treeData = props.treeData || treeNodes; if (treeData) { @@ -176,10 +194,11 @@ export default { const vcTreeProps = { props: { ...props, + prefixCls, checkable: checkable ? : checkable, children: filterEmpty(this.$slots.default || []), __propsSymbol__: Symbol(), - switcherIcon: this.renderSwitcherIcon, + switcherIcon: (nodeProps) => this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps), }, on: this.$listeners, ref: 'tree', diff --git a/components/tree/demo/customized-icon.md b/components/tree/demo/customized-icon.md index f1650e503..0bf711e39 100644 --- a/components/tree/demo/customized-icon.md +++ b/components/tree/demo/customized-icon.md @@ -16,6 +16,7 @@ You can customize icons for different nodes. defaultExpandAll :defaultSelectedKeys="['0-0-0']" > +