Skip to content

Commit a06cb3e

Browse files
chacha912chacha912
committed
custom json-view
1 parent 22317a1 commit a06cb3e

File tree

13 files changed

+114
-27
lines changed

13 files changed

+114
-27
lines changed

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
npm-debug.log
33
/coverage
44
/debug
5-
/dist
65
/node_modules
76
.nyc_output
87
.envrc

‎dev-server/src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@ ReactDom.render(
6464
return false
6565
}}
6666
defaultValue=''
67+
iconStyle='arrow'
68+
displayBraceColon={false}
6769
/>
6870

6971
<br />

‎dist/main.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.d.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@ export interface ReactJsonViewProps {
2828
*/
2929
style?: React.CSSProperties
3030
/**
31-
* Style of expand/collapse icons. Accepted values are "circle", triangle" or "square".
31+
* Style of expand/collapse icons. Accepted values are "circle", triangle" or "square", or "arrow".
3232
*
3333
* Default: {}
3434
*/
35-
iconStyle?: 'circle' | 'triangle' | 'square'
35+
iconStyle?: 'circle' | 'triangle' | 'square' | 'arrow'
3636
/**
3737
* Set the indent-width for nested objects.
3838
*
@@ -87,6 +87,12 @@ export interface ReactJsonViewProps {
8787
* Default: true
8888
*/
8989
displayDataTypes?: boolean
90+
/**
91+
* set to false to remove brace and colon for object.
92+
*
93+
* Default: true
94+
*/
95+
displayBraceColon?: boolean;
9096
/**
9197
* When set to true, the index of the elements prefix values
9298
*

‎src/js/components/DataTypes/Function.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,9 @@ export default class extends React.PureComponent {
6666
.slice(9, -1)
6767
.replace(/\{[\s\S]+/, '')}
6868
<span class='function-collapsed' style={{ fontWeight: 'bold' }}>
69-
<span>{'{'}</span>
69+
{this.props.displayBraceColon && <span>{'{'}</span>}
7070
<span {...Theme(props.theme, 'ellipsis')}>...</span>
71-
<span>{'}'}</span>
71+
{this.props.displayBraceColon && <span>{'}'}</span>}
7272
</span>
7373
</span>
7474
)

‎src/js/components/DataTypes/Object.js

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -136,14 +136,16 @@ class RjvObject extends React.PureComponent {
136136
}
137137

138138
getBraceStart (object_type, expanded) {
139-
const { src, theme, iconStyle, parent_type } = this.props
139+
const { src, theme, iconStyle, parent_type, displayBraceColon } = this.props
140140

141141
if (parent_type === 'array_group') {
142142
return (
143143
<span>
144-
<span {...Theme(theme, 'brace')}>
145-
{object_type === 'array' ? '[' : '{'}
146-
</span>
144+
{displayBraceColon && (
145+
<span {...Theme(theme, 'brace')}>
146+
{object_type === 'array' ? '[' : '{'}
147+
</span>
148+
)}
147149
{expanded ? this.getObjectMetaData(src) : null}
148150
</span>
149151
)
@@ -163,9 +165,11 @@ class RjvObject extends React.PureComponent {
163165
<IconComponent {...{ theme, iconStyle }} />
164166
</div>
165167
<ObjectName {...this.props} />
166-
<span {...Theme(theme, 'brace')}>
167-
{object_type === 'array' ? '[' : '{'}
168-
</span>
168+
{displayBraceColon && (
169+
<span {...Theme(theme, 'brace')}>
170+
{object_type === 'array' ? '[' : '{'}
171+
</span>
172+
)}
169173
</span>
170174
{expanded ? this.getObjectMetaData(src) : null}
171175
</span>
@@ -185,6 +189,7 @@ class RjvObject extends React.PureComponent {
185189
theme,
186190
jsvRoot,
187191
iconStyle,
192+
displayBraceColon,
188193
...rest
189194
} = this.props
190195

@@ -214,14 +219,16 @@ class RjvObject extends React.PureComponent {
214219
})
215220
: this.getEllipsis()}
216221
<span class='brace-row'>
217-
<span
218-
style={{
219-
...Theme(theme, 'brace').style,
220-
paddingLeft: expanded ? '3px' : '0px'
221-
}}
222-
>
223-
{object_type === 'array' ? ']' : '}'}
224-
</span>
222+
{displayBraceColon && (
223+
<span
224+
style={{
225+
...Theme(theme, 'brace').style,
226+
paddingLeft: expanded ? '3px' : '0px'
227+
}}
228+
>
229+
{object_type === 'array' ? ']' : '}'}
230+
</span>
231+
)}
225232
{expanded ? null : this.getObjectMetaData(src)}
226233
</span>
227234
</div>

‎src/js/components/ObjectName.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ export default function getObjectName (props) {
99
theme,
1010
jsvRoot,
1111
name,
12-
displayArrayKey
12+
displayArrayKey,
13+
displayBraceColon
1314
} = props
1415

1516
const display_name = props.name ? props.name : ''
@@ -21,7 +22,7 @@ export default function getObjectName (props) {
2122
? (
2223
<span {...Theme(theme, 'array-key')} key={namespace}>
2324
<span class='array-key'>{display_name}</span>
24-
<span {...Theme(theme, 'colon')}>:</span>
25+
{displayBraceColon && <span {...Theme(theme, 'colon')}>:</span>}
2526
</span>
2627
)
2728
: (
@@ -35,7 +36,7 @@ export default function getObjectName (props) {
3536
<span>{display_name}</span>
3637
{quotesOnKeys && <span style={{ verticalAlign: 'top' }}>"</span>}
3738
</span>
38-
<span {...Theme(theme, 'colon')}>:</span>
39+
{displayBraceColon && <span {...Theme(theme, 'colon')}>:</span>}
3940
</span>
4041
)
4142
}

‎src/js/components/ToggleIcons.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import {
77
SquareMinus,
88
SquarePlus,
99
ArrowRight,
10-
ArrowDown
10+
ArrowDown,
11+
ArrowDownSmall,
12+
ArrowRightSmall
1113
} from './icons'
1214

1315
export function ExpandedIcon (props) {
@@ -21,6 +23,10 @@ export function ExpandedIcon (props) {
2123
return (
2224
<SquareMinus {...Theme(theme, 'expanded-icon')} class='expanded-icon' />
2325
)
26+
case 'arrow':
27+
return (
28+
<ArrowDownSmall {...Theme(theme, 'expanded-icon')} class='expanded-icon' />
29+
)
2430
default:
2531
return (
2632
<CircleMinus {...Theme(theme, 'expanded-icon')} class='expanded-icon' />
@@ -45,6 +51,13 @@ export function CollapsedIcon (props) {
4551
class='collapsed-icon'
4652
/>
4753
)
54+
case 'arrow':
55+
return (
56+
<ArrowRightSmall
57+
{...Theme(theme, 'collapsed-icon')}
58+
class='collapsed-icon'
59+
/>
60+
)
4861
default:
4962
return (
5063
<CirclePlus

‎src/js/components/icons.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,34 @@ export class ArrowRight extends React.PureComponent {
111111
}
112112
}
113113

114+
export class ArrowRightSmall extends React.PureComponent {
115+
render () {
116+
const { props } = this
117+
const { style, ...rest } = props
118+
119+
return (
120+
<span {...rest}>
121+
<svg
122+
style={{
123+
...getIconStyle(style).style,
124+
paddingLeft: '2px',
125+
verticalAlign: 'top'
126+
}}
127+
viewBox='0 0 12 12'
128+
xmlns='http://www.w3.org/2000/svg'
129+
>
130+
<path
131+
fillRule='evenodd'
132+
clipRule='evenodd'
133+
d='M4.14645 2.64645C4.34171 2.45118 4.65829 2.45118 4.85355 2.64645L7.85355 5.64645C8.04882 5.84171 8.04882 6.15829 7.85355 6.35355L4.85355 9.35355C4.65829 9.54882 4.34171 9.54882 4.14645 9.35355C3.95118 9.15829 3.95118 8.84171 4.14645 8.64645L6.79289 6L4.14645 3.35355C3.95118 3.15829 3.95118 2.84171 4.14645 2.64645Z'
134+
fill='currentColor'
135+
/>
136+
</svg>
137+
</span>
138+
)
139+
}
140+
}
141+
114142
export class ArrowDown extends React.PureComponent {
115143
render () {
116144
const { props } = this
@@ -134,6 +162,34 @@ export class ArrowDown extends React.PureComponent {
134162
}
135163
}
136164

165+
export class ArrowDownSmall extends React.PureComponent {
166+
render () {
167+
const { props } = this
168+
const { style, ...rest } = props
169+
170+
return (
171+
<span {...rest}>
172+
<svg
173+
style={{
174+
...getIconStyle(style).style,
175+
paddingLeft: '2px',
176+
verticalAlign: 'top'
177+
}}
178+
viewBox='0 0 12 12'
179+
xmlns='http://www.w3.org/2000/svg'
180+
>
181+
<path
182+
fillRule='evenodd'
183+
clipRule='evenodd'
184+
d='M2.64645 4.14645C2.84171 3.95118 3.15829 3.95118 3.35355 4.14645L6 6.79289L8.64645 4.14645C8.84171 3.95118 9.15829 3.95118 9.35355 4.14645C9.54882 4.34171 9.54882 4.65829 9.35355 4.85355L6.35355 7.85355C6.15829 8.04882 5.84171 8.04882 5.64645 7.85355L2.64645 4.85355C2.45118 4.65829 2.45118 4.34171 2.64645 4.14645Z'
185+
fill='currentColor'
186+
/>
187+
</svg>
188+
</span>
189+
)
190+
}
191+
}
192+
137193
export class Clippy extends React.PureComponent {
138194
render () {
139195
const { props } = this

‎src/js/helpers/dispatcher.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
class Dispatcher {
22
handler = () => {}
33

4-
register(handler) {
4+
register (handler) {
55
this.handler = handler
66
}
77

8-
dispatch(data) {
8+
dispatch (data) {
99
this.handler?.(data)
1010
}
1111
}

0 commit comments

Comments
 (0)