github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: tree fieldNames error #4726

pull/4738/head
tangjinzhou 2021-10-07 15:22:34 +08:00
parent 62c6f0e0d0
commit ac70da19f5
7 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/tree/utils/dictUtil.ts
View File

@ -28,13 +28,17 @@ export function calcRangeKeys({
expandedKeys,
startKey,
endKey,
fieldNames,
fieldNames = {
title: 'title',
key: 'key',
children: 'children',
},
}: {
treeData: DataNode[];
expandedKeys: Key[];
startKey?: Key;
endKey?: Key;
fieldNames: FieldNames;
fieldNames?: FieldNames;
}): Key[] {
const keys: Key[] = [];
let record: Record = Record.None;

18
components/vc-tree/NodeList.tsx
View File

@ -71,20 +71,17 @@ export function getMinimumRangeTransitionRange(
}
function itemKey(item: FlattenNode) {
const {
data: { key },
pos,
} = item;
const { key, pos } = item;
return getKey(key, pos);
}
function getAccessibilityPath(item: FlattenNode): string {
let path = String(item.data.key);
let path = String(item.key);
let current = item;
while (current.parent) {
current = current.parent;
path = `${current.data.key} > ${path}`;
path = `${current.key} > ${path}`;
}
return path;
@ -104,7 +101,6 @@ export default defineComponent({
},
getIndentWidth: () => indentMeasurerRef.value.offsetWidth,
});
// ============================== Motion ==============================
const transitionData = ref<FlattenNode[]>(props.data);
const transitionRange = ref([]);
@ -121,12 +117,10 @@ export default defineComponent({
[() => [...props.expandedKeys], () => props.data],
([expandedKeys, data], [prevExpandedKeys, prevData]) => {
const diffExpanded = findExpandedKeys(prevExpandedKeys, expandedKeys);
if (diffExpanded.key !== null) {
const { virtual, height, itemHeight } = props;
if (diffExpanded.add) {
const keyIndex = prevData.findIndex(({ data: { key } }) => key === diffExpanded.key);
const keyIndex = prevData.findIndex(({ key }) => key === diffExpanded.key);
const rangeNodes = getMinimumRangeTransitionRange(
getExpandRange(prevData, data, diffExpanded.key),
virtual,
@ -141,7 +135,7 @@ export default defineComponent({
transitionRange.value = rangeNodes;
motionType.value = 'show';
} else {
const keyIndex = data.findIndex(({ data: { key } }) => key === diffExpanded.key);
const keyIndex = data.findIndex(({ key }) => key === diffExpanded.key);
const rangeNodes = getMinimumRangeTransitionRange(
getExpandRange(data, prevData, diffExpanded.key),
@ -295,7 +289,7 @@ export default defineComponent({
{...restProps}
{...treeNodeProps}
title={title}
active={!!activeItem && key === activeItem.data.key}
active={!!activeItem && key === activeItem.key}
pos={pos}
data={treeNode.data}
isStart={isStart}

16
components/vc-tree/Tree.tsx
View File

@ -160,7 +160,6 @@ export default defineComponent({
const flattenNodes = computed(() => {
return flattenTreeData(treeData.value, expandedKeys.value, fieldNames.value);
});
// ================ selectedKeys =================
watchEffect(() => {
if (props.selectable) {
@ -499,10 +498,9 @@ export default defineComponent({
cleanDragState();
if (dropTargetKey === null) return;
const abstractDropNodeProps = {
...getTreeNodeProps(dropTargetKey, treeNodeRequiredProps.value),
active: activeItem.value?.data.key === dropTargetKey,
active: activeItem.value?.key === dropTargetKey,
data: keyEntities.value[dropTargetKey].node,
};
const dropToChild = dragChildrenKeys.indexOf(dropTargetKey) !== -1;
@ -663,7 +661,7 @@ export default defineComponent({
new Promise<void>((resolve, reject) => {
// We need to get the latest state of loading/loaded keys
const { loadData, onLoad } = props;
const { key } = treeNode;
const key = treeNode[fieldNames.value.key];
if (
!loadData ||
@ -836,11 +834,11 @@ export default defineComponent({
return null;
}
return flattenNodes.value.find(({ data: { key } }) => key === activeKey.value) || null;
return flattenNodes.value.find(({ key }) => key === activeKey.value) || null;
});
const offsetActiveKey = (offset: number) => {
let index = flattenNodes.value.findIndex(({ data: { key } }) => key === activeKey.value);
let index = flattenNodes.value.findIndex(({ key }) => key === activeKey.value);
// Align with index
if (index === -1 && offset < 0) {
@ -851,7 +849,7 @@ export default defineComponent({
const item = flattenNodes.value[index];
if (item) {
const { key } = item.data;
const { key } = item;
onActiveChange(key);
} else {
onActiveChange(null);
@ -894,7 +892,7 @@ export default defineComponent({
if (expandable && expandedKeys.value.includes(activeKey.value)) {
onNodeExpand({} as MouseEvent, eventNode);
} else if (item.parent) {
onActiveChange(item.parent.data.key);
onActiveChange(item.parent.key);
}
event.preventDefault();
break;
@ -904,7 +902,7 @@ export default defineComponent({
if (expandable && !expandedKeys.value.includes(activeKey.value)) {
onNodeExpand({} as MouseEvent, eventNode);
} else if (item.children && item.children.length) {
onActiveChange(item.children[0].data.key);
onActiveChange(item.children[0].key);
}
event.preventDefault();
break;

3
components/vc-tree/TreeNode.tsx
View File

@ -117,6 +117,7 @@ export default defineComponent({
isLeaf: isLeaf.value,
};
});
const instance = getCurrentInstance();
const eventData = computed(() => {
return convertNodePropsToEventData(props);
});
@ -125,7 +126,7 @@ export default defineComponent({
eventKey: computed(() => props.eventKey),
selectHandle,
pos: computed(() => props.pos),
key: getCurrentInstance().vnode.key as Key,
key: instance.vnode.key as Key,
});
expose(dragNodeEvent);
const onSelectorDoubleClick = (e: MouseEvent) => {

4
components/vc-tree/util.tsx
View File

@ -113,10 +113,10 @@ export function calcDropPosition(
if (clientY < top + height / 2) {
// first half, set abstract drop node to previous node
const nodeIndex = flattenedNodes.findIndex(
flattenedNode => flattenedNode.data.key === abstractDropNodeEntity.key,
flattenedNode => flattenedNode.key === abstractDropNodeEntity.key,
);
const prevNodeIndex = nodeIndex <= 0 ? 0 : nodeIndex - 1;
const prevNodeKey = flattenedNodes[prevNodeIndex].data.key;
const prevNodeKey = flattenedNodes[prevNodeIndex].key;
abstractDropNodeEntity = keyEntities[prevNodeKey];
}

6
components/vc-tree/utils/diffUtil.ts
View File

@ -33,12 +33,12 @@ export function findExpandedKeys(prev: Key[] = [], next: Key[] = []) {
}
export function getExpandRange(shorter: FlattenNode[], longer: FlattenNode[], key: Key) {
const shorterStartIndex = shorter.findIndex(({ data }) => data.key === key);
const shorterStartIndex = shorter.findIndex(item => item.key === key);
const shorterEndNode = shorter[shorterStartIndex + 1];
const longerStartIndex = longer.findIndex(({ data }) => data.key === key);
const longerStartIndex = longer.findIndex(item => item.key === key);
if (shorterEndNode) {
const longerEndIndex = longer.findIndex(({ data }) => data.key === shorterEndNode.data.key);
const longerEndIndex = longer.findIndex(item => item.key === shorterEndNode.key);
return longer.slice(longerStartIndex + 1, longerEndIndex);
}
return longer.slice(longerStartIndex + 1);

3
components/vc-tree/utils/treeUtil.ts
View File

@ -401,6 +401,7 @@ export function convertNodePropsToEventData(props: TreeNodeProps): EventDataNode
dragOverGapBottom,
pos,
active,
eventKey,
} = props;
const eventData = {
dataRef: data,
@ -416,7 +417,7 @@ export function convertNodePropsToEventData(props: TreeNodeProps): EventDataNode
dragOverGapBottom,
pos,
active,
eventKey: data.key,
eventKey,
};
if (!('props' in eventData)) {
Object.defineProperty(eventData, 'props', {