diff --git a/README.md b/README.md index 9515a25d0..2b71ac8be 100644 --- a/README.md +++ b/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 ( -
- - {this.props.name ?   {this.props.name}: :   } - {Array.isArray(this.props.data) ? '[' : '{'} - {!this.state.toggled && '...'} +
+ + {this.props.name ? ( +   {this.props.name}: + ) : ( +    + )} + {Array.isArray(this.props.data) ? "[" : "{"} + {!this.state.toggled && "..."} {Object.keys(this.props.data).map( (v, i, a) => typeof this.props.data[v] == "object" ? ( - + ) : ( -

- {Array.isArray(this.props.data) ? '' : {v}: } - {this.props.data[v]}{i === a.length - 1 ? '' : ','} -

- ) +

+ {Array.isArray(this.props.data) ? "" : {v}: } + {this.props.data[v]} + {i === a.length - 1 ? "" : ","} +

+ ) )} - {Array.isArray(this.props.data) ? ']' : '}'} - {!this.props.isLast ? ',' : ''} + {Array.isArray(this.props.data) ? "]" : "}"} + {!this.props.isLast ? "," : ""}
- ) + ); } } diff --git a/data/snippet_data.json b/data/snippet_data.json index ff439afa7..1a2e70ca6 100644 --- a/data/snippet_data.json +++ b/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 `
` to wrap the contents of the component and the `` 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 `

` 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

\n \n {this.props.name ?   {this.props.name}: :   }\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 \n ) : (\n

\n {Array.isArray(this.props.data) ? '' : {v}: }\n {this.props.data[v]}{i === a.length - 1 ? '' : ','}\n

\n )\n )}\n {Array.isArray(this.props.data) ? ']' : '}'}\n {!this.props.isLast ? ',' : ''}\n
\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 \n \n {this.props.name ? (\n   {this.props.name}: \n ) : (\n   \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 \n ) : (\n \n {Array.isArray(this.props.data) ? \"\" : {v}: }\n {this.props.data[v]}\n {i === a.length - 1 ? \"\" : \",\"}\n

\n )\n )}\n {Array.isArray(this.props.data) ? \"]\" : \"}\"}\n {!this.props.isLast ? \",\" : \"\"}\n
\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(, document.getElementById(\"root\"));\n```" ], "expertise": 2, diff --git a/snippets/TreeView.md b/snippets/TreeView.md index 9b47810ad..955817b98 100644 --- a/snippets/TreeView.md +++ b/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 ( -
- - {this.props.name ?   {this.props.name}: :   } - {Array.isArray(this.props.data) ? '[' : '{'} - {!this.state.toggled && '...'} +
+ + {this.props.name ? ( +   {this.props.name}: + ) : ( +    + )} + {Array.isArray(this.props.data) ? "[" : "{"} + {!this.state.toggled && "..."} {Object.keys(this.props.data).map( (v, i, a) => typeof this.props.data[v] == "object" ? ( - + ) : ( -

- {Array.isArray(this.props.data) ? '' : {v}: } - {this.props.data[v]}{i === a.length - 1 ? '' : ','} -

- ) +

+ {Array.isArray(this.props.data) ? "" : {v}: } + {this.props.data[v]} + {i === a.length - 1 ? "" : ","} +

+ ) )} - {Array.isArray(this.props.data) ? ']' : '}'} - {!this.props.isLast ? ',' : ''} + {Array.isArray(this.props.data) ? "]" : "}"} + {!this.props.isLast ? "," : ""}
- ) + ); } }