Cleanup

packages/react-json-tree/src/ItemRange.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import JSONArrow from './JSONArrow';
 import type { CircularCache, CommonInternalProps } from './types';
 
@@ -9,43 +9,31 @@ interface Props extends CommonInternalProps {
   to: number;
   renderChildNodes: (props: Props, from: number, to: number) => React.ReactNode;
   circularCache: CircularCache;
+  level: number;
 }
 
-interface State {
+export default function ItemRange(props: Props) {
-  expanded: boolean;
+  const { styling, from, to, renderChildNodes, nodeType } = props;
-}
+
-
+  const [expanded, setExpanded] = useState<boolean>(false);
-export default class ItemRange extends React.Component<Props, State> {
+  const handleClick = useCallback(() => {
-  constructor(props: Props) {
+    setExpanded(!expanded);
-    super(props);
+  }, [expanded]);
-    this.state = { expanded: false };
+
-  }
+  return expanded ? (
-
+    <div {...styling('itemRange', expanded)}>
-  render() {
+      {renderChildNodes(props, from, to)}
-    const { styling, from, to, renderChildNodes, nodeType } = this.props;
+    </div>
-
+  ) : (
-    return this.state.expanded ? (
+    <div {...styling('itemRange', expanded)} onClick={handleClick}>
-      <div {...styling('itemRange', this.state.expanded)}>
+      <JSONArrow
-        {renderChildNodes(this.props, from, to)}
+        nodeType={nodeType}
-      </div>
+        styling={styling}
-    ) : (
+        expanded={false}
-      <div
+        onClick={handleClick}
-        {...styling('itemRange', this.state.expanded)}
+        arrowStyle="double"
-        onClick={this.handleClick}
+      />
-      >
+      {`${from} ... ${to}`}
-        <JSONArrow
+    </div>
-          nodeType={nodeType}
+  );
-          styling={styling}
-          expanded={false}
-          onClick={this.handleClick}
-          arrowStyle="double"
-        />
-        {`${from} ... ${to}`}
-      </div>
-    );
-  }
-
-  handleClick = () => {
-    this.setState({ expanded: !this.state.expanded });
-  };
 }

packages/react-json-tree/src/JSONArrayNode.tsx

@@ -16,15 +16,15 @@ interface Props extends CommonInternalProps {
 }
 
 // Configures <JSONNestedNode> to render an Array
-const JSONArrayNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
+export default function JSONArrayNode({ data, ...props }: Props) {
-  <JSONNestedNode
+  return (
-    {...props}
+    <JSONNestedNode
-    data={data}
+      {...props}
-    nodeType="Array"
+      data={data}
-    nodeTypeIndicator="[]"
+      nodeType="Array"
-    createItemString={createItemString}
+      nodeTypeIndicator="[]"
-    expandable={data.length > 0}
+      createItemString={createItemString}
-  />
+      expandable={data.length > 0}
-);
+    />
-
+  );
-export default JSONArrayNode;
+}

packages/react-json-tree/src/JSONArrow.tsx

@@ -9,21 +9,21 @@ interface Props {
   onClick: React.MouseEventHandler<HTMLDivElement>;
 }
 
-const JSONArrow: React.FunctionComponent<Props> = ({
+export default function JSONArrow({
   styling,
   arrowStyle = 'single',
   expanded,
   nodeType,
   onClick,
-}) => (
+}: Props) {
-  <div {...styling('arrowContainer', arrowStyle)} onClick={onClick}>
+  return (
-    <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
+    <div {...styling('arrowContainer', arrowStyle)} onClick={onClick}>
-      {'\u25B6'}
+      <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
-      {arrowStyle === 'double' && (
+        {'\u25B6'}
-        <div {...styling(['arrowSign', 'arrowSignInner'])}>{'\u25B6'}</div>
+        {arrowStyle === 'double' && (
-      )}
+          <div {...styling(['arrowSign', 'arrowSignInner'])}>{'\u25B6'}</div>
+        )}
+      </div>
     </div>
-  </div>
+  );
-);
+}
-
-export default JSONArrow;

packages/react-json-tree/src/JSONIterableNode.tsx

@@ -28,7 +28,7 @@ interface Props extends CommonInternalProps {
 }
 
 // Configures <JSONNestedNode> to render an iterable
-const JSONIterableNode: React.FunctionComponent<Props> = ({ ...props }) => {
+export default function JSONIterableNode(props: Props) {
   return (
     <JSONNestedNode
       {...props}
@@ -38,6 +38,4 @@ const JSONIterableNode: React.FunctionComponent<Props> = ({ ...props }) => {
       expandable
     />
   );
-};
+}
-
-export default JSONIterableNode;

packages/react-json-tree/src/JSONNestedNode.tsx

@@ -13,6 +13,7 @@ export interface RenderChildNodesProps extends CommonInternalProps {
   data: any;
   nodeType: string;
   circularCache: CircularCache;
+  level: number;
 }
 
 interface Range {

packages/react-json-tree/src/JSONNode.tsx

@@ -8,10 +8,9 @@ import type { CommonInternalProps } from './types';
 
 interface Props extends CommonInternalProps {
   value: any;
-  isCustomNode: (value: any) => boolean;
 }
 
-const JSONNode: React.FunctionComponent<Props> = ({
+export default function JSONNode({
   getItemString,
   keyPath,
   labelRenderer,
@@ -20,7 +19,7 @@ const JSONNode: React.FunctionComponent<Props> = ({
   valueRenderer,
   isCustomNode,
   ...rest
-}) => {
+}: Props) {
   const nodeType = isCustomNode(value) ? 'Custom' : objType(value);
 
   const simpleNodeProps = {
@@ -100,6 +99,4 @@ const JSONNode: React.FunctionComponent<Props> = ({
         />
       );
   }
-};
+}
-
-export default JSONNode;

packages/react-json-tree/src/JSONObjectNode.tsx

@@ -15,15 +15,15 @@ interface Props extends CommonInternalProps {
 }
 
 // Configures <JSONNestedNode> to render an Object
-const JSONObjectNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
+export default function JSONObjectNode({ data, ...props }: Props) {
-  <JSONNestedNode
+  return (
-    {...props}
+    <JSONNestedNode
-    data={data}
+      {...props}
-    nodeType="Object"
+      data={data}
-    nodeTypeIndicator={props.nodeType === 'Error' ? 'Error()' : '{}'}
+      nodeType="Object"
-    createItemString={createItemString}
+      nodeTypeIndicator={props.nodeType === 'Error' ? 'Error()' : '{}'}
-    expandable={Object.getOwnPropertyNames(data).length > 0}
+      createItemString={createItemString}
-  />
+      expandable={Object.getOwnPropertyNames(data).length > 0}
-);
+    />
-
+  );
-export default JSONObjectNode;
+}

packages/react-json-tree/src/JSONValueNode.tsx

@@ -24,7 +24,7 @@ interface Props {
   valueGetter?: (value: any) => any;
 }
 
-const JSONValueNode: React.FunctionComponent<Props> = ({
+export default function JSONValueNode({
   nodeType,
   styling,
   labelRenderer,
@@ -32,15 +32,15 @@ const JSONValueNode: React.FunctionComponent<Props> = ({
   valueRenderer,
   value,
   valueGetter = (value) => value,
-}) => (
+}: Props) {
-  <li {...styling('value', nodeType, keyPath)}>
+  return (
-    <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
+    <li {...styling('value', nodeType, keyPath)}>
-      {labelRenderer(keyPath, nodeType, false, false)}
+      <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
-    </label>
+        {labelRenderer(keyPath, nodeType, false, false)}
-    <span {...styling('valueText', nodeType, keyPath)}>
+      </label>
-      {valueRenderer(valueGetter(value), value, ...keyPath)}
+      <span {...styling('valueText', nodeType, keyPath)}>
-    </span>
+        {valueRenderer(valueGetter(value), value, ...keyPath)}
-  </li>
+      </span>
-);
+    </li>
-
+  );
-export default JSONValueNode;
+}

packages/react-json-tree/src/createStylingFromTheme.ts

@@ -1,11 +1,12 @@
 import type { CurriedFunction1 } from 'lodash';
-import {
+import { createStyling } from 'react-base16-styling';
+import type {
   Base16Theme,
-  createStyling,
   StylingConfig,
+  StylingFunction,
+  Theme,
 } from 'react-base16-styling';
 import solarized from './themes/solarized';
-import { StylingFunction, Theme } from 'react-base16-styling/src';
 
 const colorMap = (theme: Base16Theme) => ({
   BACKGROUND_COLOR: theme.base00,

packages/react-json-tree/src/index.tsx

@@ -74,4 +74,4 @@ export function JSONTree({
   );
 }
 
-export { StylingValue };
+export type { StylingValue };

packages/react-json-tree/src/types.ts

@@ -58,6 +58,6 @@ export interface CommonExternalProps {
 export interface CommonInternalProps extends CommonExternalProps {
   styling: StylingFunction;
   circularCache?: CircularCache;
-  isCircular?: boolean;
   level?: number;
+  isCircular?: boolean;
 }