fix: tree fieldNames error #4726

3 years ago · ac70da19f5
7 changed files with 28 additions and 30 deletions
--- a/components/tree/utils/dictUtil.ts
+++ b/components/tree/utils/dictUtil.ts
@ -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;
--- a/components/vc-tree/NodeList.tsx
+++ b/components/vc-tree/NodeList.tsx
@ -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}
--- a/components/vc-tree/Tree.tsx
+++ b/components/vc-tree/Tree.tsx
@ -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;
--- a/components/vc-tree/TreeNode.tsx
+++ b/components/vc-tree/TreeNode.tsx
@ -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) => {
--- a/components/vc-tree/util.tsx
+++ b/components/vc-tree/util.tsx
@ -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];
  }

--- a/components/vc-tree/utils/diffUtil.ts
+++ b/components/vc-tree/utils/diffUtil.ts
@ -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);
--- a/components/vc-tree/utils/treeUtil.ts
+++ b/components/vc-tree/utils/treeUtil.ts
@ -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', {