andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Retag snippets

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-21 14:30:25 +03:00
parent bdd03cedfe
commit 9de7519520
5 changed files with 139 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
README.md
View File

@ -81,16 +81,7 @@ import ReactDOM from 'react-dom';
</details> </details>
### Object ### Utility
<details>
<summary>View contents</summary>
* [`TreeView`](#treeview-)
</details>
### String
<details> <details>
<summary>View contents</summary> <summary>View contents</summary>
@ -115,6 +106,7 @@ import ReactDOM from 'react-dom';
* [`Ticker`](#ticker) * [`Ticker`](#ticker)
* [`Toggle`](#toggle) * [`Toggle`](#toggle)
* [`Tooltip`](#tooltip) * [`Tooltip`](#tooltip)
* [`TreeView`](#treeview-)
</details> </details>
@ -962,142 +954,7 @@ ReactDOM.render(
--- ---
## Object ## Utility
### 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 `<div>` to wrap the contents of the component and the `<span>` 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 `<p>` 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 (
<div
style={{ marginLeft: isChildElement ? 16 : 4 + 'px' }}
className={isParentToggled ? 'tree-element' : 'tree-element collapsed'}
>
<span
className={isToggled ? 'toggler' : 'toggler closed'}
onClick={() => setIsToggled(!isToggled)}
/>
{name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}
{Array.isArray(data) ? '[' : '{'}
{!isToggled && '...'}
{Object.keys(data).map((v, i, a) =>
typeof data[v] == 'object' ? (
<TreeView
data={data[v]}
isLast={i === a.length - 1}
name={Array.isArray(data) ? null : v}
isChildElement
isParentToggled={isParentToggled && isToggled}
/>
) : (
<p
style={{ marginLeft: 16 + 'px' }}
className={isToggled ? 'tree-element' : 'tree-element collapsed'}
>
{Array.isArray(data) ? '' : <strong>{v}: </strong>}
{data[v]}
{i === a.length - 1 ? '' : ','}
</p>
)
)}
{Array.isArray(data) ? ']' : '}'}
{!isLast ? ',' : ''}
</div>
);
}
```
<details>
<summary>Examples</summary>
```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(<TreeView data={data} name="data" />, document.getElementById('root'));
```
</details>
<br>[⬆ Back to top](#contents)
---
## String
### AutoLink ![advanced](/advanced.svg) ### AutoLink ![advanced](/advanced.svg)
@ -1985,6 +1842,136 @@ ReactDOM.render(
<br>[⬆ Back to top](#contents) <br>[⬆ 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 `<div>` to wrap the contents of the component and the `<span>` 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 `<p>` 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 (
<div
style={{ marginLeft: isChildElement ? 16 : 4 + 'px' }}
className={isParentToggled ? 'tree-element' : 'tree-element collapsed'}
>
<span
className={isToggled ? 'toggler' : 'toggler closed'}
onClick={() => setIsToggled(!isToggled)}
/>
{name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}
{Array.isArray(data) ? '[' : '{'}
{!isToggled && '...'}
{Object.keys(data).map((v, i, a) =>
typeof data[v] == 'object' ? (
<TreeView
data={data[v]}
isLast={i === a.length - 1}
name={Array.isArray(data) ? null : v}
isChildElement
isParentToggled={isParentToggled && isToggled}
/>
) : (
<p
style={{ marginLeft: 16 + 'px' }}
className={isToggled ? 'tree-element' : 'tree-element collapsed'}
>
{Array.isArray(data) ? '' : <strong>{v}: </strong>}
{data[v]}
{i === a.length - 1 ? '' : ','}
</p>
)
)}
{Array.isArray(data) ? ']' : '}'}
{!isLast ? ',' : ''}
</div>
);
}
```
<details>
<summary>Examples</summary>
```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(<TreeView data={data} name="data" />, document.getElementById('root'));
```
</details>
<br>[⬆ Back to top](#contents)
--- ---
## Viual ## Viual

3
snippet_data/snippetList.json
View File

@ -24,6 +24,7 @@
"attributes": { "attributes": {
"text": "Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.\n\n- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.\n- Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.\n\n", "text": "Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.\n\n- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.\n- Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.\n\n",
"tags": [ "tags": [
"utility",
"string", "string",
"fragment", "fragment",
"regexp", "regexp",
@ -403,8 +404,8 @@
"attributes": { "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 `<div>` to wrap the contents of the component and the `<span>` 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 `<p>` element with the appropriate style.\n\n", "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 `<div>` to wrap the contents of the component and the `<span>` 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 `<p>` element with the appropriate style.\n\n",
"tags": [ "tags": [
"object",
"visual", "visual",
"object",
"state", "state",
"recursion", "recursion",
"advanced" "advanced"

3
snippet_data/snippets.json
View File

@ -36,6 +36,7 @@
"example": "ReactDOM.render(\r\n <AutoLink text=\"foo bar baz http://example.org bar\" />,\r\n document.getElementById('root')\r\n);" "example": "ReactDOM.render(\r\n <AutoLink text=\"foo bar baz http://example.org bar\" />,\r\n document.getElementById('root')\r\n);"
}, },
"tags": [ "tags": [
"utility",
"string", "string",
"fragment", "fragment",
"regexp", "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(<TreeView data={data} name=\"data\" />, document.getElementById('root'));" "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(<TreeView data={data} name=\"data\" />, document.getElementById('root'));"
}, },
"tags": [ "tags": [
"object",
"visual", "visual",
"object",
"state", "state",
"recursion", "recursion",
"advanced" "advanced"

2
snippets/AutoLink.md
View File

@ -1,6 +1,6 @@
--- ---
title: AutoLink title: AutoLink
tags: string,fragment,regexp,advanced tags: utility,string,fragment,regexp,advanced
--- ---
Renders a string as plaintext, with URLs converted to appropriate `<a>` elements. Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.

2
snippets/TreeView.md
View File

@ -1,6 +1,6 @@
--- ---
title: TreeView 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. Renders a tree view of a JSON object or array with collapsible content.