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

Commit fca462e

Browse files
alexkuzalexkuz
committed
customize styling
1 parent 59bbbaa commit fca462e

File tree

11 files changed

+105
-48
lines changed

11 files changed

+105
-48
lines changed

‎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, this.itemString, itemType);
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.getPreviewStyle('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
@@ -29,11 +29,15 @@ export default class JSONBooleanNode extends React.Component {
2929
<li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
3030
<label style={{
3131
...styles.label,
32-
color: this.props.theme.base0D
32+
color: this.props.theme.base0D,
33+
...this.props.styles.getLabelStyle('Boolean', true)
3334
}}>
3435
{this.props.keyName}:
3536
</label>
36-
<span style={{ color: this.props.theme.base09 }}>{truthString}</span>
37+
<span style={{
38+
color: this.props.theme.base09,
39+
...this.props.styles.getValueStyle('Boolean', true)
40+
}}>{truthString}</span>
3741
</li>
3842
);
3943
}

‎src/JSONDateNode.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,15 @@ export default class JSONDateNode extends React.Component {
2828
<li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
2929
<label style={{
3030
...styles.label,
31-
color: this.props.theme.base0D
31+
color: this.props.theme.base0D,
32+
...this.props.styles.getLabelStyle('Date', true)
3233
}}>
3334
{this.props.keyName}:
3435
</label>
35-
<span style={{ color: this.props.theme.base0B }}>{this.props.value.toISOString()}</span>
36+
<span style={{
37+
color: this.props.theme.base0B,
38+
...this.props.styles.getValueStyle('Date', true)
39+
}}>{this.props.value.toISOString()}</span>
3640
</li>
3741
);
3842
}

‎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, this.itemString, itemType);
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.getPreviewStyle('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
@@ -28,11 +28,15 @@ export default class JSONNullNode extends React.Component {
2828
<li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
2929
<label style={{
3030
...styles.label,
31-
color: this.props.theme.base0D
31+
color: this.props.theme.base0D,
32+
...this.props.styles.getLabelStyle('Null', true)
3233
}}>
3334
{this.props.keyName}:
3435
</label>
35-
<span style={{ color: this.props.theme.base08 }}>null</span>
36+
<span style={{
37+
color: this.props.theme.base08,
38+
...this.props.styles.getValueStyle('Null', true)
39+
}}>null</span>
3640
</li>
3741
);
3842
}

‎src/JSONNumberNode.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,15 @@ export default class JSONNumberNode extends React.Component {
2828
<li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
2929
<label style={{
3030
...styles.label,
31-
color: this.props.theme.base0D
31+
color: this.props.theme.base0D,
32+
...this.props.styles.getLabelStyle('Number', true)
3233
}}>
3334
{this.props.keyName}:
3435
</label>
35-
<span style={{ color: this.props.theme.base09 }}>{this.props.value}</span>
36+
<span style={{
37+
color: this.props.theme.base09,
38+
...this.props.styles.getValueStyle('Number', true)
39+
}}>{this.props.value}</span>
3640
</li>
3741
);
3842
}

‎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, this.itemString, itemType);
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.getPreviewStyle('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>

‎src/JSONStringNode.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,15 @@ export default class JSONStringNode extends React.Component {
2828
<li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
2929
<label style={{
3030
...styles.label,
31-
color: this.props.theme.base0D
31+
color: this.props.theme.base0D,
32+
...this.props.styles.getLabelStyle('String', true)
3233
}}>
3334
{this.props.keyName}:
3435
</label>
35-
<span style={{ color: this.props.theme.base0B }}>"{this.props.value}"</span>
36+
<span style={{
37+
color: this.props.theme.base0B,
38+
...this.props.styles.getValueStyle('String', true)
39+
}}>"{this.props.value}"</span>
3640
</li>
3741
);
3842
}

‎src/grab-node.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,24 @@ import JSONBooleanNode from './JSONBooleanNode';
99
import JSONNullNode from './JSONNullNode';
1010
import JSONDateNode from './JSONDateNode';
1111

12-
export default function(key, value, prevValue, theme, initialExpanded = false) {
12+
export default function(key, value, prevValue, theme, styles, getItemString, initialExpanded = false) {
1313
const nodeType = objType(value);
1414
if (nodeType === 'Object') {
15-
return <JSONObjectNode data={value} previousData={prevValue} theme={theme} initialExpanded={initialExpanded} keyName={key} key={key} />;
15+
return <JSONObjectNode data={value} previousData={prevValue} theme={theme} initialExpanded={initialExpanded} keyName={key} key={key} styles={styles} getItemString={getItemString} />;
1616
} else if (nodeType === 'Array') {
17-
return <JSONArrayNode data={value} previousData={prevValue} theme={theme} initialExpanded={initialExpanded} keyName={key} key={key} />;
17+
return <JSONArrayNode data={value} previousData={prevValue} theme={theme} initialExpanded={initialExpanded} keyName={key} key={key} styles={styles} getItemString={getItemString} />;
1818
} else if (nodeType === 'Iterable') {
19-
return <JSONIterableNode data={value} previousData={prevValue} theme={theme} initialExpanded={initialExpanded} keyName={key} key={key} />;
19+
return <JSONIterableNode data={value} previousData={prevValue} theme={theme} initialExpanded={initialExpanded} keyName={key} key={key} styles={styles} getItemString={getItemString} />;
2020
} else if (nodeType === 'String') {
21-
return <JSONStringNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
21+
return <JSONStringNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} styles={styles} />;
2222
} else if (nodeType === 'Number') {
23-
return <JSONNumberNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
23+
return <JSONNumberNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} styles={styles} />;
2424
} else if (nodeType === 'Boolean') {
25-
return <JSONBooleanNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
25+
return <JSONBooleanNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} styles={styles} />;
2626
} else if (nodeType === 'Date') {
27-
return <JSONDateNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
27+
return <JSONDateNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} styles={styles} />;
2828
} else if (nodeType === 'Null') {
29-
return <JSONNullNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
29+
return <JSONNullNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} styles={styles} />;
3030
}
3131
return false;
3232
}

0 commit comments

Comments
 (0)