rename style

This commit is contained in:
lucataglia 2023-05-22 14:53:03 +02:00
parent 6a125af908
commit 61e526d3f5
5 changed files with 3540 additions and 71 deletions

View File

@ -23,7 +23,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-base16-styling": "^0.9.1", "react-base16-styling": "^0.9.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-json-tree": "^0.18.0" "react-json-tree": "link:.."
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.21.4", "@babel/core": "^7.21.4",

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { Map } from 'immutable'; import { Map } from 'immutable';
import { JSONTree, StylingValue } from 'react-json-tree'; import { JSONTree, StylingValue } from 'react-json-tree';
import veryDeepJson from './very-deep-json';
const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({ const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({
style: { style: {
@ -127,77 +128,13 @@ const theme = {
const App = () => ( const App = () => (
<div> <div>
<JSONTree data={data} theme={theme} invertTheme /> <p>Very deep JSON</p>
<br />
<h3>Dark Theme</h3>
<JSONTree data={data} theme={theme} invertTheme={false} />
<br />
<h3>Hidden Root</h3>
<JSONTree data={data} theme={theme} hideRoot />
<br />
<h3>Base16 Greenscreen Theme</h3>
<JSONTree data={data} theme="greenscreen" invertTheme={false} />
<h4>Inverted Theme</h4>
<JSONTree data={data} theme="greenscreen" invertTheme />
<br />
<h3>Style Customization</h3>
<ul>
<li>
Label changes between uppercase/lowercase based on the expanded state.
</li>
<li>Array keys are styled based on their parity.</li>
<li>
The labels of objects, arrays, and iterables are customized as &quot;//
type&quot;.
</li>
<li>See code for details.</li>
</ul>
<div> <div>
<JSONTree <JSONTree
data={data} data={veryDeepJson}
theme={{
extend: theme,
nestedNodeLabel: getLabelStyle,
value: getBoolStyle,
valueLabel: getValueLabelStyle,
}}
getItemString={getItemString}
/>
</div>
<h3>More Fine Grained Rendering</h3>
<p>
Pass <code>labelRenderer</code> or <code>valueRenderer</code>.
</p>
<div>
<JSONTree
data={data}
theme={theme} theme={theme}
labelRenderer={([raw]) => <span>(({raw})):</span>} expandCollapseAll={{ defaultValue: 'expand' }}
valueRenderer={(raw) => ( shouldExpandNodeInitially={(_, __, level) => level < 3}
<em>
<span role="img" aria-label="mellow">
😐
</span>{' '}
{raw as string}{' '}
<span role="img" aria-label="mellow">
😐
</span>
</em>
)}
/>
</div>
<p>
Sort object keys with <code>sortObjectKeys</code> prop.
</p>
<div>
<JSONTree data={data} theme={theme} sortObjectKeys />
</div>
<p>Collapsed root node</p>
<div>
<JSONTree
data={data}
theme={theme}
shouldExpandNodeInitially={() => false}
/> />
</div> </div>
</div> </div>

File diff suppressed because it is too large Load Diff

View File

@ -59,7 +59,7 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
backgroundColor: colors.BACKGROUND_COLOR, backgroundColor: colors.BACKGROUND_COLOR,
}, },
expandable: { expandCollapseAll: {
color: colors.TEXT_COLOR, color: colors.TEXT_COLOR,
backgroundColor: colors.BACKGROUND_COLOR, backgroundColor: colors.BACKGROUND_COLOR,
position: 'absolute', position: 'absolute',

View File

@ -34,7 +34,7 @@ function ExpandCollapseButtons({ expandCollapseAll, styling }: Props) {
const expandableDefaultValue = expandCollapseAll?.defaultValue || 'expand'; const expandableDefaultValue = expandCollapseAll?.defaultValue || 'expand';
return ( return (
<div {...styling('expandable')}> <div {...styling('expandCollapseAll')}>
{enableDefaultButton && ( {enableDefaultButton && (
<DefaultButton defaultIcon={expandCollapseAll?.defaultIcon} /> <DefaultButton defaultIcon={expandCollapseAll?.defaultIcon} />
)} )}