diff --git a/packages/react-json-tree/examples/package.json b/packages/react-json-tree/examples/package.json index af9b7394..883e2616 100644 --- a/packages/react-json-tree/examples/package.json +++ b/packages/react-json-tree/examples/package.json @@ -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", diff --git a/packages/react-json-tree/examples/src/App.tsx b/packages/react-json-tree/examples/src/App.tsx index a972ce58..c3fd4885 100644 --- a/packages/react-json-tree/examples/src/App.tsx +++ b/packages/react-json-tree/examples/src/App.tsx @@ -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 = () => (
- -
-

Dark Theme

- -
-

Hidden Root

- -
-

Base16 Greenscreen Theme

- -

Inverted Theme

- -
-

Style Customization

-
    -
  • - Label changes between uppercase/lowercase based on the expanded state. -
  • -
  • Array keys are styled based on their parity.
  • -
  • - The labels of objects, arrays, and iterables are customized as "// - type". -
  • -
  • See code for details.
  • -
+

Very deep JSON

-
-

More Fine Grained Rendering

-

- Pass labelRenderer or valueRenderer. -

-
- (({raw})):} - valueRenderer={(raw) => ( - - - 😐 - {' '} - {raw as string}{' '} - - 😐 - - - )} - /> -
-

- Sort object keys with sortObjectKeys prop. -

-
- -
-

Collapsed root node

-
- false} + expandCollapseAll={{ defaultValue: 'expand' }} + shouldExpandNodeInitially={(_, __, level) => level < 3} />
diff --git a/packages/react-json-tree/examples/src/very-deep-json.ts b/packages/react-json-tree/examples/src/very-deep-json.ts new file mode 100644 index 00000000..1e164ae2 --- /dev/null +++ b/packages/react-json-tree/examples/src/very-deep-json.ts @@ -0,0 +1,3532 @@ +// https://onlinetools.com/random/generate-random-json +export default { + fields: [ + { default: null, name: 'addition', type: ['null', 'string'] }, + { default: null, name: 'brother', type: ['null', 'string'] }, + { default: null, name: 'company', type: ['null', 'string'] }, + { + default: null, + name: 'friend', + type: [ + 'null', + { + fields: [ + { default: null, name: 'barn', type: ['null', 'string'] }, + { default: null, name: 'brush', type: ['null', 'string'] }, + { default: null, name: 'does', type: ['null', 'string'] }, + { default: null, name: 'glad', type: ['null', 'string'] }, + { + default: null, + name: 'keep', + type: [ + 'null', + { + fields: [ + { default: null, name: 'bell', type: ['null', 'string'] }, + { default: null, name: 'case', type: ['null', 'string'] }, + { default: null, name: 'chest', type: ['null', 'string'] }, + { default: null, name: 'done', type: ['null', 'string'] }, + { default: null, name: 'dress', type: ['null', 'string'] }, + { + default: null, + name: 'further', + type: ['null', 'string'], + }, + { default: null, name: 'jungle', type: ['null', 'string'] }, + { default: null, name: 'kill', type: ['null', 'string'] }, + { default: null, name: 'map', type: ['null', 'string'] }, + { + default: null, + name: 'putting', + type: ['null', 'string'], + }, + { + default: null, + name: 'seven', + type: [ + 'null', + { + fields: [ + { + default: null, + name: 'brick', + type: ['null', 'string'], + }, + { + default: null, + name: 'chamber', + type: ['null', 'string'], + }, + { + default: null, + name: 'church', + type: ['null', 'string'], + }, + { + default: null, + name: 'evening', + type: ['null', 'string'], + }, + { + default: null, + name: 'jump', + type: ['null', 'string'], + }, + { + default: null, + name: 'lesson', + type: ['null', 'string'], + }, + { + default: null, + name: 'library', + type: ['null', 'string'], + }, + { + default: null, + name: 'out', + type: ['null', 'string'], + }, + { + default: null, + name: 'population', + type: ['null', 'string'], + }, + { + default: null, + name: 'problem', + type: ['null', 'string'], + }, + { + default: null, + name: 'proud', + type: ['null', 'string'], + }, + { + default: null, + name: 'ride', + type: ['null', 'string'], + }, + { + default: null, + name: 'same', + type: ['null', 'string'], + }, + { + default: null, + name: 'saved', + type: ['null', 'string'], + }, + { + default: null, + name: 'strike', + type: ['null', 'string'], + }, + { + default: null, + name: 'student', + type: [ + 'null', + { + fields: [ + { + default: null, + name: 'careful', + type: ['null', 'string'], + }, + { + default: null, + name: 'hungry', + type: ['null', 'string'], + }, + { + default: null, + name: 'large', + type: ['null', 'string'], + }, + { + default: null, + name: 'line', + type: [ + 'null', + { + fields: [ + { + default: null, + name: 'breeze', + type: ['null', 'string'], + }, + { + default: null, + name: 'brother', + type: ['null', 'string'], + }, + { + default: null, + name: 'carbon', + type: ['null', 'string'], + }, + { + default: null, + name: 'cook', + type: ['null', 'string'], + }, + { + default: null, + name: 'famous', + type: ['null', 'string'], + }, + { + default: null, + name: 'flag', + type: [ + 'null', + { + fields: [ + { + default: null, + name: 'automobile', + type: ['null', 'string'], + }, + { + default: null, + name: 'figure', + type: ['null', 'string'], + }, + { + default: null, + name: 'frighten', + type: ['null', 'string'], + }, + { + default: null, + name: 'gone', + type: ['null', 'string'], + }, + { + default: null, + name: 'hollow', + type: ['null', 'string'], + }, + { + default: null, + name: 'mostly', + type: ['null', 'string'], + }, + { + default: null, + name: 'plain', + type: ['null', 'string'], + }, + { + default: null, + name: 'strength', + type: ['null', 'string'], + }, + { + default: null, + name: 'than', + type: ['null', 'string'], + }, + { + default: null, + name: 'white', + type: [ + 'null', + { + fields: [ + { + default: null, + name: 'advice', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'bend', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'calm', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'darkness', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'disappear', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'egg', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'log', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'massage', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'mountain', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'needed', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'origin', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'refer', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'sale', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'spoken', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'strike', + type: [ + 'null', + { + fields: [ + { + default: + null, + name: 'feel', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'being', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'dark', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'dear', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'dollar', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'gasoline', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'golden', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'hit', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'bottom', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'breathing', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'buy', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'by', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'command', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'contrast', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'earlier', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'facing', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'finish', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'gain', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'just', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'land', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'planned', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'ruler', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'wealth', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'without', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'wonderful', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'catch', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'city', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'experience', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'announced', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'chemical', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'children', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'extra', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'angle', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'base', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'blanket', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'clock', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'cut', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'effort', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'lunch', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'accurate', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'ago', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'blow', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'clay', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'closer', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'darkness', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'how', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'laid', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'location', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'property', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'mark', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'property', + type: 'record', + }, + ], + }, + ], + name: 'location', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'new', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'please', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'slave', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'brother', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'coast', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'fewer', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'number', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'shelter', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'silver', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'symbol', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'apart', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'crowd', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'stick', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'bridge', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'chair', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'combination', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'curious', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'death', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'discover', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'grandmother', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'hour', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'island', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'live', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'needed', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'pound', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'select', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'son', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'steel', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'bill', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'dropped', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'he', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'means', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'consonant', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'cutting', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'except', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'forward', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'grew', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'layers', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'quick', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'sat', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'seldom', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'select', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'shake', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'arrange', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'bend', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'citizen', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'closely', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'door', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'fellow', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'hay', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'leather', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'leaving', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'actually', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'applied', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'at', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'choose', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'forest', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'hit', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'library', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'anything', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'century', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'fall', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'familiar', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'ring', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'familiar', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'happy', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'necessary', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'activity', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'additional', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'brush', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'cross', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'eight', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'final', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'gain', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'grow', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'involved', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'loose', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'myself', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'occur', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'possible', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'rate', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'scale', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'castle', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'condition', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'dead', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'enjoy', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'event', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'home', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'industry', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'baby', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'matter', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'parts', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'possibly', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'stand', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'bar', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'else', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'create', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'home', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'material', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'military', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'dig', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'four', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'has', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'herself', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'manufacturing', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'political', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'read', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'this', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'tonight', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'president', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'tonight', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'tool', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'underline', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'willing', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'activity', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'already', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'appearance', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'castle', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'equator', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'fallen', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'half', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'continent', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'balance', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'bone', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'chest', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'dead', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'describe', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'failed', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'man', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'manner', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'poem', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'principle', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'refer', + type: [ + 'null', + { + fields: + [ + { + default: + null, + name: 'adjective', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'adult', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'alone', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'bent', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'busy', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'couple', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'except', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'fresh', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'gave', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'quite', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'think', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'unusual', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'refer', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'research', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'shake', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'slipped', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'continent', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'first', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'importance', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'is', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'tie', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'half', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'hang', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'labor', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'no', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'position', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'solve', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'topic', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'tribe', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'willing', + type: 'record', + }, + ], + }, + ], + name: 'military', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'poem', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'trouble', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'wait', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'else', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'garden', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'hardly', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'individual', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'mighty', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'mission', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'type', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'stand', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'women', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'industry', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'leaving', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'loss', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'part', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'particular', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'poet', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'snow', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'sum', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'scale', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'thing', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'necessary', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'needed', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'no', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'range', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'refer', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'space', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'stream', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'tree', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'library', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'slide', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'slipped', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'struggle', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'universe', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'leaving', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'park', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'wealth', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'shake', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'till', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'trick', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'means', + type: 'record', + }, + ], + }, + ], + name: 'steel', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'team', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'stick', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'strong', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'treated', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'symbol', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'trade', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'slave', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'successful', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'war', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'lunch', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'planned', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'slightly', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'tent', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'angle', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'available', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'bee', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'bowl', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'chicken', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'flame', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'kept', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'liquid', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'me', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'middle', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'missing', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'plan', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'pond', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'related', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'rod', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'spin', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'swing', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'there', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'village', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'extra', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'got', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'influence', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'interior', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'it', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'knew', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'oldest', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'other', + type: [ + 'null', + { + fields: + [], + name: 'other', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'pull', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'quietly', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'rough', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'stepped', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'tongue', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'younger', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'experience', + type: 'record', + }, + ], + }, + ], + name: 'city', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'fair', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'gate', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'material', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'men', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'musical', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'paid', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'particularly', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'pig', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'rise', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'shall', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'slope', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'wonderful', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'zero', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'hit', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'leader', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'member', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'my', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'over', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'plain', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'real', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'same', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'shoe', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'soldier', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'wood', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'feel', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'figure', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'floor', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'flow', + type: [ + 'null', + { + fields: + [], + name: 'flow', + type: 'record', + }, + ], + }, + { + default: + null, + name: 'gone', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'hunter', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'kept', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'kids', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'shallow', + type: [ + 'null', + 'string', + ], + }, + { + default: + null, + name: 'valuable', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'strike', + type: 'record', + }, + ], + }, + { + default: null, + name: 'tell', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'unit', + type: [ + 'null', + 'string', + ], + }, + { + default: null, + name: 'wild', + type: [ + 'null', + 'string', + ], + }, + ], + name: 'white', + type: 'record', + }, + ], + }, + { + default: null, + name: 'wonder', + type: ['null', 'string'], + }, + ], + name: 'flag', + type: 'record', + }, + ], + }, + { + default: null, + name: 'frog', + type: ['null', 'string'], + }, + { + default: null, + name: 'lift', + type: ['null', 'string'], + }, + { + default: null, + name: 'married', + type: [ + 'null', + { + fields: [], + name: 'married', + type: 'record', + }, + ], + }, + { + default: null, + name: 'police', + type: ['null', 'string'], + }, + { + default: null, + name: 'printed', + type: ['null', 'string'], + }, + { + default: null, + name: 'reader', + type: ['null', 'string'], + }, + { + default: null, + name: 'science', + type: ['null', 'string'], + }, + { + default: null, + name: 'sing', + type: ['null', 'string'], + }, + { + default: null, + name: 'somewhere', + type: ['null', 'string'], + }, + { + default: null, + name: 'wolf', + type: ['null', 'string'], + }, + ], + name: 'line', + type: 'record', + }, + ], + }, + { + default: null, + name: 'manufacturing', + type: ['null', 'string'], + }, + { + default: null, + name: 'price', + type: ['null', 'string'], + }, + { + default: null, + name: 'smaller', + type: ['null', 'string'], + }, + { + default: null, + name: 'struggle', + type: ['null', 'string'], + }, + ], + name: 'student', + type: 'record', + }, + ], + }, + { + default: null, + name: 'tail', + type: ['null', 'string'], + }, + { + default: null, + name: 'went', + type: ['null', 'string'], + }, + { + default: null, + name: 'writing', + type: ['null', 'string'], + }, + ], + name: 'seven', + type: 'record', + }, + ], + }, + { default: null, name: 'star', type: ['null', 'string'] }, + { + default: null, + name: 'station', + type: ['null', 'string'], + }, + ], + name: 'keep', + type: 'record', + }, + ], + }, + { default: null, name: 'kept', type: ['null', 'string'] }, + { default: null, name: 'plenty', type: ['null', 'string'] }, + { default: null, name: 'pool', type: ['null', 'string'] }, + { default: null, name: 'road', type: ['null', 'string'] }, + { default: null, name: 'taken', type: ['null', 'string'] }, + ], + name: 'friend', + type: 'record', + }, + ], + }, + { default: null, name: 'stood', type: ['null', 'string'] }, + { default: null, name: 'they', type: ['null', 'string'] }, + { default: null, name: 'trade', type: ['null', 'string'] }, + ], + name: 'veryDeepJson', + type: 'record', +}; diff --git a/packages/react-json-tree/src/createStylingFromTheme.ts b/packages/react-json-tree/src/createStylingFromTheme.ts index f43b88cf..2be9fe2f 100644 --- a/packages/react-json-tree/src/createStylingFromTheme.ts +++ b/packages/react-json-tree/src/createStylingFromTheme.ts @@ -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', diff --git a/packages/react-json-tree/src/expandCollapseButtons.tsx b/packages/react-json-tree/src/expandCollapseButtons.tsx index 80318564..bcaab8f9 100644 --- a/packages/react-json-tree/src/expandCollapseButtons.tsx +++ b/packages/react-json-tree/src/expandCollapseButtons.tsx @@ -34,7 +34,7 @@ function ExpandCollapseButtons({ expandCollapseAll, styling }: Props) { const expandableDefaultValue = expandCollapseAll?.defaultValue || 'expand'; return ( -
+
{enableDefaultButton && ( )}