self-review

This commit is contained in:
Henry Jameson 2019-06-10 18:57:53 +03:00
parent e536a56250
commit 41eeaf35d9

View file

@ -1,31 +1,65 @@
import Completion from '../../services/completion/completion.js' import Completion from '../../services/completion/completion.js'
import { take } from 'lodash' import { take } from 'lodash'
/**
* EmojiInput - augmented inputs for emoji and autocomplete support in inputs
* without having to give up the comfort of <input/> and <textarea/> elements
*
* Intended usage is:
* <emoji-input v-model="something">
* <input v-model="something"/>
* </emoji-input>
*
* Works only with <input> and <textarea>. Intended to use with only one nested
* input. It will find first input or textarea and work with that, multiple
* nested children not tested. You HAVE TO duplicate v-model for both
* <emoji-input> and <input>/<textarea> otherwise it will not work.
*
* Be prepared for CSS troubles though because it still wraps component in a div
* while TRYING to make it look like nothing happened, but it could break stuff.
*/
const EmojiInput = { const EmojiInput = {
props: [ props: {
'placeholder', suggest: {
'suggest', /**
'value', * suggest: function (input: String) => Suggestion[]
'type', *
'classname' * Function that takes input string which takes string (textAtCaret)
], * and returns an array of Suggestions
*
* Suggestion is an object containing following properties:
* displayText: string. Main display text, what actual suggestion
* represents (user's screen name/emoji shortcode)
* replacementText: string. Text that should replace the textAtCaret
* detailText: string, optional. Subtitle text, providing additional info
* if present (user's nickname)
* imageUrl: string, optional. Image to display alongside with suggestion,
* currently if no image is provided, replacementText will be used (for
* unicode emojis)
*
* TODO: make it asynchronous when adding proper server-provided user
* suggestions
*
* For commonly used suggestors (emoji, users, both) use suggestor.js
*/
required: true,
type: Function
},
value: {
/**
* Used for v-model
*/
required: true,
type: String
}
},
data () { data () {
return { return {
input: undefined, input: undefined,
highlighted: 0, highlighted: 0,
caret: 0, caret: 0,
focused: false, focused: false
popupOptions: {
placement: 'bottom-start',
trigger: 'hover',
// See: https://github.com/RobinCK/vue-popper/issues/63
'delay-on-mouse-over': 9999999,
'delay-on-mouse-out': 9999999,
modifiers: {
arrow: { enabled: true },
offset: { offset: '0, 5px' }
}
}
} }
}, },
computed: { computed: {
@ -172,7 +206,7 @@ const EmojiInput = {
onInput (e) { onInput (e) {
this.$emit('input', e.target.value) this.$emit('input', e.target.value)
}, },
setCaret ({ target: { selectionStart, value } }) { setCaret ({ target: { selectionStart } }) {
this.caret = selectionStart this.caret = selectionStart
}, },
resize () { resize () {