modify: add button for tag component

browser/main/Detail/TagSelect.js

@@ -8,7 +8,8 @@ class TagSelect extends React.Component {
     super(props)
 
     this.state = {
-      newTag: ''
+      newTag: '',
+      inputReady: false,
     }
   }
 
@@ -76,6 +77,7 @@ class TagSelect extends React.Component {
       newTag: ''
     }, () => {
       this.value = value
+      this.setState({ inputReady: false })
       this.props.onChange()
     })
   }
@@ -98,6 +100,12 @@ class TagSelect extends React.Component {
     }
   }
 
+  handleNewTagInputReady (e) {
+    this.setState({
+      inputReady: true,
+    })
+  }
+
   render () {
     let { value, className } = this.props
 
@@ -126,6 +134,9 @@ class TagSelect extends React.Component {
         styleName='root'
       >
         {tagList}
+        {(() => {
+          if (this.state.inputReady) {
+            return (
               <input styleName='newTag'
                 ref='newTag'
                 value={this.state.newTag}
@@ -133,7 +144,17 @@ class TagSelect extends React.Component {
                 onChange={(e) => this.handleNewTagInputChange(e)}
                 onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
               />
+            )
+          }
 
+          return (
+            <button styleName='add-tag-button'
+              onClick={(e) => this.handleNewTagInputReady(e)}
+            >
+              <i className='fa fa-plus' />
+            </button>
+          )
+        })()}
       </div>
     )
   }