Skip to content

Commit

Permalink
feat: enhance render props for Quote/KeyName/Colon/Arrow/BracketsOpen…
Browse files Browse the repository at this point in the history 
…/BracketsClose. #32 1869f0d
  • Loading branch information
@jaywcjlove
jaywcjlove committed Oct 16, 2024
1 parent 6605552 commit 5b6bb83
Show file tree
Hide file tree
Showing 80 changed files with 285 additions and 219 deletions.
12 changes: 6 additions & 6 deletions asset-manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"files": {
"main.css": "/static/css/main.0da2652e.css",
"main.js": "/static/js/main.c4af90d2.js",
"main.css": "/static/css/main.7ea575dc.css",
"main.js": "/static/js/main.42e1a791.js",
"refractor-prismjs-vendor.0abbb2f3.js": "/static/js/refractor-prismjs-vendor.0abbb2f3.4ed442e7.js",
"react-vendor.js": "/static/js/react-vendor.03814a95.js",
"refractor-prismjs-vendor.3665b250.js": "/static/js/refractor-prismjs-vendor.3665b250.eec550b5.js",
"refractor-prismjs-vendor.a81a7d65.js": "/static/js/refractor-prismjs-vendor.a81a7d65.e53936ae.js",
"index.html": "/index.html",
"main.0da2652e.css.map": "/static/css/main.0da2652e.css.map",
"main.c4af90d2.js.map": "/static/js/main.c4af90d2.js.map",
"main.7ea575dc.css.map": "/static/css/main.7ea575dc.css.map",
"main.42e1a791.js.map": "/static/js/main.42e1a791.js.map",
"refractor-prismjs-vendor.0abbb2f3.4ed442e7.js.map": "/static/js/refractor-prismjs-vendor.0abbb2f3.4ed442e7.js.map",
"react-vendor.03814a95.js.map": "/static/js/react-vendor.03814a95.js.map",
"refractor-prismjs-vendor.3665b250.eec550b5.js.map": "/static/js/refractor-prismjs-vendor.3665b250.eec550b5.js.map",
Expand All @@ -19,7 +19,7 @@
"static/js/refractor-prismjs-vendor.a81a7d65.e53936ae.js",
"static/js/refractor-prismjs-vendor.0abbb2f3.4ed442e7.js",
"static/js/react-vendor.03814a95.js",
"static/css/main.0da2652e.css",
"static/js/main.c4af90d2.js"
"static/css/main.7ea575dc.css",
"static/js/main.42e1a791.js"
]
}
18 changes: 9 additions & 9 deletions badges.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><meta name="keywords" content="react,react-component,array-viewer,base-16,component,interactive,interactive-json,json,json-component,json-display,json-tree,json-view,json-viewer,json-inspector,json-tree,react,react-component,react-json,theme,tree,tree-view,treeview,jaywcjlove"><meta name="description" content="A React component for displaying and editing javascript arrays and JSON objects."><link rel="shortcut icon" href="/favicon.ico"><title>react-json-view</title><script defer="defer" src="./static/js/refractor-prismjs-vendor.3665b250.eec550b5.js"></script><script defer="defer" src="./static/js/refractor-prismjs-vendor.a81a7d65.e53936ae.js"></script><script defer="defer" src="./static/js/refractor-prismjs-vendor.0abbb2f3.4ed442e7.js"></script><script defer="defer" src="./static/js/react-vendor.03814a95.js"></script><script defer="defer" src="./static/js/main.c4af90d2.js"></script><link href="./static/css/main.0da2652e.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><meta name="keywords" content="react,react-component,array-viewer,base-16,component,interactive,interactive-json,json,json-component,json-display,json-tree,json-view,json-viewer,json-inspector,json-tree,react,react-component,react-json,theme,tree,tree-view,treeview,jaywcjlove"><meta name="description" content="A React component for displaying and editing javascript arrays and JSON objects."><link rel="shortcut icon" href="/favicon.ico"><title>react-json-view</title><script defer="defer" src="./static/js/refractor-prismjs-vendor.3665b250.eec550b5.js"></script><script defer="defer" src="./static/js/refractor-prismjs-vendor.a81a7d65.e53936ae.js"></script><script defer="defer" src="./static/js/refractor-prismjs-vendor.0abbb2f3.4ed442e7.js"></script><script defer="defer" src="./static/js/react-vendor.03814a95.js"></script><script defer="defer" src="./static/js/main.42e1a791.js"></script><link href="./static/css/main.7ea575dc.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
32 changes: 16 additions & 16 deletions lcov-report/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ <h1>All files</h1>
<div class='clearfix'>

<div class='fl pad1y space-right2'>
<span class="strong">92.59% </span>
<span class="strong">92.68% </span>
<span class="quiet">Statements</span>
<span class='fraction'>763/824</span>
<span class='fraction'>773/834</span>
</div>


<div class='fl pad1y space-right2'>
<span class="strong">76.46% </span>
<span class="strong">76.07% </span>
<span class="quiet">Branches</span>
<span class='fraction'>445/582</span>
<span class='fraction'>458/602</span>
</div>


Expand All @@ -44,9 +44,9 @@ <h1>All files</h1>


<div class='fl pad1y space-right2'>
<span class="strong">92.61% </span>
<span class="strong">92.7% </span>
<span class="quiet">Lines</span>
<span class='fraction'>727/785</span>
<span class='fraction'>737/795</span>
</div>


Expand Down Expand Up @@ -110,17 +110,17 @@ <h1>All files</h1>

<tr>
<td class="file high" data-value="src/comps"><a href="src/comps/index.html">src/comps</a></td>
<td data-value="90.3" class="pic high">
<td data-value="90.41" class="pic high">
<div class="chart"><div class="cover-fill" style="width: 90%"></div><div class="cover-empty" style="width: 10%"></div></div>
</td>
<td data-value="90.3" class="pct high">90.3%</td>
<td data-value="165" class="abs high">149/165</td>
<td data-value="90.41" class="pct high">90.41%</td>
<td data-value="167" class="abs high">151/167</td>
<td data-value="86.48" class="pct high">86.48%</td>
<td data-value="148" class="abs high">128/148</td>
<td data-value="82.6" class="pct high">82.6%</td>
<td data-value="23" class="abs high">19/23</td>
<td data-value="90.06" class="pct high">90.06%</td>
<td data-value="161" class="abs high">145/161</td>
<td data-value="90.18" class="pct high">90.18%</td>
<td data-value="163" class="abs high">147/163</td>
</tr>

<tr>
Expand Down Expand Up @@ -174,13 +174,13 @@ <h1>All files</h1>
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="120" class="abs high">120/120</td>
<td data-value="70.37" class="pct medium">70.37%</td>
<td data-value="81" class="abs medium">57/81</td>
<td data-value="128" class="abs high">128/128</td>
<td data-value="69.3" class="pct medium">69.3%</td>
<td data-value="101" class="abs medium">70/101</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="14" class="abs high">14/14</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="110" class="abs high">110/110</td>
<td data-value="118" class="abs high">118/118</td>
</tr>

<tr>
Expand Down Expand Up @@ -236,7 +236,7 @@ <h1>All files</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2024-09-03T04:00:50.428Z
at 2024-10-16T19:17:11.785Z
</div>
<script src="prettify.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion lcov-report/src/Container.tsx.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> Contain
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2024-09-03T04:00:50.428Z
at 2024-10-16T19:17:11.785Z
</div>
<script src="../prettify.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion lcov-report/src/arrow/TriangleArrow.tsx.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/arrow</a
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2024-09-03T04:00:50.428Z
at 2024-10-16T19:17:11.785Z
</div>
<script src="../../prettify.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion lcov-report/src/arrow/TriangleSolidArrow.tsx.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/arrow</a
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2024-09-03T04:00:50.428Z
at 2024-10-16T19:17:11.785Z
</div>
<script src="../../prettify.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion lcov-report/src/arrow/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ <h1><a href="../../index.html">All files</a> src/arrow</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2024-09-03T04:00:50.428Z
at 2024-10-16T19:17:11.785Z
</div>
<script src="../../prettify.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion lcov-report/src/comps/Copied.tsx.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2024-09-03T04:00:50.428Z
at 2024-10-16T19:17:11.785Z
</div>
<script src="../../prettify.js"></script>
<script>
Expand Down
23 changes: 10 additions & 13 deletions lcov-report/src/comps/KeyValues.tsx.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Statements</span>
<span class='fraction'>45/45</span>
<span class='fraction'>46/46</span>
</div>


Expand All @@ -46,7 +46,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Lines</span>
<span class='fraction'>45/45</span>
<span class='fraction'>46/46</span>
</div>


Expand Down Expand Up @@ -184,8 +184,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<a name='L119'></a><a href='#L119'>119</a>
<a name='L120'></a><a href='#L120'>120</a>
<a name='L121'></a><a href='#L121'>121</a>
<a name='L122'></a><a href='#L122'>122</a>
<a name='L123'></a><a href='#L123'>123</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<a name='L122'></a><a href='#L122'>122</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -254,8 +253,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<span class="cline-any cline-yes">1152x</span>
<span class="cline-any cline-yes">1152x</span>
<span class="cline-any cline-yes">1152x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1152x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -375,16 +373,15 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
const isNumber = typeof keyName === 'number';
const highlightContainer = useRef&lt;HTMLSpanElement&gt;(null);
useHighlight({ value, highlightUpdates, highlightContainer });
const compProps = { keyName, value, keys, parentValue };
return (
&lt;Fragment&gt;
&lt;span ref={highlightContainer}&gt;
&lt;Quote isNumber={isNumber} data-placement="left" /&gt;
&lt;KeyNameComp keyName={keyName!} value={value} keys={keys} parentValue={parentValue}&gt;
{keyName}
&lt;/KeyNameComp&gt;
&lt;Quote isNumber={isNumber} data-placement="right" /&gt;
&lt;Quote isNumber={isNumber} data-placement="left" {...compProps} /&gt;
&lt;KeyNameComp {...compProps}&gt;{keyName}&lt;/KeyNameComp&gt;
&lt;Quote isNumber={isNumber} data-placement="right" {...compProps} /&gt;
&lt;/span&gt;
&lt;Colon /&gt;
&lt;Colon {...compProps} /&gt;
&lt;/Fragment&gt;
);
};
Expand Down Expand Up @@ -436,7 +433,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2024-09-03T04:00:50.428Z
at 2024-10-16T19:17:11.785Z
</div>
<script src="../../prettify.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion lcov-report/src/comps/NestedClose.tsx.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2024-09-03T04:00:50.428Z
at 2024-10-16T19:17:11.785Z
</div>
<script src="../../prettify.js"></script>
<script>
Expand Down
17 changes: 10 additions & 7 deletions lcov-report/src/comps/NestedOpen.tsx.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Statements</span>
<span class='fraction'>22/22</span>
<span class='fraction'>23/23</span>
</div>


Expand All @@ -46,7 +46,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Lines</span>
<span class='fraction'>22/22</span>
<span class='fraction'>23/23</span>
</div>


Expand Down Expand Up @@ -121,7 +121,8 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<a name='L56'></a><a href='#L56'>56</a>
<a name='L57'></a><a href='#L57'>57</a>
<a name='L58'></a><a href='#L58'>58</a>
<a name='L59'></a><a href='#L59'>59</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<a name='L59'></a><a href='#L59'>59</a>
<a name='L60'></a><a href='#L60'>60</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -164,6 +165,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<span class="cline-any cline-yes">119x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">119x</span>
<span class="cline-any cline-yes">119x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -221,15 +223,16 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<span class="missing-if-branch" title="else path not taken" >E</span>if (showArrow) {
reset.onClick = click;
}
const compProps = { keyName, value, keys, parentValue };
return (
&lt;span {...reset}&gt;
{showArrow &amp;&amp; &lt;Arrow style={arrowStyle} expandKey={expandKey} /&gt;}
{showArrow &amp;&amp; &lt;Arrow style={arrowStyle} expandKey={expandKey} {...compProps} /&gt;}
{(keyName || typeof keyName === 'number') &amp;&amp; &lt;KayName keyName={keyName} /&gt;}
&lt;SetComp value={initialValue} keyName={keyName!} /&gt;
&lt;MapComp value={initialValue} keyName={keyName!} /&gt;
&lt;BracketsOpen isBrackets={isArray || isMySet} /&gt;
&lt;BracketsOpen isBrackets={isArray || isMySet} {...compProps} /&gt;
&lt;EllipsisComp keyName={keyName!} value={value} isExpanded={isExpanded} /&gt;
&lt;BracketsClose isVisiable={isExpanded || !showArrow} isBrackets={isArray || isMySet} /&gt;
&lt;BracketsClose isVisiable={isExpanded || !showArrow} isBrackets={isArray || isMySet} {...compProps} /&gt;
&lt;CountInfoComp value={value} keyName={keyName!} /&gt;
&lt;CountInfoExtraComps value={value} keyName={keyName!} /&gt;
&lt;Copied keyName={keyName!} value={value} expandKey={expandKey} parentValue={parentValue} keys={keys} /&gt;
Expand All @@ -244,7 +247,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2024-09-03T04:00:50.428Z
at 2024-10-16T19:17:11.785Z
</div>
<script src="../../prettify.js"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion lcov-report/src/comps/Value.tsx.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/comps</a
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2024-09-03T04:00:50.428Z
at 2024-10-16T19:17:11.785Z
</div>
<script src="../../prettify.js"></script>
<script>
Expand Down
Loading

0 comments on commit 5b6bb83

Please sign in to comment.