Tag suggest

lib/components/ModeSelect.js

@@ -18,7 +18,7 @@ export default class ModeSelect extends React.Component {
     }
   }
 
-  componentDidMount (e) {
+  componentDidMount () {
     this.blurHandler = e => {
       let searchElement = ReactDOM.findDOMNode(this.refs.search)
       if (this.state.mode === EDIT_MODE && document.activeElement !== searchElement) {
@@ -28,7 +28,7 @@ export default class ModeSelect extends React.Component {
     window.addEventListener('click', this.blurHandler)
   }
 
-  componentWillUnmount (e) {
+  componentWillUnmount () {
     window.removeEventListener('click', this.blurHandler)
     let searchElement = ReactDOM.findDOMNode(this.refs.search)
     if (searchElement != null && this.searchKeyDownListener != null) {

lib/components/TagSelect.js

@@ -3,23 +3,54 @@ import ReactDOM from 'react-dom'
 import _ from 'lodash'
 import linkState from 'boost/linkState'
 
+function isNotEmptyString (str) {
+  return _.isString(str) && str.length > 0
+}
+
 export default class TagSelect extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      input: ''
+      input: '',
+      isInputFocused: false
     }
   }
 
-  handleKeyDown (e) {
-    if (e.keyCode !== 13) return false
-    e.preventDefault()
+  componentDidMount () {
+    this.blurInputBlurHandler = e => {
+      if (ReactDOM.findDOMNode(this.refs.tagInput) !== document.activeElement) {
+        this.setState({isInputFocused: false})
+      }
+    }
+    window.addEventListener('click', this.blurInputBlurHandler)
+  }
 
+  componentWillUnmount (e) {
+    window.removeEventListener('click', this.blurInputBlurHandler)
+  }
+
+  // Suggestは必ずInputの下に位置するようにする
+  componentDidUpdate () {
+    if (this.shouldShowSuggest()) {
+      let inputRect = ReactDOM.findDOMNode(this.refs.tagInput).getBoundingClientRect()
+      let suggestElement = ReactDOM.findDOMNode(this.refs.suggestTags)
+      if (suggestElement != null) {
+        suggestElement.style.top = inputRect.top + 20 + 'px'
+        suggestElement.style.left = inputRect.left + 'px'
+      }
+    }
+  }
+
+  shouldShowSuggest () {
+    return this.state.isInputFocused && isNotEmptyString(this.state.input)
+  }
+
+  addTag (tag, clearInput = true) {
     let tags = this.props.tags.slice(0)
-    let newTag = this.state.input.trim()
+    let newTag = tag.trim()
 
-    if (newTag.length === 0) {
+    if (newTag.length === 0 && clearInput) {
       this.setState({input: ''})
       return
     }
@@ -30,13 +61,38 @@ export default class TagSelect extends React.Component {
     if (_.isFunction(this.props.onChange)) {
       this.props.onChange(newTag, tags)
     }
-    this.setState({input: ''})
+    if (clearInput) this.setState({input: ''})
+  }
+
+  handleKeyDown (e) {
+    switch (e.keyCode) {
+      case 8:
+        {
+          if (this.state.input.length > 0) break
+          e.preventDefault()
+
+          let tags = this.props.tags.slice(0)
+          tags.pop()
+
+          this.props.onChange(null, tags)
+        }
+        break
+      case 13:
+        {
+          e.preventDefault()
+          this.addTag(this.state.input)
+        }
+    }
   }
 
   handleThisClick (e) {
     ReactDOM.findDOMNode(this.refs.tagInput).focus()
   }
 
+  handleInputFocus (e) {
+    this.setState({isInputFocused: true})
+  }
+
   handleItemRemoveButton (tag) {
     return e => {
       e.stopPropagation()
@@ -50,8 +106,16 @@ export default class TagSelect extends React.Component {
     }
   }
 
+  handleSuggestClick (tag) {
+    return e => {
+      this.addTag(tag)
+    }
+  }
+
   render () {
-    var tagElements = _.isArray(this.props.tags)
+    let { tags, suggestTags } = this.props
+
+    let tagElements = _.isArray(tags)
       ? this.props.tags.map(tag => (
         <span key={tag} className='tagItem'>
           <button onClick={e => this.handleItemRemoveButton(tag)(e)} className='tagRemoveBtn'><i className='fa fa-fw fa-times'/></button>
@@ -59,16 +123,37 @@ export default class TagSelect extends React.Component {
         </span>))
       : null
 
+    let suggestElements = this.shouldShowSuggest() ? suggestTags
+        .filter(tag => {
+          return tag.match(this.state.input)
+        })
+        .map(tag => {
+          return <button onClick={e => this.handleSuggestClick(tag)(e)} key={tag}>{tag}</button>
+        })
+      : null
+
     return (
       <div className='TagSelect' onClick={e => this.handleThisClick(e)}>
-        {tagElements}
-        <input
-          type='text'
-          onKeyDown={e => this.handleKeyDown(e)}
-          ref='tagInput'
-          valueLink={this.linkState('input')}
-          placeholder='Click here to add tags'
-          className='tagInput'/>
+        <div className='tags'>
+          {tagElements}
+          <input
+            type='text'
+            onKeyDown={e => this.handleKeyDown(e)}
+            ref='tagInput'
+            valueLink={this.linkState('input')}
+            placeholder='Click here to add tags'
+            className='tagInput'
+            onFocus={e => this.handleInputFocus(e)}
+          />
+        </div>
+        {suggestElements != null && suggestElements.length > 0
+          ? (
+            <div ref='suggestTags' className='suggestTags'>
+              {suggestElements}
+            </div>
+          )
+          : null
+        }
       </div>
     )
   }
@@ -76,7 +161,8 @@ export default class TagSelect extends React.Component {
 
 TagSelect.propTypes = {
   tags: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  suggestTags: PropTypes.array
 }
 
 TagSelect.prototype.linkState = linkState