Skip to content

Commit

Permalink
fix: should handle key and path of nested grouped array with nestedIndex
Browse files Browse the repository at this point in the history
  • Loading branch information
pionxzh committed Nov 4, 2023
1 parent 41108e9 commit adcf08b
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 4 deletions.
5 changes: 3 additions & 2 deletions src/components/DataKeyPair.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
4 changes: 3 additions & 1 deletion src/components/DataTypes/Object.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -252,6 +253,7 @@ const ObjectType: FC<DataItemProps<object>> = (props) => {
props.value,
props.prevValue,
props.path,
props.nestedIndex,
groupArraysAfterLength,
displayLength,
keyColor,
Expand Down
1 change: 1 addition & 0 deletions src/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export interface DataItemProps<ValueType = unknown> {
value: ValueType
prevValue: ValueType | undefined
path: Path
nestedIndex?: number
}

export type EditorProps<ValueType = unknown> = {
Expand Down
51 changes: 50 additions & 1 deletion tests/index.test.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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)
})
})

0 comments on commit adcf08b

Please sign in to comment.