From 0b03957ebe5d2480a86ca680f96c584cf70c6206 Mon Sep 17 00:00:00 2001 From: wangxueliang Date: Wed, 10 Apr 2019 11:54:42 +0800 Subject: [PATCH] feat: update tree-select --- components/tree-select/index.en-US.md | 1 + components/tree-select/index.jsx | 40 ++++++++++-------------- components/tree-select/index.zh-CN.md | 1 + components/tree-select/interface.jsx | 4 ++- components/vc-tree-select/src/Select.jsx | 2 +- 5 files changed, 22 insertions(+), 26 deletions(-) diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md index 6b70fe6a4..02dfaf64a 100644 --- a/components/tree-select/index.en-US.md +++ b/components/tree-select/index.en-US.md @@ -19,6 +19,7 @@ | placeholder | Placeholder of the select input | string\|slot | - | | searchPlaceholder | Placeholder of the search input | string\|slot | - | | searchValue(.sync) | work with `search` event to make search value controlled. | string | - | +| treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | | showCheckedStrategy | The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode). | enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | | showSearch | Whether to display a search input in the dropdown menu(valid only in the single mode) | boolean | false | | size | To set the size of the select input, options: `large` `small` | string | 'default' | diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx index 7becdb024..fa9db47ef 100644 --- a/components/tree-select/index.jsx +++ b/components/tree-select/index.jsx @@ -1,7 +1,6 @@ import VcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from '../vc-tree-select'; import classNames from 'classnames'; import { TreeSelectProps } from './interface'; -import LocaleReceiver from '../locale-provider/LocaleReceiver'; import warning from '../_util/warning'; import { initDefaultProps, @@ -10,9 +9,8 @@ import { filterEmpty, isValidElement, } from '../_util/props-util'; - +import { ConfigConsumerProps } from '../config-provider'; export { TreeData, TreeSelectProps } from './interface'; - import Icon from '../icon'; import omit from 'omit.js'; import { cloneElement } from '../_util/vnode'; @@ -24,7 +22,6 @@ const TreeSelect = { SHOW_CHILD, name: 'ATreeSelect', props: initDefaultProps(TreeSelectProps(), { - prefixCls: 'ant-select', transitionName: 'slide-up', choiceTransitionName: 'zoom', showSearch: false, @@ -50,8 +47,7 @@ const TreeSelect = { blur() { this.$refs.vcTreeSelect.blur(); }, - renderSwitcherIcon({ isLeaf, loading }) { - const { prefixCls } = this.$props; + renderSwitcherIcon(prefixCls, { isLeaf, loading }) { if (loading) { return ; } @@ -83,18 +79,26 @@ const TreeSelect = { Object.assign(list[i], item); } }, - renderTreeSelect(locale) { - const props = getOptionProps(this); + }, + render(h) { + const props = getOptionProps(this); const { - prefixCls, + prefixCls: customizePrefixCls, size, - notFoundContent, dropdownStyle, dropdownClassName, getPopupContainer, ...restProps } = props; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const prefixCls = getPrefixCls('select', customizePrefixCls); + + const renderEmpty = ( + this.configProvider.renderEmpty && + this.configProvider.renderEmpty() + ) || ConfigConsumerProps.renderEmpty; + const notFoundContent = getComponentFromProp(this, 'notFoundContent'); const { getPopupContainer: getContextPopupContainer } = this.configProvider; const rest = omit(restProps, [ 'inputIcon', @@ -126,10 +130,9 @@ const TreeSelect = { const clearIcon = ( ); - const VcTreeSelectProps = { props: { - switcherIcon: this.renderSwitcherIcon, + switcherIcon: (nodeProps) => this.renderSwitcherIcon(prefixCls, nodeProps), inputIcon, removeIcon, clearIcon, @@ -139,7 +142,7 @@ const TreeSelect = { prefixCls, dropdownStyle: { maxHeight: '100vh', overflow: 'auto', ...dropdownStyle }, treeCheckable: checkable, - notFoundContent: notFoundContent || locale.notFoundContent, + notFoundContent: notFoundContent || renderEmpty(h, 'Select'), __propsSymbol__: Symbol(), }, class: cls, @@ -148,17 +151,6 @@ const TreeSelect = { scopedSlots: this.$scopedSlots, }; return {filterEmpty(this.$slots.default)}; - }, - }, - - render() { - return ( - - ); }, }; diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index e2c277be1..f045b808c 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -19,6 +19,7 @@ | placeholder | 选择框默认文字 | string\|slot | - | | searchPlaceholder | 搜索框默认文字 | string\|slot | - | | searchValue(.sync) | 搜索框的值，可以通过 `search` 事件获取用户输入 | string | - | +| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | | showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | | showSearch | 在下拉中显示搜索框(仅在单选模式下生效) | boolean | false | | size | 选择框大小，可选 `large` `small` | string | 'default' | diff --git a/components/tree-select/interface.jsx b/components/tree-select/interface.jsx index 8b3cafe9c..fff7944c2 100644 --- a/components/tree-select/interface.jsx +++ b/components/tree-select/interface.jsx @@ -22,6 +22,7 @@ export const TreeSelectProps = () => ({ value: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]), defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]), multiple: PropTypes.bool, + notFoundContent: PropTypes.any, // onSelect: (value: any) => void, // onChange: (value: any, label: any) => void, // onSearch: (value: any) => void, @@ -29,7 +30,7 @@ export const TreeSelectProps = () => ({ searchValue: PropTypes.string, showCheckedStrategy: PropTypes.oneOf(['SHOW_ALL', 'SHOW_PARENT', 'SHOW_CHILD']), suffixIcon: PropTypes.any, - treeCheckable: PropTypes.bool, + treeCheckable: PropTypes.oneOfType([PropTypes.any, PropTypes.bool]), treeCheckStrictly: PropTypes.bool, treeData: PropTypes.arrayOf(Object), treeDataSimpleMode: PropTypes.oneOfType([Boolean, Object]), @@ -38,6 +39,7 @@ export const TreeSelectProps = () => ({ dropdownMatchSelectWidth: PropTypes.bool, treeDefaultExpandAll: PropTypes.bool, treeExpandedKeys: PropTypes.array, + treeIcon: PropTypes.bool, treeDefaultExpandedKeys: PropTypes.array, treeNodeFilterProp: PropTypes.string, treeNodeLabelProp: PropTypes.string, diff --git a/components/vc-tree-select/src/Select.jsx b/components/vc-tree-select/src/Select.jsx index ee247ddf6..f1d2ada89 100644 --- a/components/vc-tree-select/src/Select.jsx +++ b/components/vc-tree-select/src/Select.jsx @@ -104,7 +104,7 @@ const Select = { treeDataSimpleMode: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), treeNodeFilterProp: PropTypes.string, treeNodeLabelProp: PropTypes.string, - treeCheckable: PropTypes.oneOfType([PropTypes.any, PropTypes.bool]), + treeCheckable: PropTypes.oneOfType([PropTypes.any, PropTypes.object, PropTypes.bool]), // treeCheckable: PropTypes.any, treeCheckStrictly: PropTypes.bool, treeIcon: PropTypes.bool,