mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-22 22:19:48 +03:00
rename style
This commit is contained in:
parent
6a125af908
commit
61e526d3f5
|
@ -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",
|
||||||
|
|
|
@ -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 "//
|
|
||||||
type".
|
|
||||||
</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>
|
||||||
|
|
3532
packages/react-json-tree/examples/src/very-deep-json.ts
Normal file
3532
packages/react-json-tree/examples/src/very-deep-json.ts
Normal file
File diff suppressed because it is too large
Load Diff
|
@ -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',
|
||||||
|
|
|
@ -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} />
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user