From 6980c8e9f24239382612ed182d2c1430ea7d00ae Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sun, 16 Jan 2022 10:06:35 +0800 Subject: [PATCH] feat: add showLeafIcon --- components/tree-select/demo/multiple.vue | 7 +- components/tree-select/demo/treeLine.vue | 89 +++++++++++++++++++++ components/tree-select/index.en-US.md | 1 + components/tree-select/index.zh-CN.md | 1 + components/tree/Tree.tsx | 5 +- components/tree/index.en-US.md | 2 +- components/tree/index.zh-CN.md | 2 +- components/vc-tree-select/Context.tsx | 68 ---------------- components/vc-tree-select/LegacyContext.tsx | 3 +- components/vc-tree/props.ts | 5 +- 10 files changed, 109 insertions(+), 74 deletions(-) create mode 100644 components/tree-select/demo/treeLine.vue delete mode 100644 components/vc-tree-select/Context.tsx diff --git a/components/tree-select/demo/multiple.vue b/components/tree-select/demo/multiple.vue index d8864758d..e8fe8206f 100644 --- a/components/tree-select/demo/multiple.vue +++ b/components/tree-select/demo/multiple.vue @@ -27,7 +27,12 @@ Multiple selection usage. multiple tree-default-expand-all :tree-data="treeData" - > + > + + diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md index 27865f4c4..9b19e8ea0 100644 --- a/components/tree-select/index.en-US.md +++ b/components/tree-select/index.en-US.md @@ -47,6 +47,7 @@ Tree selection control. | treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false | | | treeDefaultExpandedKeys | Default expanded treeNodes | string\[] \| number\[] | - | | | treeExpandedKeys(v-model) | Set expanded keys | string\[] \| number\[] | - | | +| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 3.0 | | treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' | | | treeNodeLabelProp | Will render as content of select | string | 'title' | | | value(v-model) | To set the current selected treeNode(s). | string\|string\[] | - | | diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index 9849f66ca..d6a30beca 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -48,6 +48,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg | treeDefaultExpandAll | 默认展开所有树节点 | boolean | false | | | treeDefaultExpandedKeys | 默认展开的树节点 | string\[] \| number\[] | - | | | treeExpandedKeys(v-model) | 设置展开的树节点 | string\[] \| number\[] | - | | +| treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 3.0 | | treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | 'value' | | | treeNodeLabelProp | 作为显示的 prop 设置 | string | 'title' | | | value(v-model) | 指定当前选中的条目 | string/string\[] | - | | diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index 9b4fc9b3f..dc4fb1bc7 100644 --- a/components/tree/Tree.tsx +++ b/components/tree/Tree.tsx @@ -81,7 +81,10 @@ export interface AntTreeNodeDropEvent { export const treeProps = () => { return { ...vcTreeProps(), - showLine: { type: Boolean, default: undefined }, + showLine: { + type: [Boolean, Object] as PropType, + default: undefined, + }, /** 是否支持多选 */ multiple: { type: Boolean, default: undefined }, /** 是否自动展开父节点 */ diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md index e3be9b5f4..a01a96dbb 100644 --- a/components/tree/index.en-US.md +++ b/components/tree/index.en-US.md @@ -36,7 +36,7 @@ Almost anything can be represented in a tree structure. Examples include directo | selectedKeys(v-model) | (Controlled) Specifies the keys of the selected treeNodes | string\[] \| number\[] | - | | | showIcon | 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 | | | switcherIcon | customize collapse/expand icon of tree node | slot | - | | -| showLine | Shows a connecting line | boolean | false | | +| showLine | Shows a connecting line | boolean \| {showLeafIcon: boolean}(3.0+) | false | | | title | custom title | slot | | 2.0.0 | ### Events diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index 58c7f9ac5..9b9659148 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -37,7 +37,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg | selectedKeys(v-model) | （受控）设置选中的树节点 | string\[] \| number\[] | - | | | showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | | | switcherIcon | 自定义树节点的展开/折叠图标 | slot | - | | -| showLine | 是否展示连接线 | boolean | false | | +| showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean}(3.0+) | false | | | title | 自定义标题 | slot | | 2.0.0 | ### 事件 diff --git a/components/vc-tree-select/Context.tsx b/components/vc-tree-select/Context.tsx deleted file mode 100644 index 95746f792..000000000 --- a/components/vc-tree-select/Context.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { - FlattenDataNode, - InternalDataEntity, - Key, - LegacyDataNode, - RawValueType, -} from './interface'; -import type { SkipType } from './hooks/useKeyValueMapping'; -import type { ComputedRef, InjectionKey, PropType } from 'vue'; -import { computed, defineComponent, inject, provide } from 'vue'; - -interface ContextProps { - checkable: boolean; - customCheckable: () => any; - checkedKeys: Key[]; - halfCheckedKeys: Key[]; - treeExpandedKeys: Key[]; - treeDefaultExpandedKeys: Key[]; - onTreeExpand: (keys: Key[]) => void; - treeDefaultExpandAll: boolean; - treeIcon: any; - showTreeIcon: boolean; - switcherIcon: any; - treeLine: boolean; - treeNodeFilterProp: string; - treeLoadedKeys: Key[]; - treeMotion: any; - loadData: (treeNode: LegacyDataNode) => Promise; - onTreeLoad: (loadedKeys: Key[]) => void; - - // Cache help content. These can be generated by parent component. - // Let's reuse this. - getEntityByKey: (key: Key, skipType?: SkipType, ignoreDisabledCheck?: boolean) => FlattenDataNode; - getEntityByValue: ( - value: RawValueType, - skipType?: SkipType, - ignoreDisabledCheck?: boolean, - ) => FlattenDataNode; - - slots: { - title?: (data: InternalDataEntity) => any; - titleRender?: (data: InternalDataEntity) => any; - [key: string]: ((...args: any[]) => any) | undefined; - }; -} - -const SelectContextKey: InjectionKey> = Symbol('SelectContextKey'); - -export const SelectContext = defineComponent({ - name: 'SelectContext', - props: { - value: { type: Object as PropType }, - }, - setup(props, { slots }) { - provide( - SelectContextKey, - computed(() => props.value), - ); - return () => slots.default?.(); - }, -}); - -export const useInjectTreeSelectContext = () => { - return inject( - SelectContextKey, - computed(() => ({} as ContextProps)), - ); -}; diff --git a/components/vc-tree-select/LegacyContext.tsx b/components/vc-tree-select/LegacyContext.tsx index 7ad3eb37e..e4df81392 100644 --- a/components/vc-tree-select/LegacyContext.tsx +++ b/components/vc-tree-select/LegacyContext.tsx @@ -5,6 +5,7 @@ import type { InjectionKey } from 'vue'; import { inject, provide } from 'vue'; +import type { TreeProps } from '../tree'; import type { DataEntity, IconType } from '../vc-tree/interface'; import type { InternalDataEntity, Key, LegacyDataNode, RawValueType } from './interface'; @@ -20,7 +21,7 @@ export interface LegacyContextProps { treeIcon: IconType; showTreeIcon: boolean; switcherIcon: IconType; - treeLine: boolean; + treeLine: TreeProps['showLine']; treeNodeFilterProp: string; treeLoadedKeys: Key[]; treeMotion: any; diff --git a/components/vc-tree/props.ts b/components/vc-tree/props.ts index 13965ec75..766f08704 100644 --- a/components/vc-tree/props.ts +++ b/components/vc-tree/props.ts @@ -125,7 +125,10 @@ export const treeProps = () => ({ children: PropTypes.any, treeData: { type: Array as PropType }, // Generate treeNode by children fieldNames: { type: Object as PropType }, - showLine: { type: Boolean, default: undefined }, + showLine: { + type: [Boolean, Object] as PropType, + default: undefined, + }, showIcon: { type: Boolean, default: undefined }, icon: PropTypes.any, selectable: { type: Boolean, default: undefined },