Remove UNSAFE method from JSONTree

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

@@ -3,17 +3,11 @@
 // Dave Vedder <veddermatic@gmail.com> http://www.eskimospy.com/
 // port by Daniele Zannotti http://www.github.com/dzannotti <dzannotti@me.com>
 
-import React from 'react';
+import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import JSONNode from './JSONNode';
 import createStylingFromTheme from './createStylingFromTheme';
 import { invertTheme } from 'react-base16-styling';
-import type {
+import type { StylingValue, Theme } from 'react-base16-styling';
-  StylingConfig,
-  StylingFunction,
-  StylingValue,
-  Theme,
-} from 'react-base16-styling';
 import { CircularPropsPassedThroughJSONTree } from './types';
 
 interface Props extends CircularPropsPassedThroughJSONTree {
@@ -22,10 +16,6 @@ interface Props extends CircularPropsPassedThroughJSONTree {
   invertTheme: boolean;
 }
 
-interface State {
-  styling: StylingFunction;
-}
-
 const identity = (value: any) => value;
 const expandRootNode = (
   keyPath: (string | number)[],
@@ -47,133 +37,45 @@ const defaultLabelRenderer = ([label]: (string | number)[]) => (
 );
 const noCustomNode = () => false;
 
-function checkLegacyTheming(theme: Theme | undefined, props: Props) {
+export function JSONTree({
-  const deprecatedStylingMethodsMap = {
+  data: value,
-    getArrowStyle: 'arrow',
+  theme,
-    getListStyle: 'nestedNodeChildren',
+  invertTheme: shouldInvertTheme,
-    getItemStringStyle: 'nestedNodeItemString',
+  keyPath = ['root'],
-    getLabelStyle: 'label',
+  labelRenderer = defaultLabelRenderer,
-    getValueStyle: 'valueText',
+  valueRenderer = identity,
-  };
+  shouldExpandNode = expandRootNode,
+  hideRoot = false,
+  getItemString = defaultItemString,
+  postprocessValue = identity,
+  isCustomNode = noCustomNode,
+  collectionLimit = 50,
+  sortObjectKeys,
+}: Props) {
+  const styling = useMemo(
+    () =>
+      createStylingFromTheme(shouldInvertTheme ? invertTheme(theme) : theme),
+    [theme, shouldInvertTheme]
+  );
 
-  const deprecatedStylingMethods = Object.keys(
+  return (
-    deprecatedStylingMethodsMap
+    <ul {...styling('tree')}>
-  ).filter((name) => props[name as keyof Props]);
+      <JSONNode
-
+        keyPath={hideRoot ? [] : keyPath}
-  if (deprecatedStylingMethods.length > 0) {
+        value={postprocessValue(value)}
-    if (typeof theme === 'string') {
+        isCustomNode={isCustomNode}
-      theme = {
+        styling={styling}
-        extend: theme,
+        labelRenderer={labelRenderer}
-      };
+        valueRenderer={valueRenderer}
-    } else {
+        shouldExpandNode={shouldExpandNode}
-      theme = { ...theme };
+        hideRoot={hideRoot}
-    }
+        getItemString={getItemString}
-
+        postprocessValue={postprocessValue}
-    deprecatedStylingMethods.forEach((name) => {
+        collectionLimit={collectionLimit}
-      // eslint-disable-next-line no-console
+        sortObjectKeys={sortObjectKeys}
-      console.error(
+      />
-        `Styling method "${name}" is deprecated, use "theme" property instead`
+    </ul>
-      );
+  );
-
-      (theme as StylingConfig)[
-        deprecatedStylingMethodsMap[
-          name as keyof typeof deprecatedStylingMethodsMap
-        ]
-      ] = ({ style }, ...args) => ({
-        style: {
-          ...style,
-          ...props[name as keyof Props](...args),
-        },
-      });
-    });
-  }
-
-  return theme;
-}
-
-function getStateFromProps(props: Props) {
-  let theme = checkLegacyTheming(props.theme, props);
-  if (props.invertTheme) {
-    theme = invertTheme(theme);
-  }
-
-  return {
-    styling: createStylingFromTheme(theme),
-  };
-}
-
-export class JSONTree extends React.Component<Props, State> {
-  static propTypes = {
-    data: PropTypes.any,
-    hideRoot: PropTypes.bool,
-    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-    invertTheme: PropTypes.bool,
-    keyPath: PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    ),
-    postprocessValue: PropTypes.func,
-    sortObjectKeys: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  };
-
-  static defaultProps = {
-    shouldExpandNode: expandRootNode,
-    hideRoot: false,
-    keyPath: ['root'],
-    getItemString: defaultItemString,
-    labelRenderer: defaultLabelRenderer,
-    valueRenderer: identity,
-    postprocessValue: identity,
-    isCustomNode: noCustomNode,
-    collectionLimit: 50,
-    invertTheme: true,
-  };
-
-  constructor(props: Props) {
-    super(props);
-    this.state = getStateFromProps(props);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    if (
-      ['theme', 'invertTheme'].find(
-        (k) => nextProps[k as keyof Props] !== this.props[k as keyof Props]
-      )
-    ) {
-      this.setState(getStateFromProps(nextProps));
-    }
-  }
-
-  shouldComponentUpdate(nextProps: Props) {
-    return !!Object.keys(nextProps).find((k) =>
-      k === 'keyPath'
-        ? nextProps[k].join('/') !== this.props[k].join('/')
-        : nextProps[k as keyof Props] !== this.props[k as keyof Props]
-    );
-  }
-
-  render() {
-    const {
-      data: value,
-      keyPath,
-      postprocessValue,
-      hideRoot,
-      theme, // eslint-disable-line no-unused-vars
-      invertTheme: _, // eslint-disable-line no-unused-vars
-      ...rest
-    } = this.props;
-
-    const { styling } = this.state;
-
-    return (
-      <ul {...styling('tree')}>
-        <JSONNode
-          {...{ postprocessValue, hideRoot, styling, ...rest }}
-          keyPath={hideRoot ? [] : keyPath}
-          value={postprocessValue(value)}
-        />
-      </ul>
-    );
-  }
 }
 
 export { StylingValue };