Skip to content
This repository was archived by the owner on May 14, 2020. It is now read-only.

Commit 0d7ddf6

Browse files
chibicodechibicode
committed
Merge pull request #12 from chibicode/pr/9
customize styling
2 parents e20b631 + 57d39d9 commit 0d7ddf6

File tree

13 files changed

+175
-48
lines changed

13 files changed

+175
-48
lines changed

‎README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,56 @@ const theme = {
6767

6868
![](http://cl.ly/image/330o2L1J3V0h/screenshot%202015-08-26%20at%2010.48.24%20AM.png)
6969

70+
### Customization
71+
72+
#### Customize CSS
73+
74+
You can pass the following properties to customize styling (all optional):
75+
76+
```js
77+
<JSONTree getArrowStyle={(type, expanded) => ({})}
78+
getItemStringStyle={(type, expanded) => ({})}
79+
getListStyle={(type, expanded) => ({})}
80+
getLabelStyle={(type, expanded) => ({})}
81+
getValueStyle={(type, expanded) => ({})} />
82+
```
83+
84+
Here `type` is a string representing type of data, `expanded` is a current state for expandable items. Each function returns a style object, which extends corresponding default style.
85+
86+
For example, if you pass the following function:
87+
88+
```js
89+
const getStyle = (type, expanded) =>
90+
(expanded ? { textTransform: 'uppercase' } :
91+
{ textTransform: 'lowercase' });
92+
```
93+
94+
Then expanded nodes will all be in uppercase:
95+
96+
![](http://cl.ly/image/460Y0P3C453Q/screenshot%202015-10-07%20at%203.38.33%20PM.png)
97+
98+
#### Customize Labels for Arrays, Objects, and Iterables
99+
100+
You can pass `getItemString` to customize the way arrays, objects, and iterable nodes are displayed (optional).
101+
102+
By default, it'll be:
103+
104+
```js
105+
<JSONTree getArrowStyle={(type, data, itemType, itemString)
106+
=> <span>{itemType} {itemString}</span>}
107+
```
108+
109+
But if you pass the following:
110+
111+
```js
112+
const getItemString = (type, data, itemType, itemString)
113+
=> (<span> // {type}</span>);
114+
```
115+
116+
Then the preview of child elements now look like this:
117+
118+
![](http://cl.ly/image/1J1a0b0T0K3c/screenshot%202015-10-07%20at%203.44.31%20PM.png)
119+
70120
### Credits
71121
72122
- All credits to [Dave Vedder](http://www.eskimospy.com/) ([veddermatic@gmail.com](mailto:veddermatic@gmail.com)), who wrote the original code as [JSONViewer](https://bitbucket.org/davevedder/react-json-viewer/).

‎examples/src/App.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,33 @@ export default class App extends Component {
3636
base0F: '#cc6633'
3737
};
3838

39+
const getStyle = (type, expanded) => {};
40+
const getItemString = (type, data, itemType, itemString) => (<span> // {type}</span>);
41+
3942
return (
4043
<div>
4144
<JSONTree data={ data } />
4245
<br />
46+
<h3>Dark Theme</h3>
4347
<div style={{ backgroundColor: theme.base00 }}>
4448
<JSONTree data={ data } theme={ theme } />
4549
</div>
50+
<br />
51+
<h3>Style Customization</h3>
52+
<ul>
53+
<li>Text changes between uppercase/lowercase based on the expanded state.</li>
54+
<li>The labels of objects, arrays, and iterables are customized as "// type".</li>
55+
<li>See code for details.</li>
56+
</ul>
57+
<div>
58+
<JSONTree data={ data } theme={ theme }
59+
getArrowStyle={ getStyle }
60+
getItemStringStyle={ getStyle }
61+
getListStyle={ getStyle }
62+
getLabelStyle={ getStyle }
63+
getValueStyle={ getStyle }
64+
getItemString={ getItemString }/>
65+
</div>
4666
</div>
4767
);
4868
}

‎src/JSONArrayNode.js‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default class JSONArrayNode extends React.Component {
6161
if (typeof this.props.previousData !== 'undefined' && this.props.previousData !== null) {
6262
prevData = this.props.previousData[idx];
6363
}
64-
const node = grabNode(idx, element, prevData, this.props.theme);
64+
const node = grabNode(idx, element, prevData, this.props.theme, this.props.styles, this.props.getItemString);
6565
if (node !== false) {
6666
childNodes.push(node);
6767
}
@@ -74,11 +74,11 @@ export default class JSONArrayNode extends React.Component {
7474

7575
// Returns the "n Items" string for this node, generating and
7676
// caching it if it hasn't been created yet.
77-
getItemString() {
77+
getItemString(itemType) {
7878
if (!this.itemString) {
7979
this.itemString = this.props.data.length + ' item' + (this.props.data.length !== 1 ? 's' : '');
8080
}
81-
return this.itemString;
81+
return this.props.getItemString('Array', this.props.data, itemType, this.itemString);
8282
}
8383

8484
render() {
@@ -105,18 +105,24 @@ export default class JSONArrayNode extends React.Component {
105105
}
106106
return (
107107
<li style={containerStyle}>
108-
<JSONArrow theme={this.props.theme} open={this.state.expanded} onClick={::this.handleClick}/>
108+
<JSONArrow theme={this.props.theme} open={this.state.expanded} onClick={::this.handleClick} style={this.props.styles.getArrowStyle(this.state.expanded)}/>
109109
<label style={{
110110
...styles.label,
111-
color: this.props.theme.base0D
111+
color: this.props.theme.base0D,
112+
...this.props.styles.getLabelStyle('Array', this.state.expanded)
112113
}} onClick={::this.handleClick}>
113114
{this.props.keyName}:
114115
</label>
115-
<span style={spanStyle} onClick={::this.handleClick}>
116-
<span style={styles.spanType}>[]</span>
117-
{this.getItemString()}
116+
<span style={{
117+
...spanStyle,
118+
...this.props.styles.getItemStringStyle('Array', this.state.expanded)
119+
}} onClick={::this.handleClick}>
120+
{this.getItemString(<span style={styles.spanType}>[]</span>)}
118121
</span>
119-
<ol style={childListStyle}>
122+
<ol style={{
123+
...childListStyle,
124+
...this.props.styles.getListStyle('Array', this.state.expanded)
125+
}}>
120126
{childNodes}
121127
</ol>
122128
</li>

‎src/JSONArrow.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ export default class JSONArrow extends React.Component {
3737
...styles.open
3838
};
3939
}
40+
style = {
41+
...style,
42+
...this.props.style
43+
};
4044
return <div style={style} onClick={this.props.onClick}/>;
4145
}
4246
}

‎src/JSONBooleanNode.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,15 @@ export default class JSONBooleanNode extends React.Component {
3131
<li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
3232
<label style={{
3333
...styles.label,
34-
color: this.props.theme.base0D
34+
color: this.props.theme.base0D,
35+
...this.props.styles.getLabelStyle('Boolean', true)
3536
}}>
3637
{this.props.keyName}:
3738
</label>
38-
<span style={{ color: this.props.theme.base09 }}>{truthString}</span>
39+
<span style={{
40+
color: this.props.theme.base09,
41+
...this.props.styles.getValueStyle('Boolean', true)
42+
}}>{truthString}</span>
3943
</li>
4044
);
4145
}

‎src/JSONDateNode.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,15 @@ export default class JSONDateNode extends React.Component {
3030
<li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
3131
<label style={{
3232
...styles.label,
33-
color: this.props.theme.base0D
33+
color: this.props.theme.base0D,
34+
...this.props.styles.getLabelStyle('Date', true)
3435
}}>
3536
{this.props.keyName}:
3637
</label>
37-
<span style={{ color: this.props.theme.base0B }}>{this.props.value.toISOString()}</span>
38+
<span style={{
39+
color: this.props.theme.base0B,
40+
...this.props.styles.getValueStyle('Date', true)
41+
}}>{this.props.value.toISOString()}</span>
3842
</li>
3943
);
4044
}

‎src/JSONIterableNode.js‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default class JSONIterableNode extends React.Component {
7070
if (typeof this.props.previousData !== 'undefined' && this.props.previousData !== null) {
7171
prevData = this.props.previousData[key];
7272
}
73-
const node = grabNode(key, value, prevData, this.props.theme);
73+
const node = grabNode(key, value, prevData, this.props.theme, this.props.styles, this.props.getItemString);
7474
if (node !== false) {
7575
childNodes.push(node);
7676
}
@@ -83,7 +83,7 @@ export default class JSONIterableNode extends React.Component {
8383

8484
// Returns the "n entries" string for this node, generating and
8585
// caching it if it hasn't been created yet.
86-
getItemString() {
86+
getItemString(itemType) {
8787
if (!this.itemString) {
8888
const { data } = this.props;
8989
let count = 0;
@@ -96,7 +96,7 @@ export default class JSONIterableNode extends React.Component {
9696
}
9797
this.itemString = count + ' entr' + (count !== 1 ? 'ies' : 'y');
9898
}
99-
return this.itemString;
99+
return this.props.getItemString('Iterable', this.props.data, itemType, this.itemString);
100100
}
101101

102102
render() {
@@ -123,18 +123,24 @@ export default class JSONIterableNode extends React.Component {
123123
}
124124
return (
125125
<li style={containerStyle}>
126-
<JSONArrow theme={this.props.theme} open={this.state.expanded} onClick={::this.handleClick}/>
126+
<JSONArrow theme={this.props.theme} open={this.state.expanded} onClick={::this.handleClick} style={this.props.styles.getArrowStyle(this.state.expanded)} />
127127
<label style={{
128128
...styles.label,
129-
color: this.props.theme.base0D
129+
color: this.props.theme.base0D,
130+
...this.props.styles.getLabelStyle('Iterable', this.state.expanded)
130131
}} onClick={::this.handleClick}>
131132
{this.props.keyName}:
132133
</label>
133-
<span style={spanStyle} onClick={::this.handleClick}>
134-
<span style={styles.spanType}>()</span>
135-
{this.getItemString()}
134+
<span style={{
135+
...spanStyle,
136+
...this.props.styles.getItemStringStyle('Iterable', this.state.expanded)
137+
}} onClick={::this.handleClick}>
138+
{this.getItemString(<span style={styles.spanType}>()</span>)}
136139
</span>
137-
<ol style={childListStyle}>
140+
<ol style={{
141+
...childListStyle,
142+
...this.props.styles.getListStyle('Iterable', this.state.expanded)
143+
}}>
138144
{childNodes}
139145
</ol>
140146
</li>

‎src/JSONNullNode.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,15 @@ export default class JSONNullNode extends React.Component {
3030
<li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
3131
<label style={{
3232
...styles.label,
33-
color: this.props.theme.base0D
33+
color: this.props.theme.base0D,
34+
...this.props.styles.getLabelStyle('Null', true)
3435
}}>
3536
{this.props.keyName}:
3637
</label>
37-
<span style={{ color: this.props.theme.base08 }}>null</span>
38+
<span style={{
39+
color: this.props.theme.base08,
40+
...this.props.styles.getValueStyle('Null', true)
41+
}}>null</span>
3842
</li>
3943
);
4044
}

‎src/JSONNumberNode.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,15 @@ export default class JSONNumberNode extends React.Component {
3030
<li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
3131
<label style={{
3232
...styles.label,
33-
color: this.props.theme.base0D
33+
color: this.props.theme.base0D,
34+
...this.props.styles.getLabelStyle('Number', true)
3435
}}>
3536
{this.props.keyName}:
3637
</label>
37-
<span style={{ color: this.props.theme.base09 }}>{this.props.value}</span>
38+
<span style={{
39+
color: this.props.theme.base09,
40+
...this.props.styles.getValueStyle('Number', true)
41+
}}>{this.props.value}</span>
3842
</li>
3943
);
4044
}

‎src/JSONObjectNode.js‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default class JSONObjectNode extends React.Component {
6161
if (typeof this.props.previousData !== 'undefined' && this.props.previousData !== null) {
6262
prevData = this.props.previousData[k];
6363
}
64-
const node = grabNode(k, obj[k], prevData, this.props.theme);
64+
const node = grabNode(k, obj[k], prevData, this.props.theme, this.props.styles, this.props.getItemString);
6565
if (node !== false) {
6666
childNodes.push(node);
6767
}
@@ -75,12 +75,12 @@ export default class JSONObjectNode extends React.Component {
7575

7676
// Returns the "n Items" string for this node, generating and
7777
// caching it if it hasn't been created yet.
78-
getItemString() {
78+
getItemString(itemType) {
7979
if (!this.itemString) {
8080
const len = Object.keys(this.props.data).length;
8181
this.itemString = len + ' key' + (len !== 1 ? 's' : '');
8282
}
83-
return this.itemString;
83+
return this.props.getItemString('Object', this.props.data, itemType, this.itemString);
8484
}
8585

8686
render() {
@@ -106,18 +106,24 @@ export default class JSONObjectNode extends React.Component {
106106
}
107107
return (
108108
<li style={containerStyle}>
109-
<JSONArrow theme={this.props.theme} open={this.state.expanded} onClick={::this.handleClick}/>
109+
<JSONArrow theme={this.props.theme} open={this.state.expanded} onClick={::this.handleClick} style={this.props.styles.getArrowStyle(this.state.expanded)} />
110110
<label style={{
111111
...styles.label,
112-
color: this.props.theme.base0D
112+
color: this.props.theme.base0D,
113+
...this.props.styles.getLabelStyle('Object', this.state.expanded)
113114
}} onClick={::this.handleClick}>
114115
{this.props.keyName}:
115116
</label>
116-
<span style={spanStyle} onClick={::this.handleClick}>
117-
<span style={styles.spanType}>&#123;&#125;</span>
118-
{this.getItemString()}
117+
<span style={{
118+
...spanStyle,
119+
...this.props.styles.getItemStringStyle('Object', this.state.expanded)
120+
}} onClick={::this.handleClick}>
121+
{this.getItemString(<span style={styles.spanType}>&#123;&#125;</span>)}
119122
</span>
120-
<ul style={childListStyle}>
123+
<ul style={{
124+
...childListStyle,
125+
...this.props.styles.getListStyle('Object', this.state.expanded)
126+
}}>
121127
{this.getChildNodes()}
122128
</ul>
123129
</li>

0 commit comments

Comments
 (0)