diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index 4c615ad8f..2a01dfbbc 100644 --- a/components/tree/Tree.tsx +++ b/components/tree/Tree.tsx @@ -119,7 +119,6 @@ export const treeProps = () => { selectable: booleanType(), loadedKeys: arrayType(), - draggable: booleanType(), showIcon: booleanType(), icon: functionType<(nodeProps: AntdTreeNodeAttribute) => any>(), switcherIcon: PropTypes.any, diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md index 41577b7c0..42db4c104 100644 --- a/components/tree/index.en-US.md +++ b/components/tree/index.en-US.md @@ -26,7 +26,7 @@ Almost anything can be represented in a tree structure. Examples include directo | checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false | | | defaultExpandAll | Whether to expand all treeNodes by default | boolean | false | | | disabled | whether disabled the tree | bool | false | | -| draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false | | +| draggable | Specifies whether this Tree or the node is draggable. Use `icon: false` to disable drag handler icon (IE > 8) | boolean \| ((node: TreeNode) => boolean) \| { icon?: VNode \| false, nodeDraggable?: (node: TreeNode) => boolean } | false | | | expandedKeys(v-model) | (Controlled) Specifies the keys of the expanded treeNodes | string\[] \| number\[] | \[] | | | fieldNames | Replace the title,key and children fields in treeNode with the corresponding fields in treeData | object | { children:'children', title:'title', key:'key' } | 3.0.0 | | filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - | | diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index 7242bfa23..dd0dd79e8 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -27,7 +27,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1GeUQJPTGUYAAA | checkStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false | | | | defaultExpandAll | 默认展开所有树节点, 如果是异步数据，需要在数据返回后再实例化，建议用 v-if="data.length"；当有 expandedKeys 时，defaultExpandAll 将失效 | boolean | false | | | | disabled | 将树禁用 | bool | false | | | -| draggable | 设置节点可拖拽 | boolean | false | | | +| draggable | 设置节点可拖拽，可以通过 `icon: false` 关闭拖拽提示图标 | boolean \| ((node: TreeNode) => boolean) \| { icon?: VNode \| false, nodeDraggable?: (node: TreeNode) => boolean } | false | | | | expandedKeys(v-model) | （受控）展开指定的树节点 | string\[] \| number\[] | \[] | | | | fieldNames | 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段 | object | {children:'children', title:'title', key:'key' } | 3.0.0 | | | filterTreeNode | 按需筛选树节点（高亮），返回 true | function(node) | - | | | diff --git a/components/vc-align/interface.ts b/components/vc-align/interface.ts index ab91f17bc..61df37120 100644 --- a/components/vc-align/interface.ts +++ b/components/vc-align/interface.ts @@ -1,5 +1,6 @@ /** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */ export type AlignPoint = string; +export type OffsetType = number | `${number}%`; export interface AlignType { /** @@ -11,12 +12,12 @@ export interface AlignType { * offset source node by offset[0] in x and offset[1] in y. * If offset contains percentage string value, it is relative to sourceNode region. */ - offset?: number[]; + offset?: OffsetType[]; /** * offset target node by offset[0] in x and offset[1] in y. * If targetOffset contains percentage string value, it is relative to targetNode region. */ - targetOffset?: number[]; + targetOffset?: OffsetType[]; /** * If adjustX field is true, will adjust source node in x direction if source node is invisible. * If adjustY field is true, will adjust source node in y direction if source node is invisible. diff --git a/components/vc-tree/Tree.tsx b/components/vc-tree/Tree.tsx index dc963f7f3..f6bcc0430 100644 --- a/components/vc-tree/Tree.tsx +++ b/components/vc-tree/Tree.tsx @@ -35,21 +35,17 @@ import { toRaw, } from 'vue'; import initDefaultProps from '../_util/props-util/initDefaultProps'; -import type { CheckInfo, DraggableFn } from './props'; +import type { CheckInfo, DraggableConfig, DraggableFn } from './props'; import { treeProps } from './props'; import { warning } from '../vc-util/warning'; import KeyCode from '../_util/KeyCode'; import classNames from '../_util/classNames'; import pickAttrs from '../_util/pickAttrs'; import useMaxLevel from './useMaxLevel'; +import { HolderOutlined } from '@ant-design/icons-vue'; const MAX_RETRY_TIMES = 10; -export type DraggableConfig = { - icon?: any; - nodeDraggable?: DraggableFn; -}; - export default defineComponent({ compatConfig: { MODE: 3 }, name: 'Tree', @@ -1145,10 +1141,12 @@ export default defineComponent({ draggableConfig = draggable; } else if (typeof draggable === 'function') { draggableConfig = { - nodeDraggable: draggable, + nodeDraggable: draggable as DraggableFn, }; } else { - draggableConfig = {}; + draggableConfig = { + icon: , + }; } } else { draggableConfig = false; diff --git a/components/vc-tree/contextTypes.ts b/components/vc-tree/contextTypes.ts index 3010c7723..497d346c9 100644 --- a/components/vc-tree/contextTypes.ts +++ b/components/vc-tree/contextTypes.ts @@ -15,8 +15,7 @@ import type { Direction, FlattenNode, } from './interface'; - -import type { DraggableConfig } from './Tree'; +import { DraggableConfig } from './props'; export type NodeMouseEventParams = { event: MouseEvent; diff --git a/components/vc-tree/props.ts b/components/vc-tree/props.ts index 2d06cee5e..89c4fedfa 100644 --- a/components/vc-tree/props.ts +++ b/components/vc-tree/props.ts @@ -110,6 +110,10 @@ export type AllowDrop = ( ) => boolean; export type DraggableFn = (node: DataNode) => boolean; +export type DraggableConfig = { + icon?: any; + nodeDraggable?: DraggableFn; +}; export type ExpandAction = false | 'click' | 'doubleclick' | 'dblclick'; export const treeProps = () => ({ prefixCls: String, @@ -131,7 +135,7 @@ export const treeProps = () => ({ multiple: { type: Boolean, default: undefined }, checkable: { type: Boolean, default: undefined }, checkStrictly: { type: Boolean, default: undefined }, - draggable: { type: [Function, Boolean] as PropType }, + draggable: { type: [Function, Boolean] as PropType }, defaultExpandParent: { type: Boolean, default: undefined }, autoExpandParent: { type: Boolean, default: undefined }, defaultExpandAll: { type: Boolean, default: undefined },