reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 14:09:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

revert example

Browse Source
This commit is contained in:
lucataglia 2023-05-22 15:05:55 +02:00
parent 61e526d3f5
commit 63b691a264
2 changed files with 68 additions and 3537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
packages/react-json-tree/examples/src/App.tsx
View File

@ -1,7 +1,6 @@
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: {
@ -128,13 +127,77 @@ const theme = {
const App = () => ( const App = () => (
<div> <div>
<p>Very deep JSON</p> <JSONTree data={data} theme={theme} invertTheme />
<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={veryDeepJson} data={data}
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}
expandCollapseAll={{ defaultValue: 'expand' }} labelRenderer={([raw]) => <span>(({raw})):</span>}
shouldExpandNodeInitially={(_, __, level) => level < 3} valueRenderer={(raw) => (
<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>

3532
packages/react-json-tree/examples/src/very-deep-json.ts
View File

File diff suppressed because it is too large Load Diff