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,14 +134,27 @@ class TagSelect extends React.Component {
         styleName='root'
       >
         {tagList}
-        <input styleName='newTag'
-          ref='newTag'
-          value={this.state.newTag}
-          placeholder='Add tag...'
-          onChange={(e) => this.handleNewTagInputChange(e)}
-          onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
-        />
+        {(() => {
+          if (this.state.inputReady) {
+            return (
+              <input styleName='newTag'
+                ref='newTag'
+                value={this.state.newTag}
+                placeholder='Add tag...'
+                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>
     )
   }