Actually runs error free

Dean177 · Dean177 · commit 68f6d609366f · 2016-08-20T19:32:26.000+01:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": ["react-native"],
+  "plugins": [
+    "babel-plugin-transform-es2015-destructuring",
+    "babel-plugin-transform-object-rest-spread"
+  ]
+}
diff --git a/examples/.babelrc b/examples/.babelrc
@@ -1,7 +1,7 @@
 {
+  "presets": ["react-native"],
   "plugins": [
     "babel-plugin-transform-es2015-destructuring",
     "babel-plugin-transform-object-rest-spread"
-  ],
-  "presets": ["react-native"]
+  ]
 }
diff --git a/examples/app/Examples.js b/examples/app/Examples.js
@@ -12,35 +12,41 @@ const styles = StyleSheet.create({
   },
 });
 
+// const exampleJson = {
+//   array: [1, 2, 3],
+//   emptyArray: [],
+//   bool: true,
+//   date: new Date(),
+//   object: {
+//     foo: {
+//       bar: 'baz',
+//       nested: {
+//         moreNested: {
+//           evenMoreNested: {
+//             veryNested: {
+//               insanelyNested: {
+//                 ridiculouslyDeepValue: 'Hello',
+//                 levels: 9,
+//                 tooMany: true,
+//               },
+//             },
+//           },
+//         },
+//       },
+//     },
+//     baz: undefined,
+//     func: function User() {},
+//   },
+//   emptyObject: {},
+//   immutable: Map({ key: 'value' }), // eslint-disable-line new-cap
+//   hugeArray: Array.from({ length: 100 }).map((_, i) => `item #${i}`),
+//   longString: 'Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor',
+// };
+
 const exampleJson = {
-  array: [1, 2, 3],
-  emptyArray: [],
-  bool: true,
-  date: new Date(),
-  object: {
-    foo: {
-      bar: 'baz',
-      nested: {
-        moreNested: {
-          evenMoreNested: {
-            veryNested: {
-              insanelyNested: {
-                ridiculouslyDeepValue: 'Hello',
-                levels: 9,
-                tooMany: true,
-              },
-            },
-          },
-        },
-      },
-    },
-    baz: undefined,
-    func: function User() {},
-  },
-  emptyObject: {},
-  immutable: Map({ key: 'value' }), // eslint-disable-line new-cap
-  hugeArray: Array.from({ length: 10000 }).map((_, i) => `item #${i}`),
-  longString: 'Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.' // eslint-disable-line max-len
+  key: 'val',
+  secondDey: 2,
+  nestedArray: [1,2,3]
 };
 
 // eslint-disable-next-line
@@ -49,7 +55,6 @@ class Examples extends Component {
     return (
       <View style={styles.container}>
         <Heading>react-native-json-tree</Heading>
-        <Text>Sub Text</Text>
         <JSONTree data={exampleJson} />
       </View>
     );
diff --git a/examples/package.json b/examples/package.json
@@ -1,13 +1,4 @@
 {
-  "name": "examples",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start",
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "web": "webpack-dev-server --port 3000 --config web/webpack.config.dev.js --inline --hot --colors --quiet && open http://localhost:3000"
-  },
   "dependencies": {
     "immutable": "3.8.1",
     "react": "15.2.1",
@@ -18,5 +9,15 @@
     "babel-preset-react-native": "1.9.0",
     "babel-plugin-transform-es2015-destructuring": "6.9.0",
     "babel-plugin-transform-object-rest-spread": "6.8.0"
-  }
+  },
+  "name": "examples",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "postinstall": "find node_modules -type f -name .babelrc | grep -v /react-native/ | xargs rm",
+    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "web": "webpack-dev-server --port 3000 --config web/webpack.config.dev.js --inline --hot --colors --quiet && open http://localhost:3000"
+  },
+  "version": "0.0.1"
 }
diff --git a/src/JSONNestedNode.js b/src/JSONNestedNode.js
@@ -9,7 +9,6 @@ import ItemRange from './ItemRange';
 /**
  * Renders nested values (eg. objects, arrays, lists, etc.)
  */
-
 function renderChildNodes(props, from, to) {
   const {
     nodeType,
@@ -20,6 +19,7 @@ function renderChildNodes(props, from, to) {
     postprocessValue,
     sortObjectKeys,
   } = props;
+
   const childNodes = [];
 
   getCollectionEntries(nodeType, data, sortObjectKeys, collectionLimit, from, to).forEach(entry => {
@@ -92,7 +92,7 @@ export default class JSONNestedNode extends React.Component {
 
     // calculate individual node expansion if necessary
     const expanded = props.shouldExpandNode && !props.isCircular ?
-        props.shouldExpandNode(props.keyPath, props.data, props.level) : false;
+      props.shouldExpandNode(props.keyPath, props.data, props.level) : false;
     this.state = {
       expanded,
       createdChildNodes: false,
@@ -134,6 +134,8 @@ export default class JSONNestedNode extends React.Component {
     );
     const stylingArgs = [keyPath, nodeType, expanded, expandable];
 
+    const onPressItemString = expandable ? this.handlePress : () => {};
+
     return hideRoot ? (
       <View {...styling('rootNode', ...stylingArgs)}>
         <View {...styling('rootNodeChildren', ...stylingArgs)}>
@@ -152,19 +154,21 @@ export default class JSONNestedNode extends React.Component {
         }
         <Text
           {...styling(['label', 'nestedNodeLabel'], ...stylingArgs)}
-          onPress={expandable && this.handlePress}
+          onPress={onPressItemString}
         >
           {labelRenderer(...stylingArgs)}
         </Text>
         <Text
           {...styling('nestedNodeItemString', ...stylingArgs)}
-          onPress={expandable && this.handlePress}
+          onPress={onPressItemString}
         >
           {renderedItemString}
         </Text>
-        <View {...styling('nestedNodeChildren', ...stylingArgs)}>
-          {renderedChildren}
-        </View>
+        {expanded ?
+          <View {...styling('nestedNodeChildren', ...stylingArgs)}>
+            {renderedChildren}
+          </View> :
+          null}
       </View>
     );
   }
diff --git a/src/createStylingFromTheme.js b/src/createStylingFromTheme.js
@@ -35,7 +35,7 @@ const getDefaultTheStyling = theme => {
   return {
     tree: {
       backgroundColor: colors.BACKGROUND_COLOR,
-      border: 0,
+      borderWidth: 0,
       marginBottom: 0.5,
       marginLeft: 0.125,
       marginRight: 0,
@@ -50,19 +50,12 @@ const getDefaultTheStyling = theme => {
         paddingRight: 0,
         marginLeft: 0.875,
         paddingLeft: keyPath.length > 1 ? 2.125 : 1.25,
-        // TODO
-        textIndent: -0.5,
-        // TODO
-        wordBreak: 'break-all',
-        wordWrap: 'break-word',
       },
     }),
 
     label: { color: colors.LABEL_COLOR },
 
     valueLabel: {
-      // TODO
-      // margin: '0 0.5 0 0',
       marginBottom: 0.5,
       marginLeft: 0.125,
       marginRight: 0,
@@ -87,20 +80,15 @@ const getDefaultTheStyling = theme => {
       style: {
         ...style,
         marginLeft: 0,
-        // TODO
-        transition: '150ms',
-        transform: expanded ? 'rotateZ(90deg)' : 'rotateZ(0deg)',
-        transformOrigin: '45% 50%',
+        transform: expanded ? [{ rotate: '90deg' }] : [{rotate: '0deg' }],
         position: 'relative',
-        lineHeight: 1.1,
         fontSize: 0.75,
       },
     }),
 
     arrowContainer: ({ style }, arrowStyle) => ({
       style: {
         ...style,
-        display: 'inline-block',
         paddingRight: 0.5,
         paddingLeft: arrowStyle === 'double' ? 1 : 0,
       },
@@ -129,14 +117,11 @@ const getDefaultTheStyling = theme => {
       margin: 0,
     },
 
-    nestedNodeLabel: ({ style }, keyPath, nodeType, expanded, expandable) => ({
+    nestedNodeLabel: ({ style }) => ({
       style: {
         ...style,
         margin: 0,
         padding: 0,
-        WebkitUserSelect: expandable ? 'inherit' : 'text',
-        MozUserSelect: expandable ? 'inherit' : 'text',
-        cursor: expandable ? 'pointer' : 'default',
       },
     }),
 
@@ -154,21 +139,17 @@ const getDefaultTheStyling = theme => {
       marginRight: '0.3',
     },
 
-    nestedNodeChildren: ({ style }, nodeType, expanded) => ({
+    nestedNodeChildren: ({ style }, nodeType) => ({
       style: {
         ...style,
         padding: 0,
         margin: 0,
-        listStyle: 'none',
-        display: expanded ? 'block' : 'none',
       },
     }),
 
     rootNodeChildren: {
       padding: 0,
       margin: 0,
-      // TODO
-      listStyle: 'none',
     },
   };
 };
diff --git a/src/index.js b/src/index.js
@@ -15,22 +15,20 @@ function checkLegacyTheming(theme, props) {
     getValueStyle: 'valueText',
   };
 
-  const deprecatedStylingMethods = Object.keys(deprecatedStylingMethodsMap)
+  const deprecatedStylingMethods = Object
+    .keys(deprecatedStylingMethodsMap)
     .filter(name => props[name]);
 
   if (deprecatedStylingMethods.length > 0) {
     if (typeof theme === 'string') {
-      theme = {
-        extend: theme,
-      };
+      theme = { extend: theme };
     } else {
       theme = { ...theme };
     }
 
     deprecatedStylingMethods.forEach(name => {
-      console.error( // eslint-disable-line no-console
-        `Styling method "${name}" is deprecated, use the "theme" property instead`
-      );
+      // eslint-disable-next-line no-console
+      console.error(`Styling method "${name}" is deprecated, use the "theme" property instead`);
 
       theme[deprecatedStylingMethodsMap[name]] = ({ style }, ...args) => ({
         style: {
@@ -49,13 +47,13 @@ class JSONTree extends React.Component {
   static propTypes = {
     data: PropTypes.oneOfType([
       PropTypes.array,
+      PropTypes.bool,
+      PropTypes.number,
       PropTypes.object,
+      PropTypes.string,
     ]).isRequired,
     hideRoot: PropTypes.bool,
-    theme: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-    ]),
+    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     invertTheme: PropTypes.bool,
     keyPath: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
     postprocessValue: PropTypes.func,
@@ -91,10 +89,12 @@ class JSONTree extends React.Component {
     return (
       <View {...styling('tree')}>
         <JSONNode
-          {...{ postprocessValue, hideRoot, styling, ...rest }}
+          hideRoot={hideRoot}
           keyPath={hideRoot ? [] : keyPath}
+          postprocessValue={postprocessValue}
+          styling={styling}
           value={postprocessValue(value)}
-        />
+          {...rest } />
       </View>
     );
   }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
	`2`	`+ "presets": ["react-native"],`
`2`	`3`	`"plugins": [`
`3`	`4`	`"babel-plugin-transform-es2015-destructuring",`
`4`	`5`	`"babel-plugin-transform-object-rest-spread"`
`5`		`- ],`
`6`		`- "presets": ["react-native"]`
	`6`	`+ ]`
`7`	`7`	`}`