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

rename style

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-json-tree/examples/package.json
View File

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

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

@ -1,6 +1,7 @@
import React from 'react';
import { Map } from 'immutable';
import { JSONTree, StylingValue } from 'react-json-tree';
import veryDeepJson from './very-deep-json';
const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({
style: {
@ -127,77 +128,13 @@ const theme = {
const App = () => (
<div>
<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>
<p>Very deep JSON</p>
<div>
<JSONTree
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}
data={veryDeepJson}
theme={theme}
labelRenderer={([raw]) => <span>(({raw})):</span>}
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}
expandCollapseAll={{ defaultValue: 'expand' }}
shouldExpandNodeInitially={(_, __, level) => level < 3}
/>
</div>
</div>

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

File diff suppressed because it is too large Load Diff

2
packages/react-json-tree/src/createStylingFromTheme.ts
View File

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

2
packages/react-json-tree/src/expandCollapseButtons.tsx
View File

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