From 58d67c16c6b58a04e6ab04beac9b9fc84c82dcef Mon Sep 17 00:00:00 2001 From: Praveen Bisht Date: Wed, 2 Oct 2019 12:36:11 +0530 Subject: [PATCH 1/7] Create TagInput.md --- snippets/TagInput.md | 115 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 snippets/TagInput.md diff --git a/snippets/TagInput.md b/snippets/TagInput.md new file mode 100644 index 000000000..6f467101d --- /dev/null +++ b/snippets/TagInput.md @@ -0,0 +1,115 @@ +--- +title: Tag Input +tags: visual,input,intermediate +--- + +Renders an input field to add tags. + +- Define a `TagInput` component and use `React.useState()` hook to initialize an empty array of tags. +- Use `Array.prototype.map` on collected nodes to render the list of tags. +- Define `addTab`, which will be executed on pressing `Enter` key. +- `addTab` uses the `setTabs` 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. +- Define `removeTab`, which will executed on clicking the delete icon in the tag. +- Use the `Array.prototyp.filter` in `removeTab` to remove the tag using the `index` of the tag to filter it out from tags array. + +```css +.tag-input { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + min-height: 48px; + width: 480px; + padding: 0 8px; + border: 1px solid rgb(214, 216, 218); + border-radius: 6px; +} + +.tag-input input { + flex: 1; + border: none; + height: 46px; + font-size: 14px; + padding: 4px 0 0 0; + &:focus { + outline: transparent; + } +} + +#tags { + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 8px 0 0 0; +} + +.tag { + width: auto; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + padding: 0 8px; + font-size: 14px; + list-style: none; + border-radius: 6px; + margin: 0 8px 8px 0; + background: #0052cc; +} + +.tag span { + margin-top: 3px; +} + +.tag i { + font-size: 14px; + margin-left: 8px; + color: #0052cc; + border-radius: 50%; + background: #fff; + cursor: pointer; +} +``` + +```jsx +function TagInput(props) { + const [tags, setTags] = React.useState(['NodeJs', 'MongoDB']) + const removeTags = indexToRemove => { + setTags([...tags.filter((_, index) => index !== indexToRemove)]) + } + const addTags = event => { + if (event.target.value !== '') { + setTags([...tags, event.target.value]) + event.target.value = '' + } + } + return ( +
+ + + event.key === 'Enter' ? addTags(event) : null + } + placeholder="Press enter to add tags" + /> +
+ ) +} +``` + +```jsx +ReactDOM.render(, document.getElementById("root")); +``` From 1970fc3448c4512b0a9d6ec9bd23531b4b3bb0b8 Mon Sep 17 00:00:00 2001 From: Praveen Bisht Date: Wed, 2 Oct 2019 12:46:15 +0530 Subject: [PATCH 2/7] Fixed issues acc. to guidelines --- snippets/TagInput.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/snippets/TagInput.md b/snippets/TagInput.md index 6f467101d..adae92acc 100644 --- a/snippets/TagInput.md +++ b/snippets/TagInput.md @@ -72,7 +72,7 @@ Renders an input field to add tags. ``` ```jsx -function TagInput(props) { +function TagInput() { const [tags, setTags] = React.useState(['NodeJs', 'MongoDB']) const removeTags = indexToRemove => { setTags([...tags.filter((_, index) => index !== indexToRemove)]) @@ -84,26 +84,25 @@ function TagInput(props) { } } return ( -
-
    +
    +
      ( -
    • +
    • {tag} removeTags(index)} > - close + x
      • ))}
    event.key === 'Enter' ? addTags(event) : null } - placeholder="Press enter to add tags" + placeholder='Press enter to add tags' />
    ) @@ -111,5 +110,5 @@ function TagInput(props) { ``` ```jsx -ReactDOM.render(, document.getElementById("root")); +ReactDOM.render(, document.getElementById('root'); ``` From c105ff124790b35f2da60c45c4f518c9d35246a7 Mon Sep 17 00:00:00 2001 From: Praveen Bisht Date: Wed, 2 Oct 2019 12:49:15 +0530 Subject: [PATCH 3/7] Updated: Delete icon styling --- snippets/TagInput.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/snippets/TagInput.md b/snippets/TagInput.md index adae92acc..9065a0e0e 100644 --- a/snippets/TagInput.md +++ b/snippets/TagInput.md @@ -62,6 +62,10 @@ Renders an input field to add tags. } .tag i { + width: 16px; + height: 16px; + line-height: 16px; + text-align: center; font-size: 14px; margin-left: 8px; color: #0052cc; From e3fee26203d09290ac576f265a7ec8255cf10da1 Mon Sep 17 00:00:00 2001 From: Praveen Bisht Date: Wed, 2 Oct 2019 12:53:34 +0530 Subject: [PATCH 4/7] Fixed: Indentation Issue --- snippets/TagInput.md | 153 ++++++++++++++++++++++--------------------- 1 file changed, 77 insertions(+), 76 deletions(-) diff --git a/snippets/TagInput.md b/snippets/TagInput.md index 9065a0e0e..f3879a56d 100644 --- a/snippets/TagInput.md +++ b/snippets/TagInput.md @@ -14,102 +14,103 @@ Renders an input field to add tags. ```css .tag-input { - display: flex; - align-items: flex-start; - flex-wrap: wrap; - min-height: 48px; - width: 480px; - padding: 0 8px; - border: 1px solid rgb(214, 216, 218); - border-radius: 6px; + display: flex; + align-items: flex-start; + flex-wrap: wrap; + min-height: 48px; + width: 480px; + padding: 0 8px; + border: 1px solid rgb(214, 216, 218); + border-radius: 6px; } .tag-input input { - flex: 1; - border: none; - height: 46px; - font-size: 14px; - padding: 4px 0 0 0; - &:focus { - outline: transparent; - } + flex: 1; + border: none; + height: 46px; + font-size: 14px; + padding: 4px 0 0; + &:focus { + outline: transparent; + } } #tags { - display: flex; - flex-wrap: wrap; - padding: 0; - margin: 8px 0 0 0; + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 8px 0 0; } .tag { - width: auto; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - color: #fff; - padding: 0 8px; - font-size: 14px; - list-style: none; - border-radius: 6px; - margin: 0 8px 8px 0; - background: #0052cc; + width: auto; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + padding: 0 8px; + font-size: 14px; + list-style: none; + border-radius: 6px; + margin: 0 8px 8px 0; + background: #0052cc; } .tag span { - margin-top: 3px; + margin-top: 3px; } .tag i { - width: 16px; - height: 16px; - line-height: 16px; - text-align: center; - font-size: 14px; - margin-left: 8px; - color: #0052cc; - border-radius: 50%; - background: #fff; - cursor: pointer; + width: 16px; + height: 16px; + line-height: 16px; + text-align: center; + font-size: 14px; + margin-left: 8px; + color: #0052cc; + border-radius: 50%; + background: #fff; + cursor: pointer; } + ``` ```jsx function TagInput() { - const [tags, setTags] = React.useState(['NodeJs', 'MongoDB']) - const removeTags = indexToRemove => { - setTags([...tags.filter((_, index) => index !== indexToRemove)]) - } - const addTags = event => { - if (event.target.value !== '') { - setTags([...tags, event.target.value]) - event.target.value = '' - } - } - return ( -
    -
      ( -
    • {tag} - removeTags(index)} - > - x - -
      • - ))} -
    - - event.key === 'Enter' ? addTags(event) : null - } - placeholder='Press enter to add tags' - /> -
    - ) + const [tags, setTags] = React.useState(['NodeJs', 'MongoDB']) + const removeTags = indexToRemove => { + setTags([...tags.filter((_, index) => index !== indexToRemove)]) + } + const addTags = event => { + if (event.target.value !== '') { + setTags([...tags, event.target.value]) + event.target.value = '' + } + } + return ( +
    +
      ( +
    • {tag} + removeTags(index)} + > + x + +
      • + ))} +
    + + event.key === 'Enter' ? addTags(event) : null + } + placeholder='Press enter to add tags' + /> +
    + ) } ``` From b5b0993e889f0d978f5abfcaad5d5450fceb9236 Mon Sep 17 00:00:00 2001 From: Praveen Bisht Date: Wed, 2 Oct 2019 12:56:58 +0530 Subject: [PATCH 5/7] Fixed: Title space breaking netlify build --- snippets/TagInput.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/TagInput.md b/snippets/TagInput.md index f3879a56d..b3dc91a7a 100644 --- a/snippets/TagInput.md +++ b/snippets/TagInput.md @@ -1,5 +1,5 @@ --- -title: Tag Input +title: TagInput tags: visual,input,intermediate --- From 34a0ac18248c8a7f0500d137f1b6c20b84705aa3 Mon Sep 17 00:00:00 2001 From: Praveen Bisht Date: Wed, 2 Oct 2019 15:40:37 +0530 Subject: [PATCH 6/7] Fixed: Formatting Issues & Syntax Errors --- snippets/TagInput.md | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/snippets/TagInput.md b/snippets/TagInput.md index b3dc91a7a..161446b62 100644 --- a/snippets/TagInput.md +++ b/snippets/TagInput.md @@ -5,12 +5,12 @@ tags: visual,input,intermediate Renders an input field to add tags. -- Define a `TagInput` component and use `React.useState()` hook to initialize an empty array of tags. -- Use `Array.prototype.map` on collected nodes to render the list of tags. -- Define `addTab`, which will be executed on pressing `Enter` key. -- `addTab` uses the `setTabs` 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. -- Define `removeTab`, which will executed on clicking the delete icon in the tag. -- Use the `Array.prototyp.filter` in `removeTab` to remove the tag using the `index` of the tag to filter it out from tags array. +- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`. +- Use `Array.prototype.map()` on collected nodes to render the list of tags. +- Define the `addTab` method, which will be executed on pressing the `Enter` key. +- `addTab` 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. +- Define the `removeTab` method, which will be executed on clicking the delete icon in the tag. +- Use `Array.prototype.filter()` in `removeTab` method to remove the tag using the `index` of the tag to filter it out from tags array. ```css .tag-input { @@ -57,11 +57,12 @@ Renders an input field to add tags. background: #0052cc; } -.tag span { +.tag-title { margin-top: 3px; } -.tag i { +.tag-close-icon { + display: block; width: 16px; height: 16px; line-height: 16px; @@ -73,32 +74,31 @@ Renders an input field to add tags. background: #fff; cursor: pointer; } - ``` ```jsx -function TagInput() { - const [tags, setTags] = React.useState(['NodeJs', 'MongoDB']) +function TagInput(props) { + const [tags, setTags] = React.useState(props.tags); const removeTags = indexToRemove => { - setTags([...tags.filter((_, index) => index !== indexToRemove)]) + setTags([...tags.filter((_, index) => index !== indexToRemove)]); } const addTags = event => { if (event.target.value !== '') { - setTags([...tags, event.target.value]) - event.target.value = '' + setTags([...tags, event.target.value]); + event.target.value = ''; } } return ( -
    -
      +
        {tags.map((tag, index) => ( -
      • {tag} - + {tag} + removeTags(index)} > x - +
        • ))}
      @@ -115,5 +115,5 @@ function TagInput() { ``` ```jsx -ReactDOM.render(, document.getElementById('root'); +ReactDOM.render(, document.getElementById('root')); ``` From 7c2121e75b6f9df1f5a68569f93c1b7ad54764db Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sun, 6 Oct 2019 07:36:18 +0300 Subject: [PATCH 7/7] Update TagInput.md --- snippets/TagInput.md | 53 ++++++++++++++++++-------------------------- 1 file changed, 21 insertions(+), 32 deletions(-) diff --git a/snippets/TagInput.md b/snippets/TagInput.md index 161446b62..569695efb 100644 --- a/snippets/TagInput.md +++ b/snippets/TagInput.md @@ -1,29 +1,26 @@ --- title: TagInput -tags: visual,input,intermediate +tags: input,visual,state,intermediate --- -Renders an input field to add tags. +Renders a tag input field. - Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`. - Use `Array.prototype.map()` on collected nodes to render the list of tags. -- Define the `addTab` method, which will be executed on pressing the `Enter` key. -- `addTab` 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. -- Define the `removeTab` method, which will be executed on clicking the delete icon in the tag. -- Use `Array.prototype.filter()` in `removeTab` method to remove the tag using the `index` of the tag to filter it out from tags array. +- Define the `addTags` method, which will be executed on pressing the `Enter` key. +- 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. +- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag. +- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array. ```css .tag-input { display: flex; - align-items: flex-start; flex-wrap: wrap; min-height: 48px; - width: 480px; padding: 0 8px; - border: 1px solid rgb(214, 216, 218); + border: 1px solid #d6d8da; border-radius: 6px; } - .tag-input input { flex: 1; border: none; @@ -31,17 +28,15 @@ Renders an input field to add tags. font-size: 14px; padding: 4px 0 0; &:focus { - outline: transparent; + outline: transparent; } } - #tags { display: flex; flex-wrap: wrap; padding: 0; margin: 8px 0 0; } - .tag { width: auto; height: 32px; @@ -56,11 +51,9 @@ Renders an input field to add tags. margin: 0 8px 8px 0; background: #0052cc; } - .tag-title { margin-top: 3px; } - .tag-close-icon { display: block; width: 16px; @@ -81,36 +74,32 @@ function TagInput(props) { const [tags, setTags] = React.useState(props.tags); const removeTags = indexToRemove => { setTags([...tags.filter((_, index) => index !== indexToRemove)]); - } + }; const addTags = event => { - if (event.target.value !== '') { + if (event.target.value !== "") { setTags([...tags, event.target.value]); - event.target.value = ''; + event.target.value = ""; } - } + }; return ( -
      -
        +
        +
          {tags.map((tag, index) => ( -
        • - {tag} - removeTags(index)} - > +
        • + {tag} + removeTags(index)}> x
          • ))}
        - event.key === 'Enter' ? addTags(event) : null - } - placeholder='Press enter to add tags' + type="text" + onKeyUp={event => (event.key === "Enter" ? addTags(event) : null)} + placeholder="Press enter to add tags" />
        - ) + ); } ```