beyond-rails 0.0.233 → 0.0.234

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89c9f25010a6deb7c07fd392f5ba12feeaefb1a46fe0d8b72ba48c4bc5b431d4
-  data.tar.gz: eb9ca399dce141a787cbc0848eabdce20062b0cda24877935b3fc91527177c21
+  metadata.gz: bcf9966ac572b5cb235b53411d2d89f3d271d88eec0b49bcba44592ed3d8157a
+  data.tar.gz: 77ecacca81f2b28ae7afe335a8f88f38c999856226b79c51202e93c89d29a9f0
 SHA512:
-  metadata.gz: f016a0df26bf377aa5cbeea5b6ac9696b3a20b2e5817faff4c4193263bcdb4e0c167a93197fa16a08db64e54779bf63de780c729fb4c94a88d681331c3aa660d
-  data.tar.gz: 4bb6585874c2bd701aec8ba3851b85c61b1deba91eaabb3ccc90e1657be7ce51f09dd7093d288d4da26be39c1226bf4a34769cbb47d7184ef6a352bd80c93ac5
+  metadata.gz: bccb21dc7b61956e318b4906638f441db32564ac98cc5711b9cb24d7ac07d0dbe9adcf23b99ecf01696a9d06ffa7dd5919d2c6820ee4f006ec2effbe1298f9e9
+  data.tar.gz: aa6e944f0916c3e968a6d55def21242a386abf30511c71c64dd7386cbfece40662bc5422265e6d7849ff4a37a601a240d71e74c821123ef64c978e8c99460a63

data/src/js/components/TagInput.js

@@ -1,6 +1,7 @@
 import raf from '../utils/raf'
 import supportDom from '../decorators/supportDom'
 import getKey from '../utils/getKey'
+import noop from '../utils/noop'
 
 @supportDom
 export default class TagInput {
@@ -9,7 +10,8 @@ export default class TagInput {
     this.dom = dom
     this.defaultInputWidth = 128
     this.validate = options.validate || (() => ({ isTag: true }))
-    this.change = options.change || (() => {})
+    this.suggest = options.suggest || noop
+    this.change = options.change || noop
     this.isComposing = false
     this.raf = raf
     this.tags = []
@@ -22,12 +24,29 @@ export default class TagInput {
   }
 
   setup() {
+    const { defaultInputWidth } = this
+    const inputDiv = document.createElement('div')
+    inputDiv.className = 'tag-input-box'
+
+    const suggestInput = document.createElement('input')
+    suggestInput.type = 'text'
+    suggestInput.style.width = defaultInputWidth + 'px'
+    suggestInput.className = 'tag-suggest-input'
+
     const input = document.createElement('input')
     input.type = 'text'
-    input.style.width = this.defaultInputWidth + 'px'
+    input.style.width = defaultInputWidth + 'px'
+    input.className = 'tag-main-input'
+
+    inputDiv.appendChild(input)
+    inputDiv.appendChild(suggestInput)
+
     this.input = input
+    this.suggestInput = suggestInput
     this.canvas = document.createElement('canvas')
-    this.dom.append(input)
+    this.inputDiv = inputDiv
+
+    this.dom.append(inputDiv)
   }
 
   getTextWidth(text, font) {
@@ -55,9 +74,9 @@ export default class TagInput {
     }, 500)
   }
 
-  async addTagIfNeeded(value) {
-    const { input } = this
-    const inputValue = input.value
+  async addTagIfNeeded() {
+    const { input, suggestInput, inputDiv } = this
+    const inputValue = suggestInput.value || input.value
     const res = await this.validate(inputValue)
     if (! res.isTag) {
       return this.shake()
@@ -83,8 +102,9 @@ export default class TagInput {
     tag.appendChild(btn)
 
     this.tags.push({ elem: tag, remove: handleBtnClick, res })
-    this.dom.insertBefore(tag, input)
+    this.dom.insertBefore(tag, inputDiv)
     input.value = ''
+    suggestInput.value = ''
 
     this.change(this.tags.slice())
   }
@@ -120,7 +140,7 @@ export default class TagInput {
     this.addEvent(input, 'keydown', async event => {
       const key = getKey(event)
       if ((key === 'enter') && (! this.isComposing)) {
-        await this.addTagIfNeeded(input.value)
+        await this.addTagIfNeeded()
       }
       else if ((key === 'backspace') && (lastValue === '')) {
         this.removeTagIfNeeded()
@@ -129,6 +149,7 @@ export default class TagInput {
     })
 
     this.addEvent(input, 'input', event => {
+      this.suggestInputIfNeeded(input.value)
       this.raf(() => {
         const textWidth = this.getTextWidth(input.value, font)
         const nextWidth = this.getNextInputWidth(textWidth)
@@ -137,8 +158,21 @@ export default class TagInput {
     })
   }
 
+  async suggestInputIfNeeded(value) {
+    const suggestValue = await this.suggest(value)
+    this.raf(() => {
+      if (this.input.value === value) {
+        this.suggestInput.value = (suggestValue || '')
+      }
+    })
+  }
+
   destroy() {
     this.tags.forEach(tag => tag.remove())
-    this.input.remove()
+    this.inputDiv.remove()
+    this.canvas = null
+    this.input = null
+    this.suggestInput = null
+    this.inputDiv = null
   }
 }

data/src/js/utils/noop.js

@@ -0,0 +1,2 @@
+export default function noop() {
+}

data/src/sass/components/_tag-input.scss

@@ -3,10 +3,24 @@
   background-color: #fff;
   padding: .4em .4em 0 .4em;
   min-height: 40px;
-  > input {
-    border: 0;
-    &:focus {
-      outline: none;
+
+  .tag-suggest-input {
+    color: rgba(60, 66, 87, .41);
+  }
+
+  .tag-main-input {
+    position: absolute;
+    background-color: transparent;
+  }
+
+  .tag-input-box {
+    display: inline-block;
+    position: relative;
+    > input {
+      border: 0;
+      &:focus {
+        outline: none;
+      }
     }
   }
   .tag {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: beyond-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.233
+  version: 0.0.234
 platform: ruby
 authors:
 - kmsheng
@@ -199,6 +199,7 @@ files:
 - src/js/utils/isTouchDevice.js
 - src/js/utils/isUndef.js
 - src/js/utils/msToS.js
+- src/js/utils/noop.js
 - src/js/utils/promisify.js
 - src/js/utils/raf.js
 - src/js/utils/unbindAll.js