Merge pull request #2320 from daiyam/tag-autocomplete

add tag autocomplete

browser/main/Detail/MarkdownNoteDetail.js

@@ -363,6 +363,7 @@ class MarkdownNoteDetail extends React.Component {
         <TagSelect
           ref='tags'
           value={this.state.note.tags}
+          data={data}
           onChange={this.handleUpdateTag.bind(this)}
         />
         <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />

browser/main/Detail/NoteDetailInfo.styl

@@ -13,6 +13,7 @@ $info-margin-under-border = 30px
   display flex
   align-items center
   padding 0 20px
+  z-index 99
 
 .info-left
   padding 0 10px

browser/main/Detail/TagSelect.js

@@ -6,71 +6,33 @@ import _ from 'lodash'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import i18n from 'browser/lib/i18n'
 import ee from 'browser/main/lib/eventEmitter'
+import Autosuggest from 'react-autosuggest'
 
 class TagSelect extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      newTag: ''
+      newTag: '',
+      suggestions: []
     }
-    this.addtagHandler = this.handleAddTag.bind(this)
+
+    this.handleAddTag = this.handleAddTag.bind(this)
+    this.onInputBlur = this.onInputBlur.bind(this)
+    this.onInputChange = this.onInputChange.bind(this)
+    this.onInputKeyDown = this.onInputKeyDown.bind(this)
+    this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this)
+    this.onSuggestionsFetchRequested = this.onSuggestionsFetchRequested.bind(this)
+    this.onSuggestionSelected = this.onSuggestionSelected.bind(this)
   }
 
-  componentDidMount () {
-    this.value = this.props.value
-    ee.on('editor:add-tag', this.addtagHandler)
-  }
-
-  componentDidUpdate () {
-    this.value = this.props.value
-  }
-
-  componentWillUnmount () {
-    ee.off('editor:add-tag', this.addtagHandler)
-  }
-
-  handleAddTag () {
-    this.refs.newTag.focus()
-  }
-
-  handleNewTagInputKeyDown (e) {
-    switch (e.keyCode) {
-      case 9:
-        e.preventDefault()
-        this.submitTag()
-        break
-      case 13:
-        this.submitTag()
-        break
-      case 8:
-        if (this.refs.newTag.value.length === 0) {
-          this.removeLastTag()
-        }
-    }
-  }
-
-  handleNewTagBlur (e) {
-    this.submitTag()
-  }
-
-  removeLastTag () {
-    this.removeTagByCallback((value) => {
-      value.pop()
-    })
-  }
-
-  reset () {
-    this.setState({
-      newTag: ''
-    })
-  }
-
-  submitTag () {
+  addNewTag (newTag) {
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_TAG')
-    let { value } = this.props
-    let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
-    newTag = newTag.charAt(0) === '#' ? newTag.substring(1) : newTag
+
+    newTag = newTag.trim().replace(/ +/g, '_')
+    if (newTag.charAt(0) === '#') {
+      newTag.substring(1)
+    }
 
     if (newTag.length <= 0) {
       this.setState({
@@ -79,6 +41,7 @@ class TagSelect extends React.Component {
       return
     }
 
+    let { value } = this.props
     value = _.isArray(value)
       ? value.slice()
       : []
@@ -93,10 +56,36 @@ class TagSelect extends React.Component {
     })
   }
 
-  handleNewTagInputChange (e) {
-    this.setState({
-      newTag: this.refs.newTag.value
-    })
+  buildSuggestions () {
+    this.suggestions = _.sortBy(this.props.data.tagNoteMap.map(
+      (tag, name) => ({
+        name,
+        nameLC: name.toLowerCase(),
+        size: tag.size
+      })
+    ).filter(
+      tag => tag.size > 0
+    ), ['name'])
+  }
+
+  componentDidMount () {
+    this.value = this.props.value
+
+    this.buildSuggestions()
+
+    ee.on('editor:add-tag', this.handleAddTag)
+  }
+
+  componentDidUpdate () {
+    this.value = this.props.value
+  }
+
+  componentWillUnmount () {
+    ee.off('editor:add-tag', this.handleAddTag)
+  }
+
+  handleAddTag () {
+    this.refs.newTag.input.focus()
   }
 
   handleTagRemoveButtonClick (tag) {
@@ -105,6 +94,60 @@ class TagSelect extends React.Component {
     }, tag)
   }
 
+  onInputBlur (e) {
+    this.submitNewTag()
+  }
+
+  onInputChange (e, { newValue, method }) {
+    this.setState({
+      newTag: newValue
+    })
+  }
+
+  onInputKeyDown (e) {
+    switch (e.keyCode) {
+      case 9:
+        e.preventDefault()
+        this.submitNewTag()
+        break
+      case 13:
+        this.submitNewTag()
+        break
+      case 8:
+        if (this.state.newTag.length === 0) {
+          this.removeLastTag()
+        }
+    }
+  }
+
+  onSuggestionsClearRequested () {
+    this.setState({
+      suggestions: []
+    })
+  }
+
+  onSuggestionsFetchRequested ({ value }) {
+    const valueLC = value.toLowerCase()
+    const suggestions = _.filter(
+      this.suggestions,
+      tag => !_.includes(this.value, tag.name) && tag.nameLC.indexOf(valueLC) !== -1
+    )
+
+    this.setState({
+      suggestions
+    })
+  }
+
+  onSuggestionSelected (event, { suggestion, suggestionValue }) {
+    this.addNewTag(suggestionValue)
+  }
+
+  removeLastTag () {
+    this.removeTagByCallback((value) => {
+      value.pop()
+    })
+  }
+
   removeTagByCallback (callback, tag = null) {
     let { value } = this.props
 
@@ -118,6 +161,18 @@ class TagSelect extends React.Component {
     this.props.onChange()
   }
 
+  reset () {
+    this.buildSuggestions()
+
+    this.setState({
+      newTag: ''
+    })
+  }
+
+  submitNewTag () {
+    this.addNewTag(this.refs.newTag.input.value)
+  }
+
   render () {
     const { value, className } = this.props
 
@@ -138,6 +193,8 @@ class TagSelect extends React.Component {
       })
       : []
 
+    const { newTag, suggestions } = this.state
+
     return (
       <div className={_.isString(className)
           ? 'TagSelect ' + className
@@ -146,13 +203,25 @@ class TagSelect extends React.Component {
         styleName='root'
       >
         {tagList}
-        <input styleName='newTag'
+        <Autosuggest
           ref='newTag'
-          value={this.state.newTag}
-          placeholder={i18n.__('Add tag...')}
-          onChange={(e) => this.handleNewTagInputChange(e)}
-          onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
-          onBlur={(e) => this.handleNewTagBlur(e)}
+          suggestions={suggestions}
+          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+          onSuggestionSelected={this.onSuggestionSelected}
+          getSuggestionValue={suggestion => suggestion.name}
+          renderSuggestion={suggestion => (
+            <div>
+              {suggestion.name}
+            </div>
+          )}
+          inputProps={{
+            placeholder: i18n.__('Add tag...'),
+            value: newTag,
+            onChange: this.onInputChange,
+            onKeyDown: this.onInputKeyDown,
+            onBlur: this.onInputBlur
+          }}
         />
       </div>
     )
@@ -163,7 +232,6 @@ TagSelect.propTypes = {
   className: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.func
-
 }
 
 export default CSSModules(TagSelect, styles)

browser/main/Detail/TagSelect.styl

@@ -42,14 +42,6 @@
   color: $ui-text-color
   padding 4px 16px 4px 8px
 
-.newTag
-  box-sizing border-box
-  border none
-  background-color transparent
-  outline none
-  padding 0 4px
-  font-size 13px
-
 body[data-theme="dark"]
   .tag
     background-color alpha($ui-dark-tag-backgroundColor, 60%)
@@ -62,11 +54,6 @@ body[data-theme="dark"]
   .tag-label
     color $ui-dark-text-color
 
-  .newTag
-    border-color none
-    background-color transparent
-    color $ui-dark-text-color
-    
 body[data-theme="solarized-dark"]
   .tag
     background-color $ui-solarized-dark-tag-backgroundColor
@@ -78,11 +65,6 @@ body[data-theme="solarized-dark"]
   .tag-label
     color $ui-solarized-dark-text-color
 
-  .newTag
-    border-color none
-    background-color transparent
-    color $ui-solarized-dark-text-color
-
 body[data-theme="monokai"]
   .tag
     background-color $ui-monokai-button-backgroundColor
@@ -92,9 +74,4 @@ body[data-theme="monokai"]
     background-color transparent
 
   .tag-label
-    color $ui-monokai-text-color
-    
-  .newTag
-    border-color none
-    background-color transparent
-    color $ui-monokai-text-color
+    color $ui-monokai-text-color

browser/main/global.styl

@@ -156,3 +156,5 @@ body[data-theme="monokai"]
 body[data-theme="default"]
   .SideNav ::-webkit-scrollbar-thumb
     background-color rgba(255, 255, 255, 0.3)
+
+@import '../styles/Detail/TagSelect.styl'

browser/styles/Detail/TagSelect.styl

@@ -0,0 +1,109 @@
+.TagSelect
+  .react-autosuggest__input
+    box-sizing border-box
+    border none
+    background-color transparent
+    outline none
+    padding 0 4px
+    font-size 13px
+
+  ul
+    position fixed
+    z-index 999
+    box-sizing border-box
+    list-style none
+    padding 0
+    margin 0
+    
+    border-radius 4px
+    margin .2em 0 0
+    background-color $ui-noteList-backgroundColor
+    border 1px solid rgba(0,0,0,.3)
+    box-shadow .05em .2em .6em rgba(0,0,0,.2)
+    text-shadow none
+    
+    &:empty,
+    &[hidden]
+      display none
+    
+    &:before
+      content ""
+      position absolute
+      top -7px
+      left 14px
+      width 0 height 0
+      padding 6px
+      background-color $ui-noteList-backgroundColor
+      border inherit
+      border-right 0
+      border-bottom 0
+      -webkit-transform rotate(45deg)
+      transform rotate(45deg)
+      
+    li
+      position relative
+      padding 6px 18px 6px 10px
+      cursor pointer
+    
+    li[aria-selected="true"]
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
+body[data-theme="dark"]
+  .TagSelect
+    .react-autosuggest__input
+      color $ui-dark-text-color
+    
+    ul
+      border-color $ui-dark-borderColor
+      background-color $ui-dark-noteList-backgroundColor
+      color $ui-dark-text-color
+      
+      &:before
+        background-color $ui-dark-noteList-backgroundColor
+      
+      li[aria-selected="true"]
+        background-color $ui-dark-button--active-backgroundColor
+        color $ui-dark-text-color
+
+body[data-theme="monokai"]
+  .TagSelect
+    .react-autosuggest__input
+      color $ui-monokai-text-color
+    
+    ul
+      border-color $ui-monokai-borderColor
+      background-color $ui-monokai-noteList-backgroundColor
+      color $ui-monokai-text-color
+      
+      &:before
+        background-color $ui-dark-noteList-backgroundColor
+      
+      li[aria-selected="true"]
+        background-color $ui-monokai-button-backgroundColor
+        color $ui-monokai-text-color
+
+body[data-theme="solarized-dark"]
+  .TagSelect
+    .react-autosuggest__input
+      color $ui-solarized-dark-text-color
+    
+    ul
+      border-color $ui-solarized-dark-borderColor
+      background-color $ui-solarized-dark-noteList-backgroundColor
+      color $ui-solarized-dark-text-color
+      
+      &:before
+        background-color $ui-solarized-dark-noteList-backgroundColor
+      
+      li[aria-selected="true"]
+        background-color $ui-dark-button--active-backgroundColor
+        color $ui-solarized-dark-text-color
+
+body[data-theme="white"]
+  .TagSelect
+    ul
+      background-color $ui-white-noteList-backgroundColor
+      
+      li[aria-selected="true"]
+        background-color $ui-button--active-backgroundColor