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;
-}
 
-export default class ItemRange extends React.Component<Props, State> {
+  const [expanded, setExpanded] = useState<boolean>(false);
-  constructor(props: Props) {
+  const handleClick = useCallback(() => {
-    super(props);
+    setExpanded(!expanded);
-    this.state = { expanded: false };
+  }, [expanded]);
-  }
 
-  render() {
+  return expanded ? (
-    const { styling, from, to, renderChildNodes, nodeType } = this.props;
+    <div {...styling('itemRange', expanded)}>
-
+      {renderChildNodes(props, from, to)}
-    return this.state.expanded ? (
-      <div {...styling('itemRange', this.state.expanded)}>
-        {renderChildNodes(this.props, from, to)}
     </div>
   ) : (
-      <div
+    <div {...styling('itemRange', expanded)} onClick={handleClick}>
-        {...styling('itemRange', this.state.expanded)}
-        onClick={this.handleClick}
-      >
       <JSONArrow
         nodeType={nodeType}
         styling={styling}
         expanded={false}
-          onClick={this.handleClick}
+        onClick={handleClick}
         arrowStyle="double"
       />
       {`${from} ... ${to}`}
     </div>
   );
-  }
-
-  handleClick = () => {
-    this.setState({ expanded: !this.state.expanded });
-  };
 }

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

@@ -16,7 +16,8 @@ interface Props extends CommonInternalProps {
 }
 
 // Configures <JSONNestedNode> to render an Array
-const JSONArrayNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
+export default function JSONArrayNode({ data, ...props }: Props) {
+  return (
     <JSONNestedNode
       {...props}
       data={data}
@@ -25,6 +26,5 @@ const JSONArrayNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
       createItemString={createItemString}
       expandable={data.length > 0}
     />
-);
+  );
-
+}
-export default JSONArrayNode;

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

@@ -9,13 +9,14 @@ interface Props {
   onClick: React.MouseEventHandler<HTMLDivElement>;
 }
 
-const JSONArrow: React.FunctionComponent<Props> = ({
+export default function JSONArrow({
   styling,
   arrowStyle = 'single',
   expanded,
   nodeType,
   onClick,
-}) => (
+}: Props) {
+  return (
     <div {...styling('arrowContainer', arrowStyle)} onClick={onClick}>
       <div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
         {'\u25B6'}
@@ -24,6 +25,5 @@ const JSONArrow: React.FunctionComponent<Props> = ({
         )}
       </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,7 +15,8 @@ interface Props extends CommonInternalProps {
 }
 
 // Configures <JSONNestedNode> to render an Object
-const JSONObjectNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
+export default function JSONObjectNode({ data, ...props }: Props) {
+  return (
     <JSONNestedNode
       {...props}
       data={data}
@@ -24,6 +25,5 @@ const JSONObjectNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
       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,7 +32,8 @@ const JSONValueNode: React.FunctionComponent<Props> = ({
   valueRenderer,
   value,
   valueGetter = (value) => value,
-}) => (
+}: Props) {
+  return (
     <li {...styling('value', nodeType, keyPath)}>
       <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
         {labelRenderer(keyPath, nodeType, false, false)}
@@ -41,6 +42,5 @@ const JSONValueNode: React.FunctionComponent<Props> = ({
         {valueRenderer(valueGetter(value), value, ...keyPath)}
       </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;
 }