diff --git a/README.md b/README.md index c8651f01d..6088625b1 100644 --- a/README.md +++ b/README.md @@ -81,16 +81,7 @@ import ReactDOM from 'react-dom'; -### Object - -
-View contents - -* [`TreeView`](#treeview-) - -
- -### String +### Utility
View contents @@ -115,6 +106,7 @@ import ReactDOM from 'react-dom'; * [`Ticker`](#ticker) * [`Toggle`](#toggle) * [`Tooltip`](#tooltip) +* [`TreeView`](#treeview-)
@@ -962,142 +954,7 @@ ReactDOM.render( --- -## Object - - -### TreeView ![advanced](/advanced.svg) - -Renders a tree view of a JSON object or array with collapsible content. - -- Use object destructuring to set defaults for certain props. -- Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded). -- Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially. -- Return a `
` to wrap the contents of the component and the `` element, used to alter the component's `isToggled` state. -- Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`. -- For each child in `data`, determine if it is an object or array and recursively render a sub-tree. -- Otherwise, render a `

` element with the appropriate style. - -```css -.tree-element { - margin: 0; - position: relative; -} - -div.tree-element:before { - content: ''; - position: absolute; - top: 24px; - left: 1px; - height: calc(100% - 48px); - border-left: 1px solid gray; -} - -.toggler { - position: absolute; - top: 10px; - left: 0px; - width: 0; - height: 0; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - border-left: 5px solid gray; - cursor: pointer; -} - -.toggler.closed { - transform: rotate(90deg); -} - -.collapsed { - display: none; -} -``` - -```jsx -function TreeView({ - data, - toggled = true, - name = null, - isLast = true, - isChildElement = false, - isParentToggled = true -}) { - const [isToggled, setIsToggled] = React.useState(toggled); - - return ( -

- setIsToggled(!isToggled)} - /> - {name ?   {name}: :   } - {Array.isArray(data) ? '[' : '{'} - {!isToggled && '...'} - {Object.keys(data).map((v, i, a) => - typeof data[v] == 'object' ? ( - - ) : ( -

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

- ) - )} - {Array.isArray(data) ? ']' : '}'} - {!isLast ? ',' : ''} -
- ); -} -``` - -
-Examples - -```jsx -let data = { - lorem: { - ipsum: 'dolor sit', - amet: { - consectetur: 'adipiscing', - elit: [ - 'duis', - 'vitae', - { - semper: 'orci' - }, - { - est: 'sed ornare' - }, - 'etiam', - ['laoreet', 'tincidunt'], - ['vestibulum', 'ante'] - ] - }, - ipsum: 'primis' - } -}; -ReactDOM.render(, document.getElementById('root')); -``` -
- -
[⬆ Back to top](#contents) - ---- - -## String +## Utility ### AutoLink ![advanced](/advanced.svg) @@ -1985,6 +1842,136 @@ ReactDOM.render(
[⬆ Back to top](#contents) +### TreeView ![advanced](/advanced.svg) + +Renders a tree view of a JSON object or array with collapsible content. + +- Use object destructuring to set defaults for certain props. +- Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded). +- Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially. +- Return a `
` to wrap the contents of the component and the `` element, used to alter the component's `isToggled` state. +- Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`. +- For each child in `data`, determine if it is an object or array and recursively render a sub-tree. +- Otherwise, render a `

` element with the appropriate style. + +```css +.tree-element { + margin: 0; + position: relative; +} + +div.tree-element:before { + content: ''; + position: absolute; + top: 24px; + left: 1px; + height: calc(100% - 48px); + border-left: 1px solid gray; +} + +.toggler { + position: absolute; + top: 10px; + left: 0px; + width: 0; + height: 0; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 5px solid gray; + cursor: pointer; +} + +.toggler.closed { + transform: rotate(90deg); +} + +.collapsed { + display: none; +} +``` + +```jsx +function TreeView({ + data, + toggled = true, + name = null, + isLast = true, + isChildElement = false, + isParentToggled = true +}) { + const [isToggled, setIsToggled] = React.useState(toggled); + + return ( +

+ setIsToggled(!isToggled)} + /> + {name ?   {name}: :   } + {Array.isArray(data) ? '[' : '{'} + {!isToggled && '...'} + {Object.keys(data).map((v, i, a) => + typeof data[v] == 'object' ? ( + + ) : ( +

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

+ ) + )} + {Array.isArray(data) ? ']' : '}'} + {!isLast ? ',' : ''} +
+ ); +} +``` + +
+Examples + +```jsx +let data = { + lorem: { + ipsum: 'dolor sit', + amet: { + consectetur: 'adipiscing', + elit: [ + 'duis', + 'vitae', + { + semper: 'orci' + }, + { + est: 'sed ornare' + }, + 'etiam', + ['laoreet', 'tincidunt'], + ['vestibulum', 'ante'] + ] + }, + ipsum: 'primis' + } +}; +ReactDOM.render(, document.getElementById('root')); +``` +
+ +
[⬆ Back to top](#contents) + --- ## Viual diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json index 553ad2723..dd68b5857 100644 --- a/snippet_data/snippetList.json +++ b/snippet_data/snippetList.json @@ -24,6 +24,7 @@ "attributes": { "text": "Renders a string as plaintext, with URLs converted to appropriate `` elements.\n\n- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.\n- Return a `` with matched URLs rendered as `` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.\n\n", "tags": [ + "utility", "string", "fragment", "regexp", @@ -403,8 +404,8 @@ "attributes": { "text": "Renders a tree view of a JSON object or array with collapsible content.\n\n- Use object destructuring to set defaults for certain props.\n- Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\n- Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.\n- Return a `
` to wrap the contents of the component and the `` element, used to alter the component's `isToggled` state.\n- Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`.\n- For each child in `data`, determine if it is an object or array and recursively render a sub-tree.\n- Otherwise, render a `

` element with the appropriate style.\n\n", "tags": [ - "object", "visual", + "object", "state", "recursion", "advanced" diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json index c939364f3..66944dd2a 100644 --- a/snippet_data/snippets.json +++ b/snippet_data/snippets.json @@ -36,6 +36,7 @@ "example": "ReactDOM.render(\r\n ,\r\n document.getElementById('root')\r\n);" }, "tags": [ + "utility", "string", "fragment", "regexp", @@ -553,8 +554,8 @@ "example": "let data = {\r\n lorem: {\r\n ipsum: 'dolor sit',\r\n amet: {\r\n consectetur: 'adipiscing',\r\n elit: [\r\n 'duis',\r\n 'vitae',\r\n {\r\n semper: 'orci'\r\n },\r\n {\r\n est: 'sed ornare'\r\n },\r\n 'etiam',\r\n ['laoreet', 'tincidunt'],\r\n ['vestibulum', 'ante']\r\n ]\r\n },\r\n ipsum: 'primis'\r\n }\r\n};\r\nReactDOM.render(, document.getElementById('root'));" }, "tags": [ - "object", "visual", + "object", "state", "recursion", "advanced" diff --git a/snippets/AutoLink.md b/snippets/AutoLink.md index 8e278b1fd..5fe9958c3 100644 --- a/snippets/AutoLink.md +++ b/snippets/AutoLink.md @@ -1,6 +1,6 @@ --- title: AutoLink -tags: string,fragment,regexp,advanced +tags: utility,string,fragment,regexp,advanced --- Renders a string as plaintext, with URLs converted to appropriate `` elements. diff --git a/snippets/TreeView.md b/snippets/TreeView.md index 2ed505e4d..daaf1548c 100644 --- a/snippets/TreeView.md +++ b/snippets/TreeView.md @@ -1,6 +1,6 @@ --- title: TreeView -tags: object,visual,state,recursion,advanced +tags: visual,object,state,recursion,advanced --- Renders a tree view of a JSON object or array with collapsible content.