From adcf08bc033074510598c595b5649923ac68a9b2 Mon Sep 17 00:00:00 2001
From: Pionxzh <pionxzh@csie.io>
Date: Sat, 4 Nov 2023 14:15:44 +0800
Subject: [PATCH] fix: should handle key and path of nested grouped array with
 nestedIndex

---
 src/components/DataKeyPair.tsx      |  5 +--
 src/components/DataTypes/Object.tsx |  4 ++-
 src/type.ts                         |  1 +
 tests/index.test.tsx                | 51 ++++++++++++++++++++++++++++-
 4 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/components/DataKeyPair.tsx b/src/components/DataKeyPair.tsx
index 1ef1e3de..d7d858a2 100644
--- a/src/components/DataKeyPair.tsx
+++ b/src/components/DataKeyPair.tsx
@@ -233,8 +233,9 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
     inspect,
     setInspect,
     value,
-    prevValue
-  }), [inspect, path, setInspect, value, prevValue])
+    prevValue,
+    nestedIndex
+  }), [inspect, path, setInspect, value, prevValue, nestedIndex])
   return (
     <Box
       className='data-key-pair'
diff --git a/src/components/DataTypes/Object.tsx b/src/components/DataTypes/Object.tsx
index 8f252bc8..7e54bf73 100644
--- a/src/components/DataTypes/Object.tsx
+++ b/src/components/DataTypes/Object.tsx
@@ -166,7 +166,8 @@ const ObjectType: FC<DataItemProps<object>> = (props) => {
     if (Array.isArray(value)) {
       // unknown[]
       if (value.length <= groupArraysAfterLength) {
-        const elements = value.slice(0, displayLength).map((value, index) => {
+        const elements = value.slice(0, displayLength).map((value, _index) => {
+          const index = props.nestedIndex ? (props.nestedIndex * groupArraysAfterLength) + _index : _index
           const path = [...props.path, index]
           return (
             <DataKeyPair
@@ -252,6 +253,7 @@ const ObjectType: FC<DataItemProps<object>> = (props) => {
     props.value,
     props.prevValue,
     props.path,
+    props.nestedIndex,
     groupArraysAfterLength,
     displayLength,
     keyColor,
diff --git a/src/type.ts b/src/type.ts
index d7ab1837..6903d956 100644
--- a/src/type.ts
+++ b/src/type.ts
@@ -43,6 +43,7 @@ export interface DataItemProps<ValueType = unknown> {
   value: ValueType
   prevValue: ValueType | undefined
   path: Path
+  nestedIndex?: number
 }
 
 export type EditorProps<ValueType = unknown> = {
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index e66ac57d..19af0588 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { expectTypeOf } from 'expect-type'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import type { Path } from '../src'
 import { defineDataType, JsonViewer } from '../src'
@@ -695,3 +695,52 @@ describe('Show three dots after string collapsing', () => {
     expect(elements[0].textContent).eq('"string…"')
   })
 })
+
+describe('Nested long array', () => {
+  it('use correct key in nested long array', () => {
+    const longArray: any[] = Array.from({ length: 100 }).map((_, i) => i)
+    longArray.push(Array.from({ length: 50 }).map(() => Array.from({ length: 50 }).map((_, i) => i)))
+
+    const onSelect = vi.fn()
+    const Component = () => (
+      <JsonViewer
+        rootName={false}
+        value={longArray}
+        onSelect={onSelect}
+        groupArraysAfterLength={20}
+      />
+    )
+    const { container, rerender } = render(<Component />)
+
+    const lastGroup = container.querySelector('[data-testid="data-key-pair"] > .data-object > .data-key-pair:last-child')
+    const threeDot = lastGroup.querySelector('.data-object-body')
+    fireEvent.click(threeDot) // expand last group
+
+    rerender(<Component />)
+    const lastGroupBody = lastGroup.querySelector('.data-key-pair')
+    const key = lastGroupBody.querySelector('.data-key')
+    expect(key.textContent).eq('100:[50 Items')
+
+    const lastLastGroup = lastGroupBody.querySelector('.data-object > .data-key-pair:last-child')
+    const lastThreeDot = lastLastGroup.querySelector('.data-object-body')
+    fireEvent.click(lastThreeDot) // expand last last group
+
+    rerender(<Component />)
+    const lastLastSecondGroup = lastLastGroup.children.item(1).children.item(1)
+    const lastLastKey = lastLastSecondGroup.querySelector('.data-key')
+    expect(lastLastKey.textContent).eq('41:[50 Items')
+
+    const targetContainer = lastLastSecondGroup.children.item(1).children.item(1)
+    const targetThreeDot = targetContainer.querySelector('.data-object-body')
+    fireEvent.click(targetThreeDot) // expand target group
+
+    rerender(<Component />)
+    const targetArray = targetContainer.children.item(1)
+    const targetKV = targetArray.children.item(1)
+    expect(targetKV.textContent).eq('21:int21')
+
+    const targetValue = targetKV.children.item(1)
+    fireEvent.click(targetValue)
+    expect(onSelect).toBeCalledWith([100, 41, 21], 21)
+  })
+})