fix(#151): Update react-base16-styling to latest (#156)

* update react-base16-styling to main project repo

* shamelessly borrow from react-json-tree for proper use of new invertTheme API, also took cues from extracted helper functions to keep files a little more consitent

* added getDerivedStateFromProps to replace unsafe component will receive props, added prettier and eslint rcs

Author: tannermares

.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: 'react-native',
+  // ESLint doesn't find React Native components
+  // Remove this setting when this issue is fixed.
+  // https://github.com/facebook/react-native/issues/28549
+  'import/ignore': ['react-native'],
+};

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  arrowParens: 'avoid',
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'es5',
+};

package.json

@@ -7,20 +7,22 @@
     "andytompkins",
     "jsdario",
     "patw0929",
-    "Swaagie"
+    "Swaagie",
+    "tannermares"
   ],
   "dependencies": {
     "prop-types": "^15.7.2",
-    "react-base16-styling": "github:dean177/react-base16-styling#fbc6593"
+    "react-base16-styling": "^0.8.0"
   },
   "description": "React Native JSON viewing component, based on react-json-tree",
   "devDependencies": {
     "babel-preset-react-native": "4.0.1",
     "enzyme": "^3.11.0",
+    "eslint-config-react-native": "^4.1.0",
     "immutable": "3.8.1",
     "jest": "26.6.3",
     "madge": "4.0.2",
-    "prettier": "2.2.1",
+    "prettier": "^2.2.1",
     "react": "17.0.2",
     "react-native": "0.64.0"
   },
@@ -47,7 +49,8 @@
     "lint": "eslint --max-warnings=0 src test Example",
     "test": "NODE_ENV=test jest",
     "start": "cd Examples && npm start",
-    "circular-dependency-check": "madge ./src/index.js --circular"
+    "circular-dependency-check": "madge ./src/index.js --circular",
+    "prettier-sync": "yarn && ./node_modules/prettier/bin-prettier.js --write \"src/**/*.js\" && ./node_modules/prettier/bin-prettier.js --write \"test/**/*.js\""
   },
   "version": "1.2.1"
 }

src/index.js

@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import { Text, View } from 'react-native';
 import { JSONNode } from './Nodes';
 import createStylingFromTheme from './createStylingFromTheme';
+import { invertTheme } from 'react-base16-styling';
 
 const identity = value => value;
+const expandRootNode = (_keyName, _data, level) => level === 0;
+const defaultItemString = (_type, _data, itemType, itemString) => (
+  <Text>
+    {itemType} {itemString}
+  </Text>
+);
+const defaultLabelRenderer = ([label]) => <Text>{label}:</Text>;
+const noCustomNode = () => false;
 
 /* eslint-disable no-param-reassign */
 function checkLegacyTheming(theme, props) {
@@ -16,9 +25,9 @@ function checkLegacyTheming(theme, props) {
     getValueStyle: 'valueText',
   };
 
-  const deprecatedStylingMethods = Object
-    .keys(deprecatedStylingMethodsMap)
-    .filter(name => props[name]);
+  const deprecatedStylingMethods = Object.keys(
+    deprecatedStylingMethodsMap
+  ).filter(name => props[name]);
 
   if (deprecatedStylingMethods.length > 0) {
     if (typeof theme === 'string') {
@@ -27,9 +36,11 @@ function checkLegacyTheming(theme, props) {
       theme = { ...theme };
     }
 
-    deprecatedStylingMethods.forEach((name) => {
+    deprecatedStylingMethods.forEach(name => {
       // eslint-disable-next-line no-console
-      console.error(`Styling method "${name}" is deprecated, use the "theme" property instead`);
+      console.error(
+        `Styling method "${name}" is deprecated, use the "theme" property instead`
+      );
 
       theme[deprecatedStylingMethodsMap[name]] = ({ style }, ...args) => ({
         style: {
@@ -43,6 +54,17 @@ function checkLegacyTheming(theme, props) {
   return theme;
 }
 
+function getStateFromProps(props) {
+  let theme = checkLegacyTheming(props.theme, props);
+  if (props.invertTheme) {
+    theme = invertTheme(theme);
+  }
+
+  return {
+    styling: createStylingFromTheme(theme),
+  };
+}
+
 /* eslint-enable no-param-reassign */
 
 class JSONTree extends React.Component {
@@ -56,48 +78,67 @@ class JSONTree extends React.Component {
     ]).isRequired,
     hideRoot: PropTypes.bool,
     invertTheme: PropTypes.bool,
-    keyPath: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+    keyPath: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    ),
     postprocessValue: PropTypes.func,
     sortObjectKeys: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
     theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   };
 
   static defaultProps = {
-    shouldExpandNode: (keyName, data, level) => level === 0, // expands root by default,
+    shouldExpandNode: expandRootNode,
     hideRoot: false,
     keyPath: ['root'],
-    getItemString: (type, data, itemType, itemString) => <Text>{itemType} {itemString}</Text>,
-    labelRenderer: ([label]) => <Text>{label}:</Text>,
+    getItemString: defaultItemString,
+    labelRenderer: defaultLabelRenderer,
     valueRenderer: identity,
     postprocessValue: identity,
-    isCustomNode: () => false,
+    isCustomNode: noCustomNode,
     collectionLimit: 50,
     invertTheme: true,
     sortObjectKeys: true,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = getStateFromProps(props);
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (['theme', 'invertTheme'].find(k => props[k] !== state[k])) {
+      return getStateFromProps(props);
+    }
+    return null;
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !!Object.keys(nextProps).find(k =>
+      k === 'keyPath'
+        ? nextProps[k].join('/') !== this.props[k].join('/')
+        : nextProps[k] !== this.props[k]
+    );
+  }
+
   render() {
     const {
       data: value,
       keyPath,
       postprocessValue,
       hideRoot,
-      theme,
-      invertTheme,
+      theme, // eslint-disable-line no-unused-vars
+      invertTheme: _, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
-    const styling = createStylingFromTheme(checkLegacyTheming(theme, rest), invertTheme);
+    const { styling } = this.state;
 
     return (
       <View {...styling('tree')}>
         <JSONNode
-          hideRoot={hideRoot}
+          {...{ postprocessValue, hideRoot, styling, ...rest }}
           keyPath={hideRoot ? [] : keyPath}
-          postprocessValue={postprocessValue}
-          styling={styling}
           value={postprocessValue(value)}
-          {...rest}
         />
       </View>
     );