From ec23f02c5f063794be70d6c6b97f7d83f251ddf9 Mon Sep 17 00:00:00 2001 From: 30secondsofcode <30secondsofcode@gmail.com> Date: Fri, 11 Oct 2019 13:32:49 +0000 Subject: [PATCH] Travis build: 100 --- snippet_data/snippetList.json | 4 ++-- snippet_data/snippets.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json index af3d318b5..8ed04d2c5 100644 --- a/snippet_data/snippetList.json +++ b/snippet_data/snippetList.json @@ -387,7 +387,7 @@ "type": "snippetListing", "title": "TagInput", "attributes": { - "text": "Renders a tag input field.\n\n- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.\n- Use `Array.prototype.map()` on collected nodes to render the list of tags.\n- Define the `addTags` method, which will be executed on pressing the `Enter` key.\n- The `addTags` method uses the `setTabs` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tags` array.\n- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag.\n- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array.\n\n", + "text": "Renders a tag input field.\n\n- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.\n- Use `Array.prototype.map()` on collected nodes to render the list of tags.\n- Define the `addTags` method, which will be executed on pressing the `Enter` key.\n- The `addTags` method uses the `setTags` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tags` array.\n- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag.\n- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array.\n\n", "tags": [ "input", "visual", @@ -396,7 +396,7 @@ ] }, "meta": { - "hash": "d2ebdb53ce2a517e3dc74045ab7dff50f348b10b8eb2cc588b8fc86d8745c141" + "hash": "495a9ac0a38fd1cf16c5873d4533c1084f35cbd2a61c8c3b123e14e85c50c764" } }, { diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json index 5763511a0..69d9f5df6 100644 --- a/snippet_data/snippets.json +++ b/snippet_data/snippets.json @@ -526,7 +526,7 @@ "type": "snippet", "attributes": { "fileName": "TagInput.md", - "text": "Renders a tag input field.\n\n- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.\n- Use `Array.prototype.map()` on collected nodes to render the list of tags.\n- Define the `addTags` method, which will be executed on pressing the `Enter` key.\n- The `addTags` method uses the `setTabs` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tags` array.\n- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag.\n- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array.\n\n", + "text": "Renders a tag input field.\n\n- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.\n- Use `Array.prototype.map()` on collected nodes to render the list of tags.\n- Define the `addTags` method, which will be executed on pressing the `Enter` key.\n- The `addTags` method uses the `setTags` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tags` array.\n- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag.\n- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array.\n\n", "codeBlocks": { "style": ".tag-input {\n display: flex;\n flex-wrap: wrap;\n min-height: 48px;\n padding: 0 8px;\n border: 1px solid #d6d8da;\n border-radius: 6px;\n}\n.tag-input input {\n flex: 1;\n border: none;\n height: 46px;\n font-size: 14px;\n padding: 4px 0 0;\n &:focus {\n outline: transparent;\n }\n}\n#tags {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin: 8px 0 0;\n}\n.tag {\n width: auto;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n padding: 0 8px;\n font-size: 14px;\n list-style: none;\n border-radius: 6px;\n margin: 0 8px 8px 0;\n background: #0052cc;\n}\n.tag-title {\n margin-top: 3px;\n}\n.tag-close-icon {\n display: block;\n width: 16px;\n height: 16px;\n line-height: 16px;\n text-align: center;\n font-size: 14px;\n margin-left: 8px;\n color: #0052cc;\n border-radius: 50%;\n background: #fff;\n cursor: pointer;\n}", "code": "function TagInput(props) {\n const [tags, setTags] = React.useState(props.tags);\n const removeTags = indexToRemove => {\n setTags([...tags.filter((_, index) => index !== indexToRemove)]);\n };\n const addTags = event => {\n if (event.target.value !== \"\") {\n setTags([...tags, event.target.value]);\n event.target.value = \"\";\n }\n };\n return (\n
\n \n (event.key === \"Enter\" ? addTags(event) : null)}\n placeholder=\"Press enter to add tags\"\n />\n
\n );\n}", @@ -540,7 +540,7 @@ ] }, "meta": { - "hash": "d2ebdb53ce2a517e3dc74045ab7dff50f348b10b8eb2cc588b8fc86d8745c141" + "hash": "495a9ac0a38fd1cf16c5873d4533c1084f35cbd2a61c8c3b123e14e85c50c764" } }, {