Skip to content

Commit be6871a

Browse files
jy95jy95
authored
Merge pull request #654 from jy95/defaultExpandDepth
feat: defaultExpandDepth
2 parents 5d63e56 + 5046f1c commit be6871a

File tree

6 files changed

+330
-1
lines changed

6 files changed

+330
-1
lines changed

‎__tests__/JSONSchemaViewer/__snapshots__/constructor.test.tsx.snap‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -439,6 +439,221 @@ exports[`JSONSchemaViewer - constructor Overwrite default className value 1`] =
439439
</DocumentFragment>
440440
`;
441441

442+
exports[`JSONSchemaViewer - constructor Overwrite default defaultExpandDepth value 1`] = `
443+
<DocumentFragment>
444+
<details
445+
class="json-schema-viewer"
446+
open=""
447+
>
448+
<summary>
449+
<strong>
450+
Schema
451+
</strong>
452+
</summary>
453+
<div>
454+
<div>
455+
<strong>
456+
type
457+
</strong>
458+
 : 
459+
<span
460+
style="opacity: 0.6;"
461+
>
462+
object
463+
</span>
464+
<ul>
465+
<li
466+
data-level="1"
467+
id="/properties/level1_prop1"
468+
>
469+
<details
470+
open=""
471+
>
472+
<summary>
473+
<strong>
474+
level1_prop1
475+
</strong>
476+
 
477+
<span
478+
style="opacity: 0.6;"
479+
>
480+
string
481+
</span>
482+
</summary>
483+
<div>
484+
<div>
485+
<strong>
486+
type
487+
</strong>
488+
 : 
489+
<span
490+
style="opacity: 0.6;"
491+
>
492+
string
493+
</span>
494+
<div
495+
style="margin-top: var(--ifm-table-cell-padding);"
496+
/>
497+
</div>
498+
</div>
499+
</details>
500+
</li>
501+
<li
502+
data-level="1"
503+
id="/properties/level1_prop2"
504+
>
505+
<details
506+
open=""
507+
>
508+
<summary>
509+
<strong>
510+
level1_prop2
511+
</strong>
512+
 
513+
<span
514+
style="opacity: 0.6;"
515+
>
516+
object
517+
</span>
518+
</summary>
519+
<div>
520+
<div>
521+
<strong>
522+
type
523+
</strong>
524+
 : 
525+
<span
526+
style="opacity: 0.6;"
527+
>
528+
object
529+
</span>
530+
<ul>
531+
<li
532+
data-level="2"
533+
id="/properties/level1_prop2/properties/level2_prop1"
534+
>
535+
<details
536+
open=""
537+
>
538+
<summary>
539+
<strong>
540+
level2_prop1
541+
</strong>
542+
 
543+
<span
544+
style="opacity: 0.6;"
545+
>
546+
integer
547+
</span>
548+
</summary>
549+
<div>
550+
<div>
551+
<strong>
552+
type
553+
</strong>
554+
 : 
555+
<span
556+
style="opacity: 0.6;"
557+
>
558+
integer
559+
</span>
560+
<div
561+
style="margin-top: var(--ifm-table-cell-padding);"
562+
/>
563+
</div>
564+
</div>
565+
</details>
566+
</li>
567+
<li
568+
data-level="2"
569+
id="/properties/level1_prop2/properties/level2_prop2"
570+
>
571+
<details
572+
open=""
573+
>
574+
<summary>
575+
<strong>
576+
level2_prop2
577+
</strong>
578+
 
579+
<span
580+
style="opacity: 0.6;"
581+
>
582+
object
583+
</span>
584+
</summary>
585+
<div>
586+
<div>
587+
<strong>
588+
type
589+
</strong>
590+
 : 
591+
<span
592+
style="opacity: 0.6;"
593+
>
594+
object
595+
</span>
596+
<ul>
597+
<li
598+
data-level="3"
599+
id="/properties/level1_prop2/properties/level2_prop2/properties/level3_prop1"
600+
>
601+
<details>
602+
<summary>
603+
<strong>
604+
level3_prop1
605+
</strong>
606+
 
607+
<span
608+
style="opacity: 0.6;"
609+
>
610+
boolean
611+
</span>
612+
</summary>
613+
<div>
614+
<div>
615+
<strong>
616+
type
617+
</strong>
618+
 : 
619+
<span
620+
style="opacity: 0.6;"
621+
>
622+
boolean
623+
</span>
624+
<div
625+
style="margin-top: var(--ifm-table-cell-padding);"
626+
/>
627+
</div>
628+
</div>
629+
</details>
630+
</li>
631+
</ul>
632+
<div
633+
style="margin-top: var(--ifm-table-cell-padding);"
634+
/>
635+
</div>
636+
</div>
637+
</details>
638+
</li>
639+
</ul>
640+
<div
641+
style="margin-top: var(--ifm-table-cell-padding);"
642+
/>
643+
</div>
644+
</div>
645+
</details>
646+
</li>
647+
</ul>
648+
<div
649+
style="margin-top: var(--ifm-table-cell-padding);"
650+
/>
651+
</div>
652+
</div>
653+
</details>
654+
</DocumentFragment>
655+
`;
656+
442657
exports[`JSONSchemaViewer - constructor Overwrite default qualifierMessagesOrder value 1`] = `
443658
<DocumentFragment>
444659
<details

‎__tests__/JSONSchemaViewer/constructor.test.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,4 +151,43 @@ describe("JSONSchemaViewer - constructor", () => {
151151

152152
expect(result!.asFragment()).toMatchSnapshot()
153153
})
154+
155+
test("Overwrite default defaultExpandDepth value", async () => {
156+
const fakeSchema: JSONSchema = {
157+
type: "object",
158+
properties: {
159+
level1_prop1: {
160+
type: "string",
161+
},
162+
level1_prop2: {
163+
type: "object",
164+
properties: {
165+
level2_prop1: {
166+
type: "integer",
167+
},
168+
level2_prop2: {
169+
type: "object",
170+
properties: {
171+
level3_prop1: {
172+
type: "boolean",
173+
},
174+
},
175+
},
176+
},
177+
},
178+
},
179+
}
180+
let result: RenderResult | null = null
181+
182+
await act(async () => {
183+
result = render(
184+
<JSONSchemaViewer
185+
schema={fakeSchema}
186+
viewerOptions={{ defaultExpandDepth: 2 }}
187+
/>,
188+
)
189+
})
190+
191+
expect(result!.asFragment()).toMatchSnapshot()
192+
})
154193
})

‎src/theme/JSONSchemaViewer/components/SchemaItem/SchemaItem.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { ReactNode } from "react"
22

33
import { Collapsible, CreateNodes } from "@theme/JSONSchemaViewer/components"
44
import { useSchemaHierarchyContext } from "@theme/JSONSchemaViewer/contexts"
5+
import { useJSVOptionsContext } from "@theme/JSONSchemaViewer/contexts"
56

67
import {
78
RequiredLabel,
@@ -37,7 +38,12 @@ export default function SchemaItem({
3738
required,
3839
}: SchemaItemProps): JSX.Element {
3940
const { jsonPointer, level } = useSchemaHierarchyContext()
41+
const { defaultExpandDepth } = useJSVOptionsContext()
4042

43+
// Determine if Collapsible should be open or closed by default
44+
// Depth is measured from root (root level = 0). Clamp negatives to 0.
45+
const expandDepth = defaultExpandDepth ?? 0
46+
const isOpenByDefault = level <= expandDepth
4147
// Notice : "deprecated" started at 2019-09
4248
let typedSchema = schema as JSONSchema_Draft_2019_09
4349
let isDeprecated =
@@ -75,7 +81,7 @@ export default function SchemaItem({
7581
<Collapsible
7682
summary={summary}
7783
detailsProps={{
78-
open: false,
84+
open: isOpenByDefault,
7985
}}
8086
>
8187
<>

‎src/theme/JSONSchemaViewer/contexts/jsvOptions.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,16 @@ export type JSVOptions = {
3838
* @default undefined
3939
*/
4040
UnresolvedRefsComponent?: (params: { schema: JSONSchema }) => JSX.Element
41+
/**
42+
* Defines how deep the schema should be expanded by default
43+
* Examples:
44+
* - 0: only the root level is expanded
45+
* - 1: root level and its direct children are expanded
46+
* - Infinity: expand all levels
47+
* @default 0
48+
* @min 0
49+
*/
50+
defaultExpandDepth?: number
4151
}
4252

4353
export const JSVOptionsContext = createContext<JSVOptions>({
@@ -46,6 +56,7 @@ export const JSVOptionsContext = createContext<JSVOptions>({
4656
qualifierMessagesOrder: undefined,
4757
DescriptionComponent: undefined,
4858
UnresolvedRefsComponent: undefined,
59+
defaultExpandDepth: 0,
4960
})
5061

5162
export const useJSVOptionsContext = () => useContext(JSVOptionsContext)

‎testsite/docs/demo-viewer/custom/defaultExpandDepth.mdx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
description: Defines how deep the schema should be expanded by default
3+
title: "📏 Custom defaultExpandDepth"
4+
---
5+
6+
import CodeBlock from '@theme/CodeBlock';
7+
import Schema from "@site/static/schemas/examples/custom/defaultExpandDepth.json";
8+
import JSONSchemaViewer from "@theme/JSONSchemaViewer";
9+
import ReactMarkdown from 'react-markdown'
10+
import Tabs from '@theme/Tabs';
11+
import TabItem from '@theme/TabItem';
12+
13+
# Custom defaultExpandDepth
14+
15+
<Tabs>
16+
<TabItem value="Viewer" label="Viewer" default>
17+
<JSONSchemaViewer
18+
schema={ Schema }
19+
viewerOptions={{
20+
defaultExpandDepth: Infinity
21+
}}
22+
/>
23+
</TabItem>
24+
<TabItem value="viewerOptions" label='viewerOptions'>
25+
```js
26+
{
27+
defaultExpandDepth: Infinity
28+
}
29+
```
30+
</TabItem>
31+
<TabItem value="JSON Schema" label='JSON Schema'>
32+
<CodeBlock language="json-schema">{JSON.stringify(Schema, null, 2)}</CodeBlock>
33+
</TabItem>
34+
</Tabs>

‎testsite/static/schemas/examples/custom/defaultExpandDepth.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"type": "object",
3+
"properties": {
4+
"level1_prop1": {
5+
"type": "string"
6+
},
7+
"level1_prop2": {
8+
"type": "object",
9+
"properties": {
10+
"level2_prop1": {
11+
"type": "integer"
12+
},
13+
"level2_prop2": {
14+
"type": "object",
15+
"properties": {
16+
"level3_prop1": {
17+
"type": "boolean"
18+
}
19+
}
20+
}
21+
}
22+
}
23+
}
24+
}

0 commit comments

Comments
 (0)