diff --git a/packages/react-json-tree/src/ItemRange.tsx b/packages/react-json-tree/src/ItemRange.tsx index 3848783e..7510ae52 100644 --- a/packages/react-json-tree/src/ItemRange.tsx +++ b/packages/react-json-tree/src/ItemRange.tsx @@ -1,14 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import JSONArrow from './JSONArrow'; -import { CircularPropsPassedThroughItemRange } from './types'; +import type { CircularCache, CommonInternalProps } from './types'; -interface Props extends CircularPropsPassedThroughItemRange { +interface Props extends CommonInternalProps { data: any; nodeType: string; from: number; to: number; renderChildNodes: (props: Props, from: number, to: number) => React.ReactNode; + circularCache: CircularCache; } interface State { diff --git a/packages/react-json-tree/src/JSONArrayNode.tsx b/packages/react-json-tree/src/JSONArrayNode.tsx index 97440160..778b5f5f 100644 --- a/packages/react-json-tree/src/JSONArrayNode.tsx +++ b/packages/react-json-tree/src/JSONArrayNode.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import JSONNestedNode from './JSONNestedNode'; -import { CircularPropsPassedThroughJSONNode } from './types'; +import type { CommonInternalProps } from './types'; // Returns the "n Items" string for this node, // generating and caching it if it hasn't been created yet. @@ -11,7 +11,7 @@ function createItemString(data: any) { }`; } -interface Props extends CircularPropsPassedThroughJSONNode { +interface Props extends CommonInternalProps { data: any; nodeType: string; } diff --git a/packages/react-json-tree/src/JSONArrow.tsx b/packages/react-json-tree/src/JSONArrow.tsx index 25f7e2f8..c2bf1c26 100644 --- a/packages/react-json-tree/src/JSONArrow.tsx +++ b/packages/react-json-tree/src/JSONArrow.tsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { StylingFunction } from 'react-base16-styling'; +import type { StylingFunction } from 'react-base16-styling'; interface Props { styling: StylingFunction; diff --git a/packages/react-json-tree/src/JSONIterableNode.tsx b/packages/react-json-tree/src/JSONIterableNode.tsx index dff51ad5..98d7671f 100644 --- a/packages/react-json-tree/src/JSONIterableNode.tsx +++ b/packages/react-json-tree/src/JSONIterableNode.tsx @@ -1,6 +1,6 @@ import React from 'react'; import JSONNestedNode from './JSONNestedNode'; -import { CircularPropsPassedThroughJSONNode } from './types'; +import type { CommonInternalProps } from './types'; // Returns the "n Items" string for this node, // generating and caching it if it hasn't been created yet. @@ -22,7 +22,7 @@ function createItemString(data: any, limit: number) { return `${hasMore ? '>' : ''}${count} ${count !== 1 ? 'entries' : 'entry'}`; } -interface Props extends CircularPropsPassedThroughJSONNode { +interface Props extends CommonInternalProps { data: any; nodeType: string; } diff --git a/packages/react-json-tree/src/JSONNestedNode.tsx b/packages/react-json-tree/src/JSONNestedNode.tsx index e678af6c..fdd172f1 100644 --- a/packages/react-json-tree/src/JSONNestedNode.tsx +++ b/packages/react-json-tree/src/JSONNestedNode.tsx @@ -4,19 +4,16 @@ import JSONArrow from './JSONArrow'; import getCollectionEntries from './getCollectionEntries'; import JSONNode from './JSONNode'; import ItemRange from './ItemRange'; -import { - CircularPropsPassedThroughJSONNestedNode, - CircularPropsPassedThroughRenderChildNodes, -} from './types'; +import type { CircularCache, CommonInternalProps } from './types'; /** * Renders nested values (eg. objects, arrays, lists, etc.) */ -export interface RenderChildNodesProps - extends CircularPropsPassedThroughRenderChildNodes { +export interface RenderChildNodesProps extends CommonInternalProps { data: any; nodeType: string; + circularCache: CircularCache; } interface Range { @@ -89,12 +86,14 @@ function renderChildNodes( return childNodes; } -interface Props extends CircularPropsPassedThroughJSONNestedNode { +interface Props extends CommonInternalProps { data: any; nodeType: string; nodeTypeIndicator: string; createItemString: (data: any, collectionLimit: number) => string; expandable: boolean; + circularCache: CircularCache; + level: number; } interface State { diff --git a/packages/react-json-tree/src/JSONNode.tsx b/packages/react-json-tree/src/JSONNode.tsx index a95314c0..c31f337b 100644 --- a/packages/react-json-tree/src/JSONNode.tsx +++ b/packages/react-json-tree/src/JSONNode.tsx @@ -5,10 +5,9 @@ import JSONObjectNode from './JSONObjectNode'; import JSONArrayNode from './JSONArrayNode'; import JSONIterableNode from './JSONIterableNode'; import JSONValueNode from './JSONValueNode'; -import { CircularPropsPassedThroughJSONNode } from './types'; +import type { CommonInternalProps, KeyPath } from './types'; -interface Props extends CircularPropsPassedThroughJSONNode { - keyPath: (string | number)[]; +interface Props extends CommonInternalProps { value: any; isCustomNode: (value: any) => boolean; } diff --git a/packages/react-json-tree/src/JSONObjectNode.tsx b/packages/react-json-tree/src/JSONObjectNode.tsx index 6cfcbe06..6cdf4711 100644 --- a/packages/react-json-tree/src/JSONObjectNode.tsx +++ b/packages/react-json-tree/src/JSONObjectNode.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import JSONNestedNode from './JSONNestedNode'; -import { CircularPropsPassedThroughJSONNode } from './types'; +import type { CommonInternalProps } from './types'; // Returns the "n Items" string for this node, // generating and caching it if it hasn't been created yet. @@ -10,7 +10,7 @@ function createItemString(data: any) { return `${len} ${len !== 1 ? 'keys' : 'key'}`; } -interface Props extends CircularPropsPassedThroughJSONNode { +interface Props extends CommonInternalProps { data: any; nodeType: string; } diff --git a/packages/react-json-tree/src/JSONValueNode.tsx b/packages/react-json-tree/src/JSONValueNode.tsx index c7754256..99078848 100644 --- a/packages/react-json-tree/src/JSONValueNode.tsx +++ b/packages/react-json-tree/src/JSONValueNode.tsx @@ -1,14 +1,27 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { JSONValueNodeCircularPropsProvidedByJSONNode } from './types'; +import type { + GetItemString, + Key, + KeyPath, + LabelRenderer, + Styling, + ValueRenderer, +} from './types'; /** * Renders simple values (eg. strings, numbers, booleans, etc) */ -interface Props extends JSONValueNodeCircularPropsProvidedByJSONNode { +interface Props { + getItemString: GetItemString; + key: Key; + keyPath: KeyPath; + labelRenderer: LabelRenderer; nodeType: string; + styling: Styling; value: any; + valueRenderer: ValueRenderer; valueGetter?: (value: any) => any; } diff --git a/packages/react-json-tree/src/getCollectionEntries.ts b/packages/react-json-tree/src/getCollectionEntries.ts index 85c5403b..eed85aeb 100644 --- a/packages/react-json-tree/src/getCollectionEntries.ts +++ b/packages/react-json-tree/src/getCollectionEntries.ts @@ -1,3 +1,5 @@ +import type { SortObjectKeys } from './types'; + function getLength(type: string, collection: any) { if (type === 'Object') { // eslint-disable-next-line @typescript-eslint/ban-types @@ -16,7 +18,7 @@ function isIterableMap(collection: any) { function getEntries( type: string, collection: any, - sortObjectKeys?: ((a: any, b: any) => number) | boolean | undefined, + sortObjectKeys: SortObjectKeys, from = 0, to = Infinity ): { entries: { key: string | number; value: any }[]; hasMore?: boolean } { @@ -96,7 +98,7 @@ function getRanges(from: number, to: number, limit: number) { export default function getCollectionEntries( type: string, collection: any, - sortObjectKeys: ((a: any, b: any) => number) | boolean | undefined, + sortObjectKeys: SortObjectKeys, limit: number, from = 0, to = Infinity diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx index 010c0b45..ea3e668f 100644 --- a/packages/react-json-tree/src/index.tsx +++ b/packages/react-json-tree/src/index.tsx @@ -8,34 +8,29 @@ import JSONNode from './JSONNode'; import createStylingFromTheme from './createStylingFromTheme'; import { invertTheme } from 'react-base16-styling'; import type { StylingValue, Theme } from 'react-base16-styling'; -import { CircularPropsPassedThroughJSONTree } from './types'; +import type { + CommonExternalProps, + GetItemString, + IsCustomNode, + LabelRenderer, + ShouldExpandNode, +} from './types'; -interface Props extends CircularPropsPassedThroughJSONTree { +interface Props extends Partial { data: any; theme?: Theme; - invertTheme: boolean; + invertTheme?: boolean; } const identity = (value: any) => value; -const expandRootNode = ( - keyPath: (string | number)[], - data: any, - level: number -) => level === 0; -const defaultItemString = ( - type: string, - data: any, - itemType: React.ReactNode, - itemString: string -) => ( +const expandRootNode: ShouldExpandNode = (keyPath, data, level) => level === 0; +const defaultItemString: GetItemString = (type, data, itemType, itemString) => ( {itemType} {itemString} ); -const defaultLabelRenderer = ([label]: (string | number)[]) => ( - {label}: -); -const noCustomNode = () => false; +const defaultLabelRenderer: LabelRenderer = ([label]) => {label}:; +const noCustomNode: IsCustomNode = () => false; export function JSONTree({ data: value, @@ -50,7 +45,7 @@ export function JSONTree({ postprocessValue = identity, isCustomNode = noCustomNode, collectionLimit = 50, - sortObjectKeys, + sortObjectKeys = false, }: Props) { const styling = useMemo( () => diff --git a/packages/react-json-tree/src/types.ts b/packages/react-json-tree/src/types.ts index 5d8e1f7c..7bb4297b 100644 --- a/packages/react-json-tree/src/types.ts +++ b/packages/react-json-tree/src/types.ts @@ -1,81 +1,63 @@ import React from 'react'; import { StylingFunction } from 'react-base16-styling'; -interface SharedCircularPropsPassedThroughJSONTree { - keyPath: (string | number)[]; - labelRenderer: ( - keyPath: (string | number)[], - nodeType: string, - expanded: boolean, - expandable: boolean - ) => React.ReactNode; -} -interface SharedCircularPropsProvidedByJSONTree - extends SharedCircularPropsPassedThroughJSONTree { - styling: StylingFunction; -} -interface JSONValueNodeCircularPropsPassedThroughJSONTree { - valueRenderer: ( - valueAsString: any, - value: any, - ...keyPath: (string | number)[] - ) => React.ReactNode; -} -export type JSONValueNodeCircularPropsProvidedByJSONNode = - SharedCircularPropsProvidedByJSONTree & - JSONValueNodeCircularPropsPassedThroughJSONTree; +export type Key = string | number; -interface JSONNestedNodeCircularPropsPassedThroughJSONTree { - shouldExpandNode: ( - keyPath: (string | number)[], - data: any, - level: number - ) => boolean; +export type KeyPath = (string | number)[]; + +export type GetItemString = ( + nodeType: string, + data: any, + itemType: React.ReactNode, + itemString: string, + keyPath: KeyPath +) => React.ReactNode; + +export type LabelRenderer = ( + keyPath: KeyPath, + nodeType: string, + expanded: boolean, + expandable: boolean +) => React.ReactNode; + +export type ValueRenderer = ( + valueAsString: any, + value: any, + ...keyPath: KeyPath +) => React.ReactNode; + +export type ShouldExpandNode = ( + keyPath: KeyPath, + data: any, + level: number +) => boolean; + +export type PostprocessValue = (value: any) => any; + +export type IsCustomNode = (value: any) => boolean; + +export type SortObjectKeys = ((a: any, b: any) => number) | boolean; + +export type Styling = StylingFunction; + +export type CircularCache = any[]; + +export interface CommonExternalProps { + keyPath: KeyPath; + labelRenderer: LabelRenderer; + valueRenderer: ValueRenderer; + shouldExpandNode: ShouldExpandNode; hideRoot: boolean; - getItemString: ( - nodeType: string, - data: any, - itemType: React.ReactNode, - itemString: string, - keyPath: (string | number)[] - ) => React.ReactNode; - postprocessValue: (value: any) => any; - isCustomNode: (value: any) => boolean; + getItemString: GetItemString; + postprocessValue: PostprocessValue; + isCustomNode: IsCustomNode; collectionLimit: number; - sortObjectKeys?: ((a: any, b: any) => number) | boolean; + sortObjectKeys: SortObjectKeys; } -export type CircularPropsPassedThroughJSONTree = - SharedCircularPropsPassedThroughJSONTree & - JSONValueNodeCircularPropsPassedThroughJSONTree & - JSONNestedNodeCircularPropsPassedThroughJSONTree; -interface JSONNestedNodeCircularPropsPassedThroughJSONNode - extends JSONNestedNodeCircularPropsPassedThroughJSONTree { - circularCache?: any[]; +export interface CommonInternalProps extends CommonExternalProps { + styling: StylingFunction; + circularCache?: CircularCache; isCircular?: boolean; level?: number; } -export type CircularPropsPassedThroughJSONNode = - SharedCircularPropsProvidedByJSONTree & - JSONValueNodeCircularPropsPassedThroughJSONTree & - JSONNestedNodeCircularPropsPassedThroughJSONNode; - -export interface JSONNestedNodeCircularPropsPassedThroughJSONNestedNode - extends JSONNestedNodeCircularPropsPassedThroughJSONNode { - circularCache: any[]; - level: number; -} -export type CircularPropsPassedThroughJSONNestedNode = - SharedCircularPropsProvidedByJSONTree & - JSONValueNodeCircularPropsPassedThroughJSONTree & - JSONNestedNodeCircularPropsPassedThroughJSONNestedNode; - -export type CircularPropsPassedThroughRenderChildNodes = - SharedCircularPropsProvidedByJSONTree & - JSONValueNodeCircularPropsPassedThroughJSONTree & - JSONNestedNodeCircularPropsPassedThroughJSONNestedNode; - -export type CircularPropsPassedThroughItemRange = - SharedCircularPropsProvidedByJSONTree & - JSONValueNodeCircularPropsPassedThroughJSONTree & - JSONNestedNodeCircularPropsPassedThroughJSONNestedNode;