ant-design-vue/components/vc-tree/props.ts

242 lines
8.5 KiB
TypeScript

import type { ExtractPropTypes, PropType } from 'vue';
import type { EventHandler } from '../_util/EventInterface';
import PropTypes from '../_util/vue-types';
import type {
NodeDragEventParams,
NodeMouseEventHandler,
NodeMouseEventParams,
} from './contextTypes';
import type {
DataNode,
Key,
FlattenNode,
DataEntity,
EventDataNode,
Direction,
FieldNames,
} from './interface';
export interface CheckInfo {
event: 'check';
node: EventDataNode;
checked: boolean;
nativeEvent: MouseEvent;
checkedNodes: DataNode[];
checkedNodesPositions?: { node: DataNode; pos: string }[];
halfCheckedKeys?: Key[];
}
export const treeNodeProps = {
eventKey: [String, Number], // Pass by parent `cloneElement`
prefixCls: String,
// By parent
expanded: { type: Boolean, default: undefined },
selected: { type: Boolean, default: undefined },
checked: { type: Boolean, default: undefined },
loaded: { type: Boolean, default: undefined },
loading: { type: Boolean, default: undefined },
halfChecked: { type: Boolean, default: undefined },
title: PropTypes.any,
dragOver: { type: Boolean, default: undefined },
dragOverGapTop: { type: Boolean, default: undefined },
dragOverGapBottom: { type: Boolean, default: undefined },
pos: String,
/** New added in Tree for easy data access */
data: { type: Object as PropType<DataNode>, default: undefined as DataNode },
isStart: { type: Array as PropType<boolean[]> },
isEnd: { type: Array as PropType<boolean[]> },
active: { type: Boolean, default: undefined },
onMousemove: { type: Function as PropType<EventHandler> },
// By user
isLeaf: { type: Boolean, default: undefined },
checkable: { type: Boolean, default: undefined },
selectable: { type: Boolean, default: undefined },
disabled: { type: Boolean, default: undefined },
disableCheckbox: { type: Boolean, default: undefined },
icon: PropTypes.any,
switcherIcon: PropTypes.any,
domRef: { type: Function as PropType<(arg: any) => void> },
};
export type TreeNodeProps = Partial<ExtractPropTypes<typeof treeNodeProps>>;
export const nodeListProps = {
prefixCls: { type: String as PropType<string> },
data: { type: Array as PropType<FlattenNode[]> },
motion: { type: Object as PropType<any> },
focusable: { type: Boolean as PropType<boolean> },
activeItem: { type: Object as PropType<FlattenNode> },
focused: { type: Boolean as PropType<boolean> },
tabindex: { type: Number as PropType<number> },
checkable: { type: Boolean as PropType<boolean> },
selectable: { type: Boolean as PropType<boolean> },
disabled: { type: Boolean as PropType<boolean> },
expandedKeys: { type: Array as PropType<Key[]> },
selectedKeys: { type: Array as PropType<Key[]> },
checkedKeys: { type: Array as PropType<Key[]> },
loadedKeys: { type: Array as PropType<Key[]> },
loadingKeys: { type: Array as PropType<Key[]> },
halfCheckedKeys: { type: Array as PropType<Key[]> },
keyEntities: { type: Object as PropType<Record<Key, DataEntity>> },
dragging: { type: Boolean as PropType<boolean> },
dragOverNodeKey: { type: [String, Number] as PropType<Key> },
dropPosition: { type: Number as PropType<number> },
// Virtual list
height: { type: Number as PropType<number> },
itemHeight: { type: Number as PropType<number> },
virtual: { type: Boolean as PropType<boolean> },
onKeydown: { type: Function as PropType<EventHandler> },
onFocus: { type: Function as PropType<(e: FocusEvent) => void> },
onBlur: { type: Function as PropType<(e: FocusEvent) => void> },
onActiveChange: { type: Function as PropType<(key: Key) => void> },
onContextmenu: { type: Function as PropType<EventHandler> },
onListChangeStart: { type: Function as PropType<() => void> },
onListChangeEnd: { type: Function as PropType<() => void> },
};
export type NodeListProps = Partial<ExtractPropTypes<typeof nodeListProps>>;
export type AllowDrop = (options: { dropNode: DataNode; dropPosition: -1 | 0 | 1 }) => boolean;
export const treeProps = () => ({
prefixCls: String,
focusable: { type: Boolean, default: undefined },
tabindex: Number,
children: PropTypes.VNodeChild,
treeData: { type: Array as PropType<DataNode[]> }, // Generate treeNode by children
fieldNames: { type: Object as PropType<FieldNames> },
showLine: { type: Boolean, default: undefined },
showIcon: { type: Boolean, default: undefined },
icon: PropTypes.any,
selectable: { type: Boolean, default: undefined },
disabled: { type: Boolean, default: undefined },
multiple: { type: Boolean, default: undefined },
checkable: { type: Boolean, default: undefined },
checkStrictly: { type: Boolean, default: undefined },
draggable: { type: [Function, Boolean] as PropType<((node: DataNode) => boolean) | boolean> },
defaultExpandParent: { type: Boolean, default: undefined },
autoExpandParent: { type: Boolean, default: undefined },
defaultExpandAll: { type: Boolean, default: undefined },
defaultExpandedKeys: { type: Array as PropType<Key[]> },
expandedKeys: { type: Array as PropType<Key[]> },
defaultCheckedKeys: { type: Array as PropType<Key[]> },
checkedKeys: {
type: [Object, Array] as PropType<Key[] | { checked: Key[]; halfChecked: Key[] }>,
},
defaultSelectedKeys: { type: Array as PropType<Key[]> },
selectedKeys: { type: Array as PropType<Key[]> },
allowDrop: { type: Function as PropType<AllowDrop> },
dropIndicatorRender: {
type: Function as PropType<
(props: {
dropPosition: -1 | 0 | 1;
dropLevelOffset: number;
indent: number;
prefixCls: string;
direction: Direction;
}) => any
>,
},
onFocus: { type: Function as PropType<(e: FocusEvent) => void> },
onBlur: { type: Function as PropType<(e: FocusEvent) => void> },
onKeydown: { type: Function as PropType<EventHandler> },
onContextmenu: { type: Function as PropType<EventHandler> },
onClick: { type: Function as PropType<NodeMouseEventHandler> },
onDblclick: { type: Function as PropType<NodeMouseEventHandler> },
onScroll: { type: Function as PropType<EventHandler> },
onExpand: {
type: Function as PropType<
(
expandedKeys: Key[],
info: {
node: EventDataNode;
expanded: boolean;
nativeEvent: MouseEvent;
},
) => void
>,
},
onCheck: {
type: Function as PropType<
(checked: { checked: Key[]; halfChecked: Key[] } | Key[], info: CheckInfo) => void
>,
},
onSelect: {
type: Function as PropType<
(
selectedKeys: Key[],
info: {
event: 'select';
selected: boolean;
node: EventDataNode;
selectedNodes: DataNode[];
nativeEvent: MouseEvent;
},
) => void
>,
},
onLoad: {
type: Function as PropType<
(
loadedKeys: Key[],
info: {
event: 'load';
node: EventDataNode;
},
) => void
>,
},
loadData: { type: Function as PropType<(treeNode: EventDataNode) => Promise<void>> },
loadedKeys: { type: Array as PropType<Key[]> },
onMouseenter: { type: Function as PropType<(info: NodeMouseEventParams) => void> },
onMouseleave: { type: Function as PropType<(info: NodeMouseEventParams) => void> },
onRightClick: {
type: Function as PropType<(info: { event: MouseEvent; node: EventDataNode }) => void>,
},
onDragstart: { type: Function as PropType<(info: NodeDragEventParams) => void> },
onDragenter: {
type: Function as PropType<(info: NodeDragEventParams & { expandedKeys: Key[] }) => void>,
},
onDragover: { type: Function as PropType<(info: NodeDragEventParams) => void> },
onDragleave: { type: Function as PropType<(info: NodeDragEventParams) => void> },
onDragend: { type: Function as PropType<(info: NodeDragEventParams) => void> },
onDrop: {
type: Function as PropType<
(
info: NodeDragEventParams & {
dragNode: EventDataNode;
dragNodesKeys: Key[];
dropPosition: number;
dropToGap: boolean;
},
) => void
>,
},
/**
* Used for `rc-tree-select` only.
* Do not use in your production code directly since this will be refactor.
*/
onActiveChange: { type: Function as PropType<(key: Key) => void> },
filterTreeNode: { type: Function as PropType<(treeNode: EventDataNode) => boolean> },
motion: PropTypes.any,
switcherIcon: PropTypes.any,
// Virtual List
height: Number,
itemHeight: Number,
virtual: { type: Boolean, default: undefined },
// direction for drag logic
direction: { type: String as PropType<Direction> },
});
export type TreeProps = Partial<ExtractPropTypes<ReturnType<typeof treeProps>>>;