Merge pull request #52 from xsnippet/tag-input

 Use some sort of multiple select component for Tag input

Author: ikalnytskyi

package-lock.json

@@ -37,6 +37,7 @@
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
+    "react-tagging-input": "^2.1.2",
     "redux": "^3.7.2",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.2.0"

package.json

@@ -1,11 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Controlled as CodeMirror } from 'react-codemirror2';
+import Tags from 'react-tagging-input';
 
 import 'codemirror/lib/codemirror.css';
 
 import Title from './common/Title';
-import Input from './common/Input';
 import ListBoxWithSearch from './ListBoxWithSearch';
 import * as actions from '../actions';
 
@@ -20,28 +20,35 @@ class NewSnippet extends React.Component {
       tags: [],
       syntax: '', // eslint-disable-line react/no-unused-state
     };
+    this.onKeyPress = (e) => {
+      if (e.which === 13) { e.preventDefault(); }
+    };
     this.postSnippet = this.postSnippet.bind(this);
     this.onSyntaxClick = this.onSyntaxClick.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
+    this.onTagAdded = this.onTagAdded.bind(this);
+    this.onTagRemoved = this.onTagRemoved.bind(this);
   }
 
   componentDidMount() {
     const { dispatch } = this.props;
-
     dispatch(actions.fetchSyntaxes);
   }
 
+  onTagAdded(tag) {
+    this.setState({ tags: [...this.state.tags, tag] });
+  }
+
+  onTagRemoved(tag) {
+    this.setState({ tags: this.state.tags.filter(item => item !== tag) });
+  }
+
   onSyntaxClick(syntax) {
     this.setState({ syntax }); // eslint-disable-line react/no-unused-state
   }
 
   onInputChange(e) {
-    const { name } = e.target;
-    let { value } = e.target;
-
-    if (name === 'tags') {
-      value = value.split(',').map(item => item.trim());
-    }
+    const { name, value } = e.target;
 
     this.setState({ [name]: value });
   }
@@ -56,20 +63,28 @@ class NewSnippet extends React.Component {
     return (
       [
         <Title title="New snippet" key="New Snippet Title" />,
-        <form className="new-snippet" key="New Snippet" onSubmit={this.postSnippet}>
+        <form
+          className="new-snippet"
+          key="New Snippet"
+          onKeyPress={this.onKeyPress}
+          onSubmit={this.postSnippet}
+          role="presentation"
+        >
           <div className="new-snippet-code-wrapper">
             <div className="new-snippet-code-header">
-              <Input
+              <input
+                className="input"
                 placeholder="Title"
                 name="title"
-                onChangeHandler={this.onInputChange}
+                type="text"
                 value={this.state.title}
+                onChange={this.onInputChange}
               />
-              <Input
-                placeholder="Tags (separate tags by comma)"
-                name="tags"
-                onChangeHandler={this.onInputChange}
-                value={this.state.tags.toString()}
+              <Tags
+                tags={this.state.tags}
+                placeholder="Tags"
+                onAdded={this.onTagAdded}
+                onRemoved={this.onTagRemoved}
               />
             </div>
             <div className="new-snippet-code">

src/components/NewSnippet.jsx

@@ -6,7 +6,6 @@ import codemirror from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 
 import Title from './common/Title';
-import Input from './common/Input';
 import Spinner from './common/Spinner';
 import * as actions from '../actions';
 import { downloadSnippet } from '../helpers';
@@ -70,7 +69,11 @@ class Snippet extends React.Component {
               In order to embed this content into your website or blog,
               simply copy and paste code provided below:
             </p>
-            <Input value={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`} />
+            <input
+              className="input"
+              type="text"
+              defaultValue={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`}
+            />
           </div>
           <div className="snippet-code">
             <CodeMirror

src/components/Snippet.jsx

@@ -1,5 +1,6 @@
 @import './common/variables.styl'
 @import './common/overwrite.styl'
+@import './common/mixins.styl'
 
 lang-bar-width = 230px
 
@@ -17,6 +18,7 @@ lang-bar-width = 230px
       flex-flow: row nowrap
       height: offset
       min-height: offset
+      align-items: flex-end
 
   &-code
     flex: 1
@@ -29,6 +31,7 @@ lang-bar-width = 230px
     &-header
       background-color: snippet-header-light
       .input
+        basic-input()
         width: 47%
       & > input
         margin-right: 5%
@@ -65,7 +68,7 @@ lang-bar-width = 230px
     &-header
       background-color: snippet-header-normal
       .input
-        width: 100%
+        basic-input()
     &-list
       height: 100%
       &-wrapper

src/components/common/Input.jsx

@@ -1,4 +1,5 @@
 @import './common/variables.styl'
+@import './common/mixins.styl'
 
 .snippet
   display: flex
@@ -52,6 +53,7 @@
       font-size: 14px
       padding-bottom: 10px
     & input
+      basic-input()
       color: text-dark
       background-color: snippet-content-light
       padding: 4px 9px

src/styles/NewSnippet.styl

@@ -0,0 +1,16 @@
+@import './common/variables.styl'
+
+basic-input()
+  width: 100%
+  background-color: transparent
+  border: none
+  border-bottom: 1px solid rgba(text-light, .4)
+  outline: none
+  color: text-light
+  font-size: 15px
+  font-family: font-quicksand
+  letter-spacing: -.3px
+  &::placeholder
+    color: rgba(text-light, .6)
+  &:focus
+    border-bottom: 1px solid text-light

src/styles/Snippet.styl

@@ -1,4 +1,5 @@
 @import './common/variables.styl'
+@import './common/mixins.styl'
 
 .react-codemirror2,
 .CodeMirror
@@ -26,3 +27,21 @@
 .snippet .CodeMirror-cursor {
   display: none !important
 }
+
+.react-tags
+  display: flex
+  width: 47%
+  input
+    basic-input()
+  .react-tags__container
+    display: flex
+    color: text-light
+    li
+      border: 1px solid rgba(text-light, .4)
+      margin-right: 4px
+      padding: 7px
+      &:hover
+        border-color: text-light
+      a
+        margin-left: 3px
+        cursor: pointer