Build README

README.md

@@ -474,7 +474,7 @@ class TreeView extends React.Component {
     super(props);
     this.state = {
       toggled: props.toggled
-    }
+    };
     this.toggle = this.toggle.bind(this);
   }
 
@@ -484,26 +484,52 @@ class TreeView extends React.Component {
 
   render() {
     return (
-      <div style={{ 'marginLeft': this.props.isChildElement ? 16 : 4 + 'px' }} className={this.props.isParentToggled ? 'tree-element' : 'tree-element collapsed'}>
+      <div
-        <span className={this.state.toggled ? "toggler" : "toggler closed" } onClick={this.toggle}></span>
+        style={{ marginLeft: this.props.isChildElement ? 16 : 4 + "px" }}
-        {this.props.name ? <strong>&nbsp;&nbsp;{this.props.name}: </strong> : <span>&nbsp;&nbsp;</span>}
+        className={
-        {Array.isArray(this.props.data) ? '[' : '{'}
+          this.props.isParentToggled ? "tree-element" : "tree-element collapsed"
-        {!this.state.toggled && '...'}
+        }
+      >
+        <span
+          className={this.state.toggled ? "toggler" : "toggler closed"}
+          onClick={this.toggle}
+        />
+        {this.props.name ? (
+          <strong>&nbsp;&nbsp;{this.props.name}: </strong>
+        ) : (
+          <span>&nbsp;&nbsp;</span>
+        )}
+        {Array.isArray(this.props.data) ? "[" : "{"}
+        {!this.state.toggled && "..."}
         {Object.keys(this.props.data).map(
           (v, i, a) =>
             typeof this.props.data[v] == "object" ? (
-              <TreeView data={this.props.data[v]} isLast={i === a.length - 1} name={Array.isArray(this.props.data) ? null : v} isChildElement isParentToggled={this.props.isParentToggled && this.state.toggled} />
+              <TreeView
+                data={this.props.data[v]}
+                isLast={i === a.length - 1}
+                name={Array.isArray(this.props.data) ? null : v}
+                isChildElement
+                isParentToggled={
+                  this.props.isParentToggled && this.state.toggled
+                }
+              />
             ) : (
-                <p style={{ 'marginLeft': 16 + 'px' }} className={this.state.toggled ? 'tree-element' : 'tree-element collapsed'}>
+              <p
-                  {Array.isArray(this.props.data) ? '' : <strong>{v}: </strong>}
+                style={{ marginLeft: 16 + "px" }}
-                  {this.props.data[v]}{i === a.length - 1 ? '' : ','}
+                className={
+                  this.state.toggled ? "tree-element" : "tree-element collapsed"
+                }
+              >
+                {Array.isArray(this.props.data) ? "" : <strong>{v}: </strong>}
+                {this.props.data[v]}
+                {i === a.length - 1 ? "" : ","}
               </p>
             )
         )}
-        {Array.isArray(this.props.data) ? ']' : '}'}
+        {Array.isArray(this.props.data) ? "]" : "}"}
-        {!this.props.isLast ? ',' : ''}
+        {!this.props.isLast ? "," : ""}
       </div>
-    )
+    );
   }
 }
 

data/snippet_data.json

@@ -323,7 +323,7 @@
     "text": "Renders a tree view of a JSON object or array with collapsible content.\n\nUse `defaultProps` to set the default values of certain props.\nUse the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\nSet the `state` of the component to the value of the `toggled` prop and bind the `toggle` method to the component's context.\nCreate a method, `toggle`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.\nIn the `render()` method, use a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `state`.\nDetermine the appearance of the component, based on `this.props.isParentToggled`, `this.state.toggled`, `this.props.name` and `Array.isArray()` on `this.props.data`. \nFor each child in `this.props.data`, determine if it is an object or array and recursively render a sub-tree.\nOtherwise, render a `<p>` element with the appropriate style.\n\n",
     "codeBlocks": [
       "```css\n.tree-element {\n  margin: 0;\n  position: relative;\n}\n\ndiv.tree-element:before {\n  content: '';\n  position: absolute;\n  top: 24px;\n  left: 1px;\n  height: calc(100% - 48px);\n  border-left: 1px solid gray;\n}\n\n.toggler {\n  position: absolute;\n  top: 10px;\n  left: 0px;\n  width: 0; \n  height: 0; \n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 5px solid gray;\n  cursor: pointer;\n}\n\n.toggler.closed {\n  transform: rotate(90deg);\n}\n\n.collapsed {\n  display: none;\n}\n```",
-      "```jsx\nclass TreeView extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      toggled: props.toggled\n    }\n    this.toggle = this.toggle.bind(this);\n  }\n\n  toggle() {\n    this.setState(state => ({ toggled: !state.toggled }));\n  }\n\n  render() {\n    return (\n      <div style={{ 'marginLeft': this.props.isChildElement ? 16 : 4 + 'px' }} className={this.props.isParentToggled ? 'tree-element' : 'tree-element collapsed'}>\n        <span className={this.state.toggled ? \"toggler\" : \"toggler closed\" } onClick={this.toggle}></span>\n        {this.props.name ? <strong>&nbsp;&nbsp;{this.props.name}: </strong> : <span>&nbsp;&nbsp;</span>}\n        {Array.isArray(this.props.data) ? '[' : '{'}\n        {!this.state.toggled && '...'}\n        {Object.keys(this.props.data).map(\n          (v, i, a) =>\n            typeof this.props.data[v] == \"object\" ? (\n              <TreeView data={this.props.data[v]} isLast={i === a.length - 1} name={Array.isArray(this.props.data) ? null : v} isChildElement isParentToggled={this.props.isParentToggled && this.state.toggled} />\n            ) : (\n                <p style={{ 'marginLeft': 16 + 'px' }} className={this.state.toggled ? 'tree-element' : 'tree-element collapsed'}>\n                  {Array.isArray(this.props.data) ? '' : <strong>{v}: </strong>}\n                  {this.props.data[v]}{i === a.length - 1 ? '' : ','}\n                </p>\n              )\n        )}\n        {Array.isArray(this.props.data) ? ']' : '}'}\n        {!this.props.isLast ? ',' : ''}\n      </div>\n    )\n  }\n}\n\nTreeView.defaultProps = {\n  isLast: true,\n  toggled: true,\n  name: null,\n  isChildElement: false,\n  isParentToggled: true\n}\n```",
+      "```jsx\nclass TreeView extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      toggled: props.toggled\n    };\n    this.toggle = this.toggle.bind(this);\n  }\n\n  toggle() {\n    this.setState(state => ({ toggled: !state.toggled }));\n  }\n\n  render() {\n    return (\n      <div\n        style={{ marginLeft: this.props.isChildElement ? 16 : 4 + \"px\" }}\n        className={\n          this.props.isParentToggled ? \"tree-element\" : \"tree-element collapsed\"\n        }\n      >\n        <span\n          className={this.state.toggled ? \"toggler\" : \"toggler closed\"}\n          onClick={this.toggle}\n        />\n        {this.props.name ? (\n          <strong>&nbsp;&nbsp;{this.props.name}: </strong>\n        ) : (\n          <span>&nbsp;&nbsp;</span>\n        )}\n        {Array.isArray(this.props.data) ? \"[\" : \"{\"}\n        {!this.state.toggled && \"...\"}\n        {Object.keys(this.props.data).map(\n          (v, i, a) =>\n            typeof this.props.data[v] == \"object\" ? (\n              <TreeView\n                data={this.props.data[v]}\n                isLast={i === a.length - 1}\n                name={Array.isArray(this.props.data) ? null : v}\n                isChildElement\n                isParentToggled={\n                  this.props.isParentToggled && this.state.toggled\n                }\n              />\n            ) : (\n              <p\n                style={{ marginLeft: 16 + \"px\" }}\n                className={\n                  this.state.toggled ? \"tree-element\" : \"tree-element collapsed\"\n                }\n              >\n                {Array.isArray(this.props.data) ? \"\" : <strong>{v}: </strong>}\n                {this.props.data[v]}\n                {i === a.length - 1 ? \"\" : \",\"}\n              </p>\n            )\n        )}\n        {Array.isArray(this.props.data) ? \"]\" : \"}\"}\n        {!this.props.isLast ? \",\" : \"\"}\n      </div>\n    );\n  }\n}\n\nTreeView.defaultProps = {\n  isLast: true,\n  toggled: true,\n  name: null,\n  isChildElement: false,\n  isParentToggled: true\n}\n```",
       "```jsx\nlet data = {\n  lorem: {\n    ipsum: \"dolor sit\",\n    amet: {\n      consectetur: \"adipiscing\",\n      elit: [\n        \"duis\",\n        \"vitae\",\n        {\n          semper: \"orci\"\n        },\n        {\n          est: \"sed ornare\"\n        },\n        \"etiam\",\n        [\"laoreet\", \"tincidunt\"],\n        [\"vestibulum\", \"ante\"]\n      ]\n    },\n    ipsum: \"primis\"\n  }\n};\nReactDOM.render(<TreeView data={data} name='data'/>, document.getElementById(\"root\"));\n```"
     ],
     "expertise": 2,

snippets/TreeView.md

@@ -53,7 +53,7 @@ class TreeView extends React.Component {
     super(props);
     this.state = {
       toggled: props.toggled
-    }
+    };
     this.toggle = this.toggle.bind(this);
   }
 
@@ -63,26 +63,52 @@ class TreeView extends React.Component {
 
   render() {
     return (
-      <div style={{ 'marginLeft': this.props.isChildElement ? 16 : 4 + 'px' }} className={this.props.isParentToggled ? 'tree-element' : 'tree-element collapsed'}>
+      <div
-        <span className={this.state.toggled ? "toggler" : "toggler closed" } onClick={this.toggle}></span>
+        style={{ marginLeft: this.props.isChildElement ? 16 : 4 + "px" }}
-        {this.props.name ? <strong>&nbsp;&nbsp;{this.props.name}: </strong> : <span>&nbsp;&nbsp;</span>}
+        className={
-        {Array.isArray(this.props.data) ? '[' : '{'}
+          this.props.isParentToggled ? "tree-element" : "tree-element collapsed"
-        {!this.state.toggled && '...'}
+        }
+      >
+        <span
+          className={this.state.toggled ? "toggler" : "toggler closed"}
+          onClick={this.toggle}
+        />
+        {this.props.name ? (
+          <strong>&nbsp;&nbsp;{this.props.name}: </strong>
+        ) : (
+          <span>&nbsp;&nbsp;</span>
+        )}
+        {Array.isArray(this.props.data) ? "[" : "{"}
+        {!this.state.toggled && "..."}
         {Object.keys(this.props.data).map(
           (v, i, a) =>
             typeof this.props.data[v] == "object" ? (
-              <TreeView data={this.props.data[v]} isLast={i === a.length - 1} name={Array.isArray(this.props.data) ? null : v} isChildElement isParentToggled={this.props.isParentToggled && this.state.toggled} />
+              <TreeView
+                data={this.props.data[v]}
+                isLast={i === a.length - 1}
+                name={Array.isArray(this.props.data) ? null : v}
+                isChildElement
+                isParentToggled={
+                  this.props.isParentToggled && this.state.toggled
+                }
+              />
             ) : (
-                <p style={{ 'marginLeft': 16 + 'px' }} className={this.state.toggled ? 'tree-element' : 'tree-element collapsed'}>
+              <p
-                  {Array.isArray(this.props.data) ? '' : <strong>{v}: </strong>}
+                style={{ marginLeft: 16 + "px" }}
-                  {this.props.data[v]}{i === a.length - 1 ? '' : ','}
+                className={
+                  this.state.toggled ? "tree-element" : "tree-element collapsed"
+                }
+              >
+                {Array.isArray(this.props.data) ? "" : <strong>{v}: </strong>}
+                {this.props.data[v]}
+                {i === a.length - 1 ? "" : ","}
               </p>
             )
         )}
-        {Array.isArray(this.props.data) ? ']' : '}'}
+        {Array.isArray(this.props.data) ? "]" : "}"}
-        {!this.props.isLast ? ',' : ''}
+        {!this.props.isLast ? "," : ""}
       </div>
-    )
+    );
   }
 }